gridsmith-ui 0.29.1 → 0.30.0

package/dist/chunk-Z4MCD73B.js

@@ -0,0 +1,316 @@
+"use client";
+import { triggerType } from './chunk-Q36JVJX4.js';
+import { useBreakpoint } from './chunk-ZHUVLBCC.js';
+import { usePopupFocus } from './chunk-OIOII5L6.js';
+import { Slot } from './chunk-7Q46JXSK.js';
+import { Icon } from './chunk-L6HWACK7.js';
+import { usePosition } from './chunk-HP7WUZPK.js';
+import { cn, GLASS_DROPDOWN, FOCUS_RING } from './chunk-JTU7OBYJ.js';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function isDivider(entry) {
+  return "type" in entry && entry.type === "divider";
+}
+function isSubmenu(entry) {
+  return "items" in entry;
+}
+var stopsOf = (entries) => entries.reduce((acc, e, i) => {
+  if (!isDivider(e) && !isUnavailable(e)) acc.push(i);
+  return acc;
+}, []);
+function isUnavailable(entry) {
+  return !!entry.disabled || isSubmenu(entry) && stopsOf(entry.items).length === 0;
+}
+var SUBMENU_GRACE_MS = 300;
+var ITEM = "flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer transition-colors rounded-[var(--ds-radius-sm)]";
+var itemLook = (entry, open = false) => cn(
+  ITEM,
+  FOCUS_RING,
+  isUnavailable(entry) ? "opacity-disabled cursor-not-allowed" : "variant" in entry && entry.variant === "destructive" ? "text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : cn("text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]", open && "bg-[var(--ds-bg-emphasis)]")
+);
+var PANEL = cn(
+  // the items' outline has its 4 px of room at any density (Sprint 30, P3)
+  "fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]",
+  "bg-[var(--ds-bg-surface-elevated)]",
+  GLASS_DROPDOWN,
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+  "rounded-[var(--ds-radius-md)] overflow-hidden"
+);
+var Divider = () => /* @__PURE__ */ jsx("div", { role: "separator", className: "my-ds-1 h-px bg-[var(--ds-border-default)]" });
+function DropdownMenu({ trigger, items, align = "end", className, container }) {
+  const [open, setOpen] = useState(false);
+  const [focusedIdx, setFocusedIdx] = useState(-1);
+  const [sub, setSub] = useState(null);
+  const [subFocusedIdx, setSubFocusedIdx] = useState(-1);
+  const triggerRef = useRef(null);
+  const panelsRef = useRef(null);
+  const menuRef = useRef(null);
+  const subRef = useRef(null);
+  const subItemRef = useRef(null);
+  const isPhone = useBreakpoint("sm");
+  const graceTimer = useRef(null);
+  const cancelGrace = () => {
+    if (graceTimer.current) {
+      clearTimeout(graceTimer.current);
+      graceTimer.current = null;
+    }
+  };
+  const afterGrace = (then) => {
+    cancelGrace();
+    graceTimer.current = setTimeout(() => {
+      graceTimer.current = null;
+      then();
+    }, SUBMENU_GRACE_MS);
+  };
+  useEffect(() => {
+    if (!open) cancelGrace();
+  }, [open]);
+  useEffect(() => cancelGrace, []);
+  const pos = usePosition(triggerRef, menuRef, open, { side: "bottom", align, offset: 4, flip: true });
+  const [subPos, setSubPos] = useState({ top: 0, left: 0 });
+  useLayoutEffect(() => {
+    if (!open || sub === null || isPhone) return;
+    const place = () => {
+      const menu = menuRef.current;
+      const entry = subItemRef.current;
+      const panel = subRef.current;
+      if (!menu || !entry || !panel) return;
+      const m = menu.getBoundingClientRect();
+      const e = entry.getBoundingClientRect();
+      const p = panel.getBoundingClientRect();
+      const first = panel.querySelector("[data-sub-index]")?.getBoundingClientRect();
+      let left = m.right + 4;
+      if (left + p.width > window.innerWidth - 8) left = Math.max(8, m.left - 4 - p.width);
+      const top = Math.max(8, Math.min(e.top - (first ? first.top - p.top : 0), window.innerHeight - p.height - 8));
+      setSubPos((cur) => cur.top === top && cur.left === left ? cur : { top, left });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, sub, isPhone]);
+  const enabledIndices = stopsOf(items);
+  const subEntry = sub !== null && isSubmenu(items[sub]) ? items[sub] : null;
+  const subIndices = subEntry ? stopsOf(subEntry.items) : [];
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) {
+      setFocusedIdx(-1);
+      setSub(null);
+      setSubFocusedIdx(-1);
+    }
+  }
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelsRef, close: () => setOpen(false), tabExits: "any" });
+  const closeSub = () => {
+    if (sub === null) return;
+    setFocusedIdx(sub);
+    setSub(null);
+    setSubFocusedIdx(-1);
+  };
+  const openSub = (i, focusFirst) => {
+    const entry = items[i];
+    if (!isSubmenu(entry) || isUnavailable(entry)) return;
+    cancelGrace();
+    setSub(i);
+    setFocusedIdx(i);
+    setSubFocusedIdx(focusFirst ? stopsOf(entry.items)[0] ?? -1 : -1);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      if (sub !== null) {
+        closeSub();
+        return;
+      }
+      returnFocus();
+      setOpen(false);
+    };
+    const onClick = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || panelsRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onClick);
+    };
+  });
+  useEffect(() => {
+    if (!open) return;
+    if (sub !== null && subFocusedIdx >= 0) panelsRef.current?.querySelector(`[data-sub-index="${subFocusedIdx}"]`)?.focus();
+    else if (sub !== null && isPhone) panelsRef.current?.querySelector("[data-sub-back]")?.focus();
+    else if (focusedIdx >= 0) menuRef.current?.querySelector(`[data-index="${focusedIdx}"]`)?.focus();
+  }, [open, focusedIdx, sub, subFocusedIdx, isPhone]);
+  const step = (stops, at, by) => stops[((stops.indexOf(at) + by) % stops.length + stops.length) % stops.length];
+  function handleMenuKeyDown(e) {
+    const inSub = sub !== null;
+    const stops = inSub ? subIndices : enabledIndices;
+    const at = inSub ? subFocusedIdx : focusedIdx;
+    const go = (i) => {
+      if (i === void 0) return;
+      if (inSub) setSubFocusedIdx(i);
+      else setFocusedIdx(i);
+    };
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      go(at < 0 ? stops[0] : step(stops, at, 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      go(at < 0 ? stops[stops.length - 1] : step(stops, at, -1));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      go(stops[0]);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      go(stops[stops.length - 1]);
+    } else if (e.key === "ArrowRight" && !inSub && focusedIdx >= 0 && isSubmenu(items[focusedIdx])) {
+      e.preventDefault();
+      openSub(focusedIdx, true);
+    } else if (e.key === "ArrowLeft" && inSub) {
+      e.preventDefault();
+      closeSub();
+    }
+  }
+  const choose = (item) => {
+    if (item.disabled) return;
+    returnFocus();
+    item.onClick();
+    setOpen(false);
+  };
+  const subItems = (entries) => entries.map((item, i) => isDivider(item) ? /* @__PURE__ */ jsx(Divider, {}, i) : /* @__PURE__ */ jsxs("button", { type: "button", "data-sub-index": i, role: "menuitem", disabled: item.disabled, tabIndex: subFocusedIdx === i ? 0 : -1, onFocus: () => setSubFocusedIdx(i), onClick: () => choose(item), className: itemLook(item), children: [
+    item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+    /* @__PURE__ */ jsx("span", { children: item.label })
+  ] }, i));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...triggerType(trigger),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        ref: triggerRef,
+        onClick: () => {
+          setOpen(!open);
+          if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);
+        },
+        children: trigger
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: panelsRef, className: "contents", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            role: "menu",
+            "data-gs": "menu",
+            "aria-label": isPhone && subEntry ? subEntry.label : void 0,
+            onKeyDown: handleMenuKeyDown,
+            className: cn(PANEL, className),
+            style: { top: pos.top, left: pos.left },
+            onClick: (e) => e.stopPropagation(),
+            children: isPhone && subEntry ? (
+              // on a phone the submenu takes the menu's place: Back first, its entry's name on it
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("button", { type: "button", "data-sub-back": "", role: "menuitem", "aria-label": `Back from ${subEntry.label}`, tabIndex: -1, onClick: closeSub, className: cn(itemLook(subEntry), "text-[var(--ds-text-secondary)] font-[var(--ds-weight-heading)]"), children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16, className: "shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { children: subEntry.label })
+                ] }),
+                /* @__PURE__ */ jsx(Divider, {}),
+                subItems(subEntry.items)
+              ] })
+            ) : items.map((item, i) => {
+              if (isDivider(item)) return /* @__PURE__ */ jsx(Divider, {}, i);
+              if (isSubmenu(item)) {
+                const isOpen = sub === i;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    ref: isOpen ? (el) => {
+                      subItemRef.current = el;
+                    } : void 0,
+                    "data-index": i,
+                    role: "menuitem",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen,
+                    disabled: isUnavailable(item),
+                    tabIndex: focusedIdx === i ? 0 : -1,
+                    onFocus: () => setFocusedIdx(i),
+                    onClick: () => openSub(i, true),
+                    onMouseEnter: (e) => {
+                      if (isPhone || e.buttons !== 0) return;
+                      if (isOpen) cancelGrace();
+                      else if (sub === null) openSub(i, false);
+                      else afterGrace(() => openSub(i, false));
+                    },
+                    className: itemLook(item, isOpen),
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                      /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "shrink-0 text-[var(--ds-text-muted)]" })
+                    ]
+                  },
+                  i
+                );
+              }
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-index": i,
+                  role: "menuitem",
+                  disabled: item.disabled,
+                  tabIndex: focusedIdx === i ? 0 : -1,
+                  onFocus: () => setFocusedIdx(i),
+                  onClick: () => choose(item),
+                  onMouseEnter: () => {
+                    if (!isPhone && sub !== null) afterGrace(() => {
+                      setSub(null);
+                      setSubFocusedIdx(-1);
+                    });
+                  },
+                  className: itemLook(item),
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { children: item.label })
+                  ]
+                },
+                i
+              );
+            })
+          }
+        ),
+        !isPhone && subEntry && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: subRef,
+            role: "menu",
+            "aria-label": subEntry.label,
+            onKeyDown: handleMenuKeyDown,
+            className: PANEL,
+            style: { top: subPos.top, left: subPos.left },
+            onClick: (e) => e.stopPropagation(),
+            onMouseEnter: cancelGrace,
+            children: subItems(subEntry.items)
+          }
+        )
+      ] }),
+      container ?? document.body
+    )
+  ] });
+}
+
+export { DropdownMenu };
+//# sourceMappingURL=chunk-Z4MCD73B.js.map
+//# sourceMappingURL=chunk-Z4MCD73B.js.map

