@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/month-picker.js

@@ -5,6 +5,7 @@ import { Calendar, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { monthKey, pad } from "../lib/dates.js";
+import { upperFirst } from "../lib/text-case.js";
 import { Button } from "./button.js";
 import { FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./field-base.js";
 import { IconButton } from "./icon-button.js";
@@ -17,9 +18,13 @@ import {
   FieldBox,
   FieldLabelLine,
   LABEL_ABOVE_BOX,
+  LockedReason,
+  mergeDescribedBy,
   mergeRefs,
-  useFieldMessages
+  useFieldMessages,
+  useLockReason
 } from "./field-parts.js";
+import { MonthGrid, clampKey, shiftKey, yearArrowsBlocked } from "./month-grid.js";
 import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels.js";
 function useMonthPickerLabels(partial) {
   return useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS, partial);
@@ -46,7 +51,6 @@ function firstOf({ year, month }) {
   return new Date(year, month - 1, 1);
 }
 const DEFAULT_TRIGGER_FORMAT = { month: "long", year: "numeric" };
-const MONTH_NAME_FORMAT = { month: "long", year: "numeric" };
 const YEAR_FORMAT = { year: "numeric" };
 const YEAR = /^(\d{4})/;
 function parseYear(key) {
@@ -74,6 +78,7 @@ function MonthHeadingTrigger({
   text,
   panelId,
   disabled,
+  locked,
   aria
 }) {
   useFocusBackOnClose(open, triggerRef);
@@ -83,8 +88,11 @@ function MonthHeadingTrigger({
     {
       ref: setTrigger,
       type: "button",
-      disabled,
-      onClick: toggle,
+      disabled: locked ? void 0 : disabled,
+      "aria-disabled": locked || void 0,
+      onClick: () => {
+        if (!locked) toggle();
+      },
       "aria-haspopup": "dialog",
       "aria-controls": panelId,
       "aria-expanded": open,
@@ -96,7 +104,7 @@ function MonthHeadingTrigger({
         "-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-primary transition-colors",
         "hover:bg-hover",
         FOCUS_RING,
-        disabled && "cursor-not-allowed opacity-50"
+        (disabled || locked) && "cursor-not-allowed opacity-50"
       ),
       children: [
         /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "truncate", children: text || "\xA0" }),
@@ -118,6 +126,7 @@ function MonthFieldTrigger({
   padded,
   small,
   disabled,
+  locked,
   invalid,
   className,
   aria
@@ -129,8 +138,11 @@ function MonthFieldTrigger({
     {
       ref: setTrigger,
       type: "button",
-      disabled,
-      onClick: toggle,
+      disabled: locked ? void 0 : disabled,
+      "aria-disabled": locked || void 0,
+      onClick: () => {
+        if (!locked) toggle();
+      },
       role: "combobox",
       "aria-haspopup": "dialog",
       "aria-controls": panelId,
@@ -149,7 +161,7 @@ function MonthFieldTrigger({
         // month — `py-0` with a fixed height so the box is 36px whatever the type's
         // line height. `pe-9` stays: the calendar glyph still sits at the end.
         small && "h-9 w-auto py-0",
-        disabled && "cursor-not-allowed opacity-50",
+        (disabled || locked) && "cursor-not-allowed opacity-50",
         invalid && FIELD_INVALID,
         className
       ),
@@ -158,7 +170,10 @@ function MonthFieldTrigger({
   );
 }
 const COLUMNS = 3;
-function MonthGrid({
+const PANEL_ARROW = "flex size-7 items-center justify-center rounded text-muted hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-disabled:hover:bg-transparent";
+const STEPPER_REFUSED = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+const STEPPER_ARROW_REFUSED = `${STEPPER_REFUSED} aria-disabled:hover:bg-transparent`;
+function MonthPanel({
   value,
   onPick,
   locale,
@@ -167,72 +182,12 @@ function MonthGrid({
   currentKey,
   labels
 }) {
-  const outOfBounds = (key) => Boolean(minKey && key < minKey || maxKey && key > maxKey);
-  const [active, setActive] = useState(() => {
-    const start = value ? toKey(value) : currentKey;
-    if (minKey && start < minKey) return parseMonth(minKey);
-    if (maxKey && start > maxKey) return parseMonth(maxKey);
-    return parseMonth(start);
-  });
-  const year = active.year;
-  const gridRef = useRef(null);
-  const captionId = `${useId()}-year`;
-  const shortNames = useMemo(() => {
-    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
-    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2e3, i, 1)));
-  }, [locale]);
-  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);
-  const yearCaption = new Intl.DateTimeFormat(locale, { year: "numeric" }).format(firstOf({ year, month: 1 }));
-  const pendingFocus = useRef(null);
-  useEffect(() => {
-    const key = pendingFocus.current;
-    if (!key) return;
-    pendingFocus.current = null;
-    gridRef.current?.querySelector(`[data-month="${key}"]`)?.focus();
-  });
-  useEffect(() => {
-    gridRef.current?.querySelector('[tabindex="0"]')?.focus();
-  }, []);
-  const moveTo = (next, focus) => {
-    if (focus) pendingFocus.current = toKey(next);
-    setActive(next);
-  };
-  const onCellKeyDown = (e) => {
-    const step = horizontalStep(e.key, e.currentTarget);
-    const col = (active.month - 1) % COLUMNS;
-    let delta;
-    switch (step ? "horizontal" : e.key) {
-      case "horizontal":
-        delta = step;
-        break;
-      case "ArrowUp":
-        delta = -COLUMNS;
-        break;
-      case "ArrowDown":
-        delta = COLUMNS;
-        break;
-      case "Home":
-        delta = -col;
-        break;
-      case "End":
-        delta = COLUMNS - 1 - col;
-        break;
-      case "PageUp":
-        delta = -12;
-        break;
-      case "PageDown":
-        delta = 12;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    if (delta !== 0) moveTo(shiftMonth(active, delta), true);
-  };
-  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);
-  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);
   const selectedKey = value ? toKey(value) : null;
-  const arrow = "flex size-7 items-center justify-center rounded text-muted hover:bg-hover disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent";
+  const [active, setActive] = useState(() => clampKey(selectedKey ?? currentKey, minKey, maxKey));
+  const year = Number(active.slice(0, 4));
+  const captionId = `${useId()}-year`;
+  const yearCaption = new Intl.DateTimeFormat(locale, YEAR_FORMAT).format(new Date(year, 0, 1));
+  const blocked = yearArrowsBlocked(active, minKey, maxKey);
   return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
@@ -240,9 +195,11 @@ function MonthGrid({
         {
           type: "button",
           "aria-label": labels.previousYear,
-          disabled: prevBlocked,
-          onClick: () => moveTo(shiftMonth(active, -12), false),
-          className: arrow,
+          "aria-disabled": blocked.previous || void 0,
+          onClick: () => {
+            if (!blocked.previous) setActive(shiftKey(active, -12));
+          },
+          className: PANEL_ARROW,
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
         }
       ),
@@ -252,50 +209,31 @@ function MonthGrid({
         {
           type: "button",
           "aria-label": labels.nextYear,
-          disabled: nextBlocked,
-          onClick: () => moveTo(shiftMonth(active, 12), false),
-          className: arrow,
+          "aria-disabled": blocked.next || void 0,
+          onClick: () => {
+            if (!blocked.next) setActive(shiftKey(active, 12));
+          },
+          className: PANEL_ARROW,
           children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": captionId, className: "grid gap-1", children: Array.from({ length: 12 / COLUMNS }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-3 gap-1", children: Array.from({ length: COLUMNS }, (_2, c) => {
-      const ym = { year, month: row * COLUMNS + c + 1 };
-      const key = toKey(ym);
-      const disabled = outOfBounds(key);
-      const selected = key === selectedKey;
-      const current = key === currentKey;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "gridcell",
-          "data-month": key,
-          tabIndex: ym.month === active.month ? 0 : -1,
-          "aria-label": labels.month(longName.format(firstOf(ym))),
-          "aria-selected": selected,
-          "aria-disabled": disabled || void 0,
-          "aria-current": current ? "date" : void 0,
-          onClick: () => {
-            if (disabled) return;
-            setActive(ym);
-            onPick(key);
-          },
-          onKeyDown: onCellKeyDown,
-          className: cn(
-            "rounded px-2 py-1.5 text-sm capitalize transition-colors",
-            FOCUS_RING_WIDTH,
-            "focus-visible:outline-none focus-visible:ring-inset",
-            // A --brand ring on a --brand fill exists only in the DOM.
-            selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
-            disabled ? "cursor-not-allowed text-placeholder" : selected ? "bg-brand text-brand-contrast hover:bg-brand-hover" : "text-primary hover:bg-hover",
-            current && !selected && !disabled && "ring-1 ring-inset ring-strong"
-          ),
-          children: shortNames[ym.month - 1]
-        },
-        c
-      );
-    }) }, row)) })
+    /* @__PURE__ */ jsx(
+      MonthGrid,
+      {
+        active,
+        onActiveChange: setActive,
+        onPick,
+        from: selectedKey,
+        to: selectedKey,
+        minKey,
+        maxKey,
+        currentKey,
+        locale,
+        cellName: labels.month,
+        labelledBy: captionId
+      }
+    )
   ] });
 }
 const YEAR_PAGE = 12;
@@ -369,7 +307,6 @@ function YearGrid({
   };
   const prevBlocked = minYear !== null && first - 1 < minYear;
   const nextBlocked = maxYear !== null && first + count > maxYear;
-  const arrow = "flex size-7 items-center justify-center rounded text-muted hover:bg-hover disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent";
   return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("mb-1 flex items-center", whole ? "h-7 justify-center" : "justify-between"), children: [
       !whole && /* @__PURE__ */ jsx(
@@ -377,9 +314,11 @@ function YearGrid({
         {
           type: "button",
           "aria-label": labels.earlierYears,
-          disabled: prevBlocked,
-          onClick: () => moveTo(active - YEAR_PAGE, false),
-          className: arrow,
+          "aria-disabled": prevBlocked || void 0,
+          onClick: () => {
+            if (!prevBlocked) moveTo(active - YEAR_PAGE, false);
+          },
+          className: PANEL_ARROW,
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
         }
       ),
@@ -389,9 +328,11 @@ function YearGrid({
         {
           type: "button",
           "aria-label": labels.laterYears,
-          disabled: nextBlocked,
-          onClick: () => moveTo(active + YEAR_PAGE, false),
-          className: arrow,
+          "aria-disabled": nextBlocked || void 0,
+          onClick: () => {
+            if (!nextBlocked) moveTo(active + YEAR_PAGE, false);
+          },
+          className: PANEL_ARROW,
           children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100" })
         }
       )
@@ -417,7 +358,8 @@ function YearGrid({
           },
           onKeyDown: onCellKeyDown,
           className: cn(
-            "rounded px-2 py-1.5 text-sm tabular-nums transition-colors",
+            // The month grid's 44px rows (DUP-11): one picker, one row height.
+            "h-11 rounded px-1 text-sm tabular-nums transition-colors",
             FOCUS_RING_WIDTH,
             "focus-visible:outline-none focus-visible:ring-inset",
             selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
@@ -431,9 +373,6 @@ function YearGrid({
     }) }, row)) })
   ] });
 }
-function upperFirst(text, locale) {
-  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
-}
 function MonthPicker(props) {
   const {
     value,
@@ -444,6 +383,9 @@ function MonthPicker(props) {
     label,
     placeholder,
     disabled,
+    disabledReason,
+    disabledReasonDisplay,
+    commit,
     invalid,
     error,
     hint,
@@ -482,15 +424,28 @@ function MonthPicker(props) {
     locale
   ) : placeholder ?? "";
   const id = useId();
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const reasonId = locked ? lock.reasonId : void 0;
+  const change = (key) => {
+    if (!locked) onChange(key);
+  };
   const messages = useFieldMessages({
     hint,
     help,
     name: label ?? rest["aria-label"],
     error,
-    describedBy: rest["aria-describedby"]
+    describedBy: rest["aria-describedby"],
+    reasonId
   });
   const [ownAria, wrapperRest] = splitTriggerAria(rest);
   const aria = { ...ownAria, "aria-describedby": messages.describedBy };
+  const headingAria = {
+    ...ownAria,
+    "aria-describedby": mergeDescribedBy(ownAria["aria-describedby"], reasonId)
+  };
+  const rootClass = locked ? void 0 : className;
+  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box }) : box;
   const labelId = `${id}-label`;
   const valueId = `${id}-value`;
   const panelId = `${id}-panel`;
@@ -509,12 +464,12 @@ function MonthPicker(props) {
       currentYear,
       labels,
       onPick: (key) => {
-        onChange(key);
+        change(key);
         close();
       }
     }
   ) : /* @__PURE__ */ jsx(
-    MonthGrid,
+    MonthPanel,
     {
       value: selected,
       locale,
@@ -523,7 +478,7 @@ function MonthPicker(props) {
       currentKey,
       labels,
       onPick: (key) => {
-        onChange(key);
+        change(key);
         close();
       }
     }
@@ -570,19 +525,23 @@ function MonthPicker(props) {
             text: triggerText,
             panelId,
             disabled,
-            aria: ownAria
+            locked,
+            aria: headingAria
           }
         ),
         children: grid
       }
     );
-    return (
+    const off = Boolean(disabled) && !locked;
+    const prevRefused = locked || outside(prevKey);
+    const nextRefused = locked || outside(nextKey);
+    return withReason(
       // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons
       // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;
       // docs/text-size-harmonization.md §4). In one row at 150 % "Today ‹ ›" left the
       // heading 30 px on a 360 px phone, and "October 2026" was drawn under "Today".
       // Where they fit, nothing changes.
-      /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("flex min-w-0 flex-wrap items-center gap-2", className), children: [
+      /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("flex min-w-0 flex-wrap items-center gap-2", rootClass), children: [
         Heading ? /* @__PURE__ */ jsx(Heading, { className: "m-0 min-w-0 text-lg font-semibold", children: trigger }) : trigger,
         /* @__PURE__ */ jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-1", children: [
           showToday && /* @__PURE__ */ jsx(
@@ -590,10 +549,13 @@ function MonthPicker(props) {
             {
               variant: "secondary",
               size: "sm",
-              disabled: disabled || outside(nowKey),
+              disabled: !locked && (disabled || outside(nowKey)),
+              "aria-disabled": locked || void 0,
+              "aria-describedby": reasonId,
               onClick: () => {
-                if (nowKey !== shownKey) onChange(nowKey);
+                if (nowKey !== shownKey) change(nowKey);
               },
+              className: STEPPER_REFUSED,
               children: years ? labels.thisYear : labels.today
             }
           ),
@@ -601,8 +563,14 @@ function MonthPicker(props) {
             IconButton,
             {
               "aria-label": years ? labels.previousYear : labels.previousMonth,
-              disabled: disabled || outside(prevKey),
-              onClick: () => onChange(prevKey),
+              disabled: off,
+              "aria-disabled": !off && prevRefused || void 0,
+              "aria-describedby": reasonId,
+              tooltip: !locked,
+              onClick: () => {
+                if (!prevRefused) change(prevKey);
+              },
+              className: STEPPER_ARROW_REFUSED,
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "rtl:-scale-x-100" })
             }
           ),
@@ -610,8 +578,14 @@ function MonthPicker(props) {
             IconButton,
             {
               "aria-label": years ? labels.nextYear : labels.nextMonth,
-              disabled: disabled || outside(nextKey),
-              onClick: () => onChange(nextKey),
+              disabled: off,
+              "aria-disabled": !off && nextRefused || void 0,
+              "aria-describedby": reasonId,
+              tooltip: !locked,
+              onClick: () => {
+                if (!nextRefused) change(nextKey);
+              },
+              className: STEPPER_ARROW_REFUSED,
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:-scale-x-100" })
             }
           )
@@ -629,7 +603,7 @@ function MonthPicker(props) {
       {
         ...wrapperRest,
         ref: rootRef,
-        className: cn("relative", small && "w-fit max-w-full", label !== void 0 && LABEL_ABOVE_BOX, className),
+        className: cn("relative", small && "w-fit max-w-full", label !== void 0 && LABEL_ABOVE_BOX, rootClass),
         children: [
           label !== void 0 && /* @__PURE__ */ jsx(FieldLabelLine, { label, hint: messages.labelHint }),
           named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
@@ -663,6 +637,7 @@ function MonthPicker(props) {
                   padded: label !== void 0,
                   small,
                   disabled,
+                  locked,
                   invalid: invalid || hasContent(error),
                   className: triggerClassName
                 }
@@ -682,10 +657,12 @@ function MonthPicker(props) {
     )
   );
   const endHint = label === void 0 ? messages.labelHint : void 0;
-  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: endHint === void 0 ? field : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("min-w-0", !small && "flex-1"), children: field }),
-    /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endHint })
-  ] }) });
+  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: withReason(
+    endHint === void 0 ? field : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("min-w-0", !small && "flex-1"), children: field }),
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endHint })
+    ] })
+  ) });
 }
 export {
   DEFAULT_MONTH_PICKER_LABELS,