@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/dropdown.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'react';
 
 /**
  * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,
@@ -23,14 +23,52 @@ import { ReactNode, RefObject } from 'react';
  * is for the ONE case where a second entry would be wrong: a caller whose panel is
  * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
  * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.
+ *
+ * ## One outside-click rule for the whole package
+ *
+ * This hand-rolled a second document listener, on `mousedown`, months after
+ * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to
+ * `pointerdown` for a reason that applies here word for word: on a touch platform
+ * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged
+ * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker
+ * and both comboboxes all dismiss through this. Two copies of one rule is one copy
+ * too many; this now delegates, so the package has a single answer to "what is an
+ * outside press".
+ *
+ * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and
+ * fills the screen, so it has no outside — and being portalled to `<body>`, it is
+ * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read
+ * every tap in it as a press outside and close it at finger-down. The sheet's own
+ * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot
+ * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same
+ * question — "is this caller's panel a sheet?" — and the one caller that answers yes
+ * already says so; they are separate props so a future caller can answer them apart.
+ *
+ * ## Escape, and where focus lands after it
+ *
+ * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an
+ * outside press closed them, and the one key every other dismissible surface in the
+ * package answers to did nothing — so a keyboard user who opened a list had no way
+ * out of it that did not also choose something. {@link useEscapeKey} is the listener
+ * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package
+ * keeps one answer to "what does Escape do" rather than growing a fifth.
+ *
+ * Escape RESTORES FOCUS; an outside press does not. A press has already put focus
+ * where the user pointed, and dragging it back from there would be the bug. Attach
+ * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,
+ * Tab, a commit — hand focus back to it; leave it unattached and they simply close,
+ * which is what the callers written before this get.
  */
-declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, }?: {
+declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, panelIsSheet, }?: {
     backCloses?: boolean;
+    panelIsSheet?: boolean;
 }): {
     open: boolean;
     setOpen: react.Dispatch<react.SetStateAction<boolean>>;
     wrapperRef: RefObject<T | null>;
     panelRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    closeToTrigger: () => void;
 };
 /**
  * {@link useDropdown} plus a search box: clears the query and focuses the search
@@ -41,17 +79,68 @@ declare function useDropdownSearch<T extends HTMLElement = HTMLDivElement>(): {
     setOpen: react.Dispatch<react.SetStateAction<boolean>>;
     wrapperRef: RefObject<T | null>;
     panelRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    closeToTrigger: () => void;
     query: string;
     setQuery: react.Dispatch<react.SetStateAction<string>>;
     inputRef: RefObject<HTMLInputElement | null>;
 };
-/** The search row (magnifier + text input) shared by the searchable dropdowns. */
-declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placeholder, }: {
+/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled
+ *  where the focus is (see the note above), so the div's own handler signature is
+ *  omitted in favour of it. */
+interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "onKeyDown"> {
     query: string;
     onQueryChange: (v: string) => void;
     inputRef: RefObject<HTMLInputElement | null>;
     placeholder?: string;
-}): react.JSX.Element;
+    /** The `<ul role="listbox">` this box filters. */
+    listboxId?: string;
+    /** The id of the option the arrow keys are currently on, if any. */
+    activeId?: string;
+    /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+/** The search row (magnifier + text input) shared by the searchable dropdowns.
+ *
+ *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same
+ *  finding as the numpad's keys). That mattered more here than the bare class suggests:
+ *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is
+ *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field
+ *  showing a placeholder is a single blinking pixel column. The ring is what says "this
+ *  list is being typed into"; it appears whenever the field holds focus, which for a
+ *  text input is exactly when it is true.
+ *
+ *  ## Why this box is a plain textbox and the TRIGGER is the combobox
+ *
+ *  The panels this header sits in are opened by a field-shaped trigger, and that
+ *  trigger is what carries `role="combobox"` (see {@link MultiSelect},
+ *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a
+ *  reader tabbing back to the field would meet a second one describing the same
+ *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and
+ *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so
+ *  this is what has to say which option the arrow keys are on.
+ *
+ *  Pass `listboxId` and the wiring appears; omit it and the box is what it always
+ *  was, for the callers that have no listbox to point at. */
+declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placeholder, listboxId, activeId, onKeyDown, "aria-label": ariaLabel, className, ...rest }: DropdownSearchHeaderProps): react.JSX.Element;
+interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
+    header?: ReactNode;
+    empty?: boolean;
+    /** Attributes for the `<ul>` itself — how a caller whose children are options
+     *  gives the list its `role="listbox"`, its id and `aria-multiselectable`. The
+     *  panel owns the scrolling and the padding, so `className` here is merged rather
+     *  than replaced. */
+    listProps?: ComponentPropsWithoutRef<"ul">;
+    /** The trigger to hang off. Given, the panel portals and goes `fixed`. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */
+    panelRef?: RefObject<HTMLDivElement | null>;
+    /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */
+    width?: number;
+    /** Which of the panel's edges lines up with the trigger's, room permitting. */
+    align?: "left" | "right";
+    children: ReactNode;
+}
 /**
  * The floating popover surface for the searchable dropdowns: bordered/shadowed
  * panel, an optional `header` slot (search box, plus any actions), and a
@@ -80,19 +169,6 @@ declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placehol
  * no longer inside the wrapper, so the outside-click handler has to be told about it
  * or the first click on an option closes the list instead of choosing from it.
  */
