@mortenbrudvik/waveui 0.15.0 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.cjs","names":["useFieldContext","useFieldControl","useControllable","EMPTY_VALUES","toValues","React","useIsClient","isFocused","useListbox","toggleValue","useMergedRefs","resetValues","isOwnEvent","composeEventHandlers","cn","listboxClassNames","focusRing","PickerAnnouncer","ListboxProvider","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_focus","require_useMergedRefs","require_useIsClient","require_useFieldControl","require_useListbox","require_styles","require_useFormReset","require_HiddenInput","require_Option","require_pickerLabels","require_pickerValues","require_events","react","react_jsx_runtime","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","fieldProps","required","value","setValue","defaultValue","multiselect","onValueChange","next","values","focused","setFocused","listRef","isClient","autoFocusHandledRef","list","autoFocus","disabled","listbox","updated","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","current","form","unnamed","handleKeyDown","event","handleFocus","handleBlur","onKeyDown","onKeyUp","onFocus","onBlur","className","ListboxOption","ListboxOptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup } from './Option';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option, whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(ref, listRef, listElementRef);\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>{children}</ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}
+{"version":3,"file":"Listbox.cjs","names":["useFieldContext","useFieldControl","useControllable","EMPTY_VALUES","toValues","React","useIsClient","isFocused","useListbox","toggleValue","useMergedRefs","resetValues","isOwnEvent","composeEventHandlers","cn","listboxClassNames","focusRing","PickerAnnouncer","ListboxProvider","renderListboxWindow","renderListboxItems","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_focus","require_useMergedRefs","require_useIsClient","require_useFieldControl","require_useListbox","require_styles","require_useFormReset","require_HiddenInput","require_Option","require_Option_data","require_pickerLabels","require_pickerValues","require_events","react","react_jsx_runtime","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","fieldProps","required","value","setValue","defaultValue","multiselect","onValueChange","next","values","focused","setFocused","listRef","isClient","autoFocusHandledRef","list","autoFocus","disabled","activeWindow","items","virtualWindow","listbox","index","updated","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","current","form","unnamed","children","handleKeyDown","event","handleFocus","handleBlur","optionsState","onKeyDown","onKeyUp","onFocus","onBlur","className","ListboxOption","ListboxOptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup, type ListboxOptionRenderState } from './Option';\nimport {\n  renderListboxItems,\n  renderListboxWindow,\n  useDataModeWarnings,\n  useItemsAndChildrenWarning,\n} from './Option.data';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,\n   * `disabled` and `hidden`; values unique). The list renders one option per item that is not\n   * `hidden` (see `renderOption`), and the keys, typeahead and the selection follow `items`. The\n   * children are neither read nor rendered: passing both warns once in development. Each option\n   * gets `aria-posinset` and `aria-setsize` from its place among the shown items, and keeps one id\n   * per value. Without it, the options are the `Option` children.\n   */\n  items?: readonly ListboxItem[];\n  /**\n   * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`\n   * among the shown options). Return an `Option`, or an option component of your own on\n   * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,\n   * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its\n   * state, its position (`aria-posinset` and `aria-setsize`, which new `items` change) or the\n   * function itself changes, so pass a stable function in a long list. Ignored without `items`,\n   * with a development warning.\n   * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`\n   */\n  renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React.ReactNode;\n  /**\n   * Data mode: renders only the options in view of a long list, plus an overscan, and spacers\n   * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result\n   * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.\n   * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a\n   * development warning (a window renders a flat list).\n   *\n   * The list element is the window's scroller: give it a bounded height (a height or a maximum\n   * height, through `className` or `style`); without one the window measures the whole list and\n   * renders every option. While windowed the list has no block padding (add none through\n   * `className`), so the options start at its top, where the window counts them, and no scroll\n   * anchoring of the browser (the window lays the options out). Every option is exactly\n   * `itemSize` tall (the list sets its height, after the option's own `style`), so an option's\n   * content must fit in it: the default `Option` with one line of text is 32 pixels tall.\n   *\n   * The window counts the shown options (the items that are not `hidden`). The keys and typeahead\n   * move over all of them (Home and End to the first and the last, PageUp and PageDown by ten); the\n   * active option stays rendered while it is scrolled away, so `aria-activedescendant` always names\n   * an element, and when the list gains focus or a key makes it active the list and the window\n   * move to it in the same update (a pointer press moves neither). The server renders the first\n   * window.\n   */\n  virtualWindow?: VirtualWindow;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    items,\n    renderOption,\n    virtualWindow,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  // A window renders data mode only; the list is its scroller.\n  const activeWindow = items === undefined ? undefined : virtualWindow;\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    items,\n    // An active option that the window does not render (an adapter that keeps nothing): scrolled\n    // to by its index among the shown options, the window's count.\n    onScrollToItem: activeWindow\n      ? (index) => activeWindow.scrollToIndex(index, { align: 'auto' })\n      : undefined,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option (or the item), whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(\n    ref,\n    listRef,\n    listElementRef,\n    activeWindow?.scrollRef,\n  );\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n  useItemsAndChildrenWarning('Listbox', items, children);\n  useDataModeWarnings('Listbox', { items, renderOption, virtualWindow, children });\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  // What every option of data mode is drawn from, besides its item.\n  const optionsState = {\n    selected: new Set(values),\n    activeValue: listbox.activeValue,\n    renderOption,\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        // Windowed: the options start at the top of the scroller, where the window counts them,\n        // and the window lays them out (the browser's scroll anchoring only fights it).\n        activeWindow && 'py-0 [overflow-anchor:none]',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>\n        {/* Data mode: the options of the shown items, or the window's; the children are ignored. */}\n        {items === undefined\n          ? children\n          : activeWindow\n            ? renderListboxWindow(\n                listbox.items,\n                activeWindow,\n                optionsState,\n                listboxClassNames.spacer,\n              )\n            : renderListboxItems(listbox.items, optionsState)}\n      </ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Data mode.** `items` passes the options as data instead of children: the list renders an\n *   option per item (`renderOption` draws it, an `Option` with the item's label by default), the\n *   keys, typeahead and the selection follow the data, and each option carries `aria-posinset`\n *   and `aria-setsize`. A long list takes a `virtualWindow` (from `useVirtualWindow({ itemSize\n *   })`): the list then renders only the options in view, plus an overscan, with spacers for the\n *   others, every option `itemSize` tall, and the active option stays rendered.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n *\n * @example\n * // Data mode\n * <Listbox aria-label=\"City\" items={cities.map((c) => ({ value: c.id, label: c.name }))} />\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}

package/dist/components/input/Listbox.mjs

@@ -8,125 +8,137 @@ import { isFocused as a } from "../../lib/focus.mjs";
 import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as ee } from "../../hooks/useIsClient.mjs";
 import { useFieldContext as te, useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
-import { useListbox as s } from "../../hooks/useListbox.mjs";
-import { focusRing as c } from "../../lib/styles.mjs";
-import { useFormReset as l } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as u } from "../internal/HiddenInput.mjs";
-import { ListboxProvider as d, Option as f, OptionGroup as p } from "./Option.mjs";
-import { PickerAnnouncer as m, announceToggle as re } from "./pickerLabels.mjs";
-import { EMPTY_VALUES as ie, resetValues as ae, toValues as oe, toggleValue as se } from "./pickerValues.mjs";
-import { isOwnEvent as ce } from "../../lib/events.mjs";
+import { useListbox as re } from "../../hooks/useListbox.mjs";
+import { focusRing as ie } from "../../lib/styles.mjs";
+import { useFormReset as ae } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as s } from "../internal/HiddenInput.mjs";
+import { ListboxProvider as c, Option as l, OptionGroup as u } from "./Option.mjs";
+import { renderListboxItems as d, renderListboxWindow as f, useDataModeWarnings as p, useItemsAndChildrenWarning as m } from "./Option.data.mjs";
+import { PickerAnnouncer as oe, announceToggle as se } from "./pickerLabels.mjs";
+import { EMPTY_VALUES as ce, resetValues as le, toValues as ue, toggleValue as de } from "./pickerValues.mjs";
+import { isOwnEvent as fe } from "../../lib/events.mjs";
 import * as h from "react";
