@mortenbrudvik/waveui 0.11.0 → 0.13.0

package/dist/components/input/Option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.cjs","names":["React","cn","optionClassNames","CheckIcon","renderSlot","forcedColors","useListboxOption","slotRendersContent","composeEventHandlers","useId","ListboxContext","isDev","hasWarned","optionGroupClassNames","materialiseSlotContent","usePopupPosition","useDismiss","useMergedRefs","listboxSurfaceClassNames","_Fragment","Portal","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useListbox","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","selected","glyph","boxClasses","disabled","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","checkIconEmpty","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","listRefProp","listMouseDown","listRest","listProps","listboxProps","listbox","listRef","list","expanded","listClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Attributes of the list element that ListboxSurface renders (see `listProps`). Its content is the\n * surface's `children`.\n */\nexport type ListboxSurfaceListProps = Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  | 'role'\n  | 'id'\n  | 'hidden'\n  | 'tabIndex'\n  | 'className'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-multiselectable'\n  | 'aria-activedescendant'\n  | 'children'\n  | 'dangerouslySetInnerHTML'\n> & {\n  /** Ref to the `role=\"listbox\"` element (it moves between the picker and the popup). */\n  ref?: React.Ref<HTMLUListElement>;\n};\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /**\n   * Attributes spread onto the list element before the listbox's own (`role`, `id`, `tabIndex`,\n   * `aria-multiselectable`, `aria-activedescendant` and `hidden` win, also where the listbox\n   * renders none of the last two): `data-*` and other `aria-*` attributes, `style`, and handlers,\n   * composed before the listbox's own `onMouseDown`. `ref` is merged with the list's. Name the list\n   * with `aria-label`/`aria-labelledby` (the props above), not here.\n   */\n  listProps?: ListboxSurfaceListProps;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    listProps,\n    children,\n  } = props;\n\n  // The consumer's list attributes go first, so the listbox's own win; its `onMouseDown` runs\n  // before the list's (which keeps focus on the combobox) and its `ref` is merged with the list's.\n  const { ref: listRefProp, onMouseDown: listMouseDown, ...listRest } = listProps ?? {};\n  const listboxProps = listbox.getListboxProps();\n  const listRef = useMergedRefs<HTMLUListElement>(listRefProp, listboxProps.ref);\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listRest}\n          {...listboxProps}\n          // Absent from `listboxProps` when not set: a caller's value never survives the spread.\n          aria-multiselectable={listboxProps['aria-multiselectable']}\n          aria-activedescendant={listboxProps['aria-activedescendant']}\n          onMouseDown={composeEventHandlers(listMouseDown, listboxProps.onMouseDown)}\n          ref={listRef}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}
+{"version":3,"file":"Option.cjs","names":["React","cn","optionClassNames","CheckIcon","renderSlot","forcedColors","useListboxOption","slotRendersContent","composeEventHandlers","useId","ListboxContext","isDev","hasWarned","optionGroupClassNames","materialiseSlotContent","usePopupPosition","resolvePositioning","useDismiss","useMergedRefs","listboxSurfaceClassNames","_Fragment","Portal","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useListbox","require_usePopupPosition","require_useDismiss","require_styles","require_Portal","require_icons","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","selected","glyph","boxClasses","disabled","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","checkIconEmpty","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","surfaceOpen","positioning","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","listRefProp","listMouseDown","listRest","listProps","listboxProps","listbox","listRef","list","expanded","listClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport type { PopupPositioningOptions } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { resolvePositioning, usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n  /**\n   * Advanced positioning: `offset`, `fitViewport`, `matchReferenceWidth` and `fallbackPlacements`.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef, positioning } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    ...resolvePositioning(positioning, { matchReferenceWidth: true, fitViewport: true }),\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Attributes of the list element that ListboxSurface renders (see `listProps`). Its content is the\n * surface's `children`.\n */\nexport type ListboxSurfaceListProps = Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  | 'role'\n  | 'id'\n  | 'hidden'\n  | 'tabIndex'\n  | 'className'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-multiselectable'\n  | 'aria-activedescendant'\n  | 'children'\n  | 'dangerouslySetInnerHTML'\n> & {\n  /** Ref to the `role=\"listbox\"` element (it moves between the picker and the popup). */\n  ref?: React.Ref<HTMLUListElement>;\n};\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /**\n   * Attributes spread onto the list element before the listbox's own (`role`, `id`, `tabIndex`,\n   * `aria-multiselectable`, `aria-activedescendant` and `hidden` win, also where the listbox\n   * renders none of the last two): `data-*` and other `aria-*` attributes, `style`, and handlers,\n   * composed before the listbox's own `onMouseDown`. `ref` is merged with the list's. Name the list\n   * with `aria-label`/`aria-labelledby` (the props above), not here.\n   */\n  listProps?: ListboxSurfaceListProps;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    listProps,\n    children,\n  } = props;\n\n  // The consumer's list attributes go first, so the listbox's own win; its `onMouseDown` runs\n  // before the list's (which keeps focus on the combobox) and its `ref` is merged with the list's.\n  const { ref: listRefProp, onMouseDown: listMouseDown, ...listRest } = listProps ?? {};\n  const listboxProps = listbox.getListboxProps();\n  const listRef = useMergedRefs<HTMLUListElement>(listRefProp, listboxProps.ref);\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listRest}\n          {...listboxProps}\n          // Absent from `listboxProps` when not set: a caller's value never survives the spread.\n          aria-multiselectable={listboxProps['aria-multiselectable']}\n          aria-activedescendant={listboxProps['aria-activedescendant']}\n          onMouseDown={composeEventHandlers(listMouseDown, listboxProps.onMouseDown)}\n          ref={listRef}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}

package/dist/components/input/Option.mjs

@@ -7,17 +7,17 @@ import { listboxSurfaceClassNames as c, optionClassNames as l, optionGroupClassN
 import { useId as d } from "../../hooks/useId.mjs";
 import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
 import { ListboxContext as p, markListboxElement as m, useListboxOption as h } from "../../hooks/useListbox.mjs";
-import { useDismiss as g } from "../../hooks/useDismiss.mjs";
-import { Portal as _ } from "../portal/Portal.mjs";
-import { forcedColors as v } from "../../lib/styles.mjs";
-import { CheckIcon as y } from "../../lib/icons.mjs";
-import { usePopupPosition as b } from "../../hooks/usePopupPosition.mjs";
-import * as x from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { resolvePositioning as g, usePopupPosition as _ } from "../../hooks/usePopupPosition.mjs";
+import { useDismiss as v } from "../../hooks/useDismiss.mjs";
+import { forcedColors as y } from "../../lib/styles.mjs";
+import { Portal as b } from "../portal/Portal.mjs";
+import { CheckIcon as x } from "../../lib/icons.mjs";
+import * as S from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/input/Option.tsx
-var T = x.createContext(!0);
-T.displayName = "OptionCheckContext";
-var E = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground", "bg-(--option-bg) [--option-bg:transparent]", "not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]", "data-[selected]:[--option-bg:var(--wave-subtle-selected)]", "data-[active]:[--option-bg:var(--wave-subtle-hover)]", "data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring", "aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground"), D = class {
+var E = S.createContext(!0);
+E.displayName = "OptionCheckContext";
+var D = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground", "bg-(--option-bg) [--option-bg:transparent]", "not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]", "data-[selected]:[--option-bg:var(--wave-subtle-selected)]", "data-[active]:[--option-bg:var(--wave-subtle-hover)]", "data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring", "aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground"), O = class {
 	counts = /* @__PURE__ */ new Map();
 	listeners = /* @__PURE__ */ new Set();
 	subscribe = (e) => (this.listeners.add(e), () => {
@@ -37,13 +37,13 @@ var E = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-b
 	notify() {
 		for (let e of [...this.listeners]) e();
 	}
-}, O = x.createContext([]);
-O.displayName = "OptionGroupContext";
-var k = x.createContext(!1);
-k.displayName = "OptionGroupHiddenContext";
-function A(e) {
-	let t = x.useContext(O);
-	x.useLayoutEffect(() => {
+}, k = S.createContext([]);
+k.displayName = "OptionGroupContext";
+var A = S.createContext(!1);
+A.displayName = "OptionGroupHiddenContext";
+function j(e) {
+	let t = S.useContext(k);
+	S.useLayoutEffect(() => {
 		if (t.length === 0) return;
 		let n = t.map((t) => t.add(e));
 		return () => {
@@ -51,160 +51,162 @@ function A(e) {
 		};
 	}, [t, e]);
 }
-var j = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", M = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none";
-function N(t, { selected: n, multiselect: r, disabled: i }) {
+var M = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", N = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none";
+function P(t, { selected: n, multiselect: r, disabled: i }) {
 	if (!r) {
 		let r = e(l.checkIcon, "shrink-0", !n && "invisible");
-		return t === void 0 ? /* @__PURE__ */ C(y, { className: r }) : a(t, "span", e("inline-flex", r), { "aria-hidden": !0 });
+		return t === void 0 ? /* @__PURE__ */ w(x, { className: r }) : a(t, "span", e("inline-flex", r), { "aria-hidden": !0 });
 	}
 	let o;
-	o = i ? e("border-current bg-transparent", j) : n ? e("border-primary bg-primary text-primary-foreground", v.selectedLeaf) : e("border-stroke-accessible bg-transparent", v.control);
-	let s = i ? M : void 0;
-	return /* @__PURE__ */ C("span", {
+	o = i ? e("border-current bg-transparent", M) : n ? e("border-primary bg-primary text-primary-foreground", y.selectedLeaf) : e("border-stroke-accessible bg-transparent", y.control);
+	let s = i ? N : void 0;
+	return /* @__PURE__ */ w("span", {
 		"aria-hidden": "true",
 		"data-wave-option-box": "",
 		className: e(l.indicator, "flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border", o),
-		children: n && (t === void 0 ? /* @__PURE__ */ C(y, {
+		children: n && (t === void 0 ? /* @__PURE__ */ w(x, {
 			size: 12,
 			className: e(l.checkIcon, s)
 		}) : a(t, "span", e(l.checkIcon, "inline-flex shrink-0", s), { "aria-hidden": !0 }))
 	});
 }
-function P(t) {
-	let { value: n, label: i, textValue: a, disabled: c = !1, hidden: u = !1, checkIcon: d, className: f, children: p, onClick: m, onMouseDown: g, onPointerMove: _, ref: y, ...b } = t, S = x.useContext(T), D = x.useContext(k), { selected: O, multiselect: j, optionProps: M } = h({
+function F(t) {
+	let { value: n, label: i, textValue: a, disabled: c = !1, hidden: u = !1, checkIcon: d, className: f, children: p, onClick: m, onMouseDown: g, onPointerMove: _, ref: v, ...b } = t, x = S.useContext(E), C = S.useContext(A), { selected: O, multiselect: k, optionProps: M } = h({
 		value: n,
 		label: i,
 		textValue: a,
 		disabled: c,
-		hidden: u || D
-	}, y);
-	A(n);
-	let { ref: P, onClick: F, onMouseDown: I, onPointerMove: L, ...R } = M, z = d != null && o(d), B = d != null && !z;
-	return x.useEffect(() => {
+		hidden: u || C
+	}, v);
+	j(n);
+	let { ref: N, onClick: F, onMouseDown: I, onPointerMove: L, ...R } = M, z = d != null && o(d), B = d != null && !z;
+	return S.useEffect(() => {
 		B && r("Option:checkIcon-empty", "Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.");
-	}, [B]), /* @__PURE__ */ w("li", {
+	}, [B]), /* @__PURE__ */ T("li", {
 		"data-value": n,
 		...b,
 		...R,
-		ref: P,
+		ref: N,
 		onClick: s(m, F),
 		onMouseDown: s(g, I),
 		onPointerMove: s(_, L),
-		className: e(l.root, E, O && !(j && S) && v.selectedContainer, f),
-		children: [S && N(z ? d : void 0, {
+		className: e(l.root, D, O && !(k && x) && y.selectedContainer, f),
+		children: [x && P(z ? d : void 0, {
 			selected: O,
-			multiselect: j,
+			multiselect: k,
 			disabled: c
-		}), /* @__PURE__ */ C("span", {
+		}), /* @__PURE__ */ w("span", {
 			className: e(l.content, "min-w-0 flex-1"),
 			children: p ?? n
 		})]
 	});
 }
-P.displayName = "Option";
-var F = /* @__PURE__ */ x.memo(P);
 F.displayName = "Option";
-var I = /* @__PURE__ */ m(F, "option"), L = 1, R = 3;
-function z(e) {
+var I = /* @__PURE__ */ S.memo(F);
+I.displayName = "Option";
+var L = /* @__PURE__ */ m(I, "option"), R = 1, z = 3;
+function B(e) {
 	if (e === null) return "";
-	if (e.nodeType === R) return e.textContent ?? "";
-	if (e.nodeType !== L) return "";
+	if (e.nodeType === z) return e.textContent ?? "";
+	if (e.nodeType !== R) return "";
 	let t = e;
 	if (t.getAttribute("aria-hidden") === "true" || t.hasAttribute("hidden")) return "";
 	let n = t.getAttribute("aria-label")?.trim();
 	if (n) return n;
 	if (t.localName === "img") return t.getAttribute("alt") ?? "";
 	let r = "";
-	for (let e of Array.from(t.childNodes)) r += z(e);
+	for (let e of Array.from(t.childNodes)) r += B(e);
 	return r;
 }
-function B(e, t, n, r, i) {
-	return n !== void 0 && n !== r && n.trim() !== "" || t !== void 0 && t.trim() !== "" ? !0 : n === r ? typeof e == "string" || typeof e == "number" ? String(e).trim() !== "" : z(i).trim() !== "" : !1;
+function V(e, t, n, r, i) {
+	return n !== void 0 && n !== r && n.trim() !== "" || t !== void 0 && t.trim() !== "" ? !0 : n === r ? typeof e == "string" || typeof e == "number" ? String(e).trim() !== "" : B(i).trim() !== "" : !1;
 }
-var V = "OptionGroup:unnamed";
-function H({ label: a, className: s, children: c, hidden: l, "aria-label": f, "aria-labelledby": m, ref: h, ...g }) {
-	let _ = d("option-group"), v = x.useContext(p)?.store, y = x.useContext(O), b = x.useContext(k) || !!l, [S] = x.useState(() => new D()), T = x.useMemo(() => [...y, S], [y, S]), E = x.useCallback((e) => {
-		let t = S.subscribe(e), n = v?.subscribe(e);
+var H = "OptionGroup:unnamed";
+function U({ label: a, className: s, children: c, hidden: l, "aria-label": f, "aria-labelledby": m, ref: h, ...g }) {
+	let _ = d("option-group"), v = S.useContext(p)?.store, y = S.useContext(k), b = S.useContext(A) || !!l, [x] = S.useState(() => new O()), C = S.useMemo(() => [...y, x], [y, x]), E = S.useCallback((e) => {
+		let t = x.subscribe(e), n = v?.subscribe(e);
 		return () => {
 			t(), n?.();
 		};
-	}, [S, v]), A = x.useSyncExternalStore(E, () => S.allHidden(v), () => !1), j = o(a), M = m ?? (f === void 0 && j ? _ : void 0), N = x.useRef(null);
-	return x.useEffect(() => {
-		n && !t(V) && (B(a, f, M, _, N.current) || r(V, "OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."));
+	}, [x, v]), D = S.useSyncExternalStore(E, () => x.allHidden(v), () => !1), j = o(a), M = m ?? (f === void 0 && j ? _ : void 0), N = S.useRef(null);
+	return S.useEffect(() => {
+		n && !t(H) && (V(a, f, M, _, N.current) || r(H, "OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."));
 	}, [
 		a,
 		f,
 		M,
 		_
-	]), /* @__PURE__ */ w("li", {
+	]), /* @__PURE__ */ T("li", {
 		...g,
 		ref: h,
 		role: "presentation",
-		hidden: l || A || void 0,
+		hidden: l || D || void 0,
 		className: e(u.root, s),
-		children: [j && /* @__PURE__ */ C("div", {
+		children: [j && /* @__PURE__ */ w("div", {
 			ref: N,
 			id: _,
 			role: "presentation",
 			className: e(u.label, "px-3 py-1 text-caption-1 font-semibold text-muted-foreground"),
 			children: i(a)
-		}), /* @__PURE__ */ C("ul", {
+		}), /* @__PURE__ */ w("ul", {
 			role: "group",
 			"aria-label": f,
 			"aria-labelledby": M,
 			className: u.list,
-			children: /* @__PURE__ */ C(k.Provider, {
+			children: /* @__PURE__ */ w(A.Provider, {
 				value: b,
-				children: /* @__PURE__ */ C(O.Provider, {
-					value: T,
+				children: /* @__PURE__ */ w(k.Provider, {
+					value: C,
 					children: c
 				})
 			})
 		})]
 	});
 }
-H.displayName = "OptionGroup";
-var U = /* @__PURE__ */ m(H, "group");
-function W({ value: e, children: t }) {
-	return /* @__PURE__ */ C(p.Provider, {
+U.displayName = "OptionGroup";
+var W = /* @__PURE__ */ m(U, "group");
+function G({ value: e, children: t }) {
+	return /* @__PURE__ */ w(p.Provider, {
 		value: e,
 		children: t
 	});
 }
-W.displayName = "ListboxProvider";
-function G(e) {
-	let { open: t, surfaceOpen: n, onDismiss: r, rootRef: i, anchorRef: a } = e, o = x.useRef(null), { setReference: s, setFloating: c, floatingProps: l } = b({
+G.displayName = "ListboxProvider";
+function K(e) {
+	let { open: t, surfaceOpen: n, onDismiss: r, rootRef: i, anchorRef: a, positioning: o } = e, s = S.useRef(null), { setReference: c, setFloating: l, floatingProps: u } = _({
 		open: n,
 		side: "bottom",
 		align: "start",
-		matchReferenceWidth: !0,
-		fitViewport: !0
-	}), { layerId: u } = g({
+		...g(o, {
+			matchReferenceWidth: !0,
+			fitViewport: !0
+		})
+	}), { layerId: d } = v({
 		open: t,
 		onDismiss: (e) => r(e),
-		refs: [i, o],
+		refs: [i, s],
 		anchorRef: a,
 		kind: "listbox",
 		escape: n,
 		focusOutside: !0
 	});
 	return {
-		layerId: u,
-		setReference: s,
-		surfaceRef: f(o, c),
-		floatingProps: l
+		layerId: d,
+		setReference: c,
+		surfaceRef: f(s, l),
+		floatingProps: u
 	};
 }
-function K(e) {
+function q(e) {
 	e.preventDefault();
 }
-function q(t) {
-	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: l, emptyContent: u, "aria-label": d, "aria-labelledby": p, showCheck: m = !0, listClassName: h, surfaceClassName: g, listProps: v, children: y } = t, { ref: b, onMouseDown: x, ...E } = v ?? {}, D = n.getListboxProps(), O = f(b, D.ref), k = /* @__PURE__ */ C(T.Provider, {
+function J(t) {
+	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: l, emptyContent: u, "aria-label": d, "aria-labelledby": p, showCheck: m = !0, listClassName: h, surfaceClassName: g, listProps: _, children: v } = t, { ref: y, onMouseDown: x, ...S } = _ ?? {}, D = n.getListboxProps(), O = f(y, D.ref), k = /* @__PURE__ */ w(E.Provider, {
 		value: m,
-		children: /* @__PURE__ */ C(W, {
+		children: /* @__PURE__ */ w(G, {
 			value: n.context,
-			children: /* @__PURE__ */ C("ul", {
-				...E,
+			children: /* @__PURE__ */ w("ul", {
+				...S,
 				...D,
 				"aria-multiselectable": D["aria-multiselectable"],
 				"aria-activedescendant": D["aria-activedescendant"],
@@ -214,24 +216,24 @@ function q(t) {
 				"aria-labelledby": p,
 				hidden: !l || void 0,
 				className: e(c.list, "min-h-0 max-h-60 overflow-auto", h),
-				children: y
+				children: v
 			})
 		})
 	});
-	return !l && (!o || l || u == null) ? k : /* @__PURE__ */ w(S, { children: [!l && k, /* @__PURE__ */ C(_, {
+	return !l && (!o || l || u == null) ? k : /* @__PURE__ */ T(C, { children: [!l && k, /* @__PURE__ */ w(b, {
 		layerId: r,
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			ref: i,
 			...a,
 			"data-wave-listbox-surface": "",
-			onMouseDown: K,
+			onMouseDown: q,
 			className: e(c.root, "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4", g),
 			children: l ? k : u
 		})
 	})] });
 }
-q.displayName = "ListboxSurface";
+J.displayName = "ListboxSurface";
 //#endregion
-export { W as ListboxProvider, q as ListboxSurface, I as Option, U as OptionGroup, G as useListboxPopup };
+export { G as ListboxProvider, J as ListboxSurface, L as Option, W as OptionGroup, K as useListboxPopup };
 
 //# sourceMappingURL=Option.mjs.map