package/dist/chunk-Z4MCD73B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/DropdownMenu.tsx"],"names":[],"mappings":"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","file":"chunk-Z4MCD73B.js","sourcesContent":["import { useRef, useEffect, useLayoutEffect, useState, type ReactNode, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { createPortal } from \"react-dom\";\nimport { cn, FOCUS_RING, GLASS_DROPDOWN } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { Slot } from \"../lib/slot\";\nimport { triggerType } from \"./Button\";\nimport { usePosition, type Align } from \"../lib/use-position\";\nimport { usePopupFocus } from \"../lib/focus\";\n\nexport interface DropdownMenuItem {\n  label: string;\n  icon?: IconName;\n  onClick: () => void;\n  variant?: \"default\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport interface DropdownMenuDivider {\n  type: \"divider\";\n}\n\n/**\n * An entry that opens a submenu of its own (Sprint 25.8.7's look check: a card's Move among its other actions), one\n * level deep. On a desktop it opens beside the menu: → or Enter opens it, its first item focused; ← or Escape closes it,\n * focus back on this entry; a hover opens it too. On a phone its items take the menu's place, under a Back item.\n */\nexport interface DropdownMenuSubmenu {\n  label: string;\n  icon?: IconName;\n  items: (DropdownMenuItem | DropdownMenuDivider)[];\n  disabled?: boolean;\n}\n\nexport type DropdownMenuEntry = DropdownMenuItem | DropdownMenuDivider | DropdownMenuSubmenu;\n\nfunction isDivider(entry: DropdownMenuEntry): entry is DropdownMenuDivider {\n  return \"type\" in entry && entry.type === \"divider\";\n}\nfunction isSubmenu(entry: DropdownMenuEntry): entry is DropdownMenuSubmenu {\n  return \"items\" in entry;\n}\n/** The indices of a list's items the arrows stop at: no divider, nothing unavailable. */\nconst stopsOf = (entries: DropdownMenuEntry[]): number[] => entries.reduce<number[]>((acc, e, i) => {\n  if (!isDivider(e) && !isUnavailable(e)) acc.push(i);\n  return acc;\n}, []);\n/** An entry that can't be chosen: disabled, or a submenu with nothing in it to choose, which never opens empty. */\nfunction isUnavailable(entry: DropdownMenuItem | DropdownMenuSubmenu): boolean {\n  return !!entry.disabled || (isSubmenu(entry) && stopsOf(entry.items).length === 0);\n}\n/**\n * How long a hover on another entry waits before it closes the open submenu (or opens the other's): a pointer on its way\n * to the submenu crosses the entries below its own, and reaching the submenu in that time keeps it open.\n */\nconst SUBMENU_GRACE_MS = 300;\n\nconst ITEM = \"flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer transition-colors rounded-[var(--ds-radius-sm)]\";\nconst itemLook = (entry: DropdownMenuItem | DropdownMenuSubmenu, open = false) => cn(\n  ITEM,\n  FOCUS_RING,\n  isUnavailable(entry)\n    ? \"opacity-disabled cursor-not-allowed\"\n    : \"variant\" in entry && entry.variant === \"destructive\"\n      ? \"text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]\"\n      : cn(\"text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]\", open && \"bg-[var(--ds-bg-emphasis)]\"),\n);\nconst PANEL = cn(\n  // the items' outline has its 4 px of room at any density (Sprint 30, P3)\n  \"fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]\",\n  \"bg-[var(--ds-bg-surface-elevated)]\",\n  GLASS_DROPDOWN,\n  \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n  \"rounded-[var(--ds-radius-md)] overflow-hidden\",\n);\nconst Divider = () => <div role=\"separator\" className=\"my-ds-1 h-px bg-[var(--ds-border-default)]\" />;\n\ninterface DropdownMenuProps {\n  trigger: ReactNode;\n  items: DropdownMenuEntry[];\n  align?: Align;\n  className?: string;\n  container?: Element | DocumentFragment;\n}\n\nexport function DropdownMenu({ trigger, items, align = \"end\", className, container }: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [focusedIdx, setFocusedIdx] = useState(-1);\n  // the submenu open, by its entry's index, and the focus inside it\n  const [sub, setSub] = useState<number | null>(null);\n  const [subFocusedIdx, setSubFocusedIdx] = useState(-1);\n  const triggerRef = useRef<HTMLElement>(null);\n  // both panels, the menu and its submenu, sit in one box (display: contents) that is the popup's for focus and presses\n  const panelsRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const subRef = useRef<HTMLDivElement>(null);\n  const subItemRef = useRef<HTMLElement>(null);\n  const isPhone = useBreakpoint(\"sm\");\n  // a hover elsewhere, waiting before it closes the open submenu (SUBMENU_GRACE_MS)\n  const graceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cancelGrace = () => {\n    if (graceTimer.current) { clearTimeout(graceTimer.current); graceTimer.current = null; }\n  };\n  const afterGrace = (then: () => void) => {\n    cancelGrace();\n    graceTimer.current = setTimeout(() => { graceTimer.current = null; then(); }, SUBMENU_GRACE_MS);\n  };\n  // closing the menu, or leaving the page, drops a hover's wait\n  useEffect(() => { if (!open) cancelGrace(); }, [open]);\n  useEffect(() => cancelGrace, []);\n\n  const pos = usePosition(triggerRef, menuRef, open, { side: \"bottom\", align, offset: 4, flip: true });\n  // beside the menu, 4 px from its edge, its first item level with its entry; on the other side where the screen has no\n  // room, and inside the screen (measured against the menu, not the entry: the menu's padding and edge sit between them)\n  const [subPos, setSubPos] = useState({ top: 0, left: 0 });\n  useLayoutEffect(() => {\n    if (!open || sub === null || isPhone) return;\n    const place = () => {\n      const menu = menuRef.current;\n      const entry = subItemRef.current;\n      const panel = subRef.current;\n      if (!menu || !entry || !panel) return;\n      const m = menu.getBoundingClientRect();\n      const e = entry.getBoundingClientRect();\n      const p = panel.getBoundingClientRect();\n      const first = panel.querySelector(\"[data-sub-index]\")?.getBoundingClientRect();\n      let left = m.right + 4;\n      if (left + p.width > window.innerWidth - 8) left = Math.max(8, m.left - 4 - p.width);\n      const top = Math.max(8, Math.min(e.top - (first ? first.top - p.top : 0), window.innerHeight - p.height - 8));\n      setSubPos((cur) => (cur.top === top && cur.left === left ? cur : { top, left }));\n    };\n    place();\n    window.addEventListener(\"resize\", place);\n    window.addEventListener(\"scroll\", place, true);\n    return () => {\n      window.removeEventListener(\"resize\", place);\n      window.removeEventListener(\"scroll\", place, true);\n    };\n  }, [open, sub, isPhone]);\n\n  const enabledIndices = stopsOf(items);\n  const subEntry = sub !== null && isSubmenu(items[sub]) ? (items[sub] as DropdownMenuSubmenu) : null;\n  const subIndices = subEntry ? stopsOf(subEntry.items) : [];\n\n  // Closing clears the keyboard focus index and the submenu (render-time state adjustment).\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    if (!open) { setFocusedIdx(-1); setSub(null); setSubFocusedIdx(-1); }\n  }\n\n  // Sprint 25.7: focus hands back on close, and Tab out carries on from the trigger (lib/focus usePopupFocus).\n  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelsRef, close: () => setOpen(false), tabExits: \"any\" });\n\n  /** The submenu closes, and focus goes back to the entry that opened it. */\n  const closeSub = () => {\n    if (sub === null) return;\n    setFocusedIdx(sub);\n    setSub(null);\n    setSubFocusedIdx(-1);\n  };\n  const openSub = (i: number, focusFirst: boolean) => {\n    const entry = items[i];\n    if (!isSubmenu(entry) || isUnavailable(entry)) return;\n    cancelGrace();\n    setSub(i);\n    setFocusedIdx(i);\n    setSubFocusedIdx(focusFirst ? stopsOf(entry.items)[0] ?? -1 : -1);\n  };\n\n  useEffect(() => {\n    if (!open) return;\n\n    // An Escape a control inside already handled is its own; the one this acts on is marked for overlays around it.\n    // In a submenu it closes the submenu alone.\n    const onKeyDown = (e: globalThis.KeyboardEvent) => {\n      if (e.key !== \"Escape\" || e.defaultPrevented || !isTopLayer()) return;\n      e.preventDefault();\n      if (sub !== null) { closeSub(); return; }\n      returnFocus();\n      setOpen(false);\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (triggerRef.current?.contains(target) || panelsRef.current?.contains(target)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"mousedown\", onClick);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"mousedown\", onClick);\n    };\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    // By the item's own index: items and dividers share one numbering, so indexing the buttons alone left every\n    // item after a divider unreachable by the arrows (the shell's user menu: Settings, divider, Log out).\n    if (sub !== null && subFocusedIdx >= 0) panelsRef.current?.querySelector<HTMLElement>(`[data-sub-index=\"${subFocusedIdx}\"]`)?.focus();\n    else if (sub !== null && isPhone) panelsRef.current?.querySelector<HTMLElement>(\"[data-sub-back]\")?.focus();\n    else if (focusedIdx >= 0) menuRef.current?.querySelector<HTMLElement>(`[data-index=\"${focusedIdx}\"]`)?.focus();\n  }, [open, focusedIdx, sub, subFocusedIdx, isPhone]);\n\n  const step = (stops: number[], at: number, by: number) => stops[((stops.indexOf(at) + by) % stops.length + stops.length) % stops.length];\n  function handleMenuKeyDown(e: ReactKeyboardEvent) {\n    const inSub = sub !== null;\n    const stops = inSub ? subIndices : enabledIndices;\n    const at = inSub ? subFocusedIdx : focusedIdx;\n    const go = (i: number | undefined) => { if (i === undefined) return; if (inSub) setSubFocusedIdx(i); else setFocusedIdx(i); };\n    if (e.key === \"ArrowDown\") { e.preventDefault(); go(at < 0 ? stops[0] : step(stops, at, 1)); }\n    else if (e.key === \"ArrowUp\") { e.preventDefault(); go(at < 0 ? stops[stops.length - 1] : step(stops, at, -1)); }\n    else if (e.key === \"Home\") { e.preventDefault(); go(stops[0]); }\n    else if (e.key === \"End\") { e.preventDefault(); go(stops[stops.length - 1]); }\n    else if (e.key === \"ArrowRight\" && !inSub && focusedIdx >= 0 && isSubmenu(items[focusedIdx])) { e.preventDefault(); openSub(focusedIdx, true); }\n    else if (e.key === \"ArrowLeft\" && inSub) { e.preventDefault(); closeSub(); }\n  }\n\n  /** A choice: focus back on the trigger first, so a dialog the item opens returns there (Sprint 25.7). */\n  const choose = (item: DropdownMenuItem) => {\n    if (item.disabled) return;\n    returnFocus();\n    item.onClick();\n    setOpen(false);\n  };\n\n  const subItems = (entries: (DropdownMenuItem | DropdownMenuDivider)[]) => entries.map((item, i) => (isDivider(item) ? <Divider key={i} /> : (\n    <button type=\"button\" key={i} data-sub-index={i} role=\"menuitem\" disabled={item.disabled} tabIndex={subFocusedIdx === i ? 0 : -1} onFocus={() => setSubFocusedIdx(i)} onClick={() => choose(item)} className={itemLook(item)}>\n      {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n      <span>{item.label}</span>\n    </button>\n  )));\n\n  return (\n    <>\n      <Slot\n        {...triggerType(trigger)}\n        // the APG's menu button: the trigger says it opens a menu, and whether it is open\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        ref={triggerRef}\n        onClick={() => {\n          setOpen(!open);\n          if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);\n        }}\n      >\n        {trigger}\n      </Slot>\n      {open && createPortal(\n        <div ref={panelsRef} className=\"contents\">\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            data-gs=\"menu\"\n            aria-label={isPhone && subEntry ? subEntry.label : undefined}\n            onKeyDown={handleMenuKeyDown}\n            className={cn(PANEL, className)}\n            style={{ top: pos.top, left: pos.left }}\n            // A choice is the menu's own: the click must not also reach a clickable row or card the menu sits in\n            // (React carries events from a portal to its React parents).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {isPhone && subEntry ? (\n              // on a phone the submenu takes the menu's place: Back first, its entry's name on it\n              <>\n                <button type=\"button\" data-sub-back=\"\" role=\"menuitem\" aria-label={`Back from ${subEntry.label}`} tabIndex={-1} onClick={closeSub} className={cn(itemLook(subEntry), \"text-[var(--ds-text-secondary)] font-[var(--ds-weight-heading)]\")}>\n                  <Icon name=\"chevron-left\" size={16} className=\"shrink-0\" />\n                  <span>{subEntry.label}</span>\n                </button>\n                <Divider />\n                {subItems(subEntry.items)}\n              </>\n            ) : items.map((item, i) => {\n              if (isDivider(item)) return <Divider key={i} />;\n              if (isSubmenu(item)) {\n                const isOpen = sub === i;\n                return (\n                  <button type=\"button\"\n                    key={i}\n                    ref={isOpen ? (el) => { subItemRef.current = el; } : undefined}\n                    data-index={i}\n                    role=\"menuitem\"\n                    aria-haspopup=\"menu\"\n                    aria-expanded={isOpen}\n                    disabled={isUnavailable(item)}\n                    tabIndex={focusedIdx === i ? 0 : -1}\n                    // the arrows go on from wherever focus is, however it got there (a click, a screen reader's command)\n                    onFocus={() => setFocusedIdx(i)}\n                    // Enter (its click) or a press goes into the submenu, its first item focused, whether a hover had\n                    // opened it or not (the APG's menu: Enter opens it and focuses its first item); ←, Escape or Back\n                    // closes it\n                    onClick={() => openSub(i, true)}\n                    // a hover opens it at once where no other is open; with another open it waits, as the pointer may be\n                    // on its way to that one (SUBMENU_GRACE_MS); back on its own entry, the wait for a close is dropped\n                    onMouseEnter={(e) => {\n                      if (isPhone || e.buttons !== 0) return;\n                      if (isOpen) cancelGrace();\n                      else if (sub === null) openSub(i, false);\n                      else afterGrace(() => openSub(i, false));\n                    }}\n                    className={itemLook(item, isOpen)}\n                  >\n                    {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n                    <span className=\"flex-1\">{item.label}</span>\n                    <Icon name=\"chevron-right\" size={14} className=\"shrink-0 text-[var(--ds-text-muted)]\" />\n                  </button>\n                );\n              }\n              return (\n                <button type=\"button\"\n                  key={i}\n                  data-index={i}\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  tabIndex={focusedIdx === i ? 0 : -1}\n                  onFocus={() => setFocusedIdx(i)}\n                  onClick={() => choose(item)}\n                  // a hover on another entry closes an open submenu, as moving on from it does, after a moment: the\n                  // pointer may only be crossing it on its way to the submenu (SUBMENU_GRACE_MS)\n                  onMouseEnter={() => { if (!isPhone && sub !== null) afterGrace(() => { setSub(null); setSubFocusedIdx(-1); }); }}\n                  className={itemLook(item)}\n                >\n                  {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n                  <span>{item.label}</span>\n                </button>\n              );\n            })}\n          </div>\n          {!isPhone && subEntry && (\n            <div\n              ref={subRef}\n              role=\"menu\"\n              aria-label={subEntry.label}\n              onKeyDown={handleMenuKeyDown}\n              className={PANEL}\n              style={{ top: subPos.top, left: subPos.left }}\n              onClick={(e) => e.stopPropagation()}\n              // the pointer has reached the submenu: a hover it crossed on the way closes nothing\n              onMouseEnter={cancelGrace}\n            >\n              {subItems(subEntry.items)}\n            </div>\n          )}\n        </div>,\n        container ?? document.body\n      )}\n    </>\n  );\n}\n"]}

