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

package/dist/index.js

@@ -685,6 +685,86 @@ function DatePickerCalendar({
     /* @__PURE__ */ 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 = useRef(null);
+  const [focusedIndex, setFocusedIndex] = 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);
+  };
+  useEffect(() => {
+    if (!disabledFlags || !disabledFlags[focusedIndex]) return;
+    const firstEnabled = disabledFlags.findIndex((d) => !d);
+    if (firstEnabled !== -1 && firstEnabled !== focusedIndex) {
+      setFocusedIndex(firstEnabled);
+    }
+  }, [disabledFlags, focusedIndex]);
+  useEffect(() => {
+    const btn = gridRef.current?.querySelector('[data-focused="true"]');
+    btn?.focus({ preventScroll: true });
+  }, [focusedIndex]);
+  return { gridRef, focusedIndex, handleKeyDown };
+}
 function DatePickerMonthGrid({
   classNames,
   onSelect,
@@ -692,15 +772,18 @@ 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);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction));
     },
     [adapter, viewMonth, ctx]
   );
@@ -713,12 +796,13 @@ function DatePickerMonthGrid({
     },
     [currentYear, ctx, onSelect]
   );
-  const months = Array.from({ length: 12 }, (_, i) => ({
-    index: i,
-    name: 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__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsx(
@@ -746,30 +830,37 @@ function DatePickerMonthGrid({
     /* @__PURE__ */ 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__ */ 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: getMonthName(i, locale)
             },
-            m.index
+            i
           );
         })
       }
@@ -778,38 +869,38 @@ 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) => {
-      const newDate = adapter.addYears(viewMonth, direction * 12);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
     },
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = 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 = 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__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
@@ -838,30 +929,38 @@ function DatePickerYearGrid({ classNames, onSelect, ...props }) {
     /* @__PURE__ */ 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__ */ 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
           );
         })
       }
@@ -934,8 +1033,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 +1525,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 +1688,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 +1992,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
       }
     );
@@ -2200,7 +2337,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] = useMemo(() => {
     if (!value) return [null, null];
@@ -2211,9 +2348,19 @@ 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 monthDisabledFlags = 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 = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction));
@@ -2222,17 +2369,23 @@ function MonthPickerGrid({ classNames, ...props }) {
   );
   const handleMonthSelect = 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: 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__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsx(
@@ -2257,37 +2410,57 @@ function MonthPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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: getMonthName(i, locale)
+                },
+                i
+              );
+            })
+          },
+          rowIndex
+        ))
+      }
+    )
   ] });
 }
 
@@ -2304,7 +2477,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 = useMemo(() => {
@@ -2315,7 +2488,20 @@ 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 yearDisabledFlags = 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 = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
@@ -2323,19 +2509,24 @@ function YearPickerGrid({ classNames, ...props }) {
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = 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__ */ jsxs("div", { className: classNames?.root, ...props, children: [
@@ -2362,37 +2553,58 @@ function YearPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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
+        ))
+      }
+    )
   ] });
 }