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

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @kalyx/react
 
+## 1.0.0-rc.6
+
+### Patch Changes
+
+- abc56ac: Security: pin transitive `fast-uri` to `>=3.1.2` and `@babel/plugin-transform-modules-systemjs` to `>=7.29.4` via `pnpm.overrides`.
+
+  Resolves three Code Scanning alerts on `pnpm-lock.yaml`:
+  - `fast-uri@3.1.0` — [GHSA-v39h-62p7-jpjc](https://osv.dev/GHSA-v39h-62p7-jpjc) (CVE-2026-6322), first patched in `3.1.2`.
+  - `fast-uri@3.1.0` — [GHSA-q3j6-qgpj-74h6](https://osv.dev/GHSA-q3j6-qgpj-74h6) (CVE-2026-6321), first patched in `3.1.1`.
+  - `@babel/plugin-transform-modules-systemjs@7.29.0` — [GHSA-fv7c-fp4j-7gwp](https://osv.dev/GHSA-fv7c-fp4j-7gwp) (CVE-2026-44728), first patched in `7.29.4` on the 7.x line.
+
+  All three packages are transitive build-time dependencies (ajv → fast-uri, Babel preset-env → systemjs plugin); no public API impact.
+
+- Updated dependencies [abc56ac]
+  - @kalyx/core@1.0.0-rc.6
+
+## 1.0.0-rc.5
+
+### Patch Changes
+
+- 9f3cf9b: WAI-ARIA grid keyboard navigation for the four 3×4 picker grids
+  (`DatePicker.MonthGrid`, `DatePicker.YearGrid`, `MonthPicker.Grid`,
+  `YearPicker.Grid`).
+
+  Before, these grids declared `role="grid"` but had no key handler — keyboard
+  users could not select a month or year, in violation of CLAUDE.md §7.
+
+  Now each grid implements:
+  - **Arrow keys** — ±1 column / ±3 rows, clamped to grid bounds.
+  - **Home / End** — first / last cell of the current row.
+  - **PageUp / PageDown** — previous / next year (or decade for year grids).
+  - **Enter / Space** — commit the focused cell (drilldown grids switch view via
+    `onSelect`; commit grids close the popover via `ctx.selectDate`).
+  - **Roving tabIndex** — only the focused cell has `tabIndex=0`; the
+    `data-focused` attribute follows.
+  - **Auto-refocus** — DOM focus moves with `focusedIndex` so PageUp/Down lands
+    the user back on the same column position. Cells use stable index keys so
+    the buttons persist across page nav.
+
+  Component-level integration tests added per CLAUDE.md §7 across `DatePicker`,
+  `RangePicker`, `DateTimePicker`, and `WeekPicker`: leap-year (Feb 29 2024)
+  click commit, `before`/`after` rule click block, `dayOfWeek` rule click block
+  plus visual `aria-disabled`, and keyboard ArrowLeft skip-disabled.
+
+  **Bundle target raised to 14 KB** — full grid keyboard nav (state + handlers
+  - auto-refocus) added ~1.4 KB gzip across the four grids. Measured 12.85 KB
+    ESM / 13.64 KB CJS at this point. README, docs, `scripts/check-bundle-size.js`,
+    PR template, and CI gate updated to ≤14 KB.
+
+  **Internal:** new shared `useGridState` hook in
+  `packages/react/src/components/_shared/grid-keyboard.ts` (not exported from
+  the package public API) consolidates keyboard handling and roving-focus
+  state across all four grids.
+
+- 9b19df4: `MonthPicker.Grid` and `YearPicker.Grid` now respect `before` / `after`
+  disabled rules — months/years that fall entirely outside the allowed range
+  are rendered with the `disabled` HTML attribute, `aria-disabled="true"`, the
+  new `monthDisabled` / `yearDisabled` className slots, and are skipped during
+  keyboard navigation.
+
+  This was deliberately deferred from PR #46 to keep that bundle under 14 KB;
+  it lands now with a 14 → 15 KB ceiling bump.
+
+  Behavioral details:
+  - A month is "fully disabled" only when every day in it is excluded by a
+    `before` or `after` rule. `date` and `dayOfWeek` rules can never disable a
+    whole month, so they remain a per-day concern.
+  - A year follows the same rule against `[Jan 1 00:00:00, Dec 31 23:59:59.999]`.
+  - Click and keyboard `Enter` / `Space` on a disabled cell are no-ops.
+  - Initial focus and post-PageUp/PageDown focus both re-anchor to the first
+    enabled cell when the natural target is itself disabled. (A `disabled`
+    HTML button can't receive DOM focus, so without the re-anchor the user
+    would silently lose keyboard navigation.)
+
+  **Internal:** `useGridState` regains its optional `disabledFlags` parameter
+  plus a focus re-anchor effect; `isRangeFullyDisabled` is reintroduced as an
+  internal helper. Neither is exposed in the package public API.
+
+  **Bundle target:** raised 14 → 15 KB (measured 13.96 KB ESM / 14.21 KB CJS).
+  Same precedent as the 12 → 13 KB and 13 → 14 KB bumps when prior feature
+  work landed. Updated `scripts/check-bundle-size.js`, `pr-check.yml`, READMEs,
+  CLAUDE.md, PR template, and `check-bundle.md`.
+
 ## 1.0.0-rc.4
 
 ### Patch Changes

package/README.md

@@ -1,9 +1,9 @@
 # @kalyx/react
 
-> The headless React DatePicker, finally complete. Zero CSS · SSR-safe · ~12 KB gzip (≤ 13 KB ceiling).
+> The headless React DatePicker, finally complete. Zero CSS · SSR-safe · ~14 KB gzip (≤ 15 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-12.27KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
+[![Bundle](https://img.shields.io/badge/gzip-13.60KB-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

@@ -686,6 +686,86 @@ function DatePickerCalendar({
     /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly, children: announcement })
   ] });
 }
+function isRangeFullyDisabled(start, end, rules, adapter) {
+  for (const rule of rules) {
+    if ("before" in rule && adapter.isBefore(end, rule.before)) return true;
+    if ("after" in rule && adapter.isAfter(start, rule.after)) return true;
+  }
+  return false;
+}
+function useGridState(opts) {
+  const { initialIndex, disabledFlags, onSelect, onPageUp, onPageDown, onEscape } = opts;
+  const gridRef = react.useRef(null);
+  const [focusedIndex, setFocusedIndex] = react.useState(initialIndex);
+  const handleKeyDown = (e) => {
+    let next = null;
+    let step = 1;
+    switch (e.key) {
+      case "ArrowLeft":
+        next = Math.max(0, focusedIndex - 1);
+        step = -1;
+        break;
+      case "ArrowRight":
+        next = Math.min(11, focusedIndex + 1);
+        break;
+      case "ArrowUp":
+        next = Math.max(0, focusedIndex - 3);
+        step = -1;
+        break;
+      case "ArrowDown":
+        next = Math.min(11, focusedIndex + 3);
+        break;
+      case "Home":
+        next = focusedIndex - focusedIndex % 3;
+        step = -1;
+        break;
+      case "End":
+        next = focusedIndex - focusedIndex % 3 + 2;
+        break;
+      case "PageUp":
+        e.preventDefault();
+        onPageUp();
+        return;
+      case "PageDown":
+        e.preventDefault();
+        onPageDown();
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect(focusedIndex);
+        return;
+      case "Escape":
+        onEscape();
+        return;
+      default:
+        return;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    if (disabledFlags) {
+      let attempts = 0;
+      while (next >= 0 && next < 12 && disabledFlags[next] && attempts < 12) {
+        next += step;
+        attempts++;
+      }
+      if (next < 0 || next >= 12 || disabledFlags[next]) return;
+    }
+    if (next !== focusedIndex) setFocusedIndex(next);
+  };
+  react.useEffect(() => {
+    if (!disabledFlags || !disabledFlags[focusedIndex]) return;
+    const firstEnabled = disabledFlags.findIndex((d) => !d);
+    if (firstEnabled !== -1 && firstEnabled !== focusedIndex) {
+      setFocusedIndex(firstEnabled);
+    }
+  }, [disabledFlags, focusedIndex]);
+  react.useEffect(() => {
+    const btn = gridRef.current?.querySelector('[data-focused="true"]');
+    btn?.focus({ preventScroll: true });
+  }, [focusedIndex]);
+  return { gridRef, focusedIndex, handleKeyDown };
+}
 function DatePickerMonthGrid({
   classNames,
   onSelect,
@@ -704,8 +784,7 @@ function DatePickerMonthGrid({
   const todayYear = today !== null ? adapter.getYear(today) : -1;
   const navigateYear = react.useCallback(
     (direction) => {
-      const newDate = adapter.addYears(viewMonth, direction);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction));
     },
     [adapter, viewMonth, ctx]
   );
@@ -718,12 +797,13 @@ function DatePickerMonthGrid({
     },
     [currentYear, ctx, onSelect]
   );
-  const months = Array.from({ length: 12 }, (_, i) => ({
-    index: i,
-    name: core.getMonthName(i, locale),
-    isSelected: i === currentMonth,
-    isCurrent: i === todayMonth && currentYear === todayYear
-  }));
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex: currentMonth,
+    onSelect: handleMonthSelect,
+    onPageUp: () => navigateYear(-1),
+    onPageDown: () => navigateYear(1),
+    onEscape: ctx.close
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -751,30 +831,37 @@ function DatePickerMonthGrid({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: gridRef,
         role: "grid",
         "aria-label": `${currentYear} months`,
         className: classNames?.grid,
         style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: months.map((m) => {
-          const monthClass = [
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 12 }, (_, i) => {
+          const isSelected = i === currentMonth;
+          const isCurrent = i === todayMonth && currentYear === todayYear;
+          const isFocused = i === focusedIndex;
+          const cls = [
             classNames?.month,
-            m.isSelected && classNames?.monthSelected,
-            m.isCurrent && classNames?.monthCurrent
+            isSelected && classNames?.monthSelected,
+            isCurrent && classNames?.monthCurrent
           ].filter(Boolean).join(" ") || void 0;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-selected": m.isSelected || void 0,
-              "aria-current": m.isCurrent ? "date" : void 0,
-              "data-selected": m.isSelected || void 0,
-              "data-current": m.isCurrent || void 0,
-              className: monthClass,
-              onClick: () => handleMonthSelect(m.index),
-              children: m.name
+              tabIndex: isFocused ? 0 : -1,
+              "aria-selected": isSelected || void 0,
+              "aria-current": isCurrent ? "date" : void 0,
+              "data-selected": isSelected || void 0,
+              "data-current": isCurrent || void 0,
+              "data-focused": isFocused || void 0,
+              className: cls,
+              onClick: () => handleMonthSelect(i),
+              children: core.getMonthName(i, locale)
             },
-            m.index
+            i
           );
         })
       }
@@ -793,32 +880,28 @@ function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const decadeStart = currentYear - currentYear % 12;
   const navigateDecade = react.useCallback(
     (direction) => {
-      const newDate = adapter.addYears(viewMonth, direction * 12);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
     },
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = react.useCallback(
-    (year) => {
+    (indexInDecade) => {
+      const year = decadeStart + indexInDecade;
       const currentMonth = adapter.getMonth(viewMonth);
       const target = new Date(Date.UTC(year, currentMonth, 1)).toISOString();
       ctx.setViewMonth(target);
       ctx.setFocusedDate(target);
       onSelect?.();
     },
-    [adapter, viewMonth, ctx, onSelect]
-  );
-  const years = react.useMemo(
-    () => Array.from({ length: 12 }, (_, i) => {
-      const year = decadeStart + i;
-      return {
-        value: year,
-        isSelected: year === currentYear,
-        isCurrent: year === todayYear
-      };
-    }),
-    [decadeStart, currentYear, todayYear]
-  );
+    [adapter, viewMonth, ctx, onSelect, decadeStart]
+  );
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex: currentYear - decadeStart,
+    onSelect: handleYearSelect,
+    onPageUp: () => navigateDecade(-1),
+    onPageDown: () => navigateDecade(1),
+    onEscape: ctx.close
+  });
   const rangeLabel = `${decadeStart}\u2013${decadeStart + 11}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
@@ -847,30 +930,38 @@ function DatePickerYearGrid({ classNames, onSelect, ...props }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: gridRef,
         role: "grid",
         "aria-label": rangeLabel,
         className: classNames?.grid,
         style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: years.map((y) => {
-          const yearClass = [
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 12 }, (_, i) => {
+          const year = decadeStart + i;
+          const isSelected = year === currentYear;
+          const isCurrent = year === todayYear;
+          const isFocused = i === focusedIndex;
+          const cls = [
             classNames?.year,
-            y.isSelected && classNames?.yearSelected,
-            y.isCurrent && classNames?.yearCurrent
+            isSelected && classNames?.yearSelected,
+            isCurrent && classNames?.yearCurrent
           ].filter(Boolean).join(" ") || void 0;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-selected": y.isSelected || void 0,
-              "aria-current": y.isCurrent ? "date" : void 0,
-              "data-selected": y.isSelected || void 0,
-              "data-current": y.isCurrent || void 0,
-              className: yearClass,
-              onClick: () => handleYearSelect(y.value),
-              children: y.value
+              tabIndex: isFocused ? 0 : -1,
+              "aria-selected": isSelected || void 0,
+              "aria-current": isCurrent ? "date" : void 0,
+              "data-selected": isSelected || void 0,
+              "data-current": isCurrent || void 0,
+              "data-focused": isFocused || void 0,
+              className: cls,
+              onClick: () => handleYearSelect(i),
+              children: year
             },
-            y.value
+            i
           );
         })
       }
@@ -2247,7 +2338,7 @@ function MonthPickerRoot(props) {
 }
 function MonthPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("MonthPicker.Grid");
-  const { adapter, viewMonth, locale, value, displayTimezone, labels } = ctx;
+  const { adapter, viewMonth, locale, value, displayTimezone, labels, disabled } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const [valueYear, valueMonthZeroBased] = react.useMemo(() => {
     if (!value) return [null, null];
@@ -2264,6 +2355,13 @@ function MonthPickerGrid({ classNames, ...props }) {
   }, [adapter, displayTimezone]);
   const todayYear = today !== null ? adapter.getYear(today) : -1;
   const todayMonth = today !== null ? adapter.getMonth(today) : -1;
+  const monthDisabledFlags = react.useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const monthStart = new Date(Date.UTC(currentYear, i, 1)).toISOString();
+      return isRangeFullyDisabled(monthStart, adapter.endOfMonth(monthStart), disabled, adapter);
+    }),
+    [currentYear, disabled, adapter]
+  );
   const navigateYear = react.useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction));
@@ -2272,17 +2370,23 @@ function MonthPickerGrid({ classNames, ...props }) {
   );
   const handleMonthSelect = react.useCallback(
     (monthIndex) => {
+      if (monthDisabledFlags[monthIndex]) return;
       const target = new Date(Date.UTC(currentYear, monthIndex, 1)).toISOString();
       ctx.selectDate(target);
     },
-    [currentYear, ctx]
-  );
-  const months = Array.from({ length: 12 }, (_, i) => ({
-    index: i,
-    name: core.getMonthName(i, locale),
-    isSelected: valueYear === currentYear && valueMonthZeroBased === i,
-    isCurrent: todayYear === currentYear && todayMonth === i
-  }));
+    [currentYear, ctx, monthDisabledFlags]
+  );
+  const naturalIndex = valueYear === currentYear && valueMonthZeroBased !== null ? valueMonthZeroBased : adapter.getMonth(viewMonth);
+  const firstEnabled = monthDisabledFlags.findIndex((d) => !d);
+  const initialIndex = monthDisabledFlags[naturalIndex] ? firstEnabled === -1 ? naturalIndex : firstEnabled : naturalIndex;
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex,
+    disabledFlags: monthDisabledFlags,
+    onSelect: handleMonthSelect,
+    onPageUp: () => navigateYear(-1),
+    onPageDown: () => navigateYear(1),
+    onEscape: ctx.close
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2307,37 +2411,57 @@ function MonthPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        role: "row",
-        className: classNames?.gridRow,
-        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: months.slice(rowIndex * 3, rowIndex * 3 + 3).map((m) => {
-          const monthClass = [
-            classNames?.month,
-            m.isSelected && classNames?.monthSelected,
-            m.isCurrent && classNames?.monthCurrent
-          ].filter(Boolean).join(" ") || void 0;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              role: "gridcell",
-              "aria-selected": m.isSelected || void 0,
-              "aria-current": m.isCurrent ? "date" : void 0,
-              "data-selected": m.isSelected || void 0,
-              "data-current": m.isCurrent || void 0,
-              className: monthClass,
-              onClick: () => handleMonthSelect(m.index),
-              children: m.name
-            },
-            m.index
-          );
-        })
-      },
-      rowIndex
-    )) })
+        ref: gridRef,
+        role: "grid",
+        "aria-label": `${currentYear} months`,
+        className: classNames?.grid,
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "row",
+            className: classNames?.gridRow,
+            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+            children: Array.from({ length: 3 }, (_2, col) => {
+              const i = rowIndex * 3 + col;
+              const isSelected = valueYear === currentYear && valueMonthZeroBased === i;
+              const isCurrent = todayYear === currentYear && todayMonth === i;
+              const isFocused = i === focusedIndex;
+              const isDisabled = monthDisabledFlags[i] ?? false;
+              const cls = [
+                classNames?.month,
+                isSelected && classNames?.monthSelected,
+                isCurrent && classNames?.monthCurrent,
+                isDisabled && classNames?.monthDisabled
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  tabIndex: isFocused ? 0 : -1,
+                  disabled: isDisabled,
+                  "aria-selected": isSelected || void 0,
+                  "aria-disabled": isDisabled || void 0,
+                  "aria-current": isCurrent ? "date" : void 0,
+                  "data-selected": isSelected || void 0,
+                  "data-current": isCurrent || void 0,
+                  "data-focused": isFocused || void 0,
+                  className: cls,
+                  onClick: () => handleMonthSelect(i),
+                  children: core.getMonthName(i, locale)
+                },
+                i
+              );
+            })
+          },
+          rowIndex
+        ))
+      }
+    )
   ] });
 }
 
@@ -2354,7 +2478,7 @@ function YearPickerRoot(props) {
 }
 function YearPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("YearPicker.Grid");
-  const { adapter, viewMonth, value, displayTimezone, labels } = ctx;
+  const { adapter, viewMonth, value, displayTimezone, labels, disabled } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const decadeStart = currentYear - currentYear % 12;
   const valueYear = react.useMemo(() => {
@@ -2370,6 +2494,15 @@ function YearPickerGrid({ classNames, ...props }) {
     setToday(adapter.today(displayTimezone));
   }, [adapter, displayTimezone]);
   const todayYear = today !== null ? adapter.getYear(today) : -1;
+  const yearDisabledFlags = react.useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const year = decadeStart + i;
+      const yearStart = new Date(Date.UTC(year, 0, 1)).toISOString();
+      const yearEnd = new Date(Date.UTC(year, 11, 31, 23, 59, 59, 999)).toISOString();
+      return isRangeFullyDisabled(yearStart, yearEnd, disabled, adapter);
+    }),
+    [decadeStart, disabled, adapter]
+  );
   const navigateDecade = react.useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
@@ -2377,19 +2510,24 @@ function YearPickerGrid({ classNames, ...props }) {
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = react.useCallback(
-    (year) => {
+    (indexInDecade) => {
+      if (yearDisabledFlags[indexInDecade]) return;
+      const year = decadeStart + indexInDecade;
       const target = new Date(Date.UTC(year, 0, 1)).toISOString();
       ctx.selectDate(target);
     },
-    [ctx]
-  );
-  const years = Array.from({ length: 12 }, (_, i) => {
-    const year = decadeStart + i;
-    return {
-      value: year,
-      isSelected: year === valueYear,
-      isCurrent: year === todayYear
-    };
+    [ctx, decadeStart, yearDisabledFlags]
+  );
+  const naturalIndex = valueYear !== null && valueYear >= decadeStart && valueYear <= decadeStart + 11 ? valueYear - decadeStart : currentYear - decadeStart;
+  const firstEnabled = yearDisabledFlags.findIndex((d) => !d);
+  const initialIndex = yearDisabledFlags[naturalIndex] ? firstEnabled === -1 ? naturalIndex : firstEnabled : naturalIndex;
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex,
+    disabledFlags: yearDisabledFlags,
+    onSelect: handleYearSelect,
+    onPageUp: () => navigateDecade(-1),
+    onPageDown: () => navigateDecade(1),
+    onEscape: ctx.close
   });
   const rangeLabel = `${decadeStart}\u2013${decadeStart + 11}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
@@ -2416,37 +2554,58 @@ function YearPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        role: "row",
-        className: classNames?.gridRow,
-        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: years.slice(rowIndex * 3, rowIndex * 3 + 3).map((y) => {
-          const yearClass = [
-            classNames?.year,
-            y.isSelected && classNames?.yearSelected,
-            y.isCurrent && classNames?.yearCurrent
-          ].filter(Boolean).join(" ") || void 0;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              role: "gridcell",
-              "aria-selected": y.isSelected || void 0,
-              "aria-current": y.isCurrent ? "date" : void 0,
-              "data-selected": y.isSelected || void 0,
-              "data-current": y.isCurrent || void 0,
-              className: yearClass,
-              onClick: () => handleYearSelect(y.value),
-              children: y.value
-            },
-            y.value
-          );
-        })
-      },
-      rowIndex
-    )) })
+        ref: gridRef,
+        role: "grid",
+        "aria-label": rangeLabel,
+        className: classNames?.grid,
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "row",
+            className: classNames?.gridRow,
+            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+            children: Array.from({ length: 3 }, (_2, col) => {
+              const i = rowIndex * 3 + col;
+              const year = decadeStart + i;
+              const isSelected = year === valueYear;
+              const isCurrent = year === todayYear;
+              const isFocused = i === focusedIndex;
+              const isDisabled = yearDisabledFlags[i] ?? false;
+              const cls = [
+                classNames?.year,
+                isSelected && classNames?.yearSelected,
+                isCurrent && classNames?.yearCurrent,
+                isDisabled && classNames?.yearDisabled
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  tabIndex: isFocused ? 0 : -1,
+                  disabled: isDisabled,
+                  "aria-selected": isSelected || void 0,
+                  "aria-disabled": isDisabled || void 0,
+                  "aria-current": isCurrent ? "date" : void 0,
+                  "data-selected": isSelected || void 0,
+                  "data-current": isCurrent || void 0,
+                  "data-focused": isFocused || void 0,
+                  className: cls,
+                  onClick: () => handleYearSelect(i),
+                  children: year
+                },
+                i
+              );
+            })
+          },
+          rowIndex
+        ))
+      }
+    )
   ] });
 }