@servicetitan/anvil2 1.46.2 → 1.46.4

package/dist/{Calendar-X9qUi6Vx.js → Calendar-BqOvsaby.js}

@@ -9,8 +9,8 @@ import { c as cx } from './index-tZvMCc77.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
 import { u as useSwipe } from './useSwipe-Cp-CJxLU.js';
 import { G as Grid } from './Grid-MGUC698u.js';
-import { S as SelectCard } from './SelectCard-DunNE9R3.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { S as SelectCard } from './SelectCard-Ca07K1FW.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { flushSync } from 'react-dom';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { u as usePrevious } from './usePrevious-Bvq-5auG.js';
@@ -8252,7 +8252,7 @@ function rangeUpdater(value, newDate, setValue, onSelection) {
 
 const CalendarNow = forwardRef(
   (props, ref) => {
-    const { onClick, ...rest } = props;
+    const { onClick, onClickFixed, ...rest } = props;
     const {
       setFocusedDate,
       setSelectedMonth,
@@ -8271,7 +8271,8 @@ const CalendarNow = forwardRef(
     const nToday = DateTime.fromISO(DateTime.now().toISO(), {
       zone: defaultTimeZone
     }).startOf("day");
-    const onClickHandler = () => {
+    const onClickHandler = (e) => {
+      onClickFixed?.(e);
       setFocusedDate(nToday);
       setSelectedMonth(nToday.month);
       setSelectedYear(nToday.year);
@@ -9102,153 +9103,6 @@ const CalendarMonth = forwardRef(
 );
 CalendarMonth.displayName = "CalendarMonth";
 
-const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
-  const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
-  const monthSelectionRef = useRef(null);
-  const combinedRef = useMergeRefs([ref, monthSelectionRef]);
-  const currentDate = useMemo(
-    () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
-    [defaultTimeZone, selectedYear, selectedMonth]
-  );
-  const dates = useMemo(
-    () => Array.from({ length: 12 }, (_, i) => {
-      const date = DateTime.fromObject({
-        year: selectedYear,
-        month: 1
-      }).plus({
-        month: i
-      });
-      const disabled = minDate && date < minDate && !date.hasSame(minDate, "month") || maxDate && date > maxDate && !date.hasSame(maxDate, "month");
-      return {
-        month: date.month,
-        disabled: disabled ?? false
-      };
-    }),
-    [maxDate, minDate, selectedYear]
-  );
-  const classes = cx(styles$1["month-selection"], props.className);
-  const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
-  useEffect(() => {
-    if (minDate || maxDate) {
-      let index = dates.findIndex(({ month }) => month === selectedMonth);
-      while (dates[index].disabled && index < 11) {
-        index++;
-      }
-      setFocusedIndex(index);
-    } else {
-      setFocusedIndex(selectedMonth - 1);
-    }
-  }, [selectedMonth, minDate, maxDate, dates]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      const target = e.target;
-      const cards = monthSelectionRef.current?.querySelectorAll(
-        "input[type='checkbox']"
-      );
-      if (!cards || cards.length === 0) {
-        return;
-      }
-      const cardArray = Array.from(cards);
-      const currentIndex = cardArray.indexOf(target);
-      if (currentIndex === -1) return;
-      const updateFocusedIndex = (index) => {
-        e.preventDefault();
-        cardArray[index].focus();
-        setFocusedIndex(index);
-      };
-      let newIndex;
-      switch (e.key) {
-        case "ArrowLeft":
-          newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
-          while (dates[newIndex].disabled) {
-            newIndex = newIndex > 0 ? newIndex - 1 : 11;
-          }
-          updateFocusedIndex(newIndex);
-          break;
-        case "ArrowRight":
-          newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
-          while (dates[newIndex].disabled) {
-            newIndex = newIndex < 11 ? newIndex + 1 : 0;
-          }
-          updateFocusedIndex(newIndex);
-          break;
-        case "ArrowUp":
-          if (currentIndex < 3) {
-            newIndex = currentIndex + 9;
-          } else {
-            newIndex = currentIndex - 3;
-          }
-          while (dates[newIndex].disabled) {
-            if (newIndex > 2) {
-              newIndex -= 3;
-            } else {
-              newIndex += 9;
-            }
-          }
-          updateFocusedIndex(newIndex);
-          break;
-        case "ArrowDown":
-          if (currentIndex > 8) {
-            newIndex = currentIndex - 9;
-          } else {
-            newIndex = currentIndex + 3;
-          }
-          while (dates[newIndex].disabled) {
-            if (newIndex < 9) {
-              newIndex += 3;
-            } else {
-              newIndex -= 9;
-            }
-          }
-          updateFocusedIndex(newIndex);
-          break;
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          if (!dates[currentIndex].disabled) {
-            onMonthSelection(dates[currentIndex].month);
-          }
-          break;
-      }
-    },
-    [dates, onMonthSelection]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: combinedRef,
-      "data-anv": "calendar-month-selection",
-      className: classes,
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
-        Grid,
-        {
-          templateColumns: "repeat(3, minmax(0, 1fr))",
-          gap: 3,
-          onKeyDown: handleKeyDown,
-          role: "row",
-          children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
-            SelectCard,
-            {
-              id: month.toString(),
-              disabled,
-              onChange: () => onMonthSelection(month),
-              checked: selectedMonth === month && selectedYear === currentDate.year,
-              checkboxProps: {
-                className: styles$1["selection-checkbox"],
-                tabIndex: focusedIndex === index ? 0 : -1
-              },
-              className: styles$1["selection-card"],
-              children: DateTime.fromObject({ month }).toFormat("MMMM")
-            }
-          ) }, month.toString()))
-        }
-      ) })
-    }
-  );
-});
-CalendarMonthSelection.displayName = "CalendarMonthSelection";
-
 function memo(getDeps, fn, opts) {
   let deps = opts.initialDeps ?? [];
   let result;
@@ -10364,6 +10218,154 @@ const YearSelector = forwardRef(
 );
 YearSelector.displayName = "YearSelector";
 
+const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
+  const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
+  const monthSelectionRef = useRef(null);
+  const combinedRef = useMergeRefs([ref, monthSelectionRef]);
+  const currentDate = useMemo(
+    () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
+    [defaultTimeZone, selectedYear, selectedMonth]
+  );
+  const dates = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const date = DateTime.fromObject({
+        year: selectedYear,
+        month: 1
+      }).plus({
+        month: i
+      });
+      const disabled = minDate && date < minDate && !date.hasSame(minDate, "month") || maxDate && date > maxDate && !date.hasSame(maxDate, "month");
+      return {
+        month: date.month,
+        disabled: disabled ?? false
+      };
+    }),
+    [maxDate, minDate, selectedYear]
+  );
+  const classes = cx(styles$1["month-selection"], props.className);
+  const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
+  useEffect(() => {
+    if (minDate || maxDate) {
+      let index = dates.findIndex(({ month }) => month === selectedMonth);
+      while (dates[index].disabled && index < 11) {
+        index++;
+      }
+      setFocusedIndex(index);
+    } else {
+      setFocusedIndex(selectedMonth - 1);
+    }
+  }, [selectedMonth, minDate, maxDate, dates]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const target = e.target;
+      const cards = monthSelectionRef.current?.querySelectorAll(
+        "input[type='checkbox']"
+      );
+      if (!cards || cards.length === 0) {
+        return;
+      }
+      const cardArray = Array.from(cards);
+      const currentIndex = cardArray.indexOf(target);
+      if (currentIndex === -1) return;
+      const updateFocusedIndex = (index) => {
+        e.preventDefault();
+        cardArray[index].focus();
+        setFocusedIndex(index);
+      };
+      let newIndex;
+      switch (e.key) {
+        case "ArrowLeft":
+          newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
+          while (dates[newIndex].disabled) {
+            newIndex = newIndex > 0 ? newIndex - 1 : 11;
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowRight":
+          newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
+          while (dates[newIndex].disabled) {
+            newIndex = newIndex < 11 ? newIndex + 1 : 0;
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowUp":
+          if (currentIndex < 3) {
+            newIndex = currentIndex + 9;
+          } else {
+            newIndex = currentIndex - 3;
+          }
+          while (dates[newIndex].disabled) {
+            if (newIndex > 2) {
+              newIndex -= 3;
+            } else {
+              newIndex += 9;
+            }
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowDown":
+          if (currentIndex > 8) {
+            newIndex = currentIndex - 9;
+          } else {
+            newIndex = currentIndex + 3;
+          }
+          while (dates[newIndex].disabled) {
+            if (newIndex < 9) {
+              newIndex += 3;
+            } else {
+              newIndex -= 9;
+            }
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!dates[currentIndex].disabled) {
+            onMonthSelection(dates[currentIndex].month);
+          }
+          break;
+      }
+    },
+    [dates, onMonthSelection]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: combinedRef,
+      "data-anv": "calendar-month-selection",
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
+        Grid,
+        {
+          templateColumns: "repeat(3, minmax(0, 1fr))",
+          gap: 3,
+          onKeyDown: handleKeyDown,
+          role: "row",
+          children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
+            SelectCard,
+            {
+              id: month.toString(),
+              disabled,
+              onChange: () => onMonthSelection(month),
+              checked: selectedMonth === month && selectedYear === currentDate.year,
+              checkboxProps: {
+                className: styles$1["selection-checkbox"],
+                tabIndex: focusedIndex === index ? 0 : -1
+              },
+              className: styles$1["selection-card"],
+              children: DateTime.fromObject({ month }).toFormat("MMMM")
+            }
+          ) }, month.toString()))
+        }
+      ) })
+    }
+  );
+});
+CalendarMonthSelection.displayName = "CalendarMonthSelection";
+
+const toolbarFocusStates = ["month", "year", "next", "prev", "now"];
 const CalendarElement = forwardRef(
   (props, ref) => {
     const uid = useId();
@@ -10391,18 +10393,26 @@ const CalendarElement = forwardRef(
       range,
       className,
       _disableAutofocus,
+      _disableFocus,
       ...remainingProps
     } = componentProps;
     const calendarRef = useRef(null);
     const combinedRef = useMergeRefs([ref, calendarRef]);
     const lastIValue = useRef(iValue);
-    const buttonsRef = useRef(void 0);
     const yearButtonRef = useRef(null);
     const monthButtonRef = useRef(null);
+    const headerRef = useRef(null);
+    const [toolbarFocus, setToolbarFocus] = useState(toolbarFocusStates[0]);
     const [calendarWidth, setCalendarWidth] = useState(
       void 0
     );
     const [calendarSelectionState, setCalendarSelectionState] = useState("day");
+    const visibleHeaderButtons = useMemo(() => {
+      if (calendarSelectionState !== "day") {
+        return toolbarFocusStates.slice(0, 2);
+      }
+      return toolbarFocusStates;
+    }, [calendarSelectionState]);
     useEffect(() => {
       if (!calendarRef.current || style?.width != null) return;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -10567,41 +10577,45 @@ const CalendarElement = forwardRef(
       unavailableDates,
       unavailable,
       value,
-      startDay
+      startDay,
+      _disableAutofocus
     ]);
-    const updateHeaderButtons = useCallback(() => {
-      buttonsRef.current = calendarRef.current?.querySelectorAll(
-        "[data-calendar-header-button]"
-      );
-    }, []);
-    useEffect(() => {
-      updateHeaderButtons();
-    }, [updateHeaderButtons]);
-    const handleHeaderKeyDown = useCallback((e) => {
-      const target = e.target;
-      if (!buttonsRef.current || buttonsRef.current.length === 0) {
-        return;
-      }
-      const buttonArray = Array.from(buttonsRef.current);
-      const currentIndex = buttonArray.indexOf(target);
-      if (currentIndex === -1) return;
-      let newIndex;
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          newIndex = currentIndex > 0 ? currentIndex - 1 : buttonArray.length - 1;
-          buttonArray[newIndex].focus();
-          break;
-        case "ArrowRight":
-          e.preventDefault();
-          newIndex = currentIndex < buttonArray.length - 1 ? currentIndex + 1 : 0;
-          buttonArray[newIndex].focus();
-          break;
-      }
-    }, []);
+    const handleHeaderKeyDown = useCallback(
+      (e) => {
+        switch (e.key) {
+          case "ArrowLeft":
+            e.preventDefault();
+            setToolbarFocus((previousToolbarFocus) => {
+              const newToolbarFocus = previousToolbarFocus === visibleHeaderButtons[0] ? visibleHeaderButtons[visibleHeaderButtons.length - 1] : visibleHeaderButtons[visibleHeaderButtons.indexOf(previousToolbarFocus) - 1] ?? visibleHeaderButtons[visibleHeaderButtons.length - 1];
+              const button = headerRef.current?.querySelector(
+                `[data-calendar-header-button-name="${newToolbarFocus}"]`
+              );
+              if (button && "focus" in button && typeof button.focus === "function") {
+                button.focus();
+              }
+              return newToolbarFocus;
+            });
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            setToolbarFocus((previousToolbarFocus) => {
+              const newToolbarFocus = previousToolbarFocus === visibleHeaderButtons[visibleHeaderButtons.length - 1] ? visibleHeaderButtons[0] : visibleHeaderButtons[visibleHeaderButtons.indexOf(previousToolbarFocus) + 1] ?? visibleHeaderButtons[0];
+              const button = headerRef.current?.querySelector(
+                `[data-calendar-header-button-name="${newToolbarFocus}"]`
+              );
+              if (button && "focus" in button && typeof button.focus === "function") {
+                button.focus();
+              }
+              return newToolbarFocus;
+            });
+        }
+      },
+      [visibleHeaderButtons]
+    );
     const handleMonthSelection = useCallback(
       (month) => {
         monthButtonRef.current?.focus();
+        setToolbarFocus(toolbarFocusStates[0]);
         setSelectedMonth(month);
         setFocusedDate(
           DateTime.fromObject({
@@ -10612,12 +10626,14 @@ const CalendarElement = forwardRef(
         );
         setCalendarSelectionState("day");
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [focusedDate]
     );
     const handleYearSelection = useCallback(
       (year) => {
         if (year === null) return;
         yearButtonRef.current?.focus();
+        setToolbarFocus(toolbarFocusStates[1]);
         setSelectedYear(year);
         setFocusedDate(
           DateTime.fromObject({
@@ -10628,7 +10644,8 @@ const CalendarElement = forwardRef(
         );
         setCalendarSelectionState("day");
       },
-      [defaultTimeZone, focusedDate?.month]
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [focusedDate?.month]
     );
     return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs(
       "div",
@@ -10643,6 +10660,7 @@ const CalendarElement = forwardRef(
           /* @__PURE__ */ jsx("div", { className: styles$1["header"], children: /* @__PURE__ */ jsxs(
             "span",
             {
+              ref: headerRef,
               "aria-label": "Calendar navigation",
               role: "toolbar",
               onKeyDown: handleHeaderKeyDown,
@@ -10652,29 +10670,62 @@ const CalendarElement = forwardRef(
                   CalendarMonthButton,
                   {
                     ref: monthButtonRef,
+                    tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[0] ? 0 : -1,
                     "data-calendar-header-button": true,
+                    "data-calendar-header-button-name": toolbarFocusStates[0],
                     calendarSelectionState,
-                    onClick: () => setCalendarSelectionState(
-                      (prev) => prev === "month" ? "day" : "month"
-                    )
+                    onClick: () => {
+                      setCalendarSelectionState(
+                        (prev) => prev === "month" ? "day" : "month"
+                      );
+                      setToolbarFocus(toolbarFocusStates[0]);
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   CalendarYearButton,
                   {
                     ref: yearButtonRef,
-                    tabIndex: -1,
+                    tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[1] ? 0 : -1,
                     "data-calendar-header-button": true,
+                    "data-calendar-header-button-name": toolbarFocusStates[1],
                     calendarSelectionState,
-                    onClick: () => setCalendarSelectionState(
-                      (prev) => prev === "year" ? "day" : "year"
-                    )
+                    onClick: () => {
+                      setCalendarSelectionState(
+                        (prev) => prev === "year" ? "day" : "year"
+                      );
+                      setToolbarFocus(toolbarFocusStates[1]);
+                    }
                   }
                 ),
                 calendarSelectionState === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CalendarPrev, { tabIndex: -1, "data-calendar-header-button": true }),
-                  /* @__PURE__ */ jsx(CalendarNext, { tabIndex: -1, "data-calendar-header-button": true }),
-                  /* @__PURE__ */ jsx(CalendarNow, { tabIndex: -1, "data-calendar-header-button": true })
+                  /* @__PURE__ */ jsx(
+                    CalendarPrev,
+                    {
+                      tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[2] ? 0 : -1,
+                      "data-calendar-header-button": true,
+                      "data-calendar-header-button-name": toolbarFocusStates[2],
+                      onClick: () => setToolbarFocus(toolbarFocusStates[2])
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CalendarNext,
+                    {
+                      tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[3] ? 0 : -1,
+                      "data-calendar-header-button": true,
+                      "data-calendar-header-button-name": toolbarFocusStates[3],
+                      onClick: () => setToolbarFocus(toolbarFocusStates[3])
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CalendarNow,
+                    {
+                      tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[4] ? 0 : -1,
+                      "data-calendar-header-button": true,
+                      "data-calendar-header-button-name": toolbarFocusStates[4],
+                      onClickFixed: () => setToolbarFocus(toolbarFocusStates[4])
+                    }
+                  )
                 ] })
               ]
             }
@@ -10781,4 +10832,4 @@ const Calendar = Object.assign(CalendarElement, {
 });
 
 export { Calendar as C, DateTime as D, CalendarNow as a, CalendarYearButton as b, CalendarPrev as c, CalendarNext as d, CalendarMonthButton as e, CalendarMonth as f, isValidDate as i, toDateString as t };
-//# sourceMappingURL=Calendar-X9qUi6Vx.js.map
+//# sourceMappingURL=Calendar-BqOvsaby.js.map