@kalyx/react 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/index.d.cts

@@ -515,6 +515,9 @@ interface TimePickerAmPmToggleProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * TimePicker.AmPmToggle — AM/PM toggle shown only in 12-hour mode.
  * Returns null in 24-hour mode.
+ *
+ * Implements the WAI-ARIA radiogroup pattern: only the checked radio is in the
+ * tab order; ArrowLeft/Right/Up/Down + Home/End move selection between radios.
  */
 declare function TimePickerAmPmToggle({ classNames, ...props }: TimePickerAmPmToggleProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.d.ts

@@ -515,6 +515,9 @@ interface TimePickerAmPmToggleProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * TimePicker.AmPmToggle — AM/PM toggle shown only in 12-hour mode.
  * Returns null in 24-hour mode.
+ *
+ * Implements the WAI-ARIA radiogroup pattern: only the checked radio is in the
+ * tab order; ArrowLeft/Right/Up/Down + Home/End move selection between radios.
  */
 declare function TimePickerAmPmToggle({ classNames, ...props }: TimePickerAmPmToggleProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.js

@@ -692,11 +692,15 @@ function DatePickerMonthGrid({
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.MonthGrid");
-  const { adapter, viewMonth, locale } = ctx;
+  const { adapter, viewMonth, locale, displayTimezone } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const currentMonth = adapter.getMonth(viewMonth);
-  const todayMonth = adapter.getMonth(adapter.today());
-  const todayYear = adapter.getYear(adapter.today());
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayMonth = today !== null ? adapter.getMonth(today) : -1;
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const navigateYear = useCallback(
     (direction) => {
       const newDate = adapter.addYears(viewMonth, direction);
@@ -778,9 +782,13 @@ function DatePickerMonthGrid({
 }
 function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const ctx = useDatePickerContext("DatePicker.YearGrid");
-  const { adapter, viewMonth } = ctx;
+  const { adapter, viewMonth, displayTimezone } = ctx;
   const currentYear = adapter.getYear(viewMonth);
-  const todayYear = adapter.getYear(adapter.today());
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const decadeStart = currentYear - currentYear % 12;
   const navigateDecade = useCallback(
     (direction) => {
@@ -934,8 +942,7 @@ function DatePickerPreset({
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -1427,7 +1434,6 @@ function RangePickerCalendar({
         ref: gridRef,
         role: "grid",
         "aria-label": title,
-        "aria-multiselectable": "true",
         "aria-rowcount": weeks.length + 1,
         "aria-colcount": 7,
         className: classNames?.grid,
@@ -1591,8 +1597,7 @@ function RangePickerPreset({
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -1896,29 +1901,70 @@ function TimePickerMinuteList({ classNames, ...props }) {
 }
 function TimePickerAmPmToggle({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.AmPmToggle");
-  if (ctx.format !== "12h") return null;
-  const { period, hours12 } = to12Hour(ctx.currentTime.hours);
+  const amRef = useRef(null);
+  const pmRef = useRef(null);
   const setPeriod = useCallback(
     (newPeriod) => {
       if (ctx.isDisabled || ctx.isReadOnly) return;
+      const { hours12 } = to12Hour(ctx.currentTime.hours);
       const newHours24 = to24Hour(hours12, newPeriod);
       ctx.setTime({ hours: newHours24 });
     },
-    [hours12, ctx]
+    [ctx]
   );
+  if (ctx.format !== "12h") return null;
+  const { period } = to12Hour(ctx.currentTime.hours);
+  const focusOther = (target) => {
+    (target === "AM" ? amRef : pmRef).current?.focus();
+  };
+  const handleKeyDown = (e, target) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const next = target === "AM" ? "PM" : "AM";
+        setPeriod(next);
+        focusOther(next);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        setPeriod("AM");
+        focusOther("AM");
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        setPeriod("PM");
+        focusOther("PM");
+        break;
+      }
+      case " ":
+      case "Enter": {
+        e.preventDefault();
+        setPeriod(target);
+        break;
+      }
+    }
+  };
   const renderButton = (target) => {
     const isSelected = period === target;
     const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ jsx(
       "button",
       {
+        ref: target === "AM" ? amRef : pmRef,
         type: "button",
         role: "radio",
         "aria-checked": isSelected,
+        tabIndex: isSelected ? 0 : -1,
         "data-selected": isSelected || void 0,
         disabled: ctx.isDisabled,
         className: optionClass,
         onClick: () => setPeriod(target),
+        onKeyDown: (e) => handleKeyDown(e, target),
         children: target
       }
     );
@@ -2211,9 +2257,12 @@ function MonthPickerGrid({ classNames, ...props }) {
       return [null, null];
     }
   }, [value, adapter, displayTimezone]);
-  const today = adapter.today(displayTimezone);
-  const todayYear = adapter.getYear(today);
-  const todayMonth = adapter.getMonth(today);
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
+  const todayMonth = today !== null ? adapter.getMonth(today) : -1;
   const navigateYear = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction));
@@ -2315,7 +2364,11 @@ function YearPickerGrid({ classNames, ...props }) {
       return null;
     }
   }, [value, adapter, displayTimezone]);
-  const todayYear = adapter.getYear(adapter.today(displayTimezone));
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const navigateDecade = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));