Custom commands

index.html

@@ -95,6 +95,9 @@ <h2>date</h2>
     </calendar-date>
 
     <h2>multi</h2>
+    <button commandfor="multi" command="--previous">Previous</button>
+    <button commandfor="multi" command="--next">Next</button>
+    <button commandfor="multi" command="--today">Today</button>
     <calendar-multi
       id="multi"
       months="2"
@@ -161,6 +164,23 @@ <h2>multi</h2>
           date.focusedDate = toIso(d);
         });
       }
+
+      // polyfill for non-chrome browsers
+      if (!window.CommandEvent) {
+        document.addEventListener("click", (e) => {
+          const source = e.target.closest("button[commandfor]");
+
+          if (source) {
+            const command = source.getAttribute("command");
+            const commandfor = source.getAttribute("commandfor");
+
+            const event = new Event("command");
+            event.command = command;
+            event.source = source;
+            document.getElementById(commandfor)?.dispatchEvent(event);
+          }
+        });
+      }
     </script>
   </body>
 </html>

package.json

@@ -59,7 +59,7 @@
   },
   "overrides": {
     "playwright": {
-      ".": "1.50.1",
+      ".": "1.52.0",
       "@web/test-runner-playwright": "0.11.0"
     }
   }

src/calendar-base/useCalendarBase.ts

@@ -1,11 +1,4 @@
-import {
-  useState,
-  useEvent,
-  useHost,
-  useEffect,
-  useMemo,
-  useRef,
-} from "atomico";
+import { useState, useEvent, useHost, useEffect, useMemo } from "atomico";
 import { PlainDate, PlainYearMonth } from "../utils/temporal.js";
 import { useDateProp, useDateFormatter } from "../utils/hooks.js";
 import { clamp, toDate, getToday } from "../utils/date.js";
@@ -105,6 +98,10 @@ function usePagination({
   };
 }
 
+interface CommandEvent extends Event {
+  command: string;
+}
+
 export function useCalendarBase({
   months,
   pageBy,
@@ -151,6 +148,20 @@ export function useCalendarBase({
     }
   }
 
+  function onCommand(event: CommandEvent) {
+    switch (event.command) {
+      case "--today":
+        goto(getToday());
+        break;
+      case "--next":
+        next?.();
+        break;
+      case "--previous":
+        previous?.();
+        break;
+    }
+  }
+
   return {
     format: useDateFormatter(formatOptions, locale),
     formatVerbose: useDateFormatter(formatVerboseOptions, locale),
@@ -168,5 +179,6 @@ export function useCalendarBase({
     next,
     previous,
     focus,
+    onCommand,
   };
 }

src/calendar-date/calendar-date.test.tsx

@@ -17,6 +17,7 @@ import {
   type MonthInstance,
   sendShiftPress,
   getCalendarVisibleHeading,
+  type CalendarInstance,
 } from "../utils/test.js";
 import { CalendarMonth } from "../calendar-month/calendar-month.js";
 import type { Pagination } from "../calendar-base/useCalendarBase.js";
@@ -37,6 +38,7 @@ type TestProps = {
   locale: string;
   focusedDate: string;
   pageBy: Pagination;
+  id?: string;
 };
 
 function Fixture({ children, ...props }: Partial<TestProps>): VNodeAny {
@@ -867,4 +869,66 @@ describe("CalendarDate", () => {
       );
     });
   });
+
+  describe("custom commands", () => {
+    it("supports a next/previous commands", async () => {
+      const test = await mount(
+        <div>
+          <button command="--previous" commandfor="fixture">
+            Previous
+          </button>
+          <button command="--next" commandfor="fixture">
+            Next
+          </button>
+          <Fixture id="fixture" value="2020-01-01" />
+        </div>
+      );
+
+      const calendar = test.querySelector<CalendarInstance>("calendar-date")!;
+      const prevButton = document.querySelector("[command='--previous']")!;
+      const nextButton = document.querySelector("[command='--next']")!;
+
+      expect(getCalendarHeading(calendar)).to.have.text("January 2020");
+      await click(nextButton);
+      expect(getCalendarHeading(calendar)).to.have.text("February 2020");
+      await click(prevButton);
+      expect(getCalendarHeading(calendar)).to.have.text("January 2020");
+    });
+
+    it("supports a today command", async () => {
+      const test = await mount(
+        <div>
+          <button command="--today" commandfor="fixture">
+            Today
+          </button>
+          <Fixture id="fixture" value="2020-01-01" />
+        </div>
+      );
+
+      const calendar = test.querySelector<CalendarInstance>("calendar-date")!;
+      const month = getMonth(calendar);
+      const todayButton = document.querySelector("[command='--today']")!;
+      const todaysDate = toDate(getToday());
+
+      const heading = getCalendarHeading(calendar);
+      expect(heading).to.have.text("January 2020");
+
+      await click(todayButton);
+
+      expect(heading).to.have.text(
+        todaysDate.toLocaleDateString("en-GB", {
+          month: "long",
+          year: "numeric",
+        })
+      );
+      const button = getDayButton(
+        month,
+        todaysDate.toLocaleDateString("en-GB", {
+          month: "long",
+          day: "numeric",
+        })
+      );
+      expect(button).to.have.attribute("tabindex", "0");
+    });
+  });
 });

src/calendar-date/calendar-date.tsx

@@ -29,7 +29,7 @@ export const CalendarDate = c(
     }
 
     return (
-      <host shadowDom focus={calendar.focus}>
+      <host shadowDom focus={calendar.focus} oncommand={calendar.onCommand}>
         <CalendarBase
           {...props}
           {...calendar}

src/calendar-multi/calendar-multi.tsx

@@ -34,7 +34,7 @@ export const CalendarMulti = c(
     }
 
     return (
-      <host shadowDom focus={calendar.focus}>
+      <host shadowDom focus={calendar.focus} oncommand={calendar.onCommand}>
         <CalendarBase
           {...props}
           {...calendar}

src/calendar-range/calendar-range.tsx

@@ -69,7 +69,7 @@ export const CalendarRange = c(
     const range = tentative ? sort(tentative, hovered ?? tentative) : value;
 
     return (
-      <host shadowDom focus={calendar.focus}>
+      <host shadowDom focus={calendar.focus} oncommand={calendar.onCommand}>
         <CalendarBase
           {...props}
           {...calendar}