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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @kalyx/react
 
+## 1.0.0-rc.4
+
+### Patch Changes
+
+- df97687: P1 audit follow-ups for v1.0-rc:
+  - **SSR hydration safety in 4 commit/drilldown grids** — `DatePicker.MonthGrid`, `DatePicker.YearGrid`, `MonthPicker.Grid`, and `YearPicker.Grid` previously called `adapter.today()` directly inside their render bodies, producing a server/client clock-mismatch hydration warning across day boundaries (and intermittently wrong "today" highlights in tz-different SSR setups). Today is now snapshotted via `useState(null)` + post-mount `useEffect`, so the server output and the first client render agree, and the highlight settles on the first effect tick.
+  - **`AmPmToggle` now follows the WAI-ARIA radiogroup pattern** — Arrow / Home / End / Space / Enter move and commit selection between AM and PM, and `tabIndex` is roving (only the checked radio is in the tab order). Previously both buttons were tabbable and arrow keys were ignored.
+  - **`DatePicker.Preset` / `RangePicker.Preset` now use `aria-pressed`** instead of `role="option"` + `aria-selected`. `role="option"` is invalid outside `role="listbox"` / `role="combobox"`, so axe was flagging the previous markup. Active state still appears on `data-active` for CSS targeting.
+  - **`RangePicker.Calendar` no longer advertises `aria-multiselectable="true"`** — a date range is one selection (two endpoints), not a multi-select grid.
+  - **Test stability** — `useRangePicker` `respects disabled rules` test pinned to April 2026 via `defaultValue` so the calendar grid contains the expected weekend day regardless of the system clock (was failing once the clock crossed into May).
+  - **`labels.ts` test coverage** — first unit tests for the default-label exports.
+
+  Behavioral notes for users (none of these are breaking for code that follows the documented `data-*` styling contract):
+  - If you targeted Preset buttons via `[aria-selected="true"]` in CSS, switch to `[aria-pressed="true"]` or `[data-active]`.
+  - If you targeted the range grid via `[aria-multiselectable]`, that attribute is gone; use `[role="grid"]` on the calendar root instead.
+
+- Updated dependencies [df97687]
+  - @kalyx/core@1.0.0-rc.4
+
 ## 1.0.0-rc.3
 
 ### Patch Changes

package/README.md

@@ -1,9 +1,9 @@
 # @kalyx/react
 
-> The headless React DatePicker, finally complete. Zero CSS · SSR-safe · under 12 KB gzip.
+> The headless React DatePicker, finally complete. Zero CSS · SSR-safe · ~12 KB gzip (≤ 13 KB ceiling).
 
 [![npm](https://img.shields.io/npm/v/@kalyx/react?color=5b4fe1)](https://www.npmjs.com/package/@kalyx/react)
-[![Bundle](https://img.shields.io/badge/gzip-11.36KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
+[![Bundle](https://img.shields.io/badge/gzip-12.27KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
 [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)](https://www.typescriptlang.org/)
 [![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/jiji-hoon96/kalyx/blob/main/LICENSE)
 

package/dist/index.cjs

@@ -693,11 +693,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] = react.useState(null);
+  react.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 = react.useCallback(
     (direction) => {
       const newDate = adapter.addYears(viewMonth, direction);
@@ -779,9 +783,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] = react.useState(null);
+  react.useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const decadeStart = currentYear - currentYear % 12;
   const navigateDecade = react.useCallback(
     (direction) => {
@@ -935,8 +943,7 @@ function DatePickerPreset({
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -1428,7 +1435,6 @@ function RangePickerCalendar({
         ref: gridRef,
         role: "grid",
         "aria-label": title,
-        "aria-multiselectable": "true",
         "aria-rowcount": weeks.length + 1,
         "aria-colcount": 7,
         className: classNames?.grid,
@@ -1592,8 +1598,7 @@ function RangePickerPreset({
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -1897,29 +1902,70 @@ function TimePickerMinuteList({ classNames, ...props }) {
 }
 function TimePickerAmPmToggle({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.AmPmToggle");
-  if (ctx.format !== "12h") return null;
-  const { period, hours12 } = core.to12Hour(ctx.currentTime.hours);
+  const amRef = react.useRef(null);
+  const pmRef = react.useRef(null);
   const setPeriod = react.useCallback(
     (newPeriod) => {
       if (ctx.isDisabled || ctx.isReadOnly) return;
+      const { hours12 } = core.to12Hour(ctx.currentTime.hours);
       const newHours24 = core.to24Hour(hours12, newPeriod);
       ctx.setTime({ hours: newHours24 });
     },
-    [hours12, ctx]
+    [ctx]
   );
+  if (ctx.format !== "12h") return null;
+  const { period } = core.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__ */ jsxRuntime.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
       }
     );
@@ -2212,9 +2258,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] = react.useState(null);
+  react.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 = react.useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction));
@@ -2316,7 +2365,11 @@ function YearPickerGrid({ classNames, ...props }) {
       return null;
     }
   }, [value, adapter, displayTimezone]);
-  const todayYear = adapter.getYear(adapter.today(displayTimezone));
+  const [today, setToday] = react.useState(null);
+  react.useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const navigateDecade = react.useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));