@eifi1/ui-kit 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/dist/components/amount-input.d.ts +17 -1
- package/dist/components/amount-input.js +46 -11
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/bulk-action-bar.d.ts +10 -2
- package/dist/components/bulk-action-bar.js.map +1 -1
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/calculator.d.ts +1 -1
- package/dist/components/chart.js +14 -8
- package/dist/components/chart.js.map +1 -1
- package/dist/components/chip.js +20 -15
- package/dist/components/chip.js.map +1 -1
- package/dist/components/combobox-core.d.ts +3 -1
- package/dist/components/combobox-core.js +16 -5
- package/dist/components/combobox-core.js.map +1 -1
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/copy-button.d.ts +1 -1
- package/dist/components/data-table-filter-popover.js +8 -1
- package/dist/components/data-table-filter-popover.js.map +1 -1
- package/dist/components/data-table.js +28 -20
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/entity-combobox.js +22 -17
- package/dist/components/entity-combobox.js.map +1 -1
- package/dist/components/error-boundary.d.ts +202 -13
- package/dist/components/error-boundary.js +211 -20
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/field-sync.js +90 -83
- package/dist/components/field-sync.js.map +1 -1
- package/dist/components/file-button.d.ts +1 -1
- package/dist/components/file-dropzone.d.ts +1 -1
- package/dist/components/form-actions.d.ts +1 -1
- package/dist/components/full-bleed-dialog.js +4 -0
- package/dist/components/full-bleed-dialog.js.map +1 -1
- package/dist/components/hover-menu.js +64 -56
- package/dist/components/hover-menu.js.map +1 -1
- package/dist/components/list.d.ts +14 -2
- package/dist/components/list.js +3 -1
- package/dist/components/list.js.map +1 -1
- package/dist/components/modal.js.map +1 -1
- package/dist/components/multi-entity-combobox.js +23 -17
- package/dist/components/multi-entity-combobox.js.map +1 -1
- package/dist/components/number-field.d.ts +1 -1
- package/dist/components/number-input.d.ts +1 -1
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +6 -2
- package/dist/components/numpad-sheet.js +3 -2
- package/dist/components/numpad-sheet.js.map +1 -1
- package/dist/components/page-header.d.ts +35 -6
- package/dist/components/page-header.js +7 -1
- package/dist/components/page-header.js.map +1 -1
- package/dist/components/picker-sheet.js +3 -0
- package/dist/components/picker-sheet.js.map +1 -1
- package/dist/components/popover.js +3 -0
- package/dist/components/popover.js.map +1 -1
- package/dist/components/settings-fields.d.ts +1 -1
- package/dist/components/signed-amount.d.ts +2 -1
- package/dist/components/signed-amount.js +1 -1
- package/dist/components/signed-amount.js.map +1 -1
- package/dist/components/stat-tile.js +1 -1
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/swipeable-row.js +4 -3
- package/dist/components/swipeable-row.js.map +1 -1
- package/dist/components/text-link.d.ts +73 -11
- package/dist/components/text-link.js +45 -10
- package/dist/components/text-link.js.map +1 -1
- package/dist/components/text.d.ts +26 -2
- package/dist/components/text.js +16 -2
- package/dist/components/text.js.map +1 -1
- package/dist/components/time-input.d.ts +1 -1
- package/dist/components/toggle-group.d.ts +22 -0
- package/dist/components/toggle-group.js +8 -8
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle-legend.d.ts +17 -0
- package/dist/components/toggle-legend.js +6 -2
- package/dist/components/toggle-legend.js.map +1 -1
- package/dist/components/tooltip.d.ts +51 -1
- package/dist/components/tooltip.js +59 -35
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/ui.d.ts +1 -1
- package/dist/components/ui.js +166 -28
- package/dist/components/ui.js.map +1 -1
- package/dist/feedback/feedback-attachment.js +4 -6
- package/dist/feedback/feedback-attachment.js.map +1 -1
- package/dist/feedback/feedback-dialog.js +5 -3
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-inbox.js +86 -75
- package/dist/feedback/feedback-inbox.js.map +1 -1
- package/dist/feedback/feedback-thread.d.ts +43 -3
- package/dist/feedback/feedback-thread.js +53 -26
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/feedback.d.ts +1 -1
- package/dist/hooks/use-file-drop.d.ts +1 -1
- package/dist/i18n/defaults.d.ts +1 -1
- package/dist/i18n/kit-labels.d.ts +1 -1
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/de-CH-informal.d.ts +1 -1
- package/dist/i18n/locales/de-CH.d.ts +1 -1
- package/dist/i18n/locales/de-informal.d.ts +1 -1
- package/dist/i18n/locales/de.d.ts +1 -1
- package/dist/i18n/locales/de.js +9 -1
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +1 -1
- package/dist/i18n/locales/es.js +9 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +1 -1
- package/dist/i18n/locales/fr.js +9 -1
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +1 -1
- package/dist/i18n/locales/hu.js +9 -1
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +1 -1
- package/dist/i18n/locales/it.js +9 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +1 -1
- package/dist/i18n/locales/zh.js +9 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/{kit-labels-v3biUF1L.d.ts → kit-labels-Mz8zZHIF.d.ts} +102 -3
- package/dist/lib/format.d.ts +23 -5
- package/dist/lib/format.js +3 -1
- package/dist/lib/format.js.map +1 -1
- package/dist/rhf/fields.d.ts +57 -15
- package/dist/rhf/fields.js +41 -11
- package/dist/rhf/fields.js.map +1 -1
- package/dist/rhf/form.d.ts +1 -1
- package/dist/rhf.d.ts +2 -2
- package/dist/rhf.js.map +1 -1
- package/dist/search/command-palette.js +20 -14
- package/dist/search/command-palette.js.map +1 -1
- package/dist/shell/app-shell.d.ts +1 -1
- package/dist/shell/app-shell.js +62 -54
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/top-bar-brand.d.ts +1 -1
- package/dist/shell/topbar-action-menu.d.ts +9 -3
- package/dist/shell/topbar-action-menu.js +2 -1
- package/dist/shell/topbar-action-menu.js.map +1 -1
- package/dist/shell.d.ts +1 -1
- package/dist/tour/tour.js +10 -4
- package/dist/tour/tour.js.map +1 -1
- package/dist/wizard/stepper-nav.d.ts +1 -1
- package/dist/wizard/use-wizard.js +4 -2
- package/dist/wizard/use-wizard.js.map +1 -1
- package/dist/wizard/wizard-step.d.ts +11 -1
- package/dist/wizard/wizard-step.js +24 -6
- package/dist/wizard/wizard-step.js.map +1 -1
- package/dist/wizard.d.ts +1 -1
- package/package.json +6 -6
- package/src/components/amount-input.tsx +97 -10
- package/src/components/bulk-action-bar.tsx +16 -3
- package/src/components/chart.tsx +19 -8
- package/src/components/chip.tsx +6 -0
- package/src/components/combobox-core.tsx +28 -9
- package/src/components/combobox.tsx +2 -0
- package/src/components/data-table-filter-popover.tsx +13 -5
- package/src/components/data-table.tsx +6 -0
- package/src/components/entity-combobox.tsx +7 -4
- package/src/components/error-boundary.tsx +453 -29
- package/src/components/field-sync.tsx +48 -40
- package/src/components/full-bleed-dialog.tsx +4 -0
- package/src/components/hover-menu.tsx +26 -17
- package/src/components/list.tsx +17 -3
- package/src/components/modal.tsx +4 -0
- package/src/components/multi-entity-combobox.tsx +8 -4
- package/src/components/number-input.tsx +1 -0
- package/src/components/numpad-sheet.tsx +6 -1
- package/src/components/page-header.tsx +42 -5
- package/src/components/picker-sheet.tsx +3 -0
- package/src/components/popover.tsx +3 -0
- package/src/components/signed-amount.tsx +12 -3
- package/src/components/stat-tile.tsx +3 -1
- package/src/components/swipeable-row.tsx +7 -7
- package/src/components/text-link.tsx +126 -18
- package/src/components/text.tsx +46 -2
- package/src/components/toggle-group.tsx +35 -10
- package/src/components/toggle-legend.tsx +22 -1
- package/src/components/tooltip.tsx +79 -8
- package/src/components/ui.tsx +307 -39
- package/src/feedback/feedback-attachment.tsx +10 -7
- package/src/feedback/feedback-dialog.tsx +7 -4
- package/src/feedback/feedback-inbox.tsx +7 -0
- package/src/feedback/feedback-thread.tsx +109 -33
- package/src/i18n/kit-labels.tsx +16 -0
- package/src/i18n/locales/de.ts +8 -0
- package/src/i18n/locales/es.ts +8 -0
- package/src/i18n/locales/fr.ts +8 -0
- package/src/i18n/locales/hu.ts +8 -0
- package/src/i18n/locales/it.ts +8 -0
- package/src/i18n/locales/zh.ts +8 -0
- package/src/lib/format.ts +29 -6
- package/src/rhf/fields.tsx +97 -16
- package/src/rhf.ts +1 -1
- package/src/search/command-palette.tsx +29 -19
- package/src/shell/app-shell.tsx +6 -1
- package/src/shell/topbar-action-menu.tsx +11 -4
- package/src/tour/tour.tsx +16 -5
- package/src/wizard/use-wizard.ts +8 -4
- package/src/wizard/wizard-step.tsx +38 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n ComponentPropsWithoutRef,\n Dispatch,\n KeyboardEvent as ReactKeyboardEvent,\n ReactNode,\n RefObject,\n SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from \"./ui\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\n\nexport interface ComboOption<V extends string | number> {\n value: V;\n label: string;\n sublabel?: string;\n icon?: ReactNode;\n /**\n * Section this option belongs to. Where a consumer renders it as a heading with the\n * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n * grouping, not decoration: the name appears once per section rather than trailing\n * every row in small grey type, which is barely legible on a phone (feedback #136).\n * Searchable like `sublabel`.\n */\n group?: string;\n /**\n * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n * the information — a write-locked result, an account that is closed — where\n * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n * hover tooltip is the one explanation a phone cannot show.\n *\n * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n * chosen disabled option stays chosen — the row only refuses to be toggled.\n */\n disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n rows: readonly { disabled?: boolean }[],\n from: number,\n dir: 1 | -1,\n): number {\n for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n if (!rows[i].disabled) return i;\n }\n return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n * before it, else `-1`. For a highlight that starts on a fixed index (the panel\n * pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n if (i < 0 || i >= rows.length) return -1;\n if (!rows[i].disabled) return i;\n const after = stepEnabled(rows, i, 1);\n if (after !== i) return after;\n const before = stepEnabled(rows, i, -1);\n return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n * kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n htmlFor,\n className,\n children,\n ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n return (\n <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n {children}\n </label>\n );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n /** Already-loaded options (client-side filtered unless `filter` is false), also\n * used to resolve labels. */\n options?: ComboOption<V>[];\n /** Async option source, debounced and race-safe; stale responses are ignored,\n * and a rejection is caught and reported as `failed`. */\n loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n /** External loading flag, OR-ed with the internal async state. */\n loading?: boolean;\n /**\n * Narrow `options` by the query (label/sublabel substring). Default `true`.\n *\n * `false` shows `options` exactly as given, in the given order — for a list the\n * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n * second, client-side substring filter could only get wrong: a provider that\n * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n * throw that row away.\n */\n filter?: boolean;\n /**\n * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n * called. Default `0` — the pickers list everything on open. Set it for a source\n * that is costly or rate-limited: one letter against a geocoder matches half a\n * continent, and a request per opened panel is a request nobody asked for.\n */\n minChars?: number;\n /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n results: ComboOption<V>[];\n busy: boolean;\n /** The last lookup for this query REJECTED. The rows are emptied with it: results\n * from an earlier query under a failed one would read as the answer to it. */\n failed: boolean;\n /** The query is shorter than `minChars`, so nothing was asked. */\n tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n options,\n loadOptions,\n loading,\n filter = true,\n minChars = 0,\n debounceMs = 150,\n query,\n active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n const isAsync = typeof loadOptions === \"function\";\n const tooShort = query.trim().length < minChars;\n const [settled, setSettled] = useState<{\n query: string | null;\n results: ComboOption<V>[];\n failed: boolean;\n }>({ query: null, results: [], failed: false });\n const loadRef = useRef(loadOptions);\n useEffect(() => {\n loadRef.current = loadOptions;\n });\n const reqId = useRef(0);\n\n useEffect(() => {\n // Bumped even when nothing is asked, so a request still in flight from a longer\n // query cannot land after the user has deleted back below `minChars`.\n const id = ++reqId.current;\n if (!active || !isAsync || tooShort) return;\n const t = setTimeout(\n async () => {\n try {\n const r = await loadRef.current!(query);\n if (reqId.current === id) setSettled({ query, results: r, failed: false });\n } catch {\n // The one path the old `try/finally` had no answer for: the list kept the\n // previous query's rows and said nothing (Keksdose proposal §2).\n if (reqId.current === id) setSettled({ query, results: [], failed: true });\n }\n },\n query ? debounceMs : 0,\n );\n return () => clearTimeout(t);\n }, [query, active, isAsync, tooShort, debounceMs]);\n\n const clientResults = useMemo(() => {\n if (isAsync) return [];\n const src = options ?? [];\n const q = query.trim().toLowerCase();\n if (!filter || !q) return src;\n return src.filter(\n (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n );\n }, [isAsync, options, query, filter]);\n\n const pending = isAsync && active && !tooShort && settled.query !== query;\n const failed = isAsync && !tooShort && settled.failed;\n return {\n results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n busy: Boolean(loading) || pending,\n failed: failed && !pending,\n tooShort,\n };\n}\n\nexport type ComboboxCoreOptions<V extends string | number> = OptionSourceOptions<V>;\n\nexport interface ComboboxCore<V extends string | number> {\n triggerRef: RefObject<HTMLButtonElement | null>;\n panelRef: RefObject<HTMLDivElement | null>;\n inputRef: RefObject<HTMLInputElement | null>;\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n query: string;\n setQuery: Dispatch<SetStateAction<string>>;\n active: number;\n setActive: Dispatch<SetStateAction<number>>;\n results: ComboOption<V>[];\n busy: boolean;\n /** See {@link OptionSource}. */\n failed: boolean;\n tooShort: boolean;\n minChars: number;\n rect: AnchorRect | null;\n /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n placement: AnchoredPanel;\n cacheRef: RefObject<Map<V, ComboOption<V>>>;\n resolve: (v: V) => ComboOption<V> | null;\n /** Close and hand focus back to the trigger — the keyboard paths only. See\n * {@link useDropdown} for why a pointer dismissal must not do this. */\n closeToTrigger: () => void;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n options,\n minChars = 0,\n ...source\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [active, setActive] = useState(0);\n\n const close = () => setOpen(false);\n // Escape unmounts the panel the user is typing in; without this the browser drops\n // focus on <body>, so the caret disappears and the next Tab restarts at the top of\n // the page. A pointer dismissal deliberately does NOT do this — the press has\n // already decided where focus belongs.\n const closeToTrigger = () => {\n setOpen(false);\n triggerRef.current?.focus();\n };\n // Placement, not just the anchor rect: the panel has to dodge the on-screen\n // keyboard its own search box summons (feedback #135).\n const placement = useAnchoredPanel(triggerRef, open);\n const rect = placement.rect;\n // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n // portalled to <body> and carrying its own ways out — the close X, Escape, and\n // Back through `useOverlayHistory` — so there is no outside left to press.\n //\n // Leaving the listener on there was not merely redundant, it was the bug:\n // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n // press inside it answered \"outside\". While `useOutsideClick` listened for\n // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n // stops `mousedown` for exactly this reason, but that guard was written for\n // `useDropdown`'s listener and never covered this hook.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n useEscapeKey(closeToTrigger, open);\n\n // Reset the query + focus the search box each time the panel opens.\n useEffect(() => {\n if (!open) return;\n setQuery(\"\");\n const id = requestAnimationFrame(() => inputRef.current?.focus());\n return () => cancelAnimationFrame(id);\n }, [open]);\n\n // Debounced, race-safe async search (only when loadOptions is provided) or the\n // client-side filter — see {@link useOptionSource}.\n const { results, busy, failed, tooShort } = useOptionSource<V>({\n ...source,\n options,\n minChars,\n query,\n active: open,\n });\n\n // Accumulate every option we've seen so a selected value can render its label\n // even after the async list has moved on to other query results.\n const cacheRef = useRef(new Map<V, ComboOption<V>>());\n useEffect(() => {\n for (const o of options ?? []) cacheRef.current.set(o.value, o);\n for (const o of results) cacheRef.current.set(o.value, o);\n }, [options, results]);\n const resolve = (v: V): ComboOption<V> | null =>\n options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n\n // Reset the highlighted row whenever the visible set changes.\n useEffect(() => {\n setActive(0);\n }, [query, open]);\n\n return {\n triggerRef,\n panelRef,\n inputRef,\n open,\n setOpen,\n query,\n setQuery,\n active,\n setActive,\n results,\n busy,\n failed,\n tooShort,\n minChars,\n rect,\n placement,\n cacheRef,\n resolve,\n closeToTrigger,\n };\n}\n\n/** The error line under a field — the same type as `ui.tsx`'s (module-private) one,\n * so a combobox's message is indistinguishable from an Input's. */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n/**\n * {@link Input}'s `error` for the combobox family: the message under the field, its\n * id on the control's `aria-describedby` (merged, never replacing — the hint the\n * caller pointed at stays first), and `invalid` implied. ui.tsx's `useFieldError` is\n * module-private, so this restates it on the same rules `choice-parts.ts` does.\n */\nexport function useComboboxFieldError(\n error: ReactNode,\n invalid: boolean | undefined,\n describedBy?: string,\n) {\n const errorId = useId();\n const has = hasMessage(error);\n return {\n isInvalid: Boolean(invalid) || has,\n describedBy: mergeDescribedBy(describedBy, has && errorId),\n errorEl: has ? (\n <p id={errorId} className={FIELD_ERROR_CLASS}>\n {error}\n </p>\n ) : null,\n };\n}\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n * {@link InlineEntityCombobox} and {@link Autocomplete}. */\nexport const SUGGESTION_LIST_CLASS =\n \"max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg\";\n\nexport const suggestionRowClass = (isActive: boolean) =>\n cn(\n \"block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]\",\n isActive ? \"bg-[var(--bg-active)]\" : \"hover:bg-[var(--bg-hover)]\",\n );\n\n/**\n * Keep the option the keyboard is on inside the visible part of the list.\n *\n * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole\n * point of it — and the cost is that the browser scrolls nothing on its own. In a\n * panel capped at a few hundred pixels over an account list two hundred long, Down\n * walked the highlight straight out of the box and the list sat still.\n *\n * Optional-called because jsdom does not implement `scrollIntoView`: three consumers\n * run this component in their own suites, and a picker that throws there is a worse\n * trade than a list that does not scroll in a test.\n */\nexport function useActiveOptionScroll(activeId: string | undefined): void {\n useEffect(() => {\n if (!activeId) return;\n document.getElementById(activeId)?.scrollIntoView?.({ block: \"nearest\" });\n }, [activeId]);\n}\n\nexport interface ComboboxPanelProps<V extends string | number>\n extends ComponentPropsWithoutRef<\"div\"> {\n core: ComboboxCore<V>;\n /** What the trigger's `aria-controls` names. Owned by the component that renders\n * the trigger, not by the core: one id has to reach both, and only one of them\n * can be the origin. */\n listboxId: string;\n /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n searchPlaceholder?: string;\n /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n emptyLabel?: string;\n multi?: boolean;\n isSelected: (v: V) => boolean;\n onChoose: (o: ComboOption<V>) => void;\n showCreate: boolean;\n onCreate: () => void;\n createContent: ReactNode;\n /** What the sheet calls itself on a phone — the field's label. Ignored on\n * desktop, where the panel sits under the field that already says it. */\n sheetTitle?: ReactNode;\n closeLabel?: string;\n /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n loadErrorLabel?: string;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n *\n * ## The ARIA, which is `CommandPalette`'s\n *\n * This rendered a `role=\"listbox\"` of `role=\"option\"` rows and stopped there, so a\n * reader was handed a text box and silence: the highlight the arrow keys move lived\n * only in a background colour, and nothing tied the box being typed in to the list\n * being filtered. `CommandPalette` has had the whole model since it was written —\n * `aria-controls` from the field to the list, `aria-activedescendant` naming the row\n * the keyboard is on — and it was the only thing in the package that did.\n *\n * Two distinct states, deliberately not conflated:\n * - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.\n * - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected\n * would tell a reader that the row they are merely passing over is the answer.\n *\n * `role=\"option\"` sits on the `<button>`, not on the `<li>` around it, for the same\n * reason it does in `CommandPalette`: an option may not contain a separately\n * focusable control, and the button is the thing a pointer presses. The rows are\n * `tabIndex={-1}` because focus never leaves the search box — that is what\n * `aria-activedescendant` is FOR.\n */\nexport function ComboboxPanel<V extends string | number>({\n core,\n listboxId,\n searchPlaceholder,\n emptyLabel,\n multi,\n isSelected,\n onChoose,\n showCreate,\n onCreate,\n createContent,\n sheetTitle,\n closeLabel,\n loadErrorLabel,\n className,\n style,\n ...rest\n}: ComboboxPanelProps<V>) {\n const {\n rect,\n placement,\n panelRef,\n inputRef,\n query,\n setQuery,\n results,\n busy,\n failed,\n tooShort,\n active,\n setActive,\n closeToTrigger,\n } = core;\n // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n // Same core, same results, same handlers — only the container differs, so the\n // two presentations cannot drift in what they offer.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n // Every row the keyboard can land on, the create row included (never disabled).\n const rows: readonly { disabled?: boolean }[] = showCreate ? [...results, {}] : results;\n const rowCount = rows.length;\n const optionId = (index: number) => `${listboxId}-option-${index}`;\n // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n // async list turned out to hold.\n const current = settleEnabled(rows, active);\n const activeId = current >= 0 ? optionId(current) : undefined;\n useActiveOptionScroll(activeId);\n // The consumers resolve their own props against the provider already; this is\n // for the loading row, which no consumer names, and for a caller that renders the\n // panel directly and leaves the two optional strings out.\n const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n // direction is read off the trigger and put back on the panel below.\n const dir = useAnchorDir(core.triggerRef, core.open);\n\n // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`\n // registers it on the document, so it answers wherever focus has ended up.\n const onKeyDown = (e: ReactKeyboardEvent) => {\n // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n // goes to the row after the one already shown as highlighted.\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActive(stepEnabled(rows, current, 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n } else if (e.key === \"Home\") {\n e.preventDefault();\n setActive(stepEnabled(rows, -1, 1));\n } else if (e.key === \"End\") {\n e.preventDefault();\n setActive(stepEnabled(rows, rowCount, -1));\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (current < 0) return;\n if (current < results.length) onChoose(results[current]);\n else if (showCreate) onCreate();\n } else if (e.key === \"Tab\") {\n // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n // here to whatever follows the portal — i.e. off the end of the document. The\n // trade is one extra Tab (trigger, then onward) against never stranding focus\n // at the bottom of the page.\n e.preventDefault();\n closeToTrigger();\n }\n };\n\n // What the list holds, said in ONE place that is both on screen and a polite\n // live region. Focus stays in the search box, so the list changing under it was\n // silent — a reader typed and heard nothing back, and a failed lookup was the same\n // silence as a slow one. Outside the listbox, which may own only options.\n //\n // Three different empties, and only one of them is \"nothing matched\": a lookup\n // that failed must not claim there is nothing to find, and a query under\n // `minChars` was never asked. With rows showing, the count is for the reader only.\n const message: ReactNode =\n busy && results.length === 0 ? (\n // The ellipsis is the picture; the words are for a reader, who otherwise met\n // an empty-looking list with a lone \"…\" in it — or, in most readers, nothing\n // at all, since punctuation alone is skipped.\n <>\n <span aria-hidden>…</span>\n <span className=\"sr-only\">{labels.loading}</span>\n </>\n ) : busy ? (\n // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n // a new query, or a caller's `loading` while it reloads — looked exactly like a\n // finished list: rows that were about to be replaced, with nothing saying so.\n // A line of its own under the rows, in words, so it reads without the spinner.\n <span className=\"flex items-center gap-2\">\n <Spinner label={null} className=\"size-3.5 border\" />\n {labels.loading}\n </span>\n ) : results.length === 0 && !showCreate ? (\n failed ? (\n (loadErrorLabel ?? labels.loadError)\n ) : tooShort ? (\n labels.minChars(core.minChars)\n ) : (\n (emptyLabel ?? labels.noResults)\n )\n ) : null;\n // `relative` so the sr-only text has a local containing block (see\n // sr-only-containment.test).\n const announcement = (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={cn(\n \"relative\",\n message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n failed ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n )}\n >\n {message ??\n (results.length > 0 && (\n <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n ))}\n </div>\n );\n\n if (!core.open || typeof document === \"undefined\") return null;\n\n const list = (\n <ul\n id={listboxId}\n role=\"listbox\"\n aria-multiselectable={multi}\n // The rows are provisional while a lookup is in flight — whether or not the\n // previous query's are still showing.\n aria-busy={busy || undefined}\n // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n // Tooltip in a row then portals out in a test exactly as it does in the\n // browser, instead of joining the option's accessible name (keksdose E8).\n {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n >\n {results.map((o, i) => {\n const selected = isSelected(o.value);\n // One heading per group rather than a grey suffix on every row (#136), and\n // the thing the native <select>'s <optgroup> used to give the account\n // picker for free (live #200). `results` keeps its source order, so a\n // boundary is simply \"different from the row above\".\n const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n return (\n // Keyed by group AND value: an option may deliberately appear twice —\n // Keksdose repeats recently-used categories in a \"Recent\" group at the\n // top (live #203) — and a bare value key would collide.\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {startsGroup && (\n <li\n role=\"presentation\"\n className={cn(\n \"font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n )}\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n role=\"option\"\n aria-selected={selected}\n aria-disabled={o.disabled || undefined}\n tabIndex={-1}\n onMouseDown={(e) => {\n e.preventDefault();\n if (!o.disabled) onChoose(o);\n }}\n onMouseEnter={() => {\n if (!o.disabled) setActive(i);\n }}\n className={cn(\n isPhone\n ? SHEET_ROW_CLASS\n : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n o.disabled\n ? DISABLED_ROW_CLASS\n : i === current && !isPhone\n ? \"bg-[var(--bg-active)]\"\n : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n o.disabled && isPhone && DISABLED_ROW_CLASS,\n )}\n >\n {multi && (\n <span\n // The checkbox is a PICTURE of `aria-selected` above, so a reader\n // that met both would be told twice.\n aria-hidden\n className={cn(\n \"flex size-4 shrink-0 items-center justify-center rounded border\",\n selected\n ? \"border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n )}\n >\n {selected && <Check className=\"size-3\" />}\n </span>\n )}\n {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n <span className=\"min-w-0 flex-1\">\n <span className=\"block truncate text-[var(--text-primary)]\">{o.label}</span>\n {o.sublabel && (\n <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n {o.sublabel}\n </span>\n )}\n </span>\n {!multi && selected && <Check className=\"size-4 shrink-0 text-[var(--brand)]\" />}\n </button>\n </li>\n </Fragment>\n );\n })}\n {showCreate && (\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(results.length)}\n role=\"option\"\n // Never chosen — it is an action, and it disappears the moment it has\n // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n // job to say.\n aria-selected={false}\n tabIndex={-1}\n onMouseDown={(e) => {\n e.preventDefault();\n onCreate();\n }}\n onMouseEnter={() => setActive(results.length)}\n className={cn(\n isPhone\n ? SHEET_ROW_CLASS\n : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n \"text-[var(--text-secondary)]\",\n current === results.length && !isPhone\n ? \"bg-[var(--bg-active)]\"\n : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n )}\n >\n <Plus className=\"size-4 shrink-0\" />\n <span className=\"truncate\">{createContent}</span>\n </button>\n </li>\n )}\n </ul>\n );\n\n if (isPhone) {\n return (\n <PickerSheet\n // First, so the sheet's own props below win: `rest` is typed as div\n // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n // its heading — one name, two meanings, and the sheet's is the one the caller\n // asked for.\n {...rest}\n className={className}\n style={style}\n open\n onClose={() => core.setOpen(false)}\n title={sheetTitle}\n query={query}\n onQueryChange={setQuery}\n searchPlaceholder={searchPlaceholder ?? labels.search}\n inputRef={inputRef}\n closeLabel={closeLabel}\n >\n <div onKeyDown={onKeyDown} className=\"relative\">\n {list}\n {announcement}\n </div>\n </PickerSheet>\n );\n }\n\n if (!rect) return null;\n // The panel hangs from the trigger's START edge: its left in a left-to-right form,\n // its right in a right-to-left one (it may be wider than the trigger, `minWidth`).\n // `clientWidth` rather than `innerWidth`, because a fixed box's `right` is measured\n // from the edge of the viewport inside any scrollbar.\n const inline =\n dir === \"rtl\"\n ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right }\n : { left: rect.left };\n\n return createPortal(\n <div\n // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/\n // Enter/Tab) and the placement is measured rather than chosen, so neither is a\n // caller's to replace by accident — while a `data-*` anchor or an\n // `aria-describedby` has nothing to collide with.\n {...rest}\n ref={panelRef}\n dir={dir}\n onKeyDown={onKeyDown}\n // `placement` keeps the panel inside the region actually on screen: on a phone\n // the search box below pulls up the keyboard, and a panel pinned under a\n // low trigger would otherwise sit entirely behind it (feedback #135).\n style={{\n ...style,\n position: \"fixed\",\n top: placement.top,\n ...inline,\n width: rect.width,\n minWidth: 220,\n maxHeight: placement.maxHeight,\n }}\n className={cn(\n \"z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n className,\n )}\n >\n <DropdownSearchHeader\n query={query}\n onQueryChange={setQuery}\n inputRef={inputRef}\n placeholder={searchPlaceholder ?? labels.search}\n // Focus is in this box while the list is up, so this is what has to name the\n // list and the row the arrows are on.\n listboxId={listboxId}\n activeId={activeId}\n />\n {/* One list, two containers: the desktop panel and the phone sheet render\n the same rows through the same handlers (live #200). */}\n {list}\n {announcement}\n </div>,\n document.body,\n );\n}\n"],"mappings":"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","names":["Fragment"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n ComponentPropsWithoutRef,\n Dispatch,\n KeyboardEvent as ReactKeyboardEvent,\n ReactNode,\n RefObject,\n SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from \"./ui\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\n\nexport interface ComboOption<V extends string | number> {\n value: V;\n label: string;\n sublabel?: string;\n icon?: ReactNode;\n /**\n * Section this option belongs to. Where a consumer renders it as a heading with the\n * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n * grouping, not decoration: the name appears once per section rather than trailing\n * every row in small grey type, which is barely legible on a phone (feedback #136).\n * Searchable like `sublabel`.\n */\n group?: string;\n /**\n * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n * the information — a write-locked result, an account that is closed — where\n * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n * hover tooltip is the one explanation a phone cannot show.\n *\n * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n * chosen disabled option stays chosen — the row only refuses to be toggled.\n */\n disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n rows: readonly { disabled?: boolean }[],\n from: number,\n dir: 1 | -1,\n): number {\n for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n if (!rows[i].disabled) return i;\n }\n return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n * before it, else `-1`. For a highlight that starts on a fixed index (the panel\n * pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n if (i < 0 || i >= rows.length) return -1;\n if (!rows[i].disabled) return i;\n const after = stepEnabled(rows, i, 1);\n if (after !== i) return after;\n const before = stepEnabled(rows, i, -1);\n return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n * kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n htmlFor,\n className,\n children,\n ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n return (\n <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n {children}\n </label>\n );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n /** Already-loaded options (client-side filtered unless `filter` is false), also\n * used to resolve labels. */\n options?: ComboOption<V>[];\n /** Async option source, debounced and race-safe; stale responses are ignored,\n * and a rejection is caught and reported as `failed`. */\n loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n /** External loading flag, OR-ed with the internal async state. */\n loading?: boolean;\n /**\n * Narrow `options` by the query (label/sublabel substring). Default `true`.\n *\n * `false` shows `options` exactly as given, in the given order — for a list the\n * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n * second, client-side substring filter could only get wrong: a provider that\n * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n * throw that row away.\n */\n filter?: boolean;\n /**\n * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n * called. Default `0` — the pickers list everything on open. Set it for a source\n * that is costly or rate-limited: one letter against a geocoder matches half a\n * continent, and a request per opened panel is a request nobody asked for.\n */\n minChars?: number;\n /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n results: ComboOption<V>[];\n busy: boolean;\n /** The last lookup for this query REJECTED. The rows are emptied with it: results\n * from an earlier query under a failed one would read as the answer to it. */\n failed: boolean;\n /** The query is shorter than `minChars`, so nothing was asked. */\n tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n options,\n loadOptions,\n loading,\n filter = true,\n minChars = 0,\n debounceMs = 150,\n query,\n active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n const isAsync = typeof loadOptions === \"function\";\n const tooShort = query.trim().length < minChars;\n const [settled, setSettled] = useState<{\n query: string | null;\n results: ComboOption<V>[];\n failed: boolean;\n }>({ query: null, results: [], failed: false });\n const loadRef = useRef(loadOptions);\n useEffect(() => {\n loadRef.current = loadOptions;\n });\n const reqId = useRef(0);\n\n useEffect(() => {\n // Bumped even when nothing is asked, so a request still in flight from a longer\n // query cannot land after the user has deleted back below `minChars`.\n const id = ++reqId.current;\n if (!active || !isAsync || tooShort) return;\n const t = setTimeout(\n async () => {\n try {\n const r = await loadRef.current!(query);\n if (reqId.current === id) setSettled({ query, results: r, failed: false });\n } catch {\n // The one path the old `try/finally` had no answer for: the list kept the\n // previous query's rows and said nothing (Keksdose proposal §2).\n if (reqId.current === id) setSettled({ query, results: [], failed: true });\n }\n },\n query ? debounceMs : 0,\n );\n return () => clearTimeout(t);\n }, [query, active, isAsync, tooShort, debounceMs]);\n\n const clientResults = useMemo(() => {\n if (isAsync) return [];\n const src = options ?? [];\n const q = query.trim().toLowerCase();\n if (!filter || !q) return src;\n return src.filter(\n (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n );\n }, [isAsync, options, query, filter]);\n\n const pending = isAsync && active && !tooShort && settled.query !== query;\n const failed = isAsync && !tooShort && settled.failed;\n return {\n results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n busy: Boolean(loading) || pending,\n failed: failed && !pending,\n tooShort,\n };\n}\n\nexport type ComboboxCoreOptions<V extends string | number> = OptionSourceOptions<V>;\n\nexport interface ComboboxCore<V extends string | number> {\n triggerRef: RefObject<HTMLButtonElement | null>;\n panelRef: RefObject<HTMLDivElement | null>;\n inputRef: RefObject<HTMLInputElement | null>;\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n query: string;\n setQuery: Dispatch<SetStateAction<string>>;\n active: number;\n setActive: Dispatch<SetStateAction<number>>;\n results: ComboOption<V>[];\n busy: boolean;\n /** See {@link OptionSource}. */\n failed: boolean;\n tooShort: boolean;\n minChars: number;\n rect: AnchorRect | null;\n /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n placement: AnchoredPanel;\n /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a\n * value the caller just chose after the result list has moved on. */\n rememberOption: (o: ComboOption<V>) => void;\n resolve: (v: V) => ComboOption<V> | null;\n /** Close and hand focus back to the trigger — the keyboard paths only. See\n * {@link useDropdown} for why a pointer dismissal must not do this. */\n closeToTrigger: () => void;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n options,\n minChars = 0,\n ...source\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [active, setActive] = useState(0);\n\n const close = () => setOpen(false);\n // Escape unmounts the panel the user is typing in; without this the browser drops\n // focus on <body>, so the caret disappears and the next Tab restarts at the top of\n // the page. A pointer dismissal deliberately does NOT do this — the press has\n // already decided where focus belongs.\n const closeToTrigger = () => {\n setOpen(false);\n triggerRef.current?.focus();\n };\n // Placement, not just the anchor rect: the panel has to dodge the on-screen\n // keyboard its own search box summons (feedback #135).\n const placement = useAnchoredPanel(triggerRef, open);\n const rect = placement.rect;\n // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n // portalled to <body> and carrying its own ways out — the close X, Escape, and\n // Back through `useOverlayHistory` — so there is no outside left to press.\n //\n // Leaving the listener on there was not merely redundant, it was the bug:\n // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n // press inside it answered \"outside\". While `useOutsideClick` listened for\n // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n // stops `mousedown` for exactly this reason, but that guard was written for\n // `useDropdown`'s listener and never covered this hook.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n useEscapeKey(closeToTrigger, open);\n\n // Reset the query each time the panel opens, and the highlighted row whenever the\n // visible set changes (a new query, or the panel opening or closing). Adjusted while\n // rendering against the previous values rather than in an effect, so the render that\n // opens the panel already searches for \"\" and highlights the first row.\n const [prevOpen, setPrevOpen] = useState(open);\n const [prevQuery, setPrevQuery] = useState(query);\n if (open !== prevOpen || query !== prevQuery) {\n const opened = open && !prevOpen;\n setPrevOpen(open);\n setPrevQuery(opened ? \"\" : query);\n if (opened) setQuery(\"\");\n setActive(0);\n }\n\n // Focus the search box each time the panel opens.\n useEffect(() => {\n if (!open) return;\n const id = requestAnimationFrame(() => inputRef.current?.focus());\n return () => cancelAnimationFrame(id);\n }, [open]);\n\n // Debounced, race-safe async search (only when loadOptions is provided) or the\n // client-side filter — see {@link useOptionSource}.\n const { results, busy, failed, tooShort } = useOptionSource<V>({\n ...source,\n options,\n minChars,\n query,\n active: open,\n });\n\n // Accumulate every option we've seen so a selected value can render its label\n // even after the async list has moved on to other query results.\n const cacheRef = useRef(new Map<V, ComboOption<V>>());\n useEffect(() => {\n for (const o of options ?? []) cacheRef.current.set(o.value, o);\n for (const o of results) cacheRef.current.set(o.value, o);\n }, [options, results]);\n const resolve = (v: V): ComboOption<V> | null =>\n options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n const rememberOption = (o: ComboOption<V>) => {\n cacheRef.current.set(o.value, o);\n };\n\n return {\n triggerRef,\n panelRef,\n inputRef,\n open,\n setOpen,\n query,\n setQuery,\n active,\n setActive,\n results,\n busy,\n failed,\n tooShort,\n minChars,\n rect,\n placement,\n rememberOption,\n resolve,\n closeToTrigger,\n };\n}\n\n/** The error line under a field — the same type as `ui.tsx`'s (module-private) one,\n * so a combobox's message is indistinguishable from an Input's. */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n/**\n * {@link Input}'s `error` for the combobox family: the message under the field, its\n * id on the control's `aria-describedby` (merged, never replacing — the hint the\n * caller pointed at stays first), and `invalid` implied. ui.tsx's `useFieldError` is\n * module-private, so this restates it on the same rules `choice-parts.ts` does.\n */\nexport function useComboboxFieldError(\n error: ReactNode,\n invalid: boolean | undefined,\n describedBy?: string,\n) {\n const errorId = useId();\n const has = hasMessage(error);\n return {\n isInvalid: Boolean(invalid) || has,\n describedBy: mergeDescribedBy(describedBy, has && errorId),\n errorEl: has ? (\n <p id={errorId} className={FIELD_ERROR_CLASS}>\n {error}\n </p>\n ) : null,\n };\n}\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n * {@link InlineEntityCombobox} and {@link Autocomplete}. */\nexport const SUGGESTION_LIST_CLASS =\n \"max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg\";\n\nexport const suggestionRowClass = (isActive: boolean) =>\n cn(\n \"block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]\",\n isActive ? \"bg-[var(--bg-active)]\" : \"hover:bg-[var(--bg-hover)]\",\n );\n\n/**\n * Keep the option the keyboard is on inside the visible part of the list.\n *\n * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole\n * point of it — and the cost is that the browser scrolls nothing on its own. In a\n * panel capped at a few hundred pixels over an account list two hundred long, Down\n * walked the highlight straight out of the box and the list sat still.\n *\n * Optional-called because jsdom does not implement `scrollIntoView`: three consumers\n * run this component in their own suites, and a picker that throws there is a worse\n * trade than a list that does not scroll in a test.\n */\nexport function useActiveOptionScroll(activeId: string | undefined): void {\n useEffect(() => {\n if (!activeId) return;\n document.getElementById(activeId)?.scrollIntoView?.({ block: \"nearest\" });\n }, [activeId]);\n}\n\nexport interface ComboboxPanelProps<V extends string | number>\n extends ComponentPropsWithoutRef<\"div\"> {\n core: ComboboxCore<V>;\n /** What the trigger's `aria-controls` names. Owned by the component that renders\n * the trigger, not by the core: one id has to reach both, and only one of them\n * can be the origin. */\n listboxId: string;\n /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n searchPlaceholder?: string;\n /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n emptyLabel?: string;\n multi?: boolean;\n isSelected: (v: V) => boolean;\n onChoose: (o: ComboOption<V>) => void;\n showCreate: boolean;\n onCreate: () => void;\n createContent: ReactNode;\n /** What the sheet calls itself on a phone — the field's label. Ignored on\n * desktop, where the panel sits under the field that already says it. */\n sheetTitle?: ReactNode;\n closeLabel?: string;\n /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n loadErrorLabel?: string;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n *\n * ## The ARIA, which is `CommandPalette`'s\n *\n * This rendered a `role=\"listbox\"` of `role=\"option\"` rows and stopped there, so a\n * reader was handed a text box and silence: the highlight the arrow keys move lived\n * only in a background colour, and nothing tied the box being typed in to the list\n * being filtered. `CommandPalette` has had the whole model since it was written —\n * `aria-controls` from the field to the list, `aria-activedescendant` naming the row\n * the keyboard is on — and it was the only thing in the package that did.\n *\n * Two distinct states, deliberately not conflated:\n * - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.\n * - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected\n * would tell a reader that the row they are merely passing over is the answer.\n *\n * `role=\"option\"` sits on the `<button>`, not on the `<li>` around it, for the same\n * reason it does in `CommandPalette`: an option may not contain a separately\n * focusable control, and the button is the thing a pointer presses. The rows are\n * `tabIndex={-1}` because focus never leaves the search box — that is what\n * `aria-activedescendant` is FOR.\n */\nexport function ComboboxPanel<V extends string | number>({\n core,\n listboxId,\n searchPlaceholder,\n emptyLabel,\n multi,\n isSelected,\n onChoose,\n showCreate,\n onCreate,\n createContent,\n sheetTitle,\n closeLabel,\n loadErrorLabel,\n className,\n style,\n ...rest\n}: ComboboxPanelProps<V>) {\n const {\n rect,\n placement,\n panelRef,\n inputRef,\n query,\n setQuery,\n results,\n busy,\n failed,\n tooShort,\n active,\n setActive,\n closeToTrigger,\n } = core;\n // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n // Same core, same results, same handlers — only the container differs, so the\n // two presentations cannot drift in what they offer.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n // Every row the keyboard can land on, the create row included (never disabled).\n const rows: readonly { disabled?: boolean }[] = showCreate ? [...results, {}] : results;\n const rowCount = rows.length;\n const optionId = (index: number) => `${listboxId}-option-${index}`;\n // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n // async list turned out to hold.\n const current = settleEnabled(rows, active);\n const activeId = current >= 0 ? optionId(current) : undefined;\n useActiveOptionScroll(activeId);\n // The consumers resolve their own props against the provider already; this is\n // for the loading row, which no consumer names, and for a caller that renders the\n // panel directly and leaves the two optional strings out.\n const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n // direction is read off the trigger and put back on the panel below.\n const dir = useAnchorDir(core.triggerRef, core.open);\n\n // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`\n // registers it on the document, so it answers wherever focus has ended up.\n const onKeyDown = (e: ReactKeyboardEvent) => {\n // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n // goes to the row after the one already shown as highlighted.\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActive(stepEnabled(rows, current, 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n } else if (e.key === \"Home\") {\n e.preventDefault();\n setActive(stepEnabled(rows, -1, 1));\n } else if (e.key === \"End\") {\n e.preventDefault();\n setActive(stepEnabled(rows, rowCount, -1));\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (current < 0) return;\n if (current < results.length) onChoose(results[current]);\n else if (showCreate) onCreate();\n } else if (e.key === \"Tab\") {\n // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n // here to whatever follows the portal — i.e. off the end of the document. The\n // trade is one extra Tab (trigger, then onward) against never stranding focus\n // at the bottom of the page.\n e.preventDefault();\n closeToTrigger();\n }\n };\n\n // What the list holds, said in ONE place that is both on screen and a polite\n // live region. Focus stays in the search box, so the list changing under it was\n // silent — a reader typed and heard nothing back, and a failed lookup was the same\n // silence as a slow one. Outside the listbox, which may own only options.\n //\n // Three different empties, and only one of them is \"nothing matched\": a lookup\n // that failed must not claim there is nothing to find, and a query under\n // `minChars` was never asked. With rows showing, the count is for the reader only.\n const message: ReactNode =\n busy && results.length === 0 ? (\n // The ellipsis is the picture; the words are for a reader, who otherwise met\n // an empty-looking list with a lone \"…\" in it — or, in most readers, nothing\n // at all, since punctuation alone is skipped.\n <>\n <span aria-hidden>…</span>\n <span className=\"sr-only\">{labels.loading}</span>\n </>\n ) : busy ? (\n // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n // a new query, or a caller's `loading` while it reloads — looked exactly like a\n // finished list: rows that were about to be replaced, with nothing saying so.\n // A line of its own under the rows, in words, so it reads without the spinner.\n <span className=\"flex items-center gap-2\">\n <Spinner label={null} className=\"size-3.5 border\" />\n {labels.loading}\n </span>\n ) : results.length === 0 && !showCreate ? (\n failed ? (\n (loadErrorLabel ?? labels.loadError)\n ) : tooShort ? (\n labels.minChars(core.minChars)\n ) : (\n (emptyLabel ?? labels.noResults)\n )\n ) : null;\n // `relative` so the sr-only text has a local containing block (see\n // sr-only-containment.test).\n const announcement = (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={cn(\n \"relative\",\n message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n failed ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n )}\n >\n {message ??\n (results.length > 0 && (\n <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n ))}\n </div>\n );\n\n if (!core.open || typeof document === \"undefined\") return null;\n\n const list = (\n <ul\n id={listboxId}\n role=\"listbox\"\n aria-multiselectable={multi}\n // The rows are provisional while a lookup is in flight — whether or not the\n // previous query's are still showing.\n aria-busy={busy || undefined}\n // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n // Tooltip in a row then portals out in a test exactly as it does in the\n // browser, instead of joining the option's accessible name (keksdose E8).\n {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n >\n {results.map((o, i) => {\n const selected = isSelected(o.value);\n // One heading per group rather than a grey suffix on every row (#136), and\n // the thing the native <select>'s <optgroup> used to give the account\n // picker for free (live #200). `results` keeps its source order, so a\n // boundary is simply \"different from the row above\".\n const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n return (\n // Keyed by group AND value: an option may deliberately appear twice —\n // Keksdose repeats recently-used categories in a \"Recent\" group at the\n // top (live #203) — and a bare value key would collide.\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {startsGroup && (\n <li\n role=\"presentation\"\n className={cn(\n \"font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n )}\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n role=\"option\"\n aria-selected={selected}\n aria-disabled={o.disabled || undefined}\n tabIndex={-1}\n onMouseDown={(e) => {\n e.preventDefault();\n if (!o.disabled) onChoose(o);\n }}\n onMouseEnter={() => {\n if (!o.disabled) setActive(i);\n }}\n className={cn(\n isPhone\n ? SHEET_ROW_CLASS\n : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n o.disabled\n ? DISABLED_ROW_CLASS\n : i === current && !isPhone\n ? \"bg-[var(--bg-active)]\"\n : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n o.disabled && isPhone && DISABLED_ROW_CLASS,\n )}\n >\n {multi && (\n <span\n // The checkbox is a PICTURE of `aria-selected` above, so a reader\n // that met both would be told twice.\n aria-hidden\n className={cn(\n \"flex size-4 shrink-0 items-center justify-center rounded border\",\n selected\n ? \"border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n )}\n >\n {selected && <Check className=\"size-3\" />}\n </span>\n )}\n {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n <span className=\"min-w-0 flex-1\">\n <span className=\"block truncate text-[var(--text-primary)]\">{o.label}</span>\n {o.sublabel && (\n <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n {o.sublabel}\n </span>\n )}\n </span>\n {!multi && selected && <Check className=\"size-4 shrink-0 text-[var(--brand)]\" />}\n </button>\n </li>\n </Fragment>\n );\n })}\n {showCreate && (\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(results.length)}\n role=\"option\"\n // Never chosen — it is an action, and it disappears the moment it has\n // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n // job to say.\n aria-selected={false}\n tabIndex={-1}\n onMouseDown={(e) => {\n e.preventDefault();\n onCreate();\n }}\n onMouseEnter={() => setActive(results.length)}\n className={cn(\n isPhone\n ? SHEET_ROW_CLASS\n : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n \"text-[var(--text-secondary)]\",\n current === results.length && !isPhone\n ? \"bg-[var(--bg-active)]\"\n : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n )}\n >\n <Plus className=\"size-4 shrink-0\" />\n <span className=\"truncate\">{createContent}</span>\n </button>\n </li>\n )}\n </ul>\n );\n\n if (isPhone) {\n return (\n <PickerSheet\n // First, so the sheet's own props below win: `rest` is typed as div\n // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n // its heading — one name, two meanings, and the sheet's is the one the caller\n // asked for.\n {...rest}\n className={className}\n style={style}\n open\n onClose={() => core.setOpen(false)}\n title={sheetTitle}\n query={query}\n onQueryChange={setQuery}\n searchPlaceholder={searchPlaceholder ?? labels.search}\n inputRef={inputRef}\n closeLabel={closeLabel}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n itself: it catches the listbox keys bubbling from the sheet's search <input>,\n which holds focus while the list is up. */}\n <div onKeyDown={onKeyDown} className=\"relative\">\n {list}\n {announcement}\n </div>\n </PickerSheet>\n );\n }\n\n if (!rect) return null;\n // The panel hangs from the trigger's START edge: its left in a left-to-right form,\n // its right in a right-to-left one (it may be wider than the trigger, `minWidth`).\n // `clientWidth` rather than `innerWidth`, because a fixed box's `right` is measured\n // from the edge of the viewport inside any scrollbar.\n const inline =\n dir === \"rtl\"\n ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right }\n : { left: rect.left };\n\n return createPortal(\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n itself: it catches the listbox keys bubbling from the search <input> inside it,\n which holds focus while the panel is open. */\n <div\n // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/\n // Enter/Tab) and the placement is measured rather than chosen, so neither is a\n // caller's to replace by accident — while a `data-*` anchor or an\n // `aria-describedby` has nothing to collide with.\n {...rest}\n ref={panelRef}\n dir={dir}\n onKeyDown={onKeyDown}\n // `placement` keeps the panel inside the region actually on screen: on a phone\n // the search box below pulls up the keyboard, and a panel pinned under a\n // low trigger would otherwise sit entirely behind it (feedback #135).\n style={{\n ...style,\n position: \"fixed\",\n top: placement.top,\n ...inline,\n width: rect.width,\n minWidth: 220,\n maxHeight: placement.maxHeight,\n }}\n className={cn(\n \"z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n className,\n )}\n >\n <DropdownSearchHeader\n query={query}\n onQueryChange={setQuery}\n inputRef={inputRef}\n placeholder={searchPlaceholder ?? labels.search}\n // Focus is in this box while the list is up, so this is what has to name the\n // list and the row the arrows are on.\n listboxId={listboxId}\n activeId={activeId}\n />\n {/* One list, two containers: the desktop panel and the phone sheet render\n the same rows through the same handlers (live #200). */}\n {list}\n {announcement}\n </div>,\n document.body,\n );\n}\n"],"mappings":"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","names":["Fragment"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ChevronDown, X } from \"lucide-react\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useDropdown } from \"./dropdown\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport {\n ComboboxFieldLabel,\n DISABLED_ROW_CLASS,\n isOptionEnabled,\n stepEnabled,\n SUGGESTION_LIST_CLASS,\n suggestionRowClass,\n useActiveOptionScroll,\n useComboboxFieldError,\n type ComboClearValue,\n type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n// One look for both combobox flavors below — the suggestion list and its rows\n// must stay pixel-identical between the free-text and the id-keyed variant (and\n// `Autocomplete`, which shares them from the core).\nconst LIST_CLASS = SUGGESTION_LIST_CLASS;\n\n/**\n * \"This focus came from a mouse button that is not the left one\" — for the two\n * fields below, which open their list ON FOCUS.\n *\n * Keksdose live #309 rework: *\"When clicking the mouse back button now while hovering\n * one of the selects it opens the select as long as I am holding the button down and\n * closes select after releasing.\"* A mouse's BACK button focuses whatever it is\n * pressed over, exactly as the left one does — the browser only reserves the\n * NAVIGATION for itself — so a field that opens on focus opened a list for a gesture\n * that means \"go back\", and the release then navigated out from under it. Measured on\n * his own budget: `mousePressed button=back` over the transfer form's account field\n * left `aria-expanded=true`, and the release took the whole add card with it.\n *\n * The press is recorded and read by the focus that the SAME press causes: focus is\n * mousedown's default action, dispatched inside the same task, so the flag is always\n * read before the `setTimeout` below can drop it. And it is always dropped — a press\n * that focuses nothing (the pointer was over a disabled field, the button was\n * released elsewhere) must not leave a latch that swallows the next Tab.\n *\n * Only the OPEN is suppressed, never the navigation: Back still goes back, which is\n * the whole of what the button was pressed for.\n */\nfunction usePrimaryPressOnly() {\n const auxPress = useRef(false);\n return {\n onMouseDown: (e: { button: number }) => {\n if (e.button === 0) return;\n auxPress.current = true;\n setTimeout(() => {\n auxPress.current = false;\n }, 0);\n },\n /** True while handling the focus a non-primary press just caused. */\n fromAuxButton: () => auxPress.current,\n };\n}\n\n/**\n * The desktop suggestion list, PORTALLED and anchored to the field.\n *\n * It used to be an `absolute` `<ul>` inside the field's own wrapper, and that is\n * Keksdose live #295: *\"Category select inside the list is not readable. Some sort\n * of z indexes issue?\"*. It was not z-index — a stacking context can be out-ranked,\n * but `overflow` cannot be argued with. The receipt's line table sits in a card\n * carrying `overflow-clip`, so a list opened from the last visible row was cut off\n * at the card's edge: measured at 256px tall with 150px of it painted.\n *\n * Every other panel in this package already learned this — `DropdownPanel`'s\n * `anchorRef` form, the calculator popover, the tooltip — so this reuses the same\n * hook rather than inventing a second placement. What that buys beyond the clip:\n * the list flips above the field when there is no room below, and it caps its own\n * height against the VISIBLE viewport, which on a phone means the on-screen\n * keyboard (see {@link useAnchoredPanel}).\n *\n * `panelRef` is not optional plumbing. Portalled, the list is no longer a\n * descendant of the wrapper, so {@link useDropdown}'s outside-click test answers\n * \"outside\" for a click on the list itself — the first option a user picked would\n * close the dropdown having picked nothing.\n */\nfunction SuggestionList({\n id,\n anchorRef,\n panelRef,\n children,\n}: {\n /** What the field's `aria-controls` names. */\n id: string;\n anchorRef: RefObject<HTMLElement | null>;\n panelRef: RefObject<HTMLDivElement | null>;\n children: ReactNode;\n}) {\n const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });\n const dir = useAnchorDir(anchorRef, true);\n if (!rect) return null;\n return createPortal(\n <div\n ref={panelRef}\n // z-50, not the old z-30: the list is a child of <body> now, so it is\n // competing with the app's own overlays rather than with its own siblings.\n className=\"fixed z-50\"\n // Portalled out of the form's `dir`; the field's is put back. The list is\n // exactly the field's width, so `left` places it in either direction.\n dir={dir}\n style={{ top, left: rect.left, width: rect.width }}\n >\n <ul id={id} role=\"listbox\" data-clips=\"\" className={LIST_CLASS} style={{ maxHeight }}>\n {children}\n </ul>\n </div>,\n document.body,\n );\n}\n\nconst rowClass = suggestionRowClass;\n\n/**\n * Four of the div's own attributes are omitted because this component already owns\n * the name, with a different meaning: `id` is the INPUT's (a caller labels or\n * automates the field, not the box around it), and `onChange`/`onBlur`/`onSubmit`\n * are the field's — a value, a departure, and \"I mean what I typed\" — rather than\n * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.\n */\nexport interface ComboboxProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\" | \"onBlur\" | \"onSubmit\"> {\n value: string;\n onChange: (v: string) => void;\n /** Suggestion pool (e.g. existing payee names). */\n options: string[];\n label?: string;\n id?: string;\n placeholder?: string;\n className?: string;\n /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`\n * itself rather than on the wrapper, which is what let Keksdose's account picker\n * delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying\n * because this component had no `invalid` of its own. */\n invalid?: boolean;\n /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n * field, on the `<input>`'s `aria-describedby`, and implies `invalid` (lenkbank's\n * scope fields, which moved here off `<Input list>` + `<datalist>`). */\n error?: ReactNode;\n /** As `<input disabled>`: no focus, no list, the field's settled look. The chevron\n * stops toggling with it — it is a mouse target the input's own `disabled` does\n * not reach. */\n disabled?: boolean;\n /** Heading an option belongs under. Supplying it makes this list read exactly\n * like {@link InlineEntityCombobox}'s — one heading per group with its rows\n * indented beneath — instead of a flat list (feedback #136 rework: the payee\n * field sat next to the newly-grouped category field and no longer matched).\n * Omit for a plain list. */\n groupBy?: (option: string) => string;\n /**\n * Something to show at the far end of an option's row — a badge saying what the\n * option IS, as distinct from what it is called.\n *\n * Keksdose's category-name field is the case: its proposals carry per-locale\n * names, so picking one stores a category that follows the UI language, and\n * picking a look-alike custom name does not. That difference is invisible in the\n * label and decides what the row DOES, so the row has to show it. Returning\n * `null` for an option renders nothing and costs no layout.\n *\n * Not rendered in the create row, which by definition names nothing in the pool.\n */\n optionAdornment?: (option: string) => ReactNode;\n /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open\n * the list with it. A click-the-value inline editor needs it: the cell the user\n * clicked names the field the caret should land in. {@link InlineEntityCombobox}\n * has had it since live #218. */\n autoFocus?: boolean;\n /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress\n * `mousedown`, so the input never blurs — which is what makes it usable as a\n * \"close the inline editor\" signal. */\n onBlur?: () => void;\n /** Enter pressed with no row highlighted, i.e. \"I mean what I typed\". The list\n * closes either way; this is for a caller whose Enter also submits a row editor. */\n onSubmit?: () => void;\n /** Rows to offer when the field is empty. 8 on a dropdown, where that is all\n * that fits; the phone sheet asks for more because it has a screen. */\n maxSuggestions?: number;\n searchPlaceholder?: string;\n closeLabel?: string;\n /**\n * Label for the row that COMMITS a value the list does not contain — e.g.\n * `(v) => \\`Add \"${v}\" as payee\\``. Supplying it turns the free text into\n * something you confirm rather than something you leave behind.\n *\n * Keksdose live #212: *\"For the payee input have an apply button, when input is\n * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with\n * the right top X, which seems not intuitive.\"* On the phone sheet the search box\n * IS the value, so typing a brand-new name and dismissing the sheet did commit it —\n * but the only control on offer was the close X, which reads as \"discard\". A named\n * affordance says what the typing did.\n *\n * Omit and the row is not rendered, which is the right default for a list whose\n * values are all supposed to already exist.\n */\n createLabel?: (value: string) => string;\n}\n\n/**\n * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE\n * styling, chevron and static floating label) but lets the user type a value\n * that isn't in the list — e.g. naming a brand-new payee. Picking from the\n * filtered suggestion list fills the value; typing keeps whatever was entered.\n *\n * Use this instead of an `<Input list=\"…\">` + `<datalist>` so the control is\n * visually and behaviourally consistent with the other dropdowns (feedback\n * #230 — the payee field looked/behaved differently from every other select).\n */\nexport function Combobox({\n value,\n onChange,\n options,\n label,\n id,\n placeholder,\n className,\n groupBy,\n maxSuggestions,\n searchPlaceholder,\n closeLabel,\n createLabel,\n invalid,\n error,\n disabled,\n optionAdornment,\n autoFocus,\n onBlur,\n onSubmit,\n \"aria-label\": ariaLabel,\n // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n // on the wrapper div the hint and required state described nothing.\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: ComboboxProps) {\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n ariaDescribedBy,\n );\n const generated = useId();\n const fieldId = id ?? generated;\n // Derived from the GENERATED id, never from `id`: a caller's id is theirs to\n // collide with, and `aria-controls` has to resolve.\n const listboxId = `${generated}-listbox`;\n const optionId = (index: number) => `${generated}-option-${index}`;\n // `backCloses` is the desktop half of live #309: the phone's list IS a\n // {@link PickerSheet}, which registers its own history entry, so registering a\n // second one here would cost two Back presses to dismiss one sheet.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n const primaryOnly = usePrimaryPressOnly();\n const [active, setActive] = useState(-1);\n // A phone opens the list as a full-screen sheet with its own input, the way a\n // native <select> does — live #200: \"Paid as full screen dialog with input.\n // Similar to the account select that already appears as full screen.\" The\n // anchored list stays for pointer devices, where it is the better shape.\n const sheetInputRef = useRef<HTMLInputElement | null>(null);\n // The box the portalled list hangs off — the inner wrapper, which hugs the input,\n // not the outer one (a grid item that can be taller than the field).\n const fieldRef = useRef<HTMLDivElement>(null);\n\n /**\n * Is the text in the field a QUERY, or just what was picked last time?\n *\n * Keksdose dev#549, filed against the category-name field: *\"Currently it acts kind\n * of a filter and clicking again does not open anything since the previous text is\n * still there likely filtering all other options out.\"* A combobox whose filter is\n * its own value can only ever re-offer the answer it already has — after picking\n * \"REWE\" the list reopens holding one row, the one you are looking at, and changing\n * your mind means clearing the field by hand first.\n *\n * So the text filters only while it is being TYPED; opening the list, by focus or\n * by clicking the field again, puts the whole pool back. {@link InlineEntityCombobox}\n * below has had this since it was written (see its `typedQuery`) and the app's\n * category-name field grew its own copy to get it — this one, the payee field, was\n * the one left with the bug.\n *\n * Not derived from \"does the text exactly match an option\": a custom value that\n * happens to collide with one would then behave differently from every other, and\n * what is being tracked is what the user just did, which is not a property of the\n * string.\n */\n const [typing, setTyping] = useState(false);\n\n const query = typing ? value.trim().toLowerCase() : \"\";\n const matches = useMemo(() => {\n const seen = new Set<string>();\n const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));\n let ranked: string[];\n const cap = maxSuggestions ?? (isPhone ? 50 : 8);\n if (!query) {\n ranked = uniq.slice(0, cap);\n } else {\n // Prefix matches first, then substring matches — most relevant on top.\n const starts = uniq.filter((o) => o.toLowerCase().startsWith(query));\n const contains = uniq.filter(\n (o) => !o.toLowerCase().startsWith(query) && o.toLowerCase().includes(query),\n );\n ranked = [...starts, ...contains].slice(0, cap);\n }\n if (!groupBy) return ranked;\n // Keep each group contiguous so a heading appears once instead of every time\n // the ranking interleaves two groups — while preserving \"best match first\":\n // a Map keeps insertion order, so groups come out ordered by their best-ranked\n // member and members keep their rank order inside the group.\n const byGroup = new Map<string, string[]>();\n for (const o of ranked) {\n const key = groupBy(o);\n if (!byGroup.has(key)) byGroup.set(key, []);\n byGroup.get(key)!.push(o);\n }\n return [...byGroup.values()].flat();\n }, [options, query, groupBy, maxSuggestions, isPhone]);\n\n /**\n * Which rows OPEN a group, and with what heading — computed once for both lists.\n *\n * The desktop list had this as `matches[i - 1]`, which is free; the sheet had it as\n * `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and another\n * per heading test. That is quadratic in the sheet's own cap of 50, on the branch\n * that runs on the slowest hardware we ship to — and it answers the wrong question\n * besides: `indexOf` finds the FIRST row with that string, so a duplicated option\n * would have compared against a neighbour it is not next to. (`matches` de-duplicates\n * today; that is a property of the memo above, not of the row being rendered.)\n */\n const groupHeadings = useMemo(() => {\n if (!groupBy) return null;\n const heads = new Map<number, string>();\n let prev: string | undefined;\n matches.forEach((o, i) => {\n const group = groupBy(o);\n if (group != null && group !== prev) heads.set(i, group);\n prev = group;\n });\n return heads;\n }, [matches, groupBy]);\n\n const commit = (v: string) => {\n onChange(v);\n setOpen(false);\n setActive(-1);\n // What is in the field is now an ANSWER, not a query — so reopening offers the\n // whole pool again rather than a one-row filter of the value just chosen.\n setTyping(false);\n };\n\n // Offered only when the typed text is genuinely NOT in the pool: an exact\n // (case-insensitive) match is an existing entry the list is already showing, and a\n // second way to pick it would be noise. Compared against `options`, not `matches` —\n // `matches` is capped, so a pool of 300 payees would otherwise offer to \"add\" one\n // that exists but fell off the end of the list.\n // What the field claims the keyboard is on. Only on a pointer device: the phone\n // renders its rows in a {@link PickerSheet} whose own search box owns focus, and a\n // field pointing at an id that is not there is worse than one pointing nowhere.\n const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : undefined;\n useActiveOptionScroll(activeId);\n\n const typed = value.trim();\n const createRow =\n createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase())\n ? createLabel(typed)\n : null;\n\n return (\n // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n // description, invalid or required state: those belong on the <input> below,\n // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n {/* A real <label for> since lenkbank's tests met a field `getByLabelText` could\n not find: it used to be a <span>, with the text copied onto `aria-label`. The\n name a reader hears is the same words either way. */}\n {label !== undefined && (\n <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? \"opacity-50\" : undefined}>\n {label}\n </ComboboxFieldLabel>\n )}\n {/* The chevron centers against this inner wrapper, which hugs the input.\n The outer div can be taller than the input (as a grid item it\n stretches to the row height, e.g. next to the editor's category cell\n with its split button), which used to drag a top-1/2 chevron down to\n the input's bottom edge (feedback #248). */}\n {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.\n FIELD_BASE's grey alone left a disabled picker looking like a filled-in\n one beside the pickers that do dim (the label is not the input's `peer`,\n so it is dimmed by hand above). */}\n <div ref={fieldRef} className={cn(\"relative\", disabled && \"cursor-not-allowed opacity-50\")}>\n <input\n id={fieldId}\n value={value}\n placeholder={placeholder}\n // The caller's name, over the <label for> above — which is what names the\n // field otherwise (dev#477: a field with neither announces only its text).\n aria-label={ariaLabel}\n role=\"combobox\"\n aria-expanded={open}\n // The list this field is the mouth of. Required by the role, and the half\n // that was missing: the field said it was expanded and never said what it\n // had expanded, so a reader had no way from the box to the options\n // (ESLint's `role-has-required-aria-props`, the audit's §a11y).\n aria-controls={listboxId}\n aria-activedescendant={activeId}\n aria-autocomplete=\"list\"\n aria-invalid={field.isInvalid || undefined}\n aria-describedby={field.describedBy}\n aria-required={ariaRequired}\n autoComplete=\"off\"\n disabled={disabled}\n autoFocus={autoFocus}\n onBlur={onBlur}\n onMouseDown={primaryOnly.onMouseDown}\n onFocus={() => {\n // A back/forward mouse button focuses this field on its way to\n // navigating; it is not a request to open anything (live #309 rework).\n if (primaryOnly.fromAuxButton()) return;\n setOpen(true);\n setTyping(false);\n // The sheet carries its own input, so the field behind it must not also\n // pull up the keyboard and scroll the page under the dialog.\n if (isPhone) sheetInputRef.current?.focus();\n }}\n // A CLICK as well as focus — the other half of dev#549. Picking a suggestion\n // closes the list without moving focus (the rows suppress `mousedown` on\n // purpose, so the input never blurred), which means clicking the field again\n // fires no `focus` event at all and the list stayed shut. \"Does not open\n // anything\" was literally true.\n onClick={() => {\n setOpen(true);\n setTyping(false);\n }}\n // `inputMode=\"none\"` rather than readOnly: the field must not look\n // uneditable (FIELD_BASE greys a read-only field since dev#468) and must\n // still take focus — it just has no keyboard of its own, the same trick\n // the amount field uses for the numpad.\n inputMode={isPhone ? \"none\" : undefined}\n onChange={(e) => {\n onChange(e.target.value);\n setOpen(true);\n setActive(-1);\n setTyping(true);\n }}\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setOpen(true);\n setActive((i) => Math.min(i + 1, matches.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\") {\n if (open && active >= 0 && active < matches.length) {\n e.preventDefault();\n commit(matches[active]);\n } else {\n // No row highlighted: the typed text is the answer. `preventDefault`\n // only when a caller is taking Enter, so a plain form submit is\n // otherwise left alone.\n if (onSubmit) e.preventDefault();\n setOpen(false);\n onSubmit?.();\n }\n } else if (e.key === \"Escape\") {\n setOpen(false);\n setActive(-1);\n } else if (e.key === \"Tab\") {\n // Closes, and lets the browser take the Tab: focus is in THIS input,\n // which is staying, so there is nothing to catch — unlike the pickers\n // whose focus sits inside a portalled panel.\n setOpen(false);\n setActive(-1);\n }\n // Home/End are deliberately absent. The APG gives them to the list only\n // where the combobox is not editable; here the text IS the value, a\n // payee name is long enough to want the caret moved to its start, and\n // the desktop list is capped at 8 rows — so jumping it would be worth\n // almost nothing and would cost the one gesture that field is used with.\n }}\n className={cn(\n FIELD_BASE,\n label !== undefined && FIELD_FLOATING_PAD,\n \"pe-9\",\n field.isInvalid && FIELD_INVALID,\n )}\n />\n <ChevronDown\n aria-hidden\n onMouseDown={(e) => {\n // Toggle on the chevron without stealing focus from the input.\n e.preventDefault();\n if (!disabled) setOpen((o) => !o);\n }}\n className={cn(\n \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n // The box above does the dimming; dimming here too would halve it again.\n !disabled && \"cursor-pointer\",\n )}\n />\n </div>\n {field.errorEl}\n {isPhone && (\n <PickerSheet\n open={open && !disabled}\n onClose={() => setOpen(false)}\n title={label}\n // The sheet's input IS the field: this is a free-text control, so what is\n // typed here is the value (a brand-new payee is just a name nothing\n // matches), and the list below narrows as it changes.\n query={value}\n onQueryChange={(v) => {\n onChange(v);\n setTyping(true);\n }}\n searchPlaceholder={searchPlaceholder ?? placeholder}\n inputRef={sheetInputRef}\n closeLabel={closeLabel}\n >\n <ul id={listboxId} role=\"listbox\">\n {createRow && (\n // `role=\"option\"` rides the BUTTON, not the <li> around it: an option\n // may not contain a separately focusable control, and the button is\n // what a pointer presses. Same shape `CommandPalette` has always had.\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={false}\n onClick={() => commit(typed)}\n className={cn(SHEET_ROW_CLASS, \"font-medium text-[var(--brand)]\")}\n >\n {createRow}\n </button>\n </li>\n )}\n {matches.map((o, i) => {\n const group = groupHeadings?.get(i);\n return (\n <Fragment key={o}>\n {group !== undefined && (\n <li\n role=\"presentation\"\n className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\"\n >\n {group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={o === value}\n onClick={() => commit(o)}\n className={cn(\n SHEET_ROW_CLASS,\n optionAdornment && \"flex items-center justify-between gap-2\",\n )}\n >\n {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n {optionAdornment?.(o)}\n </button>\n </li>\n </Fragment>\n );\n })}\n </ul>\n </PickerSheet>\n )}\n {!isPhone && open && !disabled && (matches.length > 0 || createRow) && (\n <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n {createRow && (\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={false}\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown, like the rows below: the input's blur would otherwise\n // close the list before the click landed.\n e.preventDefault();\n commit(typed);\n }}\n className={cn(rowClass(false), \"font-medium text-[var(--brand)]\")}\n >\n {createRow}\n </button>\n </li>\n )}\n {matches.map((o, i) => {\n // Heading at each group boundary only — `matches` is group-contiguous, so\n // the boundaries are a property of the list rather than of the branch\n // drawing it. See `groupHeadings`.\n const group = groupHeadings?.get(i);\n return (\n <Fragment key={o}>\n {group !== undefined && (\n <li\n role=\"presentation\"\n className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n >\n {group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n role=\"option\"\n // CHOSEN, not highlighted. The row the arrows are on is named by\n // the field's `aria-activedescendant`; saying \"selected\" for it\n // would tell a reader that the row they are passing over is\n // already the answer.\n aria-selected={o === value}\n // Focus stays in the field — that is what\n // `aria-activedescendant` is for — so the rows are not tab stops.\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown (not click) so the blur from the input firing first\n // doesn't close the list before the selection registers.\n e.preventDefault();\n commit(o);\n }}\n onMouseEnter={() => setActive(i)}\n className={cn(\n rowClass(i === active),\n group != null && \"ps-6\",\n // A row with a badge is a flex row so the label truncates and the\n // badge keeps its width; without one it stays the plain block the\n // other lists render, so nothing shifts for callers that pass none.\n optionAdornment && \"flex items-center justify-between gap-2\",\n )}\n >\n {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n {optionAdornment?.(o)}\n </button>\n </li>\n </Fragment>\n );\n })}\n </SuggestionList>\n )}\n </div>\n );\n}\n\n/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}\n * for why the div's spellings of them are omitted. */\nexport interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\"> {\n /** Selected option id; `null` or `clearValue` when nothing is selected. */\n value: V | C | null;\n /** Required and unanswered — see {@link Combobox}'s `invalid`. */\n invalid?: boolean;\n /** What is wrong with the value — see {@link Combobox}'s `error`. */\n error?: ReactNode;\n /** A picked/typed option emits its id; emptying the field, or the \"×\", emits\n * `clearValue`. */\n onChange: (v: V | C) => void;\n /** What a clear emits — `null` by default, `\"\"` for a schema that wants an empty\n * string. See {@link EntityCombobox}'s `clearValue`. */\n clearValue?: C;\n options: ComboOption<V>[];\n label?: string;\n id?: string;\n placeholder?: string;\n className?: string;\n disabled?: boolean;\n /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`\n * below, open the list with it. A click-the-value editor needs it: the cell\n * the user clicked names the field the editor should land the caret in, and\n * without a passthrough this component's fixed prop list puts the `<input>`\n * out of a caller's reach entirely (Keksdose feedback live #218). */\n autoFocus?: boolean;\n /** Phone sheet only — the anchored list has the field itself to type in. Falls\n * back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */\n searchPlaceholder?: string;\n /** Phone sheet only: a full screen showing nothing has to say why. The anchored\n * list simply does not open. Default: `combobox.noResults` from the provider. */\n emptyLabel?: string;\n closeLabel?: string;\n /** Offer a clear \"×\" in place of the chevron whenever something is selected.\n *\n * Emptying the text already clears (see {@link reconcile}), and on a desktop that\n * is the fast way. It is not a way at all on a PHONE: touching the field opens the\n * full-screen sheet, which covers the very input the text would have been deleted\n * from — so a field that had been answered could not be UNanswered by any gesture\n * the screen offered (Keksdose live #236, filed from a phone). The \"×\" is the one\n * affordance both shells share, and it clears without opening anything. */\n clearable?: boolean;\n clearLabel?: string;\n}\n\n/**\n * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input\n * with the shared field styling, chevron and inline as-you-type filtering) but\n * the value is an option id, not free text. Built so an entity picker can sit\n * next to a free-text combobox without any visible difference — a button-trigger\n * panel picker ({@link EntityCombobox}) never matches an input field exactly.\n *\n * Text-vs-value reconciliation: the input's text is transient. Picking a row or\n * typing an exact (unique) label commits that option; emptying the text commits\n * a clear; anything else reverts to the selected option's label on blur/Escape.\n *\n * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}\n * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto\n * this component and must not lose its sheet). The sheet carries its OWN query state\n * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a\n * sheet that emptied it to show the full list would read as \"the user cleared the\n * field\" the moment it closed.\n */\nexport function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>({\n value: rawValue,\n onChange,\n clearValue = null as C,\n options,\n label,\n id,\n placeholder,\n className,\n disabled,\n autoFocus,\n searchPlaceholder,\n emptyLabel,\n closeLabel,\n clearable,\n clearLabel,\n invalid,\n error,\n \"aria-label\": ariaLabel,\n // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n // on the wrapper div the hint and required state described nothing.\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: InlineEntityComboboxProps<V, C>) {\n // The clear value reads as \"nothing selected\", whichever one the caller picked —\n // so from here down `value` is the id or `null`, as it always was.\n const value: V | null = rawValue == null || rawValue === clearValue ? null : (rawValue as V);\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n ariaDescribedBy,\n );\n const generated = useId();\n const fieldId = id ?? generated;\n // See the twin above on why these hang off the generated id.\n const listboxId = `${generated}-listbox`;\n const optionId = (index: number) => `${generated}-option-${index}`;\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n // See the twin above: the phone sheet owns its own Back entry (live #309).\n const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n const primaryOnly = usePrimaryPressOnly();\n const [active, setActive] = useState(-1);\n // null = not editing → the input shows the selected option's label.\n const [text, setText] = useState<string | null>(null);\n const sheetInputRef = useRef<HTMLInputElement | null>(null);\n // The box the portalled list hangs off — see {@link SuggestionList}.\n const fieldRef = useRef<HTMLDivElement>(null);\n // The sheet's search box. Starts empty on every open, so a field that already\n // holds a value still offers the whole list — the shape a native <select> has\n // on a phone, and what the anchored panel gets from `query` below.\n const [sheetQuery, setSheetQuery] = useState(\"\");\n // Props first, provider second — see `EntityCombobox`. `emptyLabel` used to render\n // nothing when omitted, which left a phone user staring at a blank full-screen\n // sheet; now an omitted one says \"No results\" in the provider's language.\n const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n search: searchPlaceholder,\n noResults: emptyLabel,\n clear: clearLabel,\n });\n\n const selected = useMemo(\n () => (value == null ? null : (options.find((o) => o.value === value) ?? null)),\n [options, value],\n );\n const shown = text ?? selected?.label ?? \"\";\n // Nothing selected has nothing to clear, and the chevron comes back — the field\n // keeps exactly one trailing control, so the \"×\" never crowds the value it sits on.\n const showClear = Boolean(clearable && value != null && !disabled);\n\n // Focusing select-alls the current label; filtering only kicks in once the\n // text actually differs from it, so an already-filled field still opens on\n // the FULL list instead of a single-row \"filter\" of its own value.\n const typedQuery =\n text !== null && text !== (selected?.label ?? \"\") ? text.trim().toLowerCase() : \"\";\n const query = isPhone ? sheetQuery.trim().toLowerCase() : typedQuery;\n const matches = useMemo(() => {\n let ranked = options;\n if (query) {\n const hit = (s: string | undefined) => s?.toLowerCase().includes(query) ?? false;\n const starts = options.filter((o) => o.label.toLowerCase().startsWith(query));\n const rest = options.filter(\n (o) =>\n !o.label.toLowerCase().startsWith(query) &&\n (hit(o.label) || hit(o.sublabel) || hit(o.group)),\n );\n ranked = [...starts, ...rest];\n }\n if (!ranked.some((o) => o.group)) return ranked;\n // Keep each group contiguous so the headings below appear once instead of\n // re-appearing every time the ranking interleaves two groups — while preserving\n // \"best match first\": a Map keeps insertion order, so groups come out ordered by\n // their best-ranked member and members keep their rank order inside the group.\n const blocks = new Map<string, ComboOption<V>[]>();\n for (const o of ranked) {\n const key = o.group ?? \"\";\n if (!blocks.has(key)) blocks.set(key, []);\n blocks.get(key)!.push(o);\n }\n return [...blocks.values()].flat();\n }, [options, query]);\n\n // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own\n // search box holds focus, so the field behind it must not claim to be pointing at\n // one of them.\n // A disabled row is never the keyboard's, even if the list changed under it.\n const activeId = !isPhone && isOptionEnabled(matches[active]) ? optionId(active) : undefined;\n useActiveOptionScroll(activeId);\n\n const close = () => {\n setOpen(false);\n setActive(-1);\n setSheetQuery(\"\");\n };\n const commit = (o: ComboOption<V>) => {\n // A `disabled` option is listed, never taken — by any path.\n if (o.disabled) return;\n if (o.value !== value) onChange(o.value);\n setText(null);\n close();\n };\n /** Turn loose text into a decision: empty clears, an exact label match that names\n * ONE entity commits, anything else reverts to the selected label.\n *\n * Unique by VALUE, not by row. An option may deliberately appear twice — Keksdose\n * repeats recently-used categories in a \"Recent\" group at the top (live #203) — and\n * counting rows made every such option uncommittable: two hits, so nothing fired and\n * the field reverted to whatever was selected before. Typing a category you had just\n * used, then tabbing away, silently discarded it, and the more categories you used\n * the more of them stopped working. Two rows naming the same id are not an ambiguity;\n * two ids sharing a label are. */\n const reconcile = () => {\n if (text !== null) {\n const q = text.trim();\n if (!q) {\n if (value != null) onChange(clearValue);\n } else {\n // A disabled option's label typed out in full is not a way round `disabled`:\n // it is not a hit, so the text reverts like any other non-answer.\n const hits = options.filter(\n (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),\n );\n const ids = new Set(hits.map((h) => h.value));\n if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);\n }\n setText(null);\n }\n close();\n };\n\n return (\n // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n // description, invalid or required state: those belong on the <input> below,\n // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n {/* A real <label for> — see {@link Combobox}. */}\n {label !== undefined && (\n <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? \"opacity-50\" : undefined}>\n {label}\n </ComboboxFieldLabel>\n )}\n {/* Inner wrapper for chevron centering — same reasoning as Combobox above.\n It is also what the portalled list anchors to. */}\n {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.\n FIELD_BASE's grey alone left a disabled picker looking like a filled-in\n one beside the pickers that do dim (the label is not the input's `peer`,\n so it is dimmed by hand above). */}\n <div ref={fieldRef} className={cn(\"relative\", disabled && \"cursor-not-allowed opacity-50\")}>\n <input\n id={fieldId}\n value={shown}\n placeholder={placeholder}\n // The caller's name, over the <label for> above. Just the label, never\n // \"label: value\" the way a trigger button has to compose it: an input\n // already exposes its value separately.\n aria-label={ariaLabel}\n role=\"combobox\"\n aria-expanded={open}\n // Required by the role, and the half that was missing: the field said it\n // was expanded and never said what it had expanded (ESLint's\n // `role-has-required-aria-props`, the audit's §a11y).\n aria-controls={listboxId}\n aria-activedescendant={activeId}\n aria-autocomplete=\"list\"\n aria-invalid={field.isInvalid || undefined}\n aria-describedby={field.describedBy}\n aria-required={ariaRequired}\n autoComplete=\"off\"\n disabled={disabled}\n autoFocus={autoFocus}\n // `inputMode=\"none\"` rather than readOnly, for the same reason Combobox\n // above gives: the sheet carries the keyboard, and a readOnly field would\n // take FIELD_BASE's settled look on a field that is perfectly editable.\n inputMode={isPhone ? \"none\" : undefined}\n onMouseDown={primaryOnly.onMouseDown}\n onFocus={(e) => {\n // See {@link usePrimaryPressOnly}: a back/forward button lands here on\n // its way to navigating, and neither the list nor the select-all is\n // anything it asked for (live #309 rework).\n if (primaryOnly.fromAuxButton()) return;\n setText(shown);\n e.currentTarget.select();\n setOpen(true);\n // The sheet has its own input; the field behind it must not also pull up\n // the keyboard and scroll the page under the dialog.\n if (isPhone) sheetInputRef.current?.focus();\n }}\n onBlur={() => {\n // On a phone the blur is the SHEET taking focus, not the user leaving the\n // field — reconciling there would close the sheet the instant it opened.\n if (!isPhone) reconcile();\n }}\n onChange={(e) => {\n setText(e.target.value);\n setOpen(true);\n setActive(-1);\n }}\n onKeyDown={(e) => {\n // Disabled rows are passed over; Up from \"nothing highlighted\" lands on\n // the first takeable row, as it always landed on row 0.\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setOpen(true);\n setActive((i) => stepEnabled(matches, i, 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive((i) => (i < 0 ? stepEnabled(matches, -1, 1) : stepEnabled(matches, i, -1)));\n } else if (e.key === \"Enter\") {\n if (open && isOptionEnabled(matches[active])) {\n e.preventDefault();\n commit(matches[active]);\n } else {\n reconcile();\n }\n } else if (e.key === \"Escape\") {\n setText(null);\n close();\n } else if (e.key === \"Tab\") {\n // Focus is in THIS input and stays there, so the browser's own Tab is\n // left alone; all that is needed is that the list stop covering what\n // the user is tabbing to. `reconcile` rather than `close`, because\n // leaving the field is exactly when loose text has to be judged.\n reconcile();\n }\n // Home/End stay with the caret — see the note in {@link Combobox}: this\n // field is editable, and its text is what `reconcile` judges.\n }}\n className={cn(\n FIELD_BASE,\n label !== undefined && FIELD_FLOATING_PAD,\n \"pe-9\",\n field.isInvalid && FIELD_INVALID,\n )}\n />\n {showClear ? (\n <button\n type=\"button\"\n // Out of the tab order, like the clear on `EntityCombobox`: the keyboard\n // already clears this field by selecting its text and deleting, and a\n // second stop between every picker and the next field is a worse trade\n // than the one gesture it saves.\n tabIndex={-1}\n aria-label={labels.clear}\n // preventDefault, exactly as the chevron does: without it the press\n // focuses the input, which on a phone opens the sheet over the field the\n // press was clearing.\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => {\n setText(null);\n close();\n onChange(clearValue);\n }}\n className={cn(\n \"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]\",\n \"hover:text-[var(--text-secondary)]\",\n )}\n >\n <X aria-hidden className=\"size-4\" />\n </button>\n ) : (\n <ChevronDown\n aria-hidden\n onMouseDown={(e) => {\n // Toggle on the chevron without stealing focus from the input — and\n // not at all on a disabled field, which the input's own `disabled`\n // does not stop from here.\n e.preventDefault();\n if (!disabled) setOpen((o) => !o);\n }}\n className={cn(\n \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n // The box above does the dimming; dimming here too would halve it again.\n !disabled && \"cursor-pointer\",\n )}\n />\n )}\n </div>\n {field.errorEl}\n {isPhone && (\n <PickerSheet\n open={open && !disabled}\n // Closing without choosing keeps the value: `text` was never emptied, so\n // reconcile has nothing to undo — it just puts the label back.\n onClose={reconcile}\n title={label}\n query={sheetQuery}\n onQueryChange={(v) => {\n setSheetQuery(v);\n setActive(-1);\n }}\n searchPlaceholder={searchPlaceholder ?? placeholder ?? labels.search}\n inputRef={sheetInputRef}\n closeLabel={closeLabel}\n >\n <ul id={listboxId} role=\"listbox\">\n {matches.map((o, i) => (\n // Keyed by group AND value, like combobox-core.tsx: an option may\n // deliberately appear twice (see `reconcile`), and a bare value key\n // would collide.\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {o.group && o.group !== matches[i - 1]?.group && (\n <li\n role=\"presentation\"\n className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\"\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={o.value === value}\n aria-disabled={o.disabled || undefined}\n onClick={() => commit(o)}\n className={cn(\n SHEET_ROW_CLASS,\n o.value === value && \"font-medium\",\n o.disabled && DISABLED_ROW_CLASS,\n )}\n >\n {o.label}\n </button>\n </li>\n </Fragment>\n ))}\n {matches.length === 0 && (\n <li className=\"px-4 py-3 text-sm text-[var(--text-muted)]\">{labels.noResults}</li>\n )}\n </ul>\n </PickerSheet>\n )}\n {!isPhone && open && !disabled && matches.length > 0 && (\n <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n {matches.map((o, i) => (\n // A group heading is emitted at each group boundary rather than repeating\n // the group on every row (feedback #136). `matches` is group-contiguous,\n // so comparing with the previous row is enough. Fragment key sits here;\n // the heading and the option carry their own list semantics — keyed by\n // group AND value, because an option may deliberately appear twice (see\n // `reconcile`).\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {o.group && o.group !== matches[i - 1]?.group && (\n <li\n role=\"presentation\"\n className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n // See {@link Combobox}: the role rides the button, `aria-selected`\n // is the CHOSEN row, and the keyboard's row is the field's\n // `aria-activedescendant`.\n role=\"option\"\n aria-selected={o.value === value}\n aria-disabled={o.disabled || undefined}\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown (not click) so the input's blur can't close the\n // list before the selection registers. Prevented on a disabled\n // row too, so pressing one leaves the field focused and open.\n e.preventDefault();\n commit(o);\n }}\n onMouseEnter={() => {\n if (!o.disabled) setActive(i);\n }}\n className={cn(\n rowClass(i === active && !o.disabled),\n o.disabled && DISABLED_ROW_CLASS,\n // Indented under its heading, so the hierarchy is readable at a\n // glance instead of inferred from grey trailing text.\n o.group && \"ps-6\",\n o.value === value && \"font-medium\",\n )}\n >\n {o.label}\n {o.sublabel && (\n <span className=\"ms-2 text-xs text-[var(--text-placeholder)]\">\n {o.sublabel}\n </span>\n )}\n </button>\n </li>\n </Fragment>\n ))}\n </SuggestionList>\n )}\n </div>\n );\n}\n"],"mappings":";AAmHM,cA6RA,YA7RA;AAnHN,SAAS,UAAU,OAAO,SAAS,QAAQ,gBAAgB;AAE3D,SAAS,oBAAoB;AAC7B,SAAS,aAAa,SAAS;AAC/B,SAAS,YAAY,oBAAoB,eAAe,mBAAmB;AAC3E,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,aAAa,uBAAuB;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,yBAAyB,oBAAoB;AAKtD,MAAM,aAAa;AAwBnB,SAAS,sBAAsB;AAC7B,QAAM,WAAW,OAAO,KAAK;AAC7B,SAAO;AAAA,IACL,aAAa,CAAC,MAA0B;AACtC,UAAI,EAAE,WAAW,EAAG;AACpB,eAAS,UAAU;AACnB,iBAAW,MAAM;AACf,iBAAS,UAAU;AAAA,MACrB,GAAG,CAAC;AAAA,IACN;AAAA;AAAA,IAEA,eAAe,MAAM,SAAS;AAAA,EAChC;AACF;AAwBA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,EAAE,MAAM,KAAK,UAAU,IAAI,iBAAiB,WAAW,MAAM,EAAE,iBAAiB,IAAI,CAAC;AAC3F,QAAM,MAAM,aAAa,WAAW,IAAI;AACxC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAGL,WAAU;AAAA,QAGV;AAAA,QACA,OAAO,EAAE,KAAK,MAAM,KAAK,MAAM,OAAO,KAAK,MAAM;AAAA,QAEjD,8BAAC,QAAG,IAAQ,MAAK,WAAU,cAAW,IAAG,WAAW,YAAY,OAAO,EAAE,UAAU,GAChF,UACH;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAEA,MAAM,WAAW;AAgGV,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA;AAAA;AAAA;AAAA,EAId,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAkB;AAChB,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA,WAAW,gBAAgB,QAAQ,gBAAgB;AAAA,IACnD;AAAA,EACF;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AAGtB,QAAM,YAAY,GAAG,SAAS;AAC9B,QAAM,WAAW,CAAC,UAAkB,GAAG,SAAS,WAAW,KAAK;AAIhE,QAAM,UAAU,cAAc,aAAa,KAAK;AAChD,QAAM,EAAE,MAAM,SAAS,YAAY,SAAS,IAAI,YAAY,EAAE,YAAY,CAAC,QAAQ,CAAC;AACpF,QAAM,cAAc,oBAAoB;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAKvC,QAAM,gBAAgB,OAAgC,IAAI;AAG1D,QAAM,WAAW,OAAuB,IAAI;AAuB5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,QAAQ,SAAS,MAAM,KAAK,EAAE,YAAY,IAAI;AACpD,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAO,oBAAI,IAAY;AAC7B,UAAM,OAAO,QAAQ,OAAO,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;AACnE,QAAI;AACJ,UAAM,MAAM,mBAAmB,UAAU,KAAK;AAC9C,QAAI,CAAC,OAAO;AACV,eAAS,KAAK,MAAM,GAAG,GAAG;AAAA,IAC5B,OAAO;AAEL,YAAM,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,WAAW,KAAK,CAAC;AACnE,YAAM,WAAW,KAAK;AAAA,QACpB,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,EAAE,YAAY,EAAE,SAAS,KAAK;AAAA,MAC7E;AACA,eAAS,CAAC,GAAG,QAAQ,GAAG,QAAQ,EAAE,MAAM,GAAG,GAAG;AAAA,IAChD;AACA,QAAI,CAAC,QAAS,QAAO;AAKrB,UAAM,UAAU,oBAAI,IAAsB;AAC1C,eAAW,KAAK,QAAQ;AACtB,YAAM,MAAM,QAAQ,CAAC;AACrB,UAAI,CAAC,QAAQ,IAAI,GAAG,EAAG,SAAQ,IAAI,KAAK,CAAC,CAAC;AAC1C,cAAQ,IAAI,GAAG,EAAG,KAAK,CAAC;AAAA,IAC1B;AACA,WAAO,CAAC,GAAG,QAAQ,OAAO,CAAC,EAAE,KAAK;AAAA,EACpC,GAAG,CAAC,SAAS,OAAO,SAAS,gBAAgB,OAAO,CAAC;AAarD,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,CAAC,QAAS,QAAO;AACrB,UAAM,QAAQ,oBAAI,IAAoB;AACtC,QAAI;AACJ,YAAQ,QAAQ,CAAC,GAAG,MAAM;AACxB,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,SAAS,QAAQ,UAAU,KAAM,OAAM,IAAI,GAAG,KAAK;AACvD,aAAO;AAAA,IACT,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,SAAS,CAAC,MAAc;AAC5B,aAAS,CAAC;AACV,YAAQ,KAAK;AACb,cAAU,EAAE;AAGZ,cAAU,KAAK;AAAA,EACjB;AAUA,QAAM,WAAW,CAAC,WAAW,UAAU,KAAK,SAAS,QAAQ,SAAS,SAAS,MAAM,IAAI;AACzF,wBAAsB,QAAQ;AAE9B,QAAM,QAAQ,MAAM,KAAK;AACzB,QAAM,YACJ,eAAe,MAAM,SAAS,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,MAAM,YAAY,CAAC,IAC3F,YAAY,KAAK,IACjB;AAEN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,SAAK,GAAG,MAAM,KAAK,YAAY,WAAW,GAAG,YAAY,SAAS,GAIhE;AAAA,gBAAU,UACT,oBAAC,sBAAmB,SAAS,SAAS,WAAW,WAAW,eAAe,QACxE,iBACH;AAAA,MAWF,qBAAC,SAAI,KAAK,UAAU,WAAW,GAAG,YAAY,YAAY,+BAA+B,GACvF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YAGA,cAAY;AAAA,YACZ,MAAK;AAAA,YACL,iBAAe;AAAA,YAKf,iBAAe;AAAA,YACf,yBAAuB;AAAA,YACvB,qBAAkB;AAAA,YAClB,gBAAc,MAAM,aAAa;AAAA,YACjC,oBAAkB,MAAM;AAAA,YACxB,iBAAe;AAAA,YACf,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,YAAY;AAAA,YACzB,SAAS,MAAM;AAGb,kBAAI,YAAY,cAAc,EAAG;AACjC,sBAAQ,IAAI;AACZ,wBAAU,KAAK;AAGf,kBAAI,QAAS,eAAc,SAAS,MAAM;AAAA,YAC5C;AAAA,YAMA,SAAS,MAAM;AACb,sBAAQ,IAAI;AACZ,wBAAU,KAAK;AAAA,YACjB;AAAA,YAKA,WAAW,UAAU,SAAS;AAAA,YAC9B,UAAU,CAAC,MAAM;AACf,uBAAS,EAAE,OAAO,KAAK;AACvB,sBAAQ,IAAI;AACZ,wBAAU,EAAE;AACZ,wBAAU,IAAI;AAAA,YAChB;AAAA,YACA,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,aAAa;AACzB,kBAAE,eAAe;AACjB,wBAAQ,IAAI;AACZ,0BAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,QAAQ,SAAS,CAAC,CAAC;AAAA,cACtD,WAAW,EAAE,QAAQ,WAAW;AAC9B,kBAAE,eAAe;AACjB,0BAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,cACrC,WAAW,EAAE,QAAQ,SAAS;AAC5B,oBAAI,QAAQ,UAAU,KAAK,SAAS,QAAQ,QAAQ;AAClD,oBAAE,eAAe;AACjB,yBAAO,QAAQ,MAAM,CAAC;AAAA,gBACxB,OAAO;AAIL,sBAAI,SAAU,GAAE,eAAe;AAC/B,0BAAQ,KAAK;AACb,6BAAW;AAAA,gBACb;AAAA,cACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,wBAAQ,KAAK;AACb,0BAAU,EAAE;AAAA,cACd,WAAW,EAAE,QAAQ,OAAO;AAI1B,wBAAQ,KAAK;AACb,0BAAU,EAAE;AAAA,cACd;AAAA,YAMF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,UAAU,UAAa;AAAA,cACvB;AAAA,cACA,MAAM,aAAa;AAAA,YACrB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,aAAa,CAAC,MAAM;AAElB,gBAAE,eAAe;AACjB,kBAAI,CAAC,SAAU,SAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAClC;AAAA,YACA,WAAW;AAAA,cACT;AAAA;AAAA,cAEA,CAAC,YAAY;AAAA,YACf;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MACC,MAAM;AAAA,MACN,WACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,CAAC;AAAA,UACf,SAAS,MAAM,QAAQ,KAAK;AAAA,UAC5B,OAAO;AAAA,UAIP,OAAO;AAAA,UACP,eAAe,CAAC,MAAM;AACpB,qBAAS,CAAC;AACV,sBAAU,IAAI;AAAA,UAChB;AAAA,UACA,mBAAmB,qBAAqB;AAAA,UACxC,UAAU;AAAA,UACV;AAAA,UAEA,+BAAC,QAAG,IAAI,WAAW,MAAK,WACrB;AAAA;AAAA;AAAA;AAAA,YAIC,oBAAC,QAAG,MAAK,gBACP;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,SAAS,MAAM,OAAO,KAAK;AAAA,gBAC3B,WAAW,GAAG,iBAAiB,iCAAiC;AAAA,gBAE/D;AAAA;AAAA,YACH,GACF;AAAA,YAED,QAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,oBAAM,QAAQ,eAAe,IAAI,CAAC;AAClC,qBACE,qBAAC,YACE;AAAA,0BAAU,UACT;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBAEF,oBAAC,QAAG,MAAK,gBACP;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,MAAK;AAAA,oBACL,iBAAe,MAAM;AAAA,oBACrB,SAAS,MAAM,OAAO,CAAC;AAAA,oBACvB,WAAW;AAAA,sBACT;AAAA,sBACA,mBAAmB;AAAA,oBACrB;AAAA,oBAEC;AAAA,wCAAkB,oBAAC,UAAK,WAAU,YAAY,aAAE,IAAU;AAAA,sBAC1D,kBAAkB,CAAC;AAAA;AAAA;AAAA,gBACtB,GACF;AAAA,mBAvBa,CAwBf;AAAA,YAEJ,CAAC;AAAA,aACH;AAAA;AAAA,MACF;AAAA,MAED,CAAC,WAAW,QAAQ,CAAC,aAAa,QAAQ,SAAS,KAAK,cACvD,qBAAC,kBAAe,IAAI,WAAW,WAAW,UAAU,UACjD;AAAA,qBACC,oBAAC,QAAG,MAAK,gBACP;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,UAAU;AAAA,YACV,aAAa,CAAC,MAAM;AAGlB,gBAAE,eAAe;AACjB,qBAAO,KAAK;AAAA,YACd;AAAA,YACA,WAAW,GAAG,SAAS,KAAK,GAAG,iCAAiC;AAAA,YAE/D;AAAA;AAAA,QACH,GACF;AAAA,QAED,QAAQ,IAAI,CAAC,GAAG,MAAM;AAIrB,gBAAM,QAAQ,eAAe,IAAI,CAAC;AAClC,iBACE,qBAAC,YACE;AAAA,sBAAU,UACT;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,YAEF,oBAAC,QAAG,MAAK,gBACP;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAI,SAAS,CAAC;AAAA,gBACd,MAAK;AAAA,gBAKL,iBAAe,MAAM;AAAA,gBAGrB,UAAU;AAAA,gBACV,aAAa,CAAC,MAAM;AAGlB,oBAAE,eAAe;AACjB,yBAAO,CAAC;AAAA,gBACV;AAAA,gBACA,cAAc,MAAM,UAAU,CAAC;AAAA,gBAC/B,WAAW;AAAA,kBACT,SAAS,MAAM,MAAM;AAAA,kBACrB,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAIjB,mBAAmB;AAAA,gBACrB;AAAA,gBAEC;AAAA,oCAAkB,oBAAC,UAAK,WAAU,YAAY,aAAE,IAAU;AAAA,kBAC1D,kBAAkB,CAAC;AAAA;AAAA;AAAA,YACtB,GACF;AAAA,eAzCa,CA0Cf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA,OAEJ;AAAA;AAEJ;AAmEO,SAAS,qBAAkF;AAAA,EAChG,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA;AAAA;AAAA;AAAA,EAId,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAoC;AAGlC,QAAM,QAAkB,YAAY,QAAQ,aAAa,aAAa,OAAQ;AAC9E,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA,WAAW,gBAAgB,QAAQ,gBAAgB;AAAA,IACnD;AAAA,EACF;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AAEtB,QAAM,YAAY,GAAG,SAAS;AAC9B,QAAM,WAAW,CAAC,UAAkB,GAAG,SAAS,WAAW,KAAK;AAChE,QAAM,UAAU,cAAc,aAAa,KAAK;AAEhD,QAAM,EAAE,MAAM,SAAS,YAAY,SAAS,IAAI,YAAY,EAAE,YAAY,CAAC,QAAQ,CAAC;AACpF,QAAM,cAAc,oBAAoB;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,QAAM,gBAAgB,OAAgC,IAAI;AAE1D,QAAM,WAAW,OAAuB,IAAI;AAI5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAI/C,QAAM,SAAS,aAAa,YAAY,yBAAyB;AAAA,IAC/D,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,EACT,CAAC;AAED,QAAM,WAAW;AAAA,IACf,MAAO,SAAS,OAAO,OAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK;AAAA,IACzE,CAAC,SAAS,KAAK;AAAA,EACjB;AACA,QAAM,QAAQ,QAAQ,UAAU,SAAS;AAGzC,QAAM,YAAY,QAAQ,aAAa,SAAS,QAAQ,CAAC,QAAQ;AAKjE,QAAM,aACJ,SAAS,QAAQ,UAAU,UAAU,SAAS,MAAM,KAAK,KAAK,EAAE,YAAY,IAAI;AAClF,QAAM,QAAQ,UAAU,WAAW,KAAK,EAAE,YAAY,IAAI;AAC1D,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACb,QAAI,OAAO;AACT,YAAM,MAAM,CAAC,MAA0B,GAAG,YAAY,EAAE,SAAS,KAAK,KAAK;AAC3E,YAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,WAAW,KAAK,CAAC;AAC5E,YAAMA,QAAO,QAAQ;AAAA,QACnB,CAAC,MACC,CAAC,EAAE,MAAM,YAAY,EAAE,WAAW,KAAK,MACtC,IAAI,EAAE,KAAK,KAAK,IAAI,EAAE,QAAQ,KAAK,IAAI,EAAE,KAAK;AAAA,MACnD;AACA,eAAS,CAAC,GAAG,QAAQ,GAAGA,KAAI;AAAA,IAC9B;AACA,QAAI,CAAC,OAAO,KAAK,CAAC,MAAM,EAAE,KAAK,EAAG,QAAO;AAKzC,UAAM,SAAS,oBAAI,IAA8B;AACjD,eAAW,KAAK,QAAQ;AACtB,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,CAAC,OAAO,IAAI,GAAG,EAAG,QAAO,IAAI,KAAK,CAAC,CAAC;AACxC,aAAO,IAAI,GAAG,EAAG,KAAK,CAAC;AAAA,IACzB;AACA,WAAO,CAAC,GAAG,OAAO,OAAO,CAAC,EAAE,KAAK;AAAA,EACnC,GAAG,CAAC,SAAS,KAAK,CAAC;AAMnB,QAAM,WAAW,CAAC,WAAW,gBAAgB,QAAQ,MAAM,CAAC,IAAI,SAAS,MAAM,IAAI;AACnF,wBAAsB,QAAQ;AAE9B,QAAM,QAAQ,MAAM;AAClB,YAAQ,KAAK;AACb,cAAU,EAAE;AACZ,kBAAc,EAAE;AAAA,EAClB;AACA,QAAM,SAAS,CAAC,MAAsB;AAEpC,QAAI,EAAE,SAAU;AAChB,QAAI,EAAE,UAAU,MAAO,UAAS,EAAE,KAAK;AACvC,YAAQ,IAAI;AACZ,UAAM;AAAA,EACR;AAWA,QAAM,YAAY,MAAM;AACtB,QAAI,SAAS,MAAM;AACjB,YAAM,IAAI,KAAK,KAAK;AACpB,UAAI,CAAC,GAAG;AACN,YAAI,SAAS,KAAM,UAAS,UAAU;AAAA,MACxC,OAAO;AAGL,cAAM,OAAO,QAAQ;AAAA,UACnB,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,MAAM,YAAY,MAAM,EAAE,YAAY;AAAA,QAChE;AACA,cAAM,MAAM,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAC5C,YAAI,IAAI,SAAS,KAAK,KAAK,CAAC,EAAE,UAAU,MAAO,UAAS,KAAK,CAAC,EAAE,KAAK;AAAA,MACvE;AACA,cAAQ,IAAI;AAAA,IACd;AACA,UAAM;AAAA,EACR;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,SAAK,GAAG,MAAM,KAAK,YAAY,WAAW,GAAG,YAAY,SAAS,GAEhE;AAAA,gBAAU,UACT,oBAAC,sBAAmB,SAAS,SAAS,WAAW,WAAW,eAAe,QACxE,iBACH;AAAA,MAQF,qBAAC,SAAI,KAAK,UAAU,WAAW,GAAG,YAAY,YAAY,+BAA+B,GACvF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,OAAO;AAAA,YACP;AAAA,YAIA,cAAY;AAAA,YACZ,MAAK;AAAA,YACL,iBAAe;AAAA,YAIf,iBAAe;AAAA,YACf,yBAAuB;AAAA,YACvB,qBAAkB;AAAA,YAClB,gBAAc,MAAM,aAAa;AAAA,YACjC,oBAAkB,MAAM;AAAA,YACxB,iBAAe;AAAA,YACf,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,WAAW,UAAU,SAAS;AAAA,YAC9B,aAAa,YAAY;AAAA,YACzB,SAAS,CAAC,MAAM;AAId,kBAAI,YAAY,cAAc,EAAG;AACjC,sBAAQ,KAAK;AACb,gBAAE,cAAc,OAAO;AACvB,sBAAQ,IAAI;AAGZ,kBAAI,QAAS,eAAc,SAAS,MAAM;AAAA,YAC5C;AAAA,YACA,QAAQ,MAAM;AAGZ,kBAAI,CAAC,QAAS,WAAU;AAAA,YAC1B;AAAA,YACA,UAAU,CAAC,MAAM;AACf,sBAAQ,EAAE,OAAO,KAAK;AACtB,sBAAQ,IAAI;AACZ,wBAAU,EAAE;AAAA,YACd;AAAA,YACA,WAAW,CAAC,MAAM;AAGhB,kBAAI,EAAE,QAAQ,aAAa;AACzB,kBAAE,eAAe;AACjB,wBAAQ,IAAI;AACZ,0BAAU,CAAC,MAAM,YAAY,SAAS,GAAG,CAAC,CAAC;AAAA,cAC7C,WAAW,EAAE,QAAQ,WAAW;AAC9B,kBAAE,eAAe;AACjB,0BAAU,CAAC,MAAO,IAAI,IAAI,YAAY,SAAS,IAAI,CAAC,IAAI,YAAY,SAAS,GAAG,EAAE,CAAE;AAAA,cACtF,WAAW,EAAE,QAAQ,SAAS;AAC5B,oBAAI,QAAQ,gBAAgB,QAAQ,MAAM,CAAC,GAAG;AAC5C,oBAAE,eAAe;AACjB,yBAAO,QAAQ,MAAM,CAAC;AAAA,gBACxB,OAAO;AACL,4BAAU;AAAA,gBACZ;AAAA,cACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,wBAAQ,IAAI;AACZ,sBAAM;AAAA,cACR,WAAW,EAAE,QAAQ,OAAO;AAK1B,0BAAU;AAAA,cACZ;AAAA,YAGF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,UAAU,UAAa;AAAA,cACvB;AAAA,cACA,MAAM,aAAa;AAAA,YACrB;AAAA;AAAA,QACF;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YAKL,UAAU;AAAA,YACV,cAAY,OAAO;AAAA,YAInB,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,YACrC,SAAS,MAAM;AACb,sBAAQ,IAAI;AACZ,oBAAM;AACN,uBAAS,UAAU;AAAA,YACrB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,8BAAC,KAAE,eAAW,MAAC,WAAU,UAAS;AAAA;AAAA,QACpC,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,aAAa,CAAC,MAAM;AAIlB,gBAAE,eAAe;AACjB,kBAAI,CAAC,SAAU,SAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAClC;AAAA,YACA,WAAW;AAAA,cACT;AAAA;AAAA,cAEA,CAAC,YAAY;AAAA,YACf;AAAA;AAAA,QACF;AAAA,SAEJ;AAAA,MACC,MAAM;AAAA,MACN,WACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,CAAC;AAAA,UAGf,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,UACP,eAAe,CAAC,MAAM;AACpB,0BAAc,CAAC;AACf,sBAAU,EAAE;AAAA,UACd;AAAA,UACA,mBAAmB,qBAAqB,eAAe,OAAO;AAAA,UAC9D,UAAU;AAAA,UACV;AAAA,UAEA,+BAAC,QAAG,IAAI,WAAW,MAAK,WACrB;AAAA,oBAAQ,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,cAIf,qBAAC,YACE;AAAA,kBAAE,SAAS,EAAE,UAAU,QAAQ,IAAI,CAAC,GAAG,SACtC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBAET,YAAE;AAAA;AAAA,gBACL;AAAA,gBAEF,oBAAC,QAAG,MAAK,gBACP;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,MAAK;AAAA,oBACL,iBAAe,EAAE,UAAU;AAAA,oBAC3B,iBAAe,EAAE,YAAY;AAAA,oBAC7B,SAAS,MAAM,OAAO,CAAC;AAAA,oBACvB,WAAW;AAAA,sBACT;AAAA,sBACA,EAAE,UAAU,SAAS;AAAA,sBACrB,EAAE,YAAY;AAAA,oBAChB;AAAA,oBAEC,YAAE;AAAA;AAAA,gBACL,GACF;AAAA,mBAxBa,GAAG,EAAE,SAAS,EAAE,IAAI,OAAO,EAAE,KAAK,CAAC,EAyBlD;AAAA,aACD;AAAA,YACA,QAAQ,WAAW,KAClB,oBAAC,QAAG,WAAU,8CAA8C,iBAAO,WAAU;AAAA,aAEjF;AAAA;AAAA,MACF;AAAA,MAED,CAAC,WAAW,QAAQ,CAAC,YAAY,QAAQ,SAAS,KACjD,oBAAC,kBAAe,IAAI,WAAW,WAAW,UAAU,UACjD,kBAAQ,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,qBAAC,YACE;AAAA,YAAE,SAAS,EAAE,UAAU,QAAQ,IAAI,CAAC,GAAG,SACtC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cAET,YAAE;AAAA;AAAA,UACL;AAAA,UAEF,oBAAC,QAAG,MAAK,gBACP;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,SAAS,CAAC;AAAA,cAId,MAAK;AAAA,cACL,iBAAe,EAAE,UAAU;AAAA,cAC3B,iBAAe,EAAE,YAAY;AAAA,cAC7B,UAAU;AAAA,cACV,aAAa,CAAC,MAAM;AAIlB,kBAAE,eAAe;AACjB,uBAAO,CAAC;AAAA,cACV;AAAA,cACA,cAAc,MAAM;AAClB,oBAAI,CAAC,EAAE,SAAU,WAAU,CAAC;AAAA,cAC9B;AAAA,cACA,WAAW;AAAA,gBACT,SAAS,MAAM,UAAU,CAAC,EAAE,QAAQ;AAAA,gBACpC,EAAE,YAAY;AAAA;AAAA;AAAA,gBAGd,EAAE,SAAS;AAAA,gBACX,EAAE,UAAU,SAAS;AAAA,cACvB;AAAA,cAEC;AAAA,kBAAE;AAAA,gBACF,EAAE,YACD,oBAAC,UAAK,WAAU,+CACb,YAAE,UACL;AAAA;AAAA;AAAA,UAEJ,GACF;AAAA,aA9Ca,GAAG,EAAE,SAAS,EAAE,IAAI,OAAO,EAAE,KAAK,CAAC,EA+ClD;AAAA,OACD,GACH;AAAA,OAEJ;AAAA;AAEJ;","names":["rest"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ChevronDown, X } from \"lucide-react\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useDropdown } from \"./dropdown\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport {\n ComboboxFieldLabel,\n DISABLED_ROW_CLASS,\n isOptionEnabled,\n stepEnabled,\n SUGGESTION_LIST_CLASS,\n suggestionRowClass,\n useActiveOptionScroll,\n useComboboxFieldError,\n type ComboClearValue,\n type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n// One look for both combobox flavors below — the suggestion list and its rows\n// must stay pixel-identical between the free-text and the id-keyed variant (and\n// `Autocomplete`, which shares them from the core).\nconst LIST_CLASS = SUGGESTION_LIST_CLASS;\n\n/**\n * \"This focus came from a mouse button that is not the left one\" — for the two\n * fields below, which open their list ON FOCUS.\n *\n * Keksdose live #309 rework: *\"When clicking the mouse back button now while hovering\n * one of the selects it opens the select as long as I am holding the button down and\n * closes select after releasing.\"* A mouse's BACK button focuses whatever it is\n * pressed over, exactly as the left one does — the browser only reserves the\n * NAVIGATION for itself — so a field that opens on focus opened a list for a gesture\n * that means \"go back\", and the release then navigated out from under it. Measured on\n * his own budget: `mousePressed button=back` over the transfer form's account field\n * left `aria-expanded=true`, and the release took the whole add card with it.\n *\n * The press is recorded and read by the focus that the SAME press causes: focus is\n * mousedown's default action, dispatched inside the same task, so the flag is always\n * read before the `setTimeout` below can drop it. And it is always dropped — a press\n * that focuses nothing (the pointer was over a disabled field, the button was\n * released elsewhere) must not leave a latch that swallows the next Tab.\n *\n * Only the OPEN is suppressed, never the navigation: Back still goes back, which is\n * the whole of what the button was pressed for.\n */\nfunction usePrimaryPressOnly() {\n const auxPress = useRef(false);\n return {\n onMouseDown: (e: { button: number }) => {\n if (e.button === 0) return;\n auxPress.current = true;\n setTimeout(() => {\n auxPress.current = false;\n }, 0);\n },\n /** True while handling the focus a non-primary press just caused. */\n fromAuxButton: () => auxPress.current,\n };\n}\n\n/**\n * The desktop suggestion list, PORTALLED and anchored to the field.\n *\n * It used to be an `absolute` `<ul>` inside the field's own wrapper, and that is\n * Keksdose live #295: *\"Category select inside the list is not readable. Some sort\n * of z indexes issue?\"*. It was not z-index — a stacking context can be out-ranked,\n * but `overflow` cannot be argued with. The receipt's line table sits in a card\n * carrying `overflow-clip`, so a list opened from the last visible row was cut off\n * at the card's edge: measured at 256px tall with 150px of it painted.\n *\n * Every other panel in this package already learned this — `DropdownPanel`'s\n * `anchorRef` form, the calculator popover, the tooltip — so this reuses the same\n * hook rather than inventing a second placement. What that buys beyond the clip:\n * the list flips above the field when there is no room below, and it caps its own\n * height against the VISIBLE viewport, which on a phone means the on-screen\n * keyboard (see {@link useAnchoredPanel}).\n *\n * `panelRef` is not optional plumbing. Portalled, the list is no longer a\n * descendant of the wrapper, so {@link useDropdown}'s outside-click test answers\n * \"outside\" for a click on the list itself — the first option a user picked would\n * close the dropdown having picked nothing.\n */\nfunction SuggestionList({\n id,\n anchorRef,\n panelRef,\n children,\n}: {\n /** What the field's `aria-controls` names. */\n id: string;\n anchorRef: RefObject<HTMLElement | null>;\n panelRef: RefObject<HTMLDivElement | null>;\n children: ReactNode;\n}) {\n const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });\n const dir = useAnchorDir(anchorRef, true);\n if (!rect) return null;\n return createPortal(\n <div\n ref={panelRef}\n // z-50, not the old z-30: the list is a child of <body> now, so it is\n // competing with the app's own overlays rather than with its own siblings.\n className=\"fixed z-50\"\n // Portalled out of the form's `dir`; the field's is put back. The list is\n // exactly the field's width, so `left` places it in either direction.\n dir={dir}\n style={{ top, left: rect.left, width: rect.width }}\n >\n <ul id={id} role=\"listbox\" data-clips=\"\" className={LIST_CLASS} style={{ maxHeight }}>\n {children}\n </ul>\n </div>,\n document.body,\n );\n}\n\nconst rowClass = suggestionRowClass;\n\n/**\n * Four of the div's own attributes are omitted because this component already owns\n * the name, with a different meaning: `id` is the INPUT's (a caller labels or\n * automates the field, not the box around it), and `onChange`/`onBlur`/`onSubmit`\n * are the field's — a value, a departure, and \"I mean what I typed\" — rather than\n * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.\n */\nexport interface ComboboxProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\" | \"onBlur\" | \"onSubmit\"> {\n value: string;\n onChange: (v: string) => void;\n /** Suggestion pool (e.g. existing payee names). */\n options: string[];\n label?: string;\n id?: string;\n placeholder?: string;\n className?: string;\n /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`\n * itself rather than on the wrapper, which is what let Keksdose's account picker\n * delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying\n * because this component had no `invalid` of its own. */\n invalid?: boolean;\n /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n * field, on the `<input>`'s `aria-describedby`, and implies `invalid` (lenkbank's\n * scope fields, which moved here off `<Input list>` + `<datalist>`). */\n error?: ReactNode;\n /** As `<input disabled>`: no focus, no list, the field's settled look. The chevron\n * stops toggling with it — it is a mouse target the input's own `disabled` does\n * not reach. */\n disabled?: boolean;\n /** Heading an option belongs under. Supplying it makes this list read exactly\n * like {@link InlineEntityCombobox}'s — one heading per group with its rows\n * indented beneath — instead of a flat list (feedback #136 rework: the payee\n * field sat next to the newly-grouped category field and no longer matched).\n * Omit for a plain list. */\n groupBy?: (option: string) => string;\n /**\n * Something to show at the far end of an option's row — a badge saying what the\n * option IS, as distinct from what it is called.\n *\n * Keksdose's category-name field is the case: its proposals carry per-locale\n * names, so picking one stores a category that follows the UI language, and\n * picking a look-alike custom name does not. That difference is invisible in the\n * label and decides what the row DOES, so the row has to show it. Returning\n * `null` for an option renders nothing and costs no layout.\n *\n * Not rendered in the create row, which by definition names nothing in the pool.\n */\n optionAdornment?: (option: string) => ReactNode;\n /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open\n * the list with it. A click-the-value inline editor needs it: the cell the user\n * clicked names the field the caret should land in. {@link InlineEntityCombobox}\n * has had it since live #218. */\n autoFocus?: boolean;\n /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress\n * `mousedown`, so the input never blurs — which is what makes it usable as a\n * \"close the inline editor\" signal. */\n onBlur?: () => void;\n /** Enter pressed with no row highlighted, i.e. \"I mean what I typed\". The list\n * closes either way; this is for a caller whose Enter also submits a row editor. */\n onSubmit?: () => void;\n /** Rows to offer when the field is empty. 8 on a dropdown, where that is all\n * that fits; the phone sheet asks for more because it has a screen. */\n maxSuggestions?: number;\n searchPlaceholder?: string;\n closeLabel?: string;\n /**\n * Label for the row that COMMITS a value the list does not contain — e.g.\n * `(v) => \\`Add \"${v}\" as payee\\``. Supplying it turns the free text into\n * something you confirm rather than something you leave behind.\n *\n * Keksdose live #212: *\"For the payee input have an apply button, when input is\n * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with\n * the right top X, which seems not intuitive.\"* On the phone sheet the search box\n * IS the value, so typing a brand-new name and dismissing the sheet did commit it —\n * but the only control on offer was the close X, which reads as \"discard\". A named\n * affordance says what the typing did.\n *\n * Omit and the row is not rendered, which is the right default for a list whose\n * values are all supposed to already exist.\n */\n createLabel?: (value: string) => string;\n}\n\n/**\n * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE\n * styling, chevron and static floating label) but lets the user type a value\n * that isn't in the list — e.g. naming a brand-new payee. Picking from the\n * filtered suggestion list fills the value; typing keeps whatever was entered.\n *\n * Use this instead of an `<Input list=\"…\">` + `<datalist>` so the control is\n * visually and behaviourally consistent with the other dropdowns (feedback\n * #230 — the payee field looked/behaved differently from every other select).\n */\nexport function Combobox({\n value,\n onChange,\n options,\n label,\n id,\n placeholder,\n className,\n groupBy,\n maxSuggestions,\n searchPlaceholder,\n closeLabel,\n createLabel,\n invalid,\n error,\n disabled,\n optionAdornment,\n autoFocus,\n onBlur,\n onSubmit,\n \"aria-label\": ariaLabel,\n // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n // on the wrapper div the hint and required state described nothing.\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: ComboboxProps) {\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n ariaDescribedBy,\n );\n const generated = useId();\n const fieldId = id ?? generated;\n // Derived from the GENERATED id, never from `id`: a caller's id is theirs to\n // collide with, and `aria-controls` has to resolve.\n const listboxId = `${generated}-listbox`;\n const optionId = (index: number) => `${generated}-option-${index}`;\n // `backCloses` is the desktop half of live #309: the phone's list IS a\n // {@link PickerSheet}, which registers its own history entry, so registering a\n // second one here would cost two Back presses to dismiss one sheet.\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n const primaryOnly = usePrimaryPressOnly();\n const [active, setActive] = useState(-1);\n // A phone opens the list as a full-screen sheet with its own input, the way a\n // native <select> does — live #200: \"Paid as full screen dialog with input.\n // Similar to the account select that already appears as full screen.\" The\n // anchored list stays for pointer devices, where it is the better shape.\n const sheetInputRef = useRef<HTMLInputElement | null>(null);\n // The box the portalled list hangs off — the inner wrapper, which hugs the input,\n // not the outer one (a grid item that can be taller than the field).\n const fieldRef = useRef<HTMLDivElement>(null);\n\n /**\n * Is the text in the field a QUERY, or just what was picked last time?\n *\n * Keksdose dev#549, filed against the category-name field: *\"Currently it acts kind\n * of a filter and clicking again does not open anything since the previous text is\n * still there likely filtering all other options out.\"* A combobox whose filter is\n * its own value can only ever re-offer the answer it already has — after picking\n * \"REWE\" the list reopens holding one row, the one you are looking at, and changing\n * your mind means clearing the field by hand first.\n *\n * So the text filters only while it is being TYPED; opening the list, by focus or\n * by clicking the field again, puts the whole pool back. {@link InlineEntityCombobox}\n * below has had this since it was written (see its `typedQuery`) and the app's\n * category-name field grew its own copy to get it — this one, the payee field, was\n * the one left with the bug.\n *\n * Not derived from \"does the text exactly match an option\": a custom value that\n * happens to collide with one would then behave differently from every other, and\n * what is being tracked is what the user just did, which is not a property of the\n * string.\n */\n const [typing, setTyping] = useState(false);\n\n const query = typing ? value.trim().toLowerCase() : \"\";\n const matches = useMemo(() => {\n const seen = new Set<string>();\n const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));\n let ranked: string[];\n const cap = maxSuggestions ?? (isPhone ? 50 : 8);\n if (!query) {\n ranked = uniq.slice(0, cap);\n } else {\n // Prefix matches first, then substring matches — most relevant on top.\n const starts = uniq.filter((o) => o.toLowerCase().startsWith(query));\n const contains = uniq.filter(\n (o) => !o.toLowerCase().startsWith(query) && o.toLowerCase().includes(query),\n );\n ranked = [...starts, ...contains].slice(0, cap);\n }\n if (!groupBy) return ranked;\n // Keep each group contiguous so a heading appears once instead of every time\n // the ranking interleaves two groups — while preserving \"best match first\":\n // a Map keeps insertion order, so groups come out ordered by their best-ranked\n // member and members keep their rank order inside the group.\n const byGroup = new Map<string, string[]>();\n for (const o of ranked) {\n const key = groupBy(o);\n if (!byGroup.has(key)) byGroup.set(key, []);\n byGroup.get(key)!.push(o);\n }\n return [...byGroup.values()].flat();\n }, [options, query, groupBy, maxSuggestions, isPhone]);\n\n /**\n * Which rows OPEN a group, and with what heading — computed once for both lists.\n *\n * The desktop list had this as `matches[i - 1]`, which is free; the sheet had it as\n * `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and another\n * per heading test. That is quadratic in the sheet's own cap of 50, on the branch\n * that runs on the slowest hardware we ship to — and it answers the wrong question\n * besides: `indexOf` finds the FIRST row with that string, so a duplicated option\n * would have compared against a neighbour it is not next to. (`matches` de-duplicates\n * today; that is a property of the memo above, not of the row being rendered.)\n */\n const groupHeadings = useMemo(() => {\n if (!groupBy) return null;\n const heads = new Map<number, string>();\n let prev: string | undefined;\n matches.forEach((o, i) => {\n const group = groupBy(o);\n if (group != null && group !== prev) heads.set(i, group);\n prev = group;\n });\n return heads;\n }, [matches, groupBy]);\n\n const commit = (v: string) => {\n onChange(v);\n setOpen(false);\n setActive(-1);\n // What is in the field is now an ANSWER, not a query — so reopening offers the\n // whole pool again rather than a one-row filter of the value just chosen.\n setTyping(false);\n };\n\n // Offered only when the typed text is genuinely NOT in the pool: an exact\n // (case-insensitive) match is an existing entry the list is already showing, and a\n // second way to pick it would be noise. Compared against `options`, not `matches` —\n // `matches` is capped, so a pool of 300 payees would otherwise offer to \"add\" one\n // that exists but fell off the end of the list.\n // What the field claims the keyboard is on. Only on a pointer device: the phone\n // renders its rows in a {@link PickerSheet} whose own search box owns focus, and a\n // field pointing at an id that is not there is worse than one pointing nowhere.\n const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : undefined;\n useActiveOptionScroll(activeId);\n\n const typed = value.trim();\n const createRow =\n createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase())\n ? createLabel(typed)\n : null;\n\n return (\n // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n // description, invalid or required state: those belong on the <input> below,\n // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n {/* A real <label for> since lenkbank's tests met a field `getByLabelText` could\n not find: it used to be a <span>, with the text copied onto `aria-label`. The\n name a reader hears is the same words either way. */}\n {label !== undefined && (\n <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? \"opacity-50\" : undefined}>\n {label}\n </ComboboxFieldLabel>\n )}\n {/* The chevron centers against this inner wrapper, which hugs the input.\n The outer div can be taller than the input (as a grid item it\n stretches to the row height, e.g. next to the editor's category cell\n with its split button), which used to drag a top-1/2 chevron down to\n the input's bottom edge (feedback #248). */}\n {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.\n FIELD_BASE's grey alone left a disabled picker looking like a filled-in\n one beside the pickers that do dim (the label is not the input's `peer`,\n so it is dimmed by hand above). */}\n <div ref={fieldRef} className={cn(\"relative\", disabled && \"cursor-not-allowed opacity-50\")}>\n <input\n id={fieldId}\n value={value}\n placeholder={placeholder}\n // The caller's name, over the <label for> above — which is what names the\n // field otherwise (dev#477: a field with neither announces only its text).\n aria-label={ariaLabel}\n role=\"combobox\"\n aria-expanded={open}\n // The list this field is the mouth of. Required by the role, and the half\n // that was missing: the field said it was expanded and never said what it\n // had expanded, so a reader had no way from the box to the options\n // (ESLint's `role-has-required-aria-props`, the audit's §a11y).\n aria-controls={listboxId}\n aria-activedescendant={activeId}\n aria-autocomplete=\"list\"\n aria-invalid={field.isInvalid || undefined}\n aria-describedby={field.describedBy}\n aria-required={ariaRequired}\n autoComplete=\"off\"\n disabled={disabled}\n // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n autoFocus={autoFocus}\n onBlur={onBlur}\n onMouseDown={primaryOnly.onMouseDown}\n onFocus={() => {\n // A back/forward mouse button focuses this field on its way to\n // navigating; it is not a request to open anything (live #309 rework).\n if (primaryOnly.fromAuxButton()) return;\n setOpen(true);\n setTyping(false);\n // The sheet carries its own input, so the field behind it must not also\n // pull up the keyboard and scroll the page under the dialog.\n if (isPhone) sheetInputRef.current?.focus();\n }}\n // A CLICK as well as focus — the other half of dev#549. Picking a suggestion\n // closes the list without moving focus (the rows suppress `mousedown` on\n // purpose, so the input never blurred), which means clicking the field again\n // fires no `focus` event at all and the list stayed shut. \"Does not open\n // anything\" was literally true.\n onClick={() => {\n setOpen(true);\n setTyping(false);\n }}\n // `inputMode=\"none\"` rather than readOnly: the field must not look\n // uneditable (FIELD_BASE greys a read-only field since dev#468) and must\n // still take focus — it just has no keyboard of its own, the same trick\n // the amount field uses for the numpad.\n inputMode={isPhone ? \"none\" : undefined}\n onChange={(e) => {\n onChange(e.target.value);\n setOpen(true);\n setActive(-1);\n setTyping(true);\n }}\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setOpen(true);\n setActive((i) => Math.min(i + 1, matches.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\") {\n if (open && active >= 0 && active < matches.length) {\n e.preventDefault();\n commit(matches[active]);\n } else {\n // No row highlighted: the typed text is the answer. `preventDefault`\n // only when a caller is taking Enter, so a plain form submit is\n // otherwise left alone.\n if (onSubmit) e.preventDefault();\n setOpen(false);\n onSubmit?.();\n }\n } else if (e.key === \"Escape\") {\n setOpen(false);\n setActive(-1);\n } else if (e.key === \"Tab\") {\n // Closes, and lets the browser take the Tab: focus is in THIS input,\n // which is staying, so there is nothing to catch — unlike the pickers\n // whose focus sits inside a portalled panel.\n setOpen(false);\n setActive(-1);\n }\n // Home/End are deliberately absent. The APG gives them to the list only\n // where the combobox is not editable; here the text IS the value, a\n // payee name is long enough to want the caret moved to its start, and\n // the desktop list is capped at 8 rows — so jumping it would be worth\n // almost nothing and would cost the one gesture that field is used with.\n }}\n className={cn(\n FIELD_BASE,\n label !== undefined && FIELD_FLOATING_PAD,\n \"pe-9\",\n field.isInvalid && FIELD_INVALID,\n )}\n />\n <ChevronDown\n aria-hidden\n onMouseDown={(e) => {\n // Toggle on the chevron without stealing focus from the input.\n e.preventDefault();\n if (!disabled) setOpen((o) => !o);\n }}\n className={cn(\n \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n // The box above does the dimming; dimming here too would halve it again.\n !disabled && \"cursor-pointer\",\n )}\n />\n </div>\n {field.errorEl}\n {isPhone && (\n <PickerSheet\n open={open && !disabled}\n onClose={() => setOpen(false)}\n title={label}\n // The sheet's input IS the field: this is a free-text control, so what is\n // typed here is the value (a brand-new payee is just a name nothing\n // matches), and the list below narrows as it changes.\n query={value}\n onQueryChange={(v) => {\n onChange(v);\n setTyping(true);\n }}\n searchPlaceholder={searchPlaceholder ?? placeholder}\n inputRef={sheetInputRef}\n closeLabel={closeLabel}\n >\n <ul id={listboxId} role=\"listbox\">\n {createRow && (\n // `role=\"option\"` rides the BUTTON, not the <li> around it: an option\n // may not contain a separately focusable control, and the button is\n // what a pointer presses. Same shape `CommandPalette` has always had.\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={false}\n onClick={() => commit(typed)}\n className={cn(SHEET_ROW_CLASS, \"font-medium text-[var(--brand)]\")}\n >\n {createRow}\n </button>\n </li>\n )}\n {matches.map((o, i) => {\n const group = groupHeadings?.get(i);\n return (\n <Fragment key={o}>\n {group !== undefined && (\n <li\n role=\"presentation\"\n className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\"\n >\n {group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={o === value}\n onClick={() => commit(o)}\n className={cn(\n SHEET_ROW_CLASS,\n optionAdornment && \"flex items-center justify-between gap-2\",\n )}\n >\n {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n {optionAdornment?.(o)}\n </button>\n </li>\n </Fragment>\n );\n })}\n </ul>\n </PickerSheet>\n )}\n {!isPhone && open && !disabled && (matches.length > 0 || createRow) && (\n <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n {createRow && (\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={false}\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown, like the rows below: the input's blur would otherwise\n // close the list before the click landed.\n e.preventDefault();\n commit(typed);\n }}\n className={cn(rowClass(false), \"font-medium text-[var(--brand)]\")}\n >\n {createRow}\n </button>\n </li>\n )}\n {matches.map((o, i) => {\n // Heading at each group boundary only — `matches` is group-contiguous, so\n // the boundaries are a property of the list rather than of the branch\n // drawing it. See `groupHeadings`.\n const group = groupHeadings?.get(i);\n return (\n <Fragment key={o}>\n {group !== undefined && (\n <li\n role=\"presentation\"\n className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n >\n {group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n role=\"option\"\n // CHOSEN, not highlighted. The row the arrows are on is named by\n // the field's `aria-activedescendant`; saying \"selected\" for it\n // would tell a reader that the row they are passing over is\n // already the answer.\n aria-selected={o === value}\n // Focus stays in the field — that is what\n // `aria-activedescendant` is for — so the rows are not tab stops.\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown (not click) so the blur from the input firing first\n // doesn't close the list before the selection registers.\n e.preventDefault();\n commit(o);\n }}\n onMouseEnter={() => setActive(i)}\n className={cn(\n rowClass(i === active),\n group != null && \"ps-6\",\n // A row with a badge is a flex row so the label truncates and the\n // badge keeps its width; without one it stays the plain block the\n // other lists render, so nothing shifts for callers that pass none.\n optionAdornment && \"flex items-center justify-between gap-2\",\n )}\n >\n {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n {optionAdornment?.(o)}\n </button>\n </li>\n </Fragment>\n );\n })}\n </SuggestionList>\n )}\n </div>\n );\n}\n\n/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}\n * for why the div's spellings of them are omitted. */\nexport interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\"> {\n /** Selected option id; `null` or `clearValue` when nothing is selected. */\n value: V | C | null;\n /** Required and unanswered — see {@link Combobox}'s `invalid`. */\n invalid?: boolean;\n /** What is wrong with the value — see {@link Combobox}'s `error`. */\n error?: ReactNode;\n /** A picked/typed option emits its id; emptying the field, or the \"×\", emits\n * `clearValue`. */\n onChange: (v: V | C) => void;\n /** What a clear emits — `null` by default, `\"\"` for a schema that wants an empty\n * string. See {@link EntityCombobox}'s `clearValue`. */\n clearValue?: C;\n options: ComboOption<V>[];\n label?: string;\n id?: string;\n placeholder?: string;\n className?: string;\n disabled?: boolean;\n /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`\n * below, open the list with it. A click-the-value editor needs it: the cell\n * the user clicked names the field the editor should land the caret in, and\n * without a passthrough this component's fixed prop list puts the `<input>`\n * out of a caller's reach entirely (Keksdose feedback live #218). */\n autoFocus?: boolean;\n /** Phone sheet only — the anchored list has the field itself to type in. Falls\n * back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */\n searchPlaceholder?: string;\n /** Phone sheet only: a full screen showing nothing has to say why. The anchored\n * list simply does not open. Default: `combobox.noResults` from the provider. */\n emptyLabel?: string;\n closeLabel?: string;\n /** Offer a clear \"×\" in place of the chevron whenever something is selected.\n *\n * Emptying the text already clears (see {@link reconcile}), and on a desktop that\n * is the fast way. It is not a way at all on a PHONE: touching the field opens the\n * full-screen sheet, which covers the very input the text would have been deleted\n * from — so a field that had been answered could not be UNanswered by any gesture\n * the screen offered (Keksdose live #236, filed from a phone). The \"×\" is the one\n * affordance both shells share, and it clears without opening anything. */\n clearable?: boolean;\n clearLabel?: string;\n}\n\n/**\n * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input\n * with the shared field styling, chevron and inline as-you-type filtering) but\n * the value is an option id, not free text. Built so an entity picker can sit\n * next to a free-text combobox without any visible difference — a button-trigger\n * panel picker ({@link EntityCombobox}) never matches an input field exactly.\n *\n * Text-vs-value reconciliation: the input's text is transient. Picking a row or\n * typing an exact (unique) label commits that option; emptying the text commits\n * a clear; anything else reverts to the selected option's label on blur/Escape.\n *\n * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}\n * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto\n * this component and must not lose its sheet). The sheet carries its OWN query state\n * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a\n * sheet that emptied it to show the full list would read as \"the user cleared the\n * field\" the moment it closed.\n */\nexport function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>({\n value: rawValue,\n onChange,\n clearValue = null as C,\n options,\n label,\n id,\n placeholder,\n className,\n disabled,\n autoFocus,\n searchPlaceholder,\n emptyLabel,\n closeLabel,\n clearable,\n clearLabel,\n invalid,\n error,\n \"aria-label\": ariaLabel,\n // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n // on the wrapper div the hint and required state described nothing.\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: InlineEntityComboboxProps<V, C>) {\n // The clear value reads as \"nothing selected\", whichever one the caller picked —\n // so from here down `value` is the id or `null`, as it always was.\n const value: V | null = rawValue == null || rawValue === clearValue ? null : (rawValue as V);\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n ariaDescribedBy,\n );\n const generated = useId();\n const fieldId = id ?? generated;\n // See the twin above on why these hang off the generated id.\n const listboxId = `${generated}-listbox`;\n const optionId = (index: number) => `${generated}-option-${index}`;\n const isPhone = useMediaQuery(PHONE_QUERY, false);\n // See the twin above: the phone sheet owns its own Back entry (live #309).\n const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n const primaryOnly = usePrimaryPressOnly();\n const [active, setActive] = useState(-1);\n // null = not editing → the input shows the selected option's label.\n const [text, setText] = useState<string | null>(null);\n const sheetInputRef = useRef<HTMLInputElement | null>(null);\n // The box the portalled list hangs off — see {@link SuggestionList}.\n const fieldRef = useRef<HTMLDivElement>(null);\n // The sheet's search box. Starts empty on every open, so a field that already\n // holds a value still offers the whole list — the shape a native <select> has\n // on a phone, and what the anchored panel gets from `query` below.\n const [sheetQuery, setSheetQuery] = useState(\"\");\n // Props first, provider second — see `EntityCombobox`. `emptyLabel` used to render\n // nothing when omitted, which left a phone user staring at a blank full-screen\n // sheet; now an omitted one says \"No results\" in the provider's language.\n const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n search: searchPlaceholder,\n noResults: emptyLabel,\n clear: clearLabel,\n });\n\n const selected = useMemo(\n () => (value == null ? null : (options.find((o) => o.value === value) ?? null)),\n [options, value],\n );\n const shown = text ?? selected?.label ?? \"\";\n // Nothing selected has nothing to clear, and the chevron comes back — the field\n // keeps exactly one trailing control, so the \"×\" never crowds the value it sits on.\n const showClear = Boolean(clearable && value != null && !disabled);\n\n // Focusing select-alls the current label; filtering only kicks in once the\n // text actually differs from it, so an already-filled field still opens on\n // the FULL list instead of a single-row \"filter\" of its own value.\n const typedQuery =\n text !== null && text !== (selected?.label ?? \"\") ? text.trim().toLowerCase() : \"\";\n const query = isPhone ? sheetQuery.trim().toLowerCase() : typedQuery;\n const matches = useMemo(() => {\n let ranked = options;\n if (query) {\n const hit = (s: string | undefined) => s?.toLowerCase().includes(query) ?? false;\n const starts = options.filter((o) => o.label.toLowerCase().startsWith(query));\n const rest = options.filter(\n (o) =>\n !o.label.toLowerCase().startsWith(query) &&\n (hit(o.label) || hit(o.sublabel) || hit(o.group)),\n );\n ranked = [...starts, ...rest];\n }\n if (!ranked.some((o) => o.group)) return ranked;\n // Keep each group contiguous so the headings below appear once instead of\n // re-appearing every time the ranking interleaves two groups — while preserving\n // \"best match first\": a Map keeps insertion order, so groups come out ordered by\n // their best-ranked member and members keep their rank order inside the group.\n const blocks = new Map<string, ComboOption<V>[]>();\n for (const o of ranked) {\n const key = o.group ?? \"\";\n if (!blocks.has(key)) blocks.set(key, []);\n blocks.get(key)!.push(o);\n }\n return [...blocks.values()].flat();\n }, [options, query]);\n\n // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own\n // search box holds focus, so the field behind it must not claim to be pointing at\n // one of them.\n // A disabled row is never the keyboard's, even if the list changed under it.\n const activeId = !isPhone && isOptionEnabled(matches[active]) ? optionId(active) : undefined;\n useActiveOptionScroll(activeId);\n\n const close = () => {\n setOpen(false);\n setActive(-1);\n setSheetQuery(\"\");\n };\n const commit = (o: ComboOption<V>) => {\n // A `disabled` option is listed, never taken — by any path.\n if (o.disabled) return;\n if (o.value !== value) onChange(o.value);\n setText(null);\n close();\n };\n /** Turn loose text into a decision: empty clears, an exact label match that names\n * ONE entity commits, anything else reverts to the selected label.\n *\n * Unique by VALUE, not by row. An option may deliberately appear twice — Keksdose\n * repeats recently-used categories in a \"Recent\" group at the top (live #203) — and\n * counting rows made every such option uncommittable: two hits, so nothing fired and\n * the field reverted to whatever was selected before. Typing a category you had just\n * used, then tabbing away, silently discarded it, and the more categories you used\n * the more of them stopped working. Two rows naming the same id are not an ambiguity;\n * two ids sharing a label are. */\n const reconcile = () => {\n if (text !== null) {\n const q = text.trim();\n if (!q) {\n if (value != null) onChange(clearValue);\n } else {\n // A disabled option's label typed out in full is not a way round `disabled`:\n // it is not a hit, so the text reverts like any other non-answer.\n const hits = options.filter(\n (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),\n );\n const ids = new Set(hits.map((h) => h.value));\n if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);\n }\n setText(null);\n }\n close();\n };\n\n return (\n // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n // description, invalid or required state: those belong on the <input> below,\n // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n {/* A real <label for> — see {@link Combobox}. */}\n {label !== undefined && (\n <ComboboxFieldLabel htmlFor={fieldId} className={disabled ? \"opacity-50\" : undefined}>\n {label}\n </ComboboxFieldLabel>\n )}\n {/* Inner wrapper for chevron centering — same reasoning as Combobox above.\n It is also what the portalled list anchors to. */}\n {/* Dimmed as a whole when disabled, the way EntityCombobox dims its trigger.\n FIELD_BASE's grey alone left a disabled picker looking like a filled-in\n one beside the pickers that do dim (the label is not the input's `peer`,\n so it is dimmed by hand above). */}\n <div ref={fieldRef} className={cn(\"relative\", disabled && \"cursor-not-allowed opacity-50\")}>\n <input\n id={fieldId}\n value={shown}\n placeholder={placeholder}\n // The caller's name, over the <label for> above. Just the label, never\n // \"label: value\" the way a trigger button has to compose it: an input\n // already exposes its value separately.\n aria-label={ariaLabel}\n role=\"combobox\"\n aria-expanded={open}\n // Required by the role, and the half that was missing: the field said it\n // was expanded and never said what it had expanded (ESLint's\n // `role-has-required-aria-props`, the audit's §a11y).\n aria-controls={listboxId}\n aria-activedescendant={activeId}\n aria-autocomplete=\"list\"\n aria-invalid={field.isInvalid || undefined}\n aria-describedby={field.describedBy}\n aria-required={ariaRequired}\n autoComplete=\"off\"\n disabled={disabled}\n // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n autoFocus={autoFocus}\n // `inputMode=\"none\"` rather than readOnly, for the same reason Combobox\n // above gives: the sheet carries the keyboard, and a readOnly field would\n // take FIELD_BASE's settled look on a field that is perfectly editable.\n inputMode={isPhone ? \"none\" : undefined}\n onMouseDown={primaryOnly.onMouseDown}\n onFocus={(e) => {\n // See {@link usePrimaryPressOnly}: a back/forward button lands here on\n // its way to navigating, and neither the list nor the select-all is\n // anything it asked for (live #309 rework).\n if (primaryOnly.fromAuxButton()) return;\n setText(shown);\n e.currentTarget.select();\n setOpen(true);\n // The sheet has its own input; the field behind it must not also pull up\n // the keyboard and scroll the page under the dialog.\n if (isPhone) sheetInputRef.current?.focus();\n }}\n onBlur={() => {\n // On a phone the blur is the SHEET taking focus, not the user leaving the\n // field — reconciling there would close the sheet the instant it opened.\n if (!isPhone) reconcile();\n }}\n onChange={(e) => {\n setText(e.target.value);\n setOpen(true);\n setActive(-1);\n }}\n onKeyDown={(e) => {\n // Disabled rows are passed over; Up from \"nothing highlighted\" lands on\n // the first takeable row, as it always landed on row 0.\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setOpen(true);\n setActive((i) => stepEnabled(matches, i, 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive((i) => (i < 0 ? stepEnabled(matches, -1, 1) : stepEnabled(matches, i, -1)));\n } else if (e.key === \"Enter\") {\n if (open && isOptionEnabled(matches[active])) {\n e.preventDefault();\n commit(matches[active]);\n } else {\n reconcile();\n }\n } else if (e.key === \"Escape\") {\n setText(null);\n close();\n } else if (e.key === \"Tab\") {\n // Focus is in THIS input and stays there, so the browser's own Tab is\n // left alone; all that is needed is that the list stop covering what\n // the user is tabbing to. `reconcile` rather than `close`, because\n // leaving the field is exactly when loose text has to be judged.\n reconcile();\n }\n // Home/End stay with the caret — see the note in {@link Combobox}: this\n // field is editable, and its text is what `reconcile` judges.\n }}\n className={cn(\n FIELD_BASE,\n label !== undefined && FIELD_FLOATING_PAD,\n \"pe-9\",\n field.isInvalid && FIELD_INVALID,\n )}\n />\n {showClear ? (\n <button\n type=\"button\"\n // Out of the tab order, like the clear on `EntityCombobox`: the keyboard\n // already clears this field by selecting its text and deleting, and a\n // second stop between every picker and the next field is a worse trade\n // than the one gesture it saves.\n tabIndex={-1}\n aria-label={labels.clear}\n // preventDefault, exactly as the chevron does: without it the press\n // focuses the input, which on a phone opens the sheet over the field the\n // press was clearing.\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => {\n setText(null);\n close();\n onChange(clearValue);\n }}\n className={cn(\n \"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]\",\n \"hover:text-[var(--text-secondary)]\",\n )}\n >\n <X aria-hidden className=\"size-4\" />\n </button>\n ) : (\n <ChevronDown\n aria-hidden\n onMouseDown={(e) => {\n // Toggle on the chevron without stealing focus from the input — and\n // not at all on a disabled field, which the input's own `disabled`\n // does not stop from here.\n e.preventDefault();\n if (!disabled) setOpen((o) => !o);\n }}\n className={cn(\n \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n // The box above does the dimming; dimming here too would halve it again.\n !disabled && \"cursor-pointer\",\n )}\n />\n )}\n </div>\n {field.errorEl}\n {isPhone && (\n <PickerSheet\n open={open && !disabled}\n // Closing without choosing keeps the value: `text` was never emptied, so\n // reconcile has nothing to undo — it just puts the label back.\n onClose={reconcile}\n title={label}\n query={sheetQuery}\n onQueryChange={(v) => {\n setSheetQuery(v);\n setActive(-1);\n }}\n searchPlaceholder={searchPlaceholder ?? placeholder ?? labels.search}\n inputRef={sheetInputRef}\n closeLabel={closeLabel}\n >\n <ul id={listboxId} role=\"listbox\">\n {matches.map((o, i) => (\n // Keyed by group AND value, like combobox-core.tsx: an option may\n // deliberately appear twice (see `reconcile`), and a bare value key\n // would collide.\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {o.group && o.group !== matches[i - 1]?.group && (\n <li\n role=\"presentation\"\n className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\"\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={o.value === value}\n aria-disabled={o.disabled || undefined}\n onClick={() => commit(o)}\n className={cn(\n SHEET_ROW_CLASS,\n o.value === value && \"font-medium\",\n o.disabled && DISABLED_ROW_CLASS,\n )}\n >\n {o.label}\n </button>\n </li>\n </Fragment>\n ))}\n {matches.length === 0 && (\n <li className=\"px-4 py-3 text-sm text-[var(--text-muted)]\">{labels.noResults}</li>\n )}\n </ul>\n </PickerSheet>\n )}\n {!isPhone && open && !disabled && matches.length > 0 && (\n <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n {matches.map((o, i) => (\n // A group heading is emitted at each group boundary rather than repeating\n // the group on every row (feedback #136). `matches` is group-contiguous,\n // so comparing with the previous row is enough. Fragment key sits here;\n // the heading and the option carry their own list semantics — keyed by\n // group AND value, because an option may deliberately appear twice (see\n // `reconcile`).\n <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n {o.group && o.group !== matches[i - 1]?.group && (\n <li\n role=\"presentation\"\n className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n >\n {o.group}\n </li>\n )}\n <li role=\"presentation\">\n <button\n type=\"button\"\n id={optionId(i)}\n // See {@link Combobox}: the role rides the button, `aria-selected`\n // is the CHOSEN row, and the keyboard's row is the field's\n // `aria-activedescendant`.\n role=\"option\"\n aria-selected={o.value === value}\n aria-disabled={o.disabled || undefined}\n tabIndex={-1}\n onMouseDown={(e) => {\n // mousedown (not click) so the input's blur can't close the\n // list before the selection registers. Prevented on a disabled\n // row too, so pressing one leaves the field focused and open.\n e.preventDefault();\n commit(o);\n }}\n onMouseEnter={() => {\n if (!o.disabled) setActive(i);\n }}\n className={cn(\n rowClass(i === active && !o.disabled),\n o.disabled && DISABLED_ROW_CLASS,\n // Indented under its heading, so the hierarchy is readable at a\n // glance instead of inferred from grey trailing text.\n o.group && \"ps-6\",\n o.value === value && \"font-medium\",\n )}\n >\n {o.label}\n {o.sublabel && (\n <span className=\"ms-2 text-xs text-[var(--text-placeholder)]\">\n {o.sublabel}\n </span>\n )}\n </button>\n </li>\n </Fragment>\n ))}\n </SuggestionList>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":["rest"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { x as CopyButton, y as CopyButtonLabels, z as CopyButtonProps, I as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-
|
|
2
|
+
export { x as CopyButton, y as CopyButtonLabels, z as CopyButtonProps, I as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-Mz8zZHIF.js';
|
|
3
3
|
import './tooltip.js';
|
|
4
4
|
import './data-table-labels.js';
|
|
5
5
|
import './mini-calendar.js';
|