package/dist/data-grid.d.ts

@@ -1,9 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
-import { B as BreakpointKey, C as ColumnKind } from './table-utils-CxnpFHRF.js';
+import { B as BreakpointKey, C as ColumnKind } from './table-utils-BXkP-2Hx.js';
 import { P as Pager } from './use-pagination-QykGSREv.js';
 import 'react';
 
+/** One of a choice column's options: the value its cells hold, and the words shown for it. */
+interface DataGridOption {
+    value: string | number;
+    label: string;
+}
 /** Column meta for opt-in truncation. Set on ColumnDef.meta. */
 interface DataGridColumnMeta {
     /** true = single-line, or { lines: N } for multi-line clamp. */
@@ -16,15 +21,29 @@ interface DataGridColumnMeta {
     width?: string;
     /** CSS min-width for the column. */
     minWidth?: string;
-    /** Explicit column kind. When omitted the DataGrid infers it from data values. */
+    /**
+     * Explicit column kind. When omitted the DataGrid infers it from data values (a yes or no too; never a choice). In an
+     * editable grid it chooses the editor, where the control can hold the cell's value: "number" a NumberInput for a
+     * number, "date" a DatePicker for a Date or an ISO date ("2026-10-14"), "choice" a Dropdown of `options`, "boolean" a
+     * Checkbox; any other kind, and a number or a date written as text ("18 KB", "12 Jan 2026"), a text Input.
+     */
     kind?: ColumnKind;
     /** Horizontal alignment of the header and the cells; a block element (a Checkbox, a Button) is laid out with flex so it follows too (round 14). Default: numbers right, everything else left. */
     align?: "left" | "center" | "right";
-    /** In an editable grid, whether this column's cells edit (default true); false for a column that shows (a status, actions). */
+    /**
+     * In an editable grid, whether this column's cells edit (default true); false for a column that shows (a status, a
+     * calculated value, actions): its cells show no edit cue, and assistive tech hears them as read-only.
+     */
     editable?: boolean;
     /**
-     * In an editable grid, the value onCellEdit gets from the text typed (default the text itself): a number column's
-     * `(text) => Number(text)`, so a salary stays a number (the review of 30 September).
+     * A choice column's options (with `kind: "choice"`): its cells edit with a Dropdown of them, and a save gives the
+     * option's `value`. Give the column a `cell` that shows the option's label.
+     */
+    options?: readonly DataGridOption[];
+    /**
+     * In an editable grid, the value onCellEdit gets from what was typed in a text cell, or in a number cell as its text
+     * (default the text itself, or the number): a price written as text, `(text) => Number(text.replace(/[$,]/g, ""))`.
+     * A date, a choice and a yes or no are given as their own values.
      */
     parse?: (text: string) => unknown;
 }
@@ -66,4 +85,4 @@ interface DataGridProps<T> {
 }
 declare function DataGrid<T>({ data, columns, pageSize, editable, onCellEdit, mobileBreakpoint: mobileBreakpointProp, cardsBelow, pager: pagerProp, "aria-label": ariaLabel, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
 
-export { DataGrid, type DataGridColumnMeta };
+export { DataGrid, type DataGridColumnMeta, type DataGridOption };