-import { jsx as g, jsxs as le } from "react/jsx-runtime";
+import { jsx as g, jsxs as pe } from "react/jsx-runtime";
 //#region src/components/input/Listbox.tsx
-var ue = "Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.", de = {
+var me = "Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.", he = {
 	"aria-disabled": !0,
 	"data-disabled": ""
-}, _ = (f) => {
-	let { multiselect: p = !1, value: _, defaultValue: v, onValueChange: y, onActiveOptionChange: b, disabled: x = !1, disabledOptionsFocusable: S = !1, autoFocus: C = !1, labels: w, name: T, form: E, required: D, id: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M, "aria-required": N, onFocus: P, onBlur: F, onKeyDown: I, onKeyUp: L, className: fe, children: R, ref: z, ...B } = f, V = te(), H = ne({
-		id: O,
-		"aria-label": k,
-		"aria-labelledby": A,
-		"aria-describedby": j,
-		"aria-invalid": M,
-		"aria-required": N ?? D
-	}, { labelable: !1 }), [pe, U] = i(_, v ?? (p ? ie : ""), (e) => {
+}, _ = (l) => {
+	let { multiselect: u = !1, value: _, defaultValue: v, onValueChange: y, onActiveOptionChange: b, disabled: x = !1, disabledOptionsFocusable: S = !1, autoFocus: C = !1, labels: w, items: T, renderOption: E, virtualWindow: D, name: O, form: k, required: A, id: j, "aria-label": M, "aria-labelledby": N, "aria-describedby": P, "aria-invalid": F, "aria-required": I, onFocus: L, onBlur: R, onKeyDown: ge, onKeyUp: _e, className: ve, children: z, ref: ye, ...be } = l, xe = te(), B = ne({
+		id: j,
+		"aria-label": M,
+		"aria-labelledby": N,
+		"aria-describedby": P,
+		"aria-invalid": F,
+		"aria-required": I ?? A
+	}, { labelable: !1 }), [Se, V] = i(_, v ?? (u ? ce : ""), (e) => {
 		y?.(typeof e == "string" ? e : [...e]);
-	}), W = oe(pe), [me, G] = h.useState(!1), K = h.useRef(null), q = ee(), J = h.useRef(!1);
+	}), H = ue(Se), [Ce, U] = h.useState(!1), W = h.useRef(null), G = ee(), K = h.useRef(!1);
 	h.useLayoutEffect(() => {
-		let e = K.current;
-		e && (J.current || (J.current = !0, C && !x && q && e.focus()), G(!x && a(e)));
+		let e = W.current;
+		e && (K.current || (K.current = !0, C && !x && G && e.focus()), U(!x && a(e)));
 	}, [
 		C,
 		x,
-		q
+		G
 	]);
-	let Y = s({
-		open: me && !x,
+	let q = T === void 0 ? void 0 : D, J = re({
+		open: Ce && !x,
 		mode: "standalone",
-		multiselect: p,
-		selectedValues: W,
+		multiselect: u,
+		selectedValues: H,
 		loop: !1,
 		disabledOptionsFocusable: S,
+		items: T,
+		onScrollToItem: q ? (e) => q.scrollToIndex(e, { align: "auto" }) : void 0,
 		onSelect: (e, t) => {
 			if (x) return;
-			if (!p) {
-				U(e);
+			if (!u) {
+				V(e);
 				return;
 			}
-			let { values: n, added: r } = se(W, e);
-			U(n), re(w, t?.item.label ?? e, r, n.length);
+			let { values: n, added: r } = de(H, e);
+			V(n), se(w, t?.item.label ?? e, r, n.length);
 		},
 		onActiveValueChange: b,
 		idPrefix: "listbox"
-	}), { ref: he, ...X } = Y.getListboxProps(), ge = o(z, K, he), Z = X["aria-activedescendant"], [_e, Q] = h.useState(!1), [ve, ye] = h.useState(Z);
-	ve !== Z && (ye(Z), Q(!1)), h.useEffect(() => {
-		let e = K.current;
-		if (Z === void 0 || !e || typeof IntersectionObserver > "u") return;
-		let t = Array.from(e.querySelectorAll("[role=\"option\"]")).find((e) => e.id === Z);
+	}), { ref: we, ...Y } = J.getListboxProps(), Te = o(ye, W, we, q?.scrollRef), X = Y["aria-activedescendant"], [Ee, Z] = h.useState(!1), [De, Oe] = h.useState(X);
+	De !== X && (Oe(X), Z(!1)), h.useEffect(() => {
+		let e = W.current;
+		if (X === void 0 || !e || typeof IntersectionObserver > "u") return;
+		let t = Array.from(e.querySelectorAll("[role=\"option\"]")).find((e) => e.id === X);
 		if (!t) return;
 		let n = new IntersectionObserver((e) => {
 			let t = e[e.length - 1];
-			t && Q(!t.isIntersecting);
+			t && Z(!t.isIntersecting);
 		}, { root: e });
 		return n.observe(t), () => n.disconnect();
-	}, [Z]), l(K, () => {
-		if (!p) {
-			U(v ?? "");
+	}, [X]), ae(W, () => {
+		if (!u) {
+			V(v ?? "");
 			return;
 		}
-		U((e) => ae(e, v));
-	}, E);
-	let $ = !H["aria-label"]?.trim() && !H["aria-labelledby"]?.trim();
+		V((e) => le(e, v));
+	}, k);
+	let Q = !B["aria-label"]?.trim() && !B["aria-labelledby"]?.trim();
 	h.useEffect(() => {
-		$ && t("Listbox:unnamed", ue);
-	}, [$]);
-	let be = (e) => {
-		!x && ce(e) && Y.onKeyDown(e);
-	}, xe = (e) => {
-		e.target === e.currentTarget && G(!0);
-	}, Se = (e) => {
+		Q && t("Listbox:unnamed", me);
+	}, [Q]), m("Listbox", T, z), p("Listbox", {
+		items: T,
+		renderOption: E,
+		virtualWindow: D,
+		children: z
+	});
+	let ke = (e) => {
+		!x && fe(e) && J.onKeyDown(e);
+	}, Ae = (e) => {
+		e.target === e.currentTarget && U(!0);
+	}, je = (e) => {
 		let t = e.currentTarget;
-		e.target === t && !a(t) && G(!1);
+		e.target === t && !a(t) && U(!1);
+	}, $ = {
+		selected: new Set(H),
+		activeValue: J.activeValue,
+		renderOption: E
 	};
-	return /* @__PURE__ */ le("ul", {
+	return /* @__PURE__ */ pe("ul", {
+		...be,
 		...B,
-		...H,
-		...X,
-		id: H.id ?? X.id,
-		tabIndex: x ? void 0 : X.tabIndex,
-		"aria-activedescendant": X["aria-activedescendant"],
-		"aria-multiselectable": X["aria-multiselectable"],
-		...x ? de : void 0,
+		...Y,
+		id: B.id ?? Y.id,
+		tabIndex: x ? void 0 : Y.tabIndex,
+		"aria-activedescendant": Y["aria-activedescendant"],
+		"aria-multiselectable": Y["aria-multiselectable"],
+		...x ? he : void 0,
 		autoFocus: C || void 0,
-		ref: ge,
-		onKeyDown: n(I, be),
-		onKeyUp: n(L, Y.onKeyUp),
-		onFocus: n(P, xe, { checkDefaultPrevented: !1 }),
-		onBlur: n(F, Se, { checkDefaultPrevented: !1 }),
-		className: e(r.root, "relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground", Y.activeValue === null || _e ? c : "focus:outline-hidden", x && "cursor-not-allowed opacity-50 *:pointer-events-none", fe),
+		ref: Te,
+		onKeyDown: n(ge, ke),
+		onKeyUp: n(_e, J.onKeyUp),
+		onFocus: n(L, Ae, { checkDefaultPrevented: !1 }),
+		onBlur: n(R, je, { checkDefaultPrevented: !1 }),
+		className: e(r.root, "relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground", J.activeValue === null || Ee ? ie : "focus:outline-hidden", x && "cursor-not-allowed opacity-50 *:pointer-events-none", q && "py-0 [overflow-anchor:none]", ve),
 		children: [
-			p && /* @__PURE__ */ g(m, {}),
-			/* @__PURE__ */ g(d, {
-				value: Y.context,
-				children: R
+			u && /* @__PURE__ */ g(oe, {}),
+			/* @__PURE__ */ g(c, {
+				value: J.context,
+				children: T === void 0 ? z : q ? f(J.items, q, $, r.spacer) : d(J.items, $)
 			}),
-			/* @__PURE__ */ g(u, {
-				name: T,
-				form: E,
+			/* @__PURE__ */ g(s, {
+				name: O,
+				form: k,
 				disabled: x,
-				value: p ? W : W[0] ?? "",
+				value: u ? H : H[0] ?? "",
 				type: "text",
-				required: D ?? V?.required ?? !1,
-				onInvalid: () => K.current?.focus()
+				required: A ?? xe?.required ?? !1,
+				onInvalid: () => W.current?.focus()
 			})
 		]
 	});
 };
 _.displayName = "Listbox";
-var v = f, y = p, b = /* @__PURE__ */ Object.assign(_, {
-	Option: f,
-	OptionGroup: p
+var v = l, y = u, b = /* @__PURE__ */ Object.assign(_, {
+	Option: l,
+	OptionGroup: u
 });
 //#endregion
 export { b as Listbox, v as ListboxOption, y as ListboxOptionGroup };

package/dist/components/input/Listbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.mjs","names":["React","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","useFieldContext","fieldProps","useFieldControl","required","value","setValue","useControllable","defaultValue","multiselect","EMPTY_VALUES","next","values","toValues","focused","setFocused","listRef","isClient","useIsClient","autoFocusHandledRef","list","autoFocus","disabled","isFocused","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","useMergedRefs","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","useFormReset","resetValues","current","form","unnamed","warnOnce","handleKeyDown","isOwnEvent","event","handleFocus","handleBlur","composeEventHandlers","onKeyDown","onKeyUp","onFocus","onBlur","cn","listboxClassNames","focusRing","className","PickerAnnouncer","ListboxProvider","HiddenInput","ListboxOption","Option","ListboxOptionGroup","OptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup } from './Option';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option, whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(ref, listRef, listElementRef);\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>{children}</ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}
+{"version":3,"file":"Listbox.mjs","names":["React","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","useFieldContext","fieldProps","useFieldControl","required","value","setValue","useControllable","defaultValue","multiselect","EMPTY_VALUES","next","values","toValues","focused","setFocused","listRef","isClient","useIsClient","autoFocusHandledRef","list","autoFocus","disabled","isFocused","activeWindow","items","virtualWindow","listbox","useListbox","index","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","useMergedRefs","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","useFormReset","resetValues","current","form","unnamed","warnOnce","useItemsAndChildrenWarning","children","useDataModeWarnings","handleKeyDown","isOwnEvent","event","handleFocus","handleBlur","optionsState","composeEventHandlers","onKeyDown","onKeyUp","onFocus","onBlur","cn","listboxClassNames","focusRing","className","PickerAnnouncer","ListboxProvider","renderListboxWindow","renderListboxItems","HiddenInput","ListboxOption","Option","ListboxOptionGroup","OptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup, type ListboxOptionRenderState } from './Option';\nimport {\n  renderListboxItems,\n  renderListboxWindow,\n  useDataModeWarnings,\n  useItemsAndChildrenWarning,\n} from './Option.data';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,\n   * `disabled` and `hidden`; values unique). The list renders one option per item that is not\n   * `hidden` (see `renderOption`), and the keys, typeahead and the selection follow `items`. The\n   * children are neither read nor rendered: passing both warns once in development. Each option\n   * gets `aria-posinset` and `aria-setsize` from its place among the shown items, and keeps one id\n   * per value. Without it, the options are the `Option` children.\n   */\n  items?: readonly ListboxItem[];\n  /**\n   * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`\n   * among the shown options). Return an `Option`, or an option component of your own on\n   * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,\n   * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its\n   * state, its position (`aria-posinset` and `aria-setsize`, which new `items` change) or the\n   * function itself changes, so pass a stable function in a long list. Ignored without `items`,\n   * with a development warning.\n   * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`\n   */\n  renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React.ReactNode;\n  /**\n   * Data mode: renders only the options in view of a long list, plus an overscan, and spacers\n   * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result\n   * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.\n   * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a\n   * development warning (a window renders a flat list).\n   *\n   * The list element is the window's scroller: give it a bounded height (a height or a maximum\n   * height, through `className` or `style`); without one the window measures the whole list and\n   * renders every option. While windowed the list has no block padding (add none through\n   * `className`), so the options start at its top, where the window counts them, and no scroll\n   * anchoring of the browser (the window lays the options out). Every option is exactly\n   * `itemSize` tall (the list sets its height, after the option's own `style`), so an option's\n   * content must fit in it: the default `Option` with one line of text is 32 pixels tall.\n   *\n   * The window counts the shown options (the items that are not `hidden`). The keys and typeahead\n   * move over all of them (Home and End to the first and the last, PageUp and PageDown by ten); the\n   * active option stays rendered while it is scrolled away, so `aria-activedescendant` always names\n   * an element, and when the list gains focus or a key makes it active the list and the window\n   * move to it in the same update (a pointer press moves neither). The server renders the first\n   * window.\n   */\n  virtualWindow?: VirtualWindow;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    items,\n    renderOption,\n    virtualWindow,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  // A window renders data mode only; the list is its scroller.\n  const activeWindow = items === undefined ? undefined : virtualWindow;\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    items,\n    // An active option that the window does not render (an adapter that keeps nothing): scrolled\n    // to by its index among the shown options, the window's count.\n    onScrollToItem: activeWindow\n      ? (index) => activeWindow.scrollToIndex(index, { align: 'auto' })\n      : undefined,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option (or the item), whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(\n    ref,\n    listRef,\n    listElementRef,\n    activeWindow?.scrollRef,\n  );\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n  useItemsAndChildrenWarning('Listbox', items, children);\n  useDataModeWarnings('Listbox', { items, renderOption, virtualWindow, children });\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  // What every option of data mode is drawn from, besides its item.\n  const optionsState = {\n    selected: new Set(values),\n    activeValue: listbox.activeValue,\n    renderOption,\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        // Windowed: the options start at the top of the scroller, where the window counts them,\n        // and the window lays them out (the browser's scroll anchoring only fights it).\n        activeWindow && 'py-0 [overflow-anchor:none]',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>\n        {/* Data mode: the options of the shown items, or the window's; the children are ignored. */}\n        {items === undefined\n          ? children\n          : activeWindow\n            ? renderListboxWindow(\n                listbox.items,\n                activeWindow,\n                optionsState,\n                listboxClassNames.spacer,\n              )\n            : renderListboxItems(listbox.items, optionsState)}\n      </ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Data mode.** `items` passes the options as data instead of children: the list renders an\n *   option per item (`renderOption` draws it, an `Option` with the item's label by default), the\n *   keys, typeahead and the selection follow the data, and each option carries `aria-posinset`\n *   and `aria-setsize`. A long list takes a `virtualWindow` (from `useVirtualWindow({ itemSize\n *   })`): the list then renders only the options in view, plus an overscan, with spacers for the\n *   others, every option `itemSize` tall, and the active option stays rendered.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n *\n * @example\n * // Data mode\n * <Listbox aria-label=\"City\" items={cities.map((c) => ({ value: c.id, label: c.name }))} />\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}

package/dist/components/input/Option.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useListbox.cjs"),l=require("../../hooks/usePopupPosition.cjs"),u=require("../../hooks/useDismiss.cjs"),d=require("../../lib/styles.cjs"),f=require("../portal/Portal.cjs"),p=require("../../lib/icons.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(!0);g.displayName=`OptionCheckContext`;var _=t.cn(`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`),v=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},y=m.createContext([]);y.displayName=`OptionGroupContext`;var b=m.createContext(!1);b.displayName=`OptionGroupHiddenContext`;function x(e){let t=m.useContext(y);m.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}var S=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,C=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function w(e,{selected:n,multiselect:i,disabled:o}){if(!i){let i=t.cn(a.optionClassNames.checkIcon,`shrink-0`,!n&&`invisible`);return e===void 0?(0,h.jsx)(p.CheckIcon,{className:i}):r.renderSlot(e,`span`,t.cn(`inline-flex`,i),{"aria-hidden":!0})}let s;s=o?t.cn(`border-current bg-transparent`,S):n?t.cn(`border-primary bg-primary text-primary-foreground`,d.forcedColors.selectedLeaf):t.cn(`border-stroke-accessible bg-transparent`,d.forcedColors.control);let c=o?C:void 0;return(0,h.jsx)(`span`,{"aria-hidden":`true`,"data-wave-option-box":``,className:t.cn(a.optionClassNames.indicator,`flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border`,s),children:n&&(e===void 0?(0,h.jsx)(p.CheckIcon,{size:12,className:t.cn(a.optionClassNames.checkIcon,c)}):r.renderSlot(e,`span`,t.cn(a.optionClassNames.checkIcon,`inline-flex shrink-0`,c),{"aria-hidden":!0}))})}function T(e){let{value:o,label:s,textValue:l,disabled:u=!1,hidden:f=!1,checkIcon:p,className:v,children:y,onClick:S,onMouseDown:C,onPointerMove:T,ref:E,...D}=e,O=m.useContext(g),k=m.useContext(b),{selected:A,multiselect:j,optionProps:M}=c.useListboxOption({value:o,label:s,textValue:l,disabled:u,hidden:f||k},E);x(o);let{ref:N,onClick:P,onMouseDown:F,onPointerMove:I,...L}=M,R=p!=null&&r.slotRendersContent(p),z=p!=null&&!R;return m.useEffect(()=>{z&&n.warnOnce(`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.")},[z]),(0,h.jsxs)(`li`,{"data-value":o,...D,...L,ref:N,onClick:i.composeEventHandlers(S,P),onMouseDown:i.composeEventHandlers(C,F),onPointerMove:i.composeEventHandlers(T,I),className:t.cn(a.optionClassNames.root,_,A&&!(j&&O)&&d.forcedColors.selectedContainer,v),children:[O&&w(R?p:void 0,{selected:A,multiselect:j,disabled:u}),(0,h.jsx)(`span`,{className:t.cn(a.optionClassNames.content,`min-w-0 flex-1`),children:y??o})]})}T.displayName=`Option`;var E=m.memo(T);E.displayName=`Option`;var D=c.markListboxElement(E,`option`),O=1,k=3;function A(e){if(e===null)return``;if(e.nodeType===k)return e.textContent??``;if(e.nodeType!==O)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+=A(e);return r}function j(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()!==``:A(i).trim()!==``:!1}var M=`OptionGroup:unnamed`;function N({label:e,className:i,children:s,hidden:l,"aria-label":u,"aria-labelledby":d,ref:f,...p}){let g=o.useId(`option-group`),_=m.useContext(c.ListboxContext)?.store,x=m.useContext(y),S=m.useContext(b)||!!l,[C]=m.useState(()=>new v),w=m.useMemo(()=>[...x,C],[x,C]),T=m.useCallback(e=>{let t=C.subscribe(e),n=_?.subscribe(e);return()=>{t(),n?.()}},[C,_]),E=m.useSyncExternalStore(T,()=>C.allHidden(_),()=>!1),D=r.slotRendersContent(e),O=d??(u===void 0&&D?g:void 0),k=m.useRef(null);return m.useEffect(()=>{n.isDev&&!n.hasWarned(M)&&(j(e,u,O,g,k.current)||n.warnOnce(M,"OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."))},[e,u,O,g]),(0,h.jsxs)(`li`,{...p,ref:f,role:`presentation`,hidden:l||E||void 0,className:t.cn(a.optionGroupClassNames.root,i),children:[D&&(0,h.jsx)(`div`,{ref:k,id:g,role:`presentation`,className:t.cn(a.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:r.materialiseSlotContent(e)}),(0,h.jsx)(`ul`,{role:`group`,"aria-label":u,"aria-labelledby":O,className:a.optionGroupClassNames.list,children:(0,h.jsx)(b.Provider,{value:S,children:(0,h.jsx)(y.Provider,{value:w,children:s})})})]})}N.displayName=`OptionGroup`;var P=c.markListboxElement(N,`group`);function F({value:e,children:t}){return(0,h.jsx)(c.ListboxContext.Provider,{value:e,children:t})}F.displayName=`ListboxProvider`;function I(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:a,positioning:o}=e,c=m.useRef(null),{setReference:d,setFloating:f,floatingProps:p}=l.usePopupPosition({open:n,side:`bottom`,align:`start`,...l.resolvePositioning(o,{matchReferenceWidth:!0,fitViewport:!0})}),{layerId:h}=u.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,c],anchorRef:a,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:h,setReference:d,surfaceRef:s.useMergedRefs(c,f),floatingProps:p}}function L(e){e.preventDefault()}function R(e){let{listbox:n,layerId:r,surfaceRef:o,floatingProps:c,open:l,expanded:u,emptyContent:d,"aria-label":p,"aria-labelledby":m,showCheck:_=!0,listClassName:v,surfaceClassName:y,listProps:b,children:x}=e,{ref:S,onMouseDown:C,...w}=b??{},T=n.getListboxProps(),E=s.useMergedRefs(S,T.ref),D=(0,h.jsx)(g.Provider,{value:_,children:(0,h.jsx)(F,{value:n.context,children:(0,h.jsx)(`ul`,{...w,...T,"aria-multiselectable":T[`aria-multiselectable`],"aria-activedescendant":T[`aria-activedescendant`],onMouseDown:i.composeEventHandlers(C,T.onMouseDown),ref:E,"aria-label":p,"aria-labelledby":m,hidden:!u||void 0,className:t.cn(a.listboxSurfaceClassNames.list,`min-h-0 max-h-60 overflow-auto`,v),children:x})})});return!u&&(!l||u||d==null)?D:(0,h.jsxs)(h.Fragment,{children:[!u&&D,(0,h.jsx)(f.Portal,{layerId:r,children:(0,h.jsx)(`div`,{ref:o,...c,"data-wave-listbox-surface":``,onMouseDown:L,className:t.cn(a.listboxSurfaceClassNames.root,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,y),children:u?D:d})})]})}R.displayName=`ListboxSurface`,exports.ListboxProvider=F,exports.ListboxSurface=R,exports.Option=D,exports.OptionGroup=P,exports.useListboxPopup=I;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useListbox.cjs"),l=require("../../hooks/usePopupPosition.cjs"),u=require("../../hooks/useDismiss.cjs"),d=require("../../lib/styles.cjs"),f=require("../portal/Portal.cjs"),p=require("../../lib/icons.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(!0);g.displayName=`OptionCheckContext`;var _=t.cn(`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`),v=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},y=m.createContext([]);y.displayName=`OptionGroupContext`;var b=m.createContext(!1);b.displayName=`OptionGroupHiddenContext`;function x(e){let t=m.useContext(y);m.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}var S=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,C=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function w(e,{selected:n,multiselect:i,disabled:o}){if(!i){let i=t.cn(a.optionClassNames.checkIcon,`shrink-0`,!n&&`invisible`);return e===void 0?(0,h.jsx)(p.CheckIcon,{className:i}):r.renderSlot(e,`span`,t.cn(`inline-flex`,i),{"aria-hidden":!0})}let s;s=o?t.cn(`border-current bg-transparent`,S):n?t.cn(`border-primary bg-primary text-primary-foreground`,d.forcedColors.selectedLeaf):t.cn(`border-stroke-accessible bg-transparent`,d.forcedColors.control);let c=o?C:void 0;return(0,h.jsx)(`span`,{"aria-hidden":`true`,"data-wave-option-box":``,className:t.cn(a.optionClassNames.indicator,`flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border`,s),children:n&&(e===void 0?(0,h.jsx)(p.CheckIcon,{size:12,className:t.cn(a.optionClassNames.checkIcon,c)}):r.renderSlot(e,`span`,t.cn(a.optionClassNames.checkIcon,`inline-flex shrink-0`,c),{"aria-hidden":!0}))})}function T(e){let{value:o,label:s,textValue:l,disabled:u=!1,hidden:f=!1,checkIcon:p,className:v,style:y,children:S,onClick:C,onMouseDown:T,onPointerMove:E,ref:D,...O}=e,k=m.useContext(g),A=m.useContext(b),{selected:j,multiselect:M,optionProps:N}=c.useListboxOption({value:o,label:s,textValue:l,disabled:u,hidden:f||A},D);x(o);let{ref:P,onClick:F,onMouseDown:I,onPointerMove:L,style:R,...z}=N,B=p!=null&&r.slotRendersContent(p),V=p!=null&&!B;return m.useEffect(()=>{V&&n.warnOnce(`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.")},[V]),(0,h.jsxs)(`li`,{"data-value":o,...O,...z,style:R?{...y,...R}:y,ref:P,onClick:i.composeEventHandlers(C,F),onMouseDown:i.composeEventHandlers(T,I),onPointerMove:i.composeEventHandlers(E,L),className:t.cn(a.optionClassNames.root,_,j&&!(M&&k)&&d.forcedColors.selectedContainer,v),children:[k&&w(B?p:void 0,{selected:j,multiselect:M,disabled:u}),(0,h.jsx)(`span`,{className:t.cn(a.optionClassNames.content,`min-w-0 flex-1`),children:S??o})]})}T.displayName=`Option`;var E=m.memo(T);E.displayName=`Option`;var D=c.markListboxElement(E,`option`),O=1,k=3;function A(e){if(e===null)return``;if(e.nodeType===k)return e.textContent??``;if(e.nodeType!==O)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+=A(e);return r}function j(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()!==``:A(i).trim()!==``:!1}var M=`OptionGroup:unnamed`;function N({label:e,className:i,children:s,hidden:l,"aria-label":u,"aria-labelledby":d,ref:f,...p}){let g=o.useId(`option-group`),_=m.useContext(c.ListboxContext)?.store,x=m.useContext(y),S=m.useContext(b)||!!l,[C]=m.useState(()=>new v),w=m.useMemo(()=>[...x,C],[x,C]),T=m.useCallback(e=>{let t=C.subscribe(e),n=_?.subscribe(e);return()=>{t(),n?.()}},[C,_]),E=m.useSyncExternalStore(T,()=>C.allHidden(_),()=>!1),D=r.slotRendersContent(e),O=d??(u===void 0&&D?g:void 0),k=m.useRef(null);return m.useEffect(()=>{n.isDev&&!n.hasWarned(M)&&(j(e,u,O,g,k.current)||n.warnOnce(M,"OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."))},[e,u,O,g]),(0,h.jsxs)(`li`,{...p,ref:f,role:`presentation`,hidden:l||E||void 0,className:t.cn(a.optionGroupClassNames.root,i),children:[D&&(0,h.jsx)(`div`,{ref:k,id:g,role:`presentation`,className:t.cn(a.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:r.materialiseSlotContent(e)}),(0,h.jsx)(`ul`,{role:`group`,"aria-label":u,"aria-labelledby":O,className:a.optionGroupClassNames.list,children:(0,h.jsx)(b.Provider,{value:S,children:(0,h.jsx)(y.Provider,{value:w,children:s})})})]})}N.displayName=`OptionGroup`;var P=c.markListboxElement(N,`group`);function F({value:e,children:t}){return(0,h.jsx)(c.ListboxContext.Provider,{value:e,children:t})}F.displayName=`ListboxProvider`;function I(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:a,positioning:o}=e,c=m.useRef(null),{setReference:d,setFloating:f,floatingProps:p}=l.usePopupPosition({open:n,side:`bottom`,align:`start`,...l.resolvePositioning(o,{matchReferenceWidth:!0,fitViewport:!0})}),{layerId:h}=u.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,c],anchorRef:a,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:h,setReference:d,surfaceRef:s.useMergedRefs(c,f),floatingProps:p}}function L(e){e.preventDefault()}function R(e){let{listbox:n,layerId:r,surfaceRef:o,floatingProps:c,open:l,expanded:u,emptyContent:d,"aria-label":p,"aria-labelledby":m,showCheck:_=!0,listClassName:v,surfaceClassName:y,listProps:b,children:x}=e,{ref:S,onMouseDown:C,...w}=b??{},T=n.getListboxProps(),E=s.useMergedRefs(S,T.ref),D=(0,h.jsx)(g.Provider,{value:_,children:(0,h.jsx)(F,{value:n.context,children:(0,h.jsx)(`ul`,{...w,...T,"aria-multiselectable":T[`aria-multiselectable`],"aria-activedescendant":T[`aria-activedescendant`],onMouseDown:i.composeEventHandlers(C,T.onMouseDown),ref:E,"aria-label":p,"aria-labelledby":m,hidden:!u||void 0,className:t.cn(a.listboxSurfaceClassNames.list,`min-h-0 max-h-60 overflow-auto`,v),children:x})})});return!u&&(!l||u||d==null)?D:(0,h.jsxs)(h.Fragment,{children:[!u&&D,(0,h.jsx)(f.Portal,{layerId:r,children:(0,h.jsx)(`div`,{ref:o,...c,"data-wave-listbox-surface":``,onMouseDown:L,className:t.cn(a.listboxSurfaceClassNames.root,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,y),children:u?D:d})})]})}R.displayName=`ListboxSurface`,exports.ListboxProvider=F,exports.ListboxSurface=R,exports.Option=D,exports.OptionGroup=P,exports.useListboxPopup=I;
 //# sourceMappingURL=Option.cjs.map