-declare function DropdownPanel({ header, empty, className, anchorRef, panelRef, width, align, children, }: {
-    header?: ReactNode;
-    empty?: boolean;
-    className?: string;
-    /** The trigger to hang off. Given, the panel portals and goes `fixed`. */
-    anchorRef?: RefObject<HTMLElement | null>;
-    /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */
-    panelRef?: RefObject<HTMLDivElement | null>;
-    /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */
-    width?: number;
-    /** Which of the panel's edges lines up with the trigger's, room permitting. */
-    align?: "left" | "right";
-    children: ReactNode;
-}): react.JSX.Element | null;
+declare function DropdownPanel({ header, empty, className, listProps, anchorRef, panelRef, width, align, children, style, ...rest }: DropdownPanelProps): react.JSX.Element | null;
 
-export { DropdownPanel, DropdownSearchHeader, useDropdown, useDropdownSearch };
+export { DropdownPanel, type DropdownPanelProps, DropdownSearchHeader, type DropdownSearchHeaderProps, useDropdown, useDropdownSearch };

package/dist/components/dropdown.js

@@ -1,31 +1,32 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Search } from "lucide-react";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { cn } from "../lib/cn.js";
 function useDropdown({
-  backCloses = true
+  backCloses = true,
+  panelIsSheet = !backCloses
 } = {}) {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
   const panelRef = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      const inside = (wrapperRef.current?.contains(target) ?? false) || (panelRef.current?.contains(target) ?? false);
-      if (!inside) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));
-  return { open, setOpen, wrapperRef, panelRef };
+  const close = useCallback(() => setOpen(false), []);
+  const closeToTrigger = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);
+  useEscapeKey(closeToTrigger, open);
+  useOverlayHistory(open && backCloses, close);
+  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };
 }
 function useDropdownSearch() {
-  const { open, setOpen, wrapperRef, panelRef } = useDropdown();
+  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } = useDropdown();
   const [query, setQuery] = useState("");
   const inputRef = useRef(null);
   useEffect(() => {
@@ -34,54 +35,96 @@ function useDropdownSearch() {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
   }, [open]);
-  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };
+  return {
+    open,
+    setOpen,
+    wrapperRef,
+    panelRef,
+    triggerRef,
+    closeToTrigger,
+    query,
+    setQuery,
+    inputRef
+  };
 }
 function DropdownSearchHeader({
   query,
   onQueryChange,
   inputRef,
-  placeholder
+  placeholder,
+  listboxId,
+  activeId,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  className,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx(Search, { className: "size-4 text-slate-400 dark:text-slate-500" }),
-    /* @__PURE__ */ jsx(
-      "input",
+  return (
+    // `rest` dresses the header row; the NAME goes on the box below it. A search
+    // input whose only name is its placeholder has none the moment a character is
+    // typed into it — the placeholder disappears — which is why this is worth a prop
+    // at all rather than something a caller could add from outside.
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        ref: inputRef,
-        type: "text",
-        value: query,
-        onChange: (e) => onQueryChange(e.target.value),
-        placeholder,
-        className: "w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
+        ...rest,
+        className: cn(
+          "flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-4 text-[var(--text-placeholder)]" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: query,
+              onChange: (e) => onQueryChange(e.target.value),
+              onKeyDown,
+              placeholder,
+              "aria-label": ariaLabel,
+              "aria-controls": listboxId,
+              "aria-activedescendant": activeId,
+              "aria-autocomplete": listboxId ? "list" : void 0,
+              className: "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+            }
+          )
+        ]
       }
     )
-  ] });
+  );
 }
 function DropdownPanel({
   header,
   empty,
   className,
+  listProps,
   anchorRef,
   panelRef,
   width = 256,
   align = "right",
-  children
+  children,
+  style,
+  ...rest
 }) {
   const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     header,
-    /* @__PURE__ */ jsxs("ul", { className: "overflow-y-auto py-1", children: [
+    /* @__PURE__ */ jsxs("ul", { ...listProps, className: cn("overflow-y-auto py-1", listProps?.className), children: [
       children,
-      empty && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: "\u2014" })
+      empty && /* @__PURE__ */ jsx("li", { role: "presentation", className: "px-3 py-2 text-sm text-[var(--text-muted)]", children: "\u2014" })
     ] })
   ] });
   if (!anchorRef) {
     return /* @__PURE__ */ jsx(
       "div",
       {
+        ...rest,
+        style,
         ref: panelRef,
         className: cn(
-          "absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          "absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
           "[&>ul]:max-h-64",
           className
         ),
@@ -97,10 +140,11 @@ function DropdownPanel({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ...rest,
         ref: panelRef,
-        style: { position: "fixed", top: anchored.top, left, width, maxHeight: anchored.maxHeight },
+        style: { ...style, position: "fixed", top: anchored.top, left, width, maxHeight: anchored.maxHeight },
         className: cn(
-          "z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          "z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
           // The list, not the panel, is what scrolls: the search header has to stay put
           // while the options move under it.
           "[&>ul]:min-h-0 [&>ul]:flex-1",

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n}: { backCloses?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      const target = e.target as Node;\n      const inside =\n        (wrapperRef.current?.contains(target) ?? false) ||\n        (panelRef.current?.contains(target) ?? false);\n      if (!inside) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));\n  return { open, setOpen, wrapperRef, panelRef };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n}: {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5\">\n      <Search className=\"size-4 text-slate-400 dark:text-slate-500\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        placeholder={placeholder}\n        className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500\"\n      />\n    </div>\n  );\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `right-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"right\",\n  children,\n}: {\n  header?: ReactNode;\n  empty?: boolean;\n  className?: string;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting. */\n  align?: \"left\" | \"right\";\n  children: ReactNode;\n}) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul className=\"overflow-y-auto py-1\">\n        {children}\n        {empty && <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">—</li>}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  const wanted = align === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      ref={panelRef}\n      style={{ position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        className=\"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting. */\n  align?: \"left\" | \"right\";\n  children: ReactNode;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `right-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"right\",\n  children,\n  style,\n  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  const wanted = align === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so those five values are the panel's own.\n      style={{ ...style, position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

package/dist/components/entity-combobox.d.ts

@@ -1,10 +1,12 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ComboOption } from './combobox-core.js';
 import '../hooks/use-anchored-rect.js';
 import '../hooks/use-anchored-panel.js';
 
-interface EntityComboboxProps<V extends string | number> {
+/** `onChange` is the kit's — "a selection was made", carrying values — rather
+ *  than the div's form event, so the DOM's spelling of it is omitted. */
+interface EntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /** Selected id, or null/undefined when nothing is selected. */
     value: V | null | undefined;
     /** Selecting an option emits its value; the clear button emits `null`. */
@@ -33,7 +35,6 @@ interface EntityComboboxProps<V extends string | number> {
     /** When set, a "create" row appears for a non-empty query with no exact match. */
     onCreate?: (query: string) => void;
     createLabel?: (query: string) => string;
-    className?: string;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
 }
@@ -44,6 +45,6 @@ interface EntityComboboxProps<V extends string | number> {
  * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking
  * several entities use {@link MultiEntityCombobox}.
  */
-declare function EntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, }: EntityComboboxProps<V>): react.JSX.Element;
+declare function EntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, "aria-label": ariaLabel, ...rest }: EntityComboboxProps<V>): react.JSX.Element;
 
 export { ComboOption, EntityCombobox, type EntityComboboxProps };