@mortenbrudvik/waveui 0.14.1 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":["React","HISTORY_EDITS","matchesText","item","text","ComboboxRoot","valueProp","openProp","sizeProp","appearanceProp","freeformProp","queryProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","warnDeprecated","freeform","multiselect","freeformIgnored","warnOnce","queryIgnored","defaultQuery","field","useFieldContext","validates","required","readOnly","fieldProps","useFieldControl","invalidLook","isInvalidLook","useInputLook","value","setValue","useControllable","defaultValue","EMPTY_VALUES","next","values","toValues","single","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","open","query","setQuery","onQueryChange","editing","setEditing","freeformDraft","setFreeformDraft","draft","lock","setLock","lockedOpen","typedValue","setTypedValue","rootRef","inputRef","optionLabels","collectOptionLabels","children","filterText","listFilter","filter","editDraft","dropDraft","commitText","close","clearDraft","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","labelOf","v","labelsText","shown","label","defaultSelectionLabel","showingLabels","optionLabel","inputText","expanded","noMatchesText","surfaceOpen","noMatches","useListboxPopup","rootMergedRef","useMergedRefs","ref","inputMergedRef","controlRef","setReference","resetValues","current","form","pointerFocusRef","handleMouseDown","isFocused","event","handleFocus","handleMouseUp","input","announcedEditRef","handledInputRef","handleUnchangedEdit","useEventCallback","record","inputType","selectionStart","selectionEnd","handleKeyDown","handleChange","announced","edit","range","replacedText","insertedText","handleExpandClick","handleClear","showExpand","showsExpandButton","expandIcon","showClear","clearable","listLabelledBy","size","appearance","cn","comboboxClassNames","className","PickerAnnouncer","placeholder","maxLength","composeEventHandlers","onKeyDown","onKeyUp","onFocus","onBlur","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","PickerExpandButton","ListboxSurface","HiddenInput","ComboboxOption","Option","ComboboxOptionGroup","OptionGroup","Combobox"],"sources":["../../../src/components/input/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { comboboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { isFocused } from '../../lib/focus';\nimport { DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n  disabledStyles,\n  focusRing,\n  inputAppearanceClasses,\n  inputFocus,\n  inputHeightClasses,\n  inputInvalid,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, PopupPositioningOptions } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport { insertedText, replacedText } from './Combobox.text';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport { announceToggle, defaultSelectionLabel, PickerAnnouncer } from './pickerLabels';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\nimport type { RoutedHandlers } from './routedHandlers';\n\nexport { Option, OptionGroup } from './Option';\nexport type { OptionProps, OptionGroupProps } from './Option';\n\n/* ------------------------------------------------------------------ */\n/*  Combobox                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Combobox's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface ComboboxLabels {\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /** Name of the expand button at the end of the input.\n   * @default 'Show options'\n   */\n  expand?: string;\n  /**\n   * The text of the selected labels the input shows with `multiselect` while no text is typed, in\n   * selection order; values without an option are left out.\n   * @default (labels) => labels.join(', ')\n   */\n  selection?: (labels: string[]) => string;\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 Combobox component. */\nexport interface ComboboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`): the value is an array, options show\n   * a checkbox, Enter and a click toggle an option and keep the list open, and each toggle is\n   * announced. While no text is typed the input shows the selected labels, selected whenever the\n   * input gains focus or they return to it, so typing replaces them with text that filters the\n   * options. Not available with `freeform`. A non-literal `multiselect={flag}` is a type error:\n   * 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 (Fluent's\n   * `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes: an option is selected (toggled with `multiselect`,\n   * which passes a new array), or (with `freeform`) the text changes. Without `multiselect` it is\n   * not called when the current option is selected again; with it, activating a selected option\n   * deselects it, which is a change. Fluent's `onOptionSelect`, under WaveUI's value/onValueChange\n   * naming.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (every\n   * toggle with `multiselect`; with `freeform`, every text change).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open combobox\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A combobox that starts disabled or read-only\n   * starts closed. The list renders only in the browser: it is closed in the server HTML and opens\n   * once the combobox has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no value is selected; with `multiselect`, whenever the input shows\n   * no selected labels (no value is selected, or no selected value has an option).\n   */\n  placeholder?: string;\n  /**\n   * Whether the combobox is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size.\n   */\n  size?: CoreSize;\n  /**\n   * Advanced positioning of the popup (Fluent's `positioning`): `offset`, `fitViewport`,\n   * `matchReferenceWidth` and `fallbackPlacements` (tried in order when the requested side has no\n   * room). The popup opens below the field.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Whether the typed text is itself the value. Without it, typing only filters the options (the\n   * first match becomes active, so Enter selects it) and the input shows the selected option's\n   * label again when the listbox closes or loses focus. With it, the input shows typed text as\n   * typed (also when it equals an option's value), a selected option's label, and a controlled\n   * `value` as soon as the parent sets it (a parent that normalizes or rejects the text). Not\n   * available with `multiselect` (a type error there): free text cannot be one of several values.\n   * @default false\n   */\n  freeform?: M extends true ? never : boolean;\n  /**\n   * Whether an option matches the typed text (the query, or with `freeform` the typed value).\n   * Called with every option that is not hidden (its `value`, `label` and `textValue`) and the\n   * text whenever the text is not empty; an option it returns `false` for is filtered out. It may\n   * keep options that do not contain the text: `filter={() => true}` with `query` and\n   * `onQueryChange` leaves the matching to you (a server-side search that replaces the options),\n   * and a filter that always keeps an option of your own gives a \"Create …\" entry. With a\n   * server-side search, keep the selected option among the children, `hidden` while the results\n   * leave it out: a value without an option shows no label (the \"Async search\" story does this).\n   * @default a case-insensitive substring match on the option's `textValue`, else its `label`\n   */\n  filter?: (option: ListboxItem, query: string) => boolean;\n  /**\n   * Controlled query: the text typed since the last commit, which filters the options. A\n   * non-empty query shows in the input (hidden while `disabled` or `readOnly`); `''` shows the\n   * selected option's label (the selected labels with `multiselect`), except while the user edits\n   * the text, so erased text stays empty. Not used with `freeform`, where the typed text is the\n   * value.\n   */\n  query?: string;\n  /**\n   * Initial query for uncontrolled usage. A Combobox that starts disabled or read-only starts\n   * without it (as it starts closed). Not used with `freeform`.\n   * @default ''\n   */\n  defaultQuery?: string;\n  /**\n   * Called with the new query when it changes: as the user types, and with `''` when it resets (a\n   * commit, a close, a blur, Escape, the clear button, a form reset, or `disabled` or `readOnly`\n   * turned on while text is typed). A Combobox that mounts disabled or read-only reports nothing:\n   * it keeps a controlled query, which shows once it unlocks. Never called with `freeform`.\n   */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — opening, arrow keys, the pointer, a\n   * filter change that moves it — and with `null` when the list closes. It reports what\n   * `aria-activedescendant` points at, from an effect once the change commits. Fluent's\n   * `onActiveOptionChange` reports neither the pointer (its options have no hover highlight) nor\n   * the close.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Keeps disabled options in the arrow-key order (the first match highlighted while typing may\n   * then be a disabled one too); they still cannot be selected (Enter and a click do nothing and\n   * the list stays open). Unlike Fluent, which always keeps disabled options reachable, WaveUI\n   * skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /**\n   * Name of the value in form submissions (renders a hidden input; one per value with\n   * `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Combobox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation). Like a native readonly\n   * input, a `readOnly` Combobox does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /**\n   * The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). With\n   * `multiselect` the input has no limit while it shows the selected labels, so the limit applies\n   * to the typed query only.\n   */\n  maxLength?: number;\n  /**\n   * The value cannot be changed: the input is read-only and the listbox neither opens (click,\n   * keyboard, a controlled `open`) nor commits; Escape is left to the page. Turning it (or\n   * `disabled`) on while the listbox is open closes it (`onOpenChange(false)`).\n   */\n  readOnly?: boolean;\n  /**\n   * Shows a clear button while a value is selected (not while `readOnly`; while `disabled` it is\n   * shown disabled, as in DatePicker and TimePicker). It clears the value\n   * (`onValueChange('')`; every value with `multiselect`, `onValueChange([])`), drops typed text,\n   * closes the list and moves focus to the input. It is a tab stop after the input.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph of the expand button at the end of the input (default: a chevron). The button\n   * opens and closes the list without moving focus out of the input and is not a tab stop\n   * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n   * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n   * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n   * become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The built-in texts (the \"No matches\" status, the names of the clear and expand buttons and,\n   * with `multiselect`, the selected-labels text and the toggle announcements), for localization.\n   * Unset members keep their English defaults.\n   */\n  labels?: ComboboxLabels;\n  /**\n   * Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers).\n   * With `multiselect`, a focus while the input shows the selected labels then selects them;\n   * `event.preventDefault()` skips that.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The Combobox component's type: a multi-select signature, then the single-select one. */\nexport interface ComboboxComponent {\n  (props: ComboboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ComboboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\n/**\n * An edit a `beforeinput` event announced: its `inputType`, and the selection it replaces, recorded\n * before the edit changes it. `range` is `null` where the edit does not replace the selection: a\n * drop inserts at the drop point, and an undo or a redo restores earlier text.\n */\ninterface AnnouncedEdit {\n  inputType: string;\n  range: readonly [number, number] | null;\n}\n\n/** The edits that restore earlier text: D11 rule 3 applies to them (R17). */\nconst HISTORY_EDITS: ReadonlySet<string> = new Set(['historyUndo', 'historyRedo']);\n\n/**\n * How the control came to be locked (`disabled` or `readOnly`): not at all, by a change while\n * mounted, or since it mounted.\n */\ntype LockState = 'unlocked' | 'locked' | 'mounted-locked';\n\n/** The default `filter` (0.7's match): a case-insensitive substring of `textValue ?? label`. */\nfunction matchesText(item: ListboxItem, text: string): boolean {\n  return (item.textValue ?? item.label).toLowerCase().includes(text.toLowerCase());\n}\n\nconst ComboboxRoot = (props: ComboboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder,\n    disabled = false,\n    size: sizeProp,\n    positioning,\n    appearance: appearanceProp,\n    freeform: freeformProp = false,\n    filter,\n    query: queryProp,\n    defaultQuery,\n    onQueryChange,\n    onActiveOptionChange,\n    disabledOptionsFocusable = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    clearable = false,\n    expandIcon,\n    labels,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Combobox', 'onOptionSelect', 'onValueChange');\n\n  // The multi-select signature has no `freeform` (D11); passed anyway from JavaScript, it is\n  // ignored there, with a warning.\n  const freeform = freeformProp && !multiselect;\n  const freeformIgnored = freeformProp && multiselect;\n  React.useEffect(() => {\n    if (freeformIgnored) {\n      warnOnce(\n        'Combobox:freeform-multiselect',\n        'Combobox: `freeform` is not available with `multiselect`: a multi-select Combobox ' +\n          'selects options only.',\n      );\n    }\n  }, [freeformIgnored]);\n  // With `freeform` the typed text is the value, so the query props are unused (D12).\n  const queryIgnored = freeform && (queryProp !== undefined || defaultQuery !== undefined);\n  React.useEffect(() => {\n    if (queryIgnored) {\n      warnOnce(\n        'Combobox:query-freeform',\n        'Combobox: `query` and `defaultQuery` are not used with `freeform`: the typed text is the ' +\n          'value (`value`, `onValueChange`).',\n      );\n    }\n  }, [queryIgnored]);\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const validates = isRequired && !readOnly;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\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  // The selected values, for the listbox and the multi-select paths: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript (bypassing the type system)\n  // is none rather than a crash, as 0.7 did for the single-select string.\n  const values = toValues(value);\n  // The single-select value as 0.7 read it.\n  const single = multiselect ? '' : (value as string);\n\n  const interactive = !disabled && !readOnly;\n  // A combobox that starts disabled or read-only never shows its list, so it starts closed (no\n  // close to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  const open = openState && interactive;\n  // The query (D12): the text typed since the last commit, which filters the options, and\n  // `editing`, set while the user edits it, so erased text stays empty instead of showing the\n  // committed value. A Combobox that starts locked starts without a query, as it starts closed.\n  // Freeform: the text is the value, so the query is unused (`onQueryChange` is never called)\n  // and 0.7's draft follows the text instead.\n  const [query, setQuery] = useControllable(\n    freeform ? undefined : queryProp,\n    interactive ? (defaultQuery ?? '') : '',\n    freeform ? undefined : onQueryChange,\n  );\n  const [editing, setEditing] = React.useState(false);\n  const [freeformDraft, setFreeformDraft] = React.useState<string | null>(null);\n  // Text typed since the last commit, the filter; `null` shows the committed value's label\n  // (input-pickers#7), or the selected labels with `multiselect`: the query while it is not empty\n  // or the user edits it, and never while locked. Freeform: the input shows the value, and the\n  // draft follows that text.\n  const draft = freeform ? freeformDraft : interactive && (editing || query !== '') ? query : null;\n  // Locking the control (readOnly/disabled) while typing drops the typed text, so the input shows\n  // the committed value again: hidden during render above, the editing state and the freeform\n  // draft dropped here (adjust-during-render pattern, C-HOOKS), and the query reset reported from\n  // an effect, since `onQueryChange` never runs during render (D12). `lock` is how the control\n  // came to be locked: `'locked'` by a change while mounted, whose reset is reported once, or\n  // `'mounted-locked'` since it mounted, which reports nothing and keeps a controlled query,\n  // hidden until the control unlocks (R20).\n  const [lock, setLock] = React.useState<LockState>(interactive ? 'unlocked' : 'mounted-locked');\n  if (interactive && lock !== 'unlocked') {\n    setLock('unlocked');\n  } else if (!interactive && lock === 'unlocked') {\n    setLock('locked');\n    setEditing(false);\n    setFreeformDraft(null);\n  }\n  React.useEffect(() => {\n    if (lock === 'locked') setQuery('');\n  }, [lock, setQuery]);\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  // Freeform: the value the user typed last. While the value still equals it, the input shows it\n  // as typed, even when it equals an option's value (not that option's label).\n  const [typedValue, setTypedValue] = React.useState<string | null>(null);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n  const optionLabels = React.useMemo(() => collectOptionLabels(children), [children]);\n  // useListbox's navigability predicate: `filter` (else the 0.7 match) bound to the typed text,\n  // while there is any (D13).\n  const filterText = draft ?? '';\n  const listFilter = React.useMemo(\n    () =>\n      filterText ? (item: ListboxItem) => (filter ?? matchesText)(item, filterText) : undefined,\n    [filterText, filter],\n  );\n\n  // 0.7's `setDraft(text)`: the typed text becomes `text` (the query, reported, while editing).\n  const editDraft = (text: string) => {\n    if (freeform) {\n      setFreeformDraft(text);\n    } else {\n      setEditing(true);\n      setQuery(text);\n    }\n  };\n  // 0.7's `setDraft(null)`: the typed text is dropped, so the input shows the committed value\n  // again (the query resets to `''`).\n  const dropDraft = () => {\n    if (freeform) {\n      setFreeformDraft(null);\n    } else {\n      setEditing(false);\n      setQuery('');\n    }\n  };\n\n  const commitText = (text: string) => {\n    setTypedValue(text);\n    setValue(text);\n    onOptionSelect?.(text);\n  };\n\n  const close = () => {\n    setOpen(false);\n    dropDraft();\n  };\n\n  // APG: Escape on a closed listbox clears the textbox. Freeform: the text is the value, so it is\n  // cleared. Otherwise only a typed filter is dropped (the input shows the selected label again);\n  // without one there is nothing to clear and Escape is left to the page.\n  let clearDraft: (() => void) | undefined;\n  if (freeform) {\n    clearDraft = () => {\n      setFreeformDraft(null);\n      commitText('');\n    };\n  } else if (draft) {\n    clearDraft = dropDraft;\n  }\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => {\n      if (next) setOpen(true);\n      else close();\n    },\n    mode: 'editable',\n    multiselect,\n    disabledOptionsFocusable,\n    selectedValues: values,\n    onSelect: (next, details) => {\n      if (!multiselect) {\n        // 0.7 order: the value callback first, the deprecated one after.\n        setValue(next);\n        onOptionSelect?.(next);\n        dropDraft();\n        setTypedValue(null);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      onOptionSelect?.(next);\n      // The toggled option's label: the item useListbox passed in `details` (its own result,\n      // `listbox`, cannot be read from inside the options object passed to it), else the label\n      // read from `children` before the option registered, else the raw value. Announces a\n      // toggle the user made (D41): never a controlled change, a clear or a form reset, none of\n      // which reach this callback.\n      announceToggle(\n        labels,\n        details?.item.label ?? optionLabels.get(next) ?? next,\n        added,\n        updated.length,\n      );\n      // A toggle clears the query, so the labels show again, selected (R18); the list stays open\n      // (D11).\n      dropDraft();\n    },\n    filter: listFilter,\n    // Typing a filter makes its first match active (like Fluent's Combobox), so Enter selects what\n    // the list shows instead of submitting the form. Nothing is active on open or with the text\n    // cleared. Freeform: the text is the value, so Enter keeps it unless the user moved to an\n    // option.\n    autoHighlight: !freeform && draft ? 'first' : false,\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'combobox-listbox',\n    onClearDraft: clearDraft,\n  });\n\n  const labelOf = (v: string) => listbox.getItem(v)?.label ?? optionLabels.get(v);\n  // Multi-select: the selected labels in selection order, values without an option left out\n  // (D10), joined by `labels.selection`.\n  let labelsText = '';\n  if (multiselect) {\n    const shown = values.map(labelOf).filter((label): label is string => label !== undefined);\n    if (shown.length > 0) labelsText = (labels?.selection ?? defaultSelectionLabel)(shown);\n  }\n  // Multi-select: while no text is typed, the input shows the selected labels (D11); without any\n  // (no value, or no selected value with an option) it shows its placeholder, as a Dropdown does.\n  const showingLabels = multiselect && draft === null && labelsText !== '';\n\n  // The input text. Multi-select: the typed query, else the selected labels. Freeform: the value\n  // as typed while it is the value the user typed last, else the label of the option with that\n  // value, else the value itself — so the text follows a controlled parent that normalizes or\n  // rejects what was typed while the input still has focus. Otherwise: the typed filter, else the\n  // selected option's label.\n  const optionLabel = single ? labelOf(single) : undefined;\n  let inputText: string;\n  if (multiselect) inputText = draft ?? labelsText;\n  else if (freeform) inputText = single === typedValue ? single : (optionLabel ?? single);\n  else inputText = draft ?? optionLabel ?? '';\n  // Freeform: the filter follows the text (adjust-during-render pattern, C-HOOKS; the text does not\n  // depend on the filter, so this settles in one pass).\n  if (freeform && freeformDraft !== null && freeformDraft !== inputText) {\n    setFreeformDraft(inputText);\n  }\n\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the list, or \"No matches\" for a draft.\n  const surfaceOpen = open && (expanded || !!draft);\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    positioning,\n    open,\n    surfaceOpen,\n    onDismiss: close,\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef, setReference);\n\n  useFormReset(\n    inputRef,\n    () => {\n      if (multiselect) {\n        // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n        setValue((current) => resetValues(current, defaultValue));\n      } else {\n        setValue(defaultValue ?? '');\n      }\n      dropDraft();\n      setTypedValue(null);\n    },\n    form,\n  );\n\n  // D11 rule 1: focusing the input while it shows the labels (Tab, a click, a Field label) selects\n  // them, so an edit of any kind replaces them natively, without the value being rewritten during\n  // the edit. A pointer press sets the caret on its mouseup, which would drop that selection, so\n  // the mouseup of the press that focused the input is prevented (only that one: a later press in\n  // the focused input places the caret as usual). The ref is written in handlers only (C-HOOKS).\n  const pointerFocusRef = React.useRef(false);\n  const handleMouseDown = (event: React.MouseEvent<HTMLInputElement>) => {\n    pointerFocusRef.current = showingLabels && !isFocused(event.currentTarget);\n  };\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (showingLabels) event.currentTarget.select();\n  };\n  const handleMouseUp = (event: React.MouseEvent<HTMLInputElement>) => {\n    if (!pointerFocusRef.current) return;\n    pointerFocusRef.current = false;\n    event.preventDefault();\n  };\n  // Rule 1 also holds whenever the labels return to the focused input (R18): a toggle, a close\n  // from the keyboard, a controlled change or a form reset writes them with the caret at their\n  // end, so they are selected again here. A press that moves the caret into them changes neither\n  // dependency, so the caret stays and rule 2 takes what is typed there.\n  React.useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (showingLabels && input && isFocused(input)) input.select();\n  }, [showingLabels, labelsText]);\n\n  // Multi-select: the edit a `beforeinput` announced (the last moment before an edit of any kind,\n  // with the selection it replaces still in place; React has no event for it), for the change\n  // that follows.\n  const announcedEditRef = React.useRef<AnnouncedEdit | null>(null);\n  // Multi-select: an edit that leaves the text as it was (the labels replaced by the same text: a\n  // one-letter label typed again, a paste of exactly the labels) changes no value, so React reports\n  // no change for it, while a browser fires `input` for every edit. Typing the labels' text is a\n  // query (R17), so this listener starts it; an undo or a redo keeps rule 3 (the labels show, with\n  // no query). The event is remembered, so a change React does report for it is not handled twice.\n  const handledInputRef = React.useRef<Event | null>(null);\n  const handleUnchangedEdit = useEventCallback((event: Event) => {\n    const input = event.currentTarget as HTMLInputElement;\n    if (!showingLabels || input.value !== labelsText) return;\n    announcedEditRef.current = null;\n    if (HISTORY_EDITS.has((event as Partial<InputEvent>).inputType ?? '')) return;\n    handledInputRef.current = event;\n    editDraft(labelsText);\n    if (!open) setOpen(true);\n  });\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!multiselect || !input) return;\n    const record = (event: InputEvent) => {\n      const { inputType } = event;\n      const { selectionStart, selectionEnd } = input;\n      announcedEditRef.current = {\n        inputType,\n        range:\n          inputType === 'insertFromDrop' ||\n          HISTORY_EDITS.has(inputType) ||\n          selectionStart === null ||\n          selectionEnd === null\n            ? null\n            : [selectionStart, selectionEnd],\n      };\n    };\n    input.addEventListener('beforeinput', record);\n    input.addEventListener('input', handleUnchangedEdit);\n    return () => {\n      input.removeEventListener('beforeinput', record);\n      input.removeEventListener('input', handleUnchangedEdit);\n    };\n  }, [multiselect, handleUnchangedEdit]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close as a closed list would handle Escape — clear\n      // the text if there is any, otherwise leave the key to an enclosing layer (overlays#1).\n      close();\n      if (clearDraft && event.currentTarget.value !== '') {\n        event.preventDefault();\n        clearDraft();\n      }\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.nativeEvent === handledInputRef.current) return;\n    const text = event.target.value;\n    // The edit the last `beforeinput` announced, if this change is that edit. A change nothing\n    // announced (autofill, an extension, a script) has none, and neither has one after an edit\n    // that was announced and then not made (cancelled, or blocked).\n    const announced = announcedEditRef.current;\n    announcedEditRef.current = null;\n    const edit =\n      announced && announced.inputType === (event.nativeEvent as { inputType?: string }).inputType\n        ? announced\n        : null;\n    if (!multiselect) {\n      editDraft(text);\n    } else if (text === labelsText && (edit === null || HISTORY_EDITS.has(edit.inputType))) {\n      // D11 rule 3, for an undo or a redo (R17): text equal to the labels shows them again, with\n      // no query. Any other edit that leaves their text, typed or pasted, is a query.\n      dropDraft();\n    } else if (showingLabels) {\n      // D11 rule 2: the query is the text the edit inserted into the labels. With the selection\n      // the edit replaced (all of the labels after a focus, rule 1), that is the text now in its\n      // place, however much of it looks like the labels (R16); without one (a drop, an undo or a\n      // redo, an edit the input did not announce), the new value without the part it shares with\n      // the labels at its start and its end. Backspace and Delete leave an empty query and never\n      // remove a value (rule 4).\n      const range = edit?.range;\n      editDraft(\n        (range && replacedText(labelsText, text, range[0], range[1])) ??\n          insertedText(labelsText, text),\n      );\n    } else {\n      editDraft(text);\n    }\n    if (!open) setOpen(true);\n    if (freeform) commitText(text);\n  };\n\n  // The expand button opens and closes the list like the input's own keys; focus stays in (or\n  // returns to) the input.\n  const handleExpandClick = () => {\n    if (!interactive) return;\n    if (open) close();\n    else setOpen(true);\n    inputRef.current?.focus();\n  };\n\n  // Clearing is not an option activation: the state is set directly, not through `commitText`\n  // (which calls the deprecated `onOptionSelect` in freeform mode). The button disappears with the\n  // value, so focus moves to the input explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue(multiselect ? EMPTY_VALUES : '');\n    setTypedValue(null);\n    dropDraft();\n    setOpen(false);\n    inputRef.current?.focus();\n  };\n\n  const showExpand = showsExpandButton(expandIcon);\n  // Read-only comboboxes offer no clear action (the value cannot change).\n  const showClear = clearable && (multiselect ? values.length > 0 : single !== '') && !readOnly;\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div\n      data-size={size}\n      data-appearance={appearance}\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(comboboxClassNames.root, 'relative inline-flex flex-col', className)}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          // Multi-select: the selected labels take the placeholder's place (D11).\n          placeholder={multiselect && labelsText !== '' ? undefined : placeholder}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          // Multi-select: no limit while the labels show, so typing into them (the caret moved\n          // there) is never blocked; the limit applies to the typed query only.\n          maxLength={showingLabels ? undefined : maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={inputText}\n          onChange={handleChange}\n          onClick={() => {\n            if (!open && interactive) setOpen(true);\n          }}\n          onMouseDown={handleMouseDown}\n          onMouseUp={handleMouseUp}\n          // Read-only: no listbox keys at all (they would open, commit or clear the value).\n          onKeyDown={composeEventHandlers(onKeyDown, readOnly ? undefined : handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={composeEventHandlers(onFocus, handleFocus)}\n          onBlur={composeEventHandlers(onBlur, dropDraft, {\n            checkDefaultPrevented: false,\n          })}\n          className={cn(\n            comboboxClassNames.input,\n            inputHeightClasses[size],\n            'w-full',\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground placeholder:text-muted-foreground',\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\n          )}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus in the input, so its blur does not act on a draft before the clear.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              comboboxClassNames.clearButton,\n              pickerIconButtonClasses(size, appearance),\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n          </button>\n        )}\n        {showExpand && (\n          <PickerExpandButton\n            component=\"Combobox\"\n            expandIcon={expandIcon}\n            label={labels?.expand ?? 'Show options'}\n            expanded={expanded}\n            listboxId={listbox.listboxId}\n            disabled={disabled || !!readOnly}\n            onToggle={handleExpandClick}\n            size={size}\n            appearance={appearance}\n            className={comboboxClassNames.expandButton}\n            iconClassName={comboboxClassNames.expandIcon}\n          />\n        )}\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        listClassName={comboboxClassNames.listbox}\n        surfaceClassName={comboboxClassNames.surface}\n        emptyContent={\n          draft ? (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                comboboxClassNames.emptyMessage,\n                'px-3 py-1.5 text-body-1 text-muted-foreground',\n              )}\n            >\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {children}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : single}\n        type=\"text\"\n        // Like a native readonly input, a read-only Combobox is barred from constraint validation\n        // (the user could not fix it); its value is still submitted.\n        required={validates}\n        onInvalid={() => inputRef.current?.focus()}\n      />\n    </div>\n  );\n};\nComboboxRoot.displayName = 'Combobox';\n\n/** Flat name of `Combobox.Option` for React Server Components. */\nexport const ComboboxOption = Option;\n/** Flat name of `Combobox.OptionGroup` for React Server Components. */\nexport const ComboboxOptionGroup = OptionGroup;\n\n/**\n * An editable combobox: a text input with a filterable listbox of `Option`s (APG combobox with\n * list autocomplete). Typing filters the options; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter selects, Escape closes. Without `freeform` the text is only a\n * filter: its first match becomes active while typing, and the input shows the selected option's\n * label again when the listbox closes. With `freeform` the text itself is the value. Text that\n * matches no option shows \"No matches\" (`labels.noMatches`), announced through a status region.\n * `filter` replaces the match (it may keep options that do not contain the text, for a server-side\n * search or a \"Create …\" entry), and `query`/`defaultQuery`/`onQueryChange` control the typed\n * text (not with `freeform`), which resets to `''` on a commit, a close, a blur, Escape, the clear\n * button and a form reset. The expand button at the end of the input (a chevron, see\n * `expandIcon`) opens and closes the list without taking focus from the input and is not a tab\n * stop; `clearable` adds a clear button, a tab stop after the input. Both sit with the input in a\n * wrapper `<div>` inside the root.\n *\n * `multiselect` turns the value into an array (Fluent's `selectedOptions`): options draw a\n * checkbox; Enter and a click toggle an option and keep the list open (Tab, Escape and\n * Alt+ArrowUp close without committing), and every toggle the user makes is announced\n * (`labels.added`/`labels.removed`, never for a controlled change, a clear or a form reset).\n * While no text is typed the input shows the selected labels in selection order\n * (`labels.selection`, values without an option left out) instead of the placeholder. Focusing\n * the input selects them, and so does their return to the focused input (a toggle, a close, a\n * form reset), so typing, pasting or composing text replaces them with a query that filters the\n * options; text inserted into them queries only what was inserted, an undo or a redo back to them\n * shows them again, and a toggle, a close or a blur clears the query. Backspace and Delete only\n * edit the text: the options, the clear button (which clears every value) and a form reset change\n * the value. `freeform` is not available with `multiselect`, and a non-literal\n * `multiselect={flag}` is a type error: render two elements, one for each mode.\n *\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission (one hidden input per value with\n * `multiselect`), validation and reset (a `multiselect` reset is compared by content, so restoring\n * the same values reports nothing). The open listbox renders in a portal; while closed it stays\n * in the DOM, hidden.\n *\n * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\n *\n * Sub-components: `Combobox.Option`, `Combobox.OptionGroup`. React Server Components import the\n * flat names `ComboboxOption` / `ComboboxOptionGroup` (dotted access needs a client file).\n */\nexport const Combobox = /* @__PURE__ */ Object.assign(ComboboxRoot, {\n  Option,\n  OptionGroup,\n}) as ComboboxComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgUA,IAAMC,oBAAqC,IAAI,IAAI,CAAC,eAAe,aAAa,CAAC;AASjF,SAASC,GAAY,GAAmB,GAAuB;CAC7D,QAAQC,EAAK,aAAaA,EAAK,MAAA,CAAO,YAAY,CAAC,CAAC,SAASC,EAAK,YAAY,CAAC;AACjF;AAEA,IAAMC,KAAgB,MAAkC;CACtD,IAAM,EACJ,iBAAc,IACd,OAAOC,GACP,iBACA,mBACA,mBACA,MAAMC,IACN,iBACA,kBACA,iBACA,cAAW,IACX,MAAMC,IACN,iBACA,YAAYC,IACZ,UAAUC,IAAe,IACzB,YACA,OAAOC,IACP,kBACA,mBACA,0BACA,+BAA2B,IAC3B,UACA,UACA,cACA,mBAAe,OACf,oBACA,iBACA,eACA,aACA,gBAAY,IACZ,gBACA,WACA,eACA,gBACA,kBACA,eACA,cACA,QACA,cAAcC,IACd,mBAAmBC,IACnB,oBAAoBC,IACpB,gBAAgBC,IAChB,iBAAiBC,IACjB,qBAAqBC,IACrB,gBAAgBC,IAChB,aACA,YACA,eACA,aACA,gBACA,eACA,aACA,SACA,GAAGC,OACDC;CAEJ,AAAIC,MAAmB,KAAA,KAAWC,EAAe,YAAY,kBAAkB,eAAe;CAI9F,IAAMC,IAAWb,KAAgB,CAACc,GAC5BC,KAAkBf,KAAgBc;CACxC,EAAM,gBAAgB;EACpB,AAAIC,MACFC,EACE,iCACA,yGAEF;CAEJ,GAAG,CAACD,EAAe,CAAC;CAEpB,IAAME,KAAeJ,MAAaZ,OAAc,KAAA,KAAaiB,OAAiB,KAAA;CAC9E,EAAM,gBAAgB;EACpB,AAAID,MACFD,EACE,2BACA,4HAEF;CAEJ,GAAG,CAACC,EAAY,CAAC;CAEjB,IAAME,KAAQC,GAAgB,GAExBC,MADaC,MAAYH,IAAO,YAAY,OAClB,CAACI,GAC3BC,IAAaC,GAAgB;EACjC;EACA,cAAcvB;EACd,mBAAmBC;EACnB,oBAAoBC;EACpB,gBAAgBC;EAGhB,iBAAiBC,MAAgBgB;CACnC,CAAC,GAEKI,KAAcC,GAAc,IAAOH,EAAW,eAAe,GAC7D,EAAE,SAAM,kBAAeI,GAAa9B,IAAUC,EAAc,GAE5D,CAAC8B,IAAOC,KAAYC,EACxBnC,GACAoC,MAAiBlB,IAAcmB,KAAe,MAC7C,MAAS;EAGR,KACE,OAAOC,KAAS,WAAWA,IAAO,CAAC,GAAGA,CAAI,CAC5C;CACF,CACF,GAIMC,IAASC,GAASP,EAAK,GAEvBQ,IAASvB,IAAc,KAAMe,IAE7BS,IAAc,CAACC,KAAY,CAAChB,GAG5B,CAACiB,IAAWC,KAAWV,EAC3BlC,KACC6C,MAAe,OAAUJ,GAC1BK,EACF,GACMC,IAAOJ,MAAaF,GAMpB,CAACO,IAAOC,KAAYf,EACxBlB,IAAW,KAAA,IAAYZ,IACvBqC,IAAepB,MAAgB,KAAM,IACrCL,IAAW,KAAA,IAAYkC,EACzB,GACM,CAACC,IAASC,KAAc3D,EAAM,SAAS,EAAK,GAC5C,CAAC4D,GAAeC,KAAoB7D,EAAM,SAAwB,IAAI,GAKtE8D,IAAQvC,IAAWqC,IAAgBZ,MAAgBU,MAAWH,OAAU,MAAMA,KAAQ,MAQtF,CAACQ,GAAMC,MAAWhE,EAAM,SAAoBgD,IAAc,aAAa,gBAAgB;CAQ7F,AAPIA,KAAee,MAAS,aAC1BC,GAAQ,UAAU,IACT,CAAChB,KAAee,MAAS,eAClCC,GAAQ,QAAQ,GAChBL,EAAW,EAAK,GAChBE,EAAiB,IAAI,IAEvB7D,EAAM,gBAAgB;EACpB,AAAI+D,MAAS,YAAUP,EAAS,EAAE;CACpC,GAAG,CAACO,GAAMP,CAAQ,CAAC;CAInB,IAAMS,KAAa,CAACjB,KAAeE;CACnC,EAAM,gBAAgB;EACpB,AAAIe,MAAYd,EAAQ,EAAK;CAC/B,GAAG,CAACc,IAAYd,CAAO,CAAC;CAIxB,IAAM,CAACe,IAAYC,KAAiBnE,EAAM,SAAwB,IAAI,GAEhEoE,KAAUpE,EAAM,OAA8B,IAAI,GAClDqE,IAAWrE,EAAM,OAAgC,IAAI,GAErDsE,KAAetE,EAAM,cAAcuE,GAAoBC,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAG5EC,IAAaX,KAAS,IACtBY,KAAa1E,EAAM,cAErByE,KAAc,OAAuBE,MAAUzE,GAAA,CAAaC,GAAMsE,CAAU,IAAI,KAAA,GAClF,CAACA,GAAYE,EAAM,CACrB,GAGMC,KAAa,MAAiB;EAClC,AAAIrD,IACFsC,EAAiBzD,CAAI,KAErBuD,EAAW,EAAI,GACfH,EAASpD,CAAI;CAEjB,GAGMyE,UAAkB;EACtB,AAAItD,IACFsC,EAAiB,IAAI,KAErBF,EAAW,EAAK,GAChBH,EAAS,EAAE;CAEf,GAEMsB,MAAc,MAAiB;EAGnC,AAFAX,EAAc/D,CAAI,GAClBoC,EAASpC,CAAI,GACbiB,IAAiBjB,CAAI;CACvB,GAEM2E,UAAc;EAElB,AADA5B,EAAQ,EAAK,GACb0B,EAAU;CACZ,GAKIG;CACJ,AAAIzD,IACF,UAAmB;EAEjB,AADAsC,EAAiB,IAAI,GACrBiB,GAAW,EAAE;CACf,IACShB,MACT,IAAae;CAGf,IAAMI,IAAUC,GAAW;EACzB;EACA,eAAe,MAAS;GACtB,AAAItC,IAAMO,EAAQ,EAAI,IACjB4B,EAAM;EACb;EACA,MAAM;EACN;EACA;EACA,gBAAgBlC;EAChB,WAAW,GAAM,MAAY;GAC3B,IAAI,CAACrB,GAAa;IAKhB,AAHAgB,EAASI,CAAI,GACbvB,IAAiBuB,CAAI,GACrBiC,EAAU,GACVV,EAAc,IAAI;IAClB;GACF;GACA,IAAM,EAAE,QAAQgB,GAAS,aAAUC,GAAYvC,GAAQD,CAAI;GAgB3D,AAfAJ,EAAS2C,CAAO,GAChB9D,IAAiBuB,CAAI,GAMrByC,GACEC,GACAC,GAAS,KAAK,SAASjB,GAAa,IAAI1B,CAAI,KAAKA,GACjD4C,GACAL,EAAQ,MACV,GAGAN,EAAU;EACZ;EACA,QAAQH;EAKR,eAAe,CAACnD,KAAYuC,IAAQ,UAAU;EAC9C,qBAAqB2B;EACrB,UAAU;EACV,cAAcT;CAChB,CAAC,GAEKU,MAAW,MAAcT,EAAQ,QAAQU,CAAC,CAAC,EAAE,SAASrB,GAAa,IAAIqB,CAAC,GAG1EC,IAAa;CACjB,IAAIpE,GAAa;EACf,IAAMqE,IAAQhD,EAAO,IAAI6C,EAAO,CAAC,CAAC,QAAQ,MAA2BI,MAAU,KAAA,CAAS;EACxF,AAAID,EAAM,SAAS,MAAG,KAAcP,GAAQ,aAAaS,GAAA,CAAuBF,CAAK;CACvF;CAGA,IAAMG,IAAgBxE,KAAesC,MAAU,QAAQ8B,MAAe,IAOhEK,KAAclD,IAAS2C,GAAQ3C,CAAM,IAAI,KAAA,GAC3CmD;CAMJ,AALA,AAEKA,IAFD1E,IAAyBsC,KAAS8B,IAC7BrE,IAAsBwB,MAAWmB,KAAanB,IAAUkD,MAAelD,IAC/De,KAASmC,MAAe,IAGrC1E,KAAYqC,MAAkB,QAAQA,MAAkBsC,KAC1DrC,EAAiBqC,CAAS;CAG5B,IAAMC,IAAW7C,KAAQ2B,EAAQ,MAAM,SAAS,GAC1CmB,KAAgBd,GAAQ,aAAa,cAErCe,IAAc/C,MAAS6C,KAAY,CAAC,CAACrC,IACrCwC,KAAYD,KAAe,CAACF,GAC5B,EAAE,aAAS,kBAAc,gBAAY,sBAAkBI,GAAgB;EAC3E;EACA;EACA;EACA,WAAWxB;EACX;EACA,WAAWV;CACb,CAAC,GAEKmC,KAAgBC,EAA8BrC,IAASsC,EAAG,GAC1DC,KAAiBF,EAAgCpC,GAAUuC,IAAYC,EAAY;CAEzF,GACExC,SACM;EAQJ,AALE7B,EAFEhB,KAEQ,MAAYsF,GAAYC,GAASrE,CAAY,IAE9CA,KAAgB,EAAE,GAE7BmC,EAAU,GACVV,EAAc,IAAI;CACpB,GACA6C,EACF;CAOA,IAAMC,IAAkBjH,EAAM,OAAO,EAAK,GACpCkH,MAAmB,MAA8C;EACrE,EAAgB,UAAUlB,KAAiB,CAACmB,GAAUC,EAAM,aAAa;CAC3E,GACMC,MAAe,MAA8C;EACjE,AAAIrB,KAAeoB,EAAM,cAAc,OAAO;CAChD,GACME,MAAiB,MAA8C;EACnE,AAAKL,EAAgB,YACrB,EAAgB,UAAU,IAC1BG,EAAM,eAAe;CACvB;CAKA,EAAM,sBAAsB;EAC1B,IAAMG,IAAQlD,EAAS;EACvB,AAAI2B,KAAiBuB,KAASJ,GAAUI,CAAK,KAAGA,EAAM,OAAO;CAC/D,GAAG,CAACvB,GAAeJ,CAAU,CAAC;CAK9B,IAAM4B,IAAmBxH,EAAM,OAA6B,IAAI,GAM1DyH,KAAkBzH,EAAM,OAAqB,IAAI,GACjD0H,IAAsBC,IAAkB,MAAiB;EAC7D,IAAMJ,IAAQH,EAAM;EACpB,AAAKpB,KAAiBuB,EAAM,UAAU3B,MACtC,EAAiB,UAAU,MACvB,GAAc,IAAKwB,EAA8B,aAAa,EAAE,MACpE,GAAgB,UAAUA,GAC1BxC,EAAUgB,CAAU,GACftC,KAAMH,EAAQ,EAAI;CACzB,CAAC;CACD,EAAM,gBAAgB;EACpB,IAAMoE,IAAQlD,EAAS;EACvB,IAAI,CAAC7C,KAAe,CAAC+F,GAAO;EAC5B,IAAMK,KAAU,MAAsB;GACpC,IAAM,EAAE,iBAAcR,GAChB,EAAE,mBAAgB,oBAAiBG;GACzC,EAAiB,UAAU;IACzB;IACA,OACEM,MAAc,oBACd5H,EAAc,IAAI4H,CAAS,KAC3BC,MAAmB,QACnBC,MAAiB,OACb,OACA,CAACD,GAAgBC,CAAY;GACrC;EACF;EAGA,OAFAR,EAAM,iBAAiB,eAAeK,CAAM,GAC5CL,EAAM,iBAAiB,SAASG,CAAmB,SACtC;GAEX,AADAH,EAAM,oBAAoB,eAAeK,CAAM,GAC/CL,EAAM,oBAAoB,SAASG,CAAmB;EACxD;CACF,GAAG,CAAClG,GAAakG,CAAmB,CAAC;CAErC,IAAMM,MAAiB,MAAiD;EACtE,IAAIZ,EAAM,QAAQ,YAAY9D,KAAQ,CAAC+C,KAAe,CAACe,EAAM,YAAY,aAAa;GAIpF,AADArC,EAAM,GACFC,KAAcoC,EAAM,cAAc,UAAU,OAC9CA,EAAM,eAAe,GACrBpC,EAAW;GAEb;EACF;EACA,EAAQ,UAAUoC,CAAK;CACzB,GAEMa,MAAgB,MAA+C;EACnE,IAAIb,EAAM,gBAAgBK,GAAgB,SAAS;EACnD,IAAMrH,IAAOgH,EAAM,OAAO,OAIpBc,IAAYV,EAAiB;EACnC,EAAiB,UAAU;EAC3B,IAAMW,IACJD,KAAaA,EAAU,cAAed,EAAM,YAAuC,YAC/Ec,IACA;EACN,IAAI,CAAC1G,GACH,EAAUpB,CAAI;OACT,IAAIA,MAASwF,MAAeuC,MAAS,QAAQlI,EAAc,IAAIkI,EAAK,SAAS,IAGlF,EAAU;OACL,IAAInC,GAAe;GAOxB,IAAMoC,IAAQD,GAAM;GACpB,GACGC,KAASC,GAAazC,GAAYxF,GAAMgI,EAAM,IAAIA,EAAM,EAAE,MACzDE,GAAa1C,GAAYxF,CAAI,CACjC;EACF,OACE,EAAUA,CAAI;EAGhB,AADKkD,KAAMH,EAAQ,EAAI,GACnB5B,KAAUuD,GAAW1E,CAAI;CAC/B,GAIMmI,WAA0B;EAC9B,AAAKvF,MACDM,IAAMyB,EAAM,IACX5B,EAAQ,EAAI,GACjBkB,EAAS,SAAS,MAAM;CAC1B,GAKMmE,WAAoB;EAKxB,AAJAhG,EAAShB,IAAcmB,KAAe,EAAE,GACxCwB,EAAc,IAAI,GAClBU,EAAU,GACV1B,EAAQ,EAAK,GACbkB,EAAS,SAAS,MAAM;CAC1B,GAEMoE,IAAaC,GAAkBC,EAAU,GAEzCC,IAAYC,OAAcrH,IAAcqB,EAAO,SAAS,IAAIE,MAAW,OAAO,CAACd,GAE/E6G,KACJ5G,EAAW,kBAAkB,KAAA,IACxBA,EAAW,sBAAsBL,IAAO,UACzCK,EAAW;CAEjB,OACE,mBAAC,OAAD;EACE,aAAW6G;EACX,mBAAiBC;EACjB,GAAI7H;EACJ,KAAKqF;EACL,WAAWyC,EAAGC,EAAmB,MAAM,iCAAiCC,EAAS;EALnF,UAAA;GAOG3H,KAAe,kBAAC4H,IAAD,CAAkB,CAAA;GAClC,mBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,SAAD;MACE,MAAK;MACS;MACd,GAAIlH;MACJ,GAAI+C,EAAQ,iBAAiB;MAC7B,iBAAekB;MACf,qBAAmBlF;MACnB,gBAAcC;MACd,KAAKyF;MACK;MACA;MAEV,aAAanF,KAAeoE,MAAe,KAAK,KAAA,IAAYyD;MAC5C;MACH;MAGb,WAAWrD,IAAgB,KAAA,IAAYsD;MAC5B;MACC;MACE;MACH;MACD;MACV,OAAOpD;MACP,UAAU+B;MACV,eAAe;OACb,AAAI,CAAC3E,KAAQN,KAAaG,EAAQ,EAAI;MACxC;MACA,aAAa+D;MACb,WAAWI;MAEX,WAAWiC,EAAqBC,IAAWvH,IAAW,KAAA,IAAY+F,EAAa;MAC/E,SAASuB,EAAqBE,IAASxE,EAAQ,OAAO;MACtD,SAASsE,EAAqBG,IAASrC,EAAW;MAClD,QAAQkC,EAAqBI,IAAQ9E,GAAW,EAC9C,uBAAuB,GACzB,CAAC;MACD,WAAWoE,EACTC,EAAmB,OACnBU,GAAmBb,IACnB,UACAc,GAAoBd,IACpBe,GAAiBf,IACjBgB,GAAuBf,IACvB,qDACAgB,IACAC,IACA7H,MAAA,sBACA8H,GAAiB,OAAOtB,CAAS,IAAI,OAAOH,CAAU,GAAGM,CAAI,CAC/D;KACD,CAAA;KACAH,KACC,kBAAC,UAAD;MACE,MAAK;MACL,cAAYtD,GAAQ,SAAS;MACnB;MAEV,cAAc,MAAU8B,EAAM,eAAe;MAC7C,SAASoB;MACT,WAAWS,EACTC,EAAmB,aACnBiB,GAAwBpB,GAAMC,CAAU,GACxCoB,GAAmBrB,GAAMN,IAAa,IAAI,CAAC,GAAA,qFAAA,mJAG7C;MAEA,UAAA,kBAAC4B,IAAD,EAAa,MAAMC,GAAgBvB,GAAM,MAAM,EAAI,CAAA;KAC7C,CAAA;KAETN,KACC,kBAAC8B,IAAD;MACE,WAAU;MACE;MACZ,OAAOjF,GAAQ,UAAU;MACf;MACV,WAAWL,EAAQ;MACnB,UAAUhC,KAAY,CAAC,CAAChB;MACxB,UAAUsG;MACJ;MACM;MACZ,WAAWW,EAAmB;MAC9B,eAAeA,EAAmB;KACnC,CAAA;IAEA;;GAGL,kBAAC,QAAD;IAAM,MAAK;IAAS,WAAU;IAC3B,UAAA5C,MAAaF;GACV,CAAA;GACN,kBAACoE,IAAD;IACW;IACA;IACG;IACG;IACT;IACI;IACV,eAAetB,EAAmB;IAClC,kBAAkBA,EAAmB;IACrC,cACEpF,IACE,kBAAC,OAAD;KACE,eAAY;KACZ,WAAWmF,EACTC,EAAmB,cACnB,+CACF;KAEC,UAAA9C;IACE,CAAA,IACH,KAAA;IAEN,cAAYlE,EAAW;IACvB,mBAAiB4G;IAEhB;GACa,CAAA;GAChB,kBAAC2B,IAAD;IACQ;IACA;IACI;IACV,OAAOjJ,IAAcqB,IAASE;IAC9B,MAAK;IAGL,UAAUhB;IACV,iBAAiBsC,EAAS,SAAS,MAAM;GAC1C,CAAA;EACE;;AAET;AACA,EAAa,cAAc;AAG3B,IAAaqG,IAAiBC,GAEjBC,KAAsBC,GAmDtBC,IAA2B,uBAAO,OAAOzK,GAAc;CAClE;CACA;AACF,CAAC"}
+{"version":3,"file":"Combobox.mjs","names":["React","HISTORY_EDITS","NO_LABELS","matchesText","item","text","ComboboxRoot","valueProp","openProp","sizeProp","appearanceProp","freeformProp","queryProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","warnDeprecated","freeform","multiselect","freeformIgnored","warnOnce","queryIgnored","defaultQuery","field","useFieldContext","validates","required","readOnly","fieldProps","useFieldControl","invalidLook","isInvalidLook","useInputLook","value","setValue","useControllable","defaultValue","EMPTY_VALUES","next","values","toValues","single","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","open","query","setQuery","onQueryChange","editing","setEditing","freeformDraft","setFreeformDraft","draft","lock","setLock","lockedOpen","typedValue","setTypedValue","rootRef","inputRef","dataMode","items","optionLabels","collectOptionLabels","children","useItemsAndChildrenWarning","useDataModeWarnings","activeWindow","virtualWindow","filterText","listFilter","filter","editDraft","dropDraft","commitText","close","clearDraft","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","index","labelOf","v","labelsText","shown","label","defaultSelectionLabel","showingLabels","optionLabel","inputText","expanded","noMatchesText","surfaceOpen","noMatches","useListboxPopup","rootMergedRef","useMergedRefs","ref","inputMergedRef","controlRef","setReference","listScrollRef","useShownListScroll","useFormReset","resetValues","current","form","pointerFocusRef","handleMouseDown","isFocused","event","handleFocus","handleMouseUp","input","announcedEditRef","handledInputRef","handleUnchangedEdit","useEventCallback","record","inputType","selectionStart","selectionEnd","handleKeyDown","handleChange","announced","edit","range","replacedText","insertedText","handleExpandClick","handleClear","showExpand","showsExpandButton","expandIcon","showClear","clearable","listLabelledBy","optionsState","size","appearance","cn","comboboxClassNames","className","PickerAnnouncer","placeholder","maxLength","composeEventHandlers","onKeyDown","onKeyUp","onFocus","onBlur","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","PickerExpandButton","ListboxSurface","renderListboxWindow","renderListboxItems","HiddenInput","ComboboxOption","Option","ComboboxOptionGroup","OptionGroup","Combobox"],"sources":["../../../src/components/input/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { comboboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { isFocused } from '../../lib/focus';\nimport { DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n  disabledStyles,\n  focusRing,\n  inputAppearanceClasses,\n  inputFocus,\n  inputHeightClasses,\n  inputInvalid,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, PopupPositioningOptions } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport { insertedText, replacedText } from './Combobox.text';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n  ListboxSurface,\n  Option,\n  OptionGroup,\n  useListboxPopup,\n  type ListboxOptionRenderState,\n} from './Option';\nimport {\n  renderListboxItems,\n  renderListboxWindow,\n  useDataModeWarnings,\n  useItemsAndChildrenWarning,\n  useShownListScroll,\n} from './Option.data';\nimport { announceToggle, defaultSelectionLabel, PickerAnnouncer } from './pickerLabels';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\nimport type { RoutedHandlers } from './routedHandlers';\n\nexport { Option, OptionGroup } from './Option';\nexport type { OptionProps, OptionGroupProps } from './Option';\n\n/* ------------------------------------------------------------------ */\n/*  Combobox                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Combobox's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface ComboboxLabels {\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /** Name of the expand button at the end of the input.\n   * @default 'Show options'\n   */\n  expand?: string;\n  /**\n   * The text of the selected labels the input shows with `multiselect` while no text is typed, in\n   * selection order; values without an option are left out.\n   * @default (labels) => labels.join(', ')\n   */\n  selection?: (labels: string[]) => string;\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 Combobox component. */\nexport interface ComboboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`): the value is an array, options show\n   * a checkbox, Enter and a click toggle an option and keep the list open, and each toggle is\n   * announced. While no text is typed the input shows the selected labels, selected whenever the\n   * input gains focus or they return to it, so typing replaces them with text that filters the\n   * options. Not available with `freeform`. A non-literal `multiselect={flag}` is a type error:\n   * 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 (Fluent's\n   * `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes: an option is selected (toggled with `multiselect`,\n   * which passes a new array), or (with `freeform`) the text changes. Without `multiselect` it is\n   * not called when the current option is selected again; with it, activating a selected option\n   * deselects it, which is a change. Fluent's `onOptionSelect`, under WaveUI's value/onValueChange\n   * naming.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (every\n   * toggle with `multiselect`; with `freeform`, every text change).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open combobox\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A combobox that starts disabled or read-only\n   * starts closed. The list renders only in the browser: it is closed in the server HTML and opens\n   * once the combobox has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no value is selected; with `multiselect`, whenever the input shows\n   * no selected labels (no value is selected, or no selected value has an option).\n   */\n  placeholder?: string;\n  /**\n   * Whether the combobox is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size.\n   */\n  size?: CoreSize;\n  /**\n   * Advanced positioning of the popup (Fluent's `positioning`): `offset`, `fitViewport`,\n   * `matchReferenceWidth` and `fallbackPlacements` (tried in order when the requested side has no\n   * room). The popup opens below the field.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Whether the typed text is itself the value. Without it, typing only filters the options (the\n   * first match becomes active, so Enter selects it) and the input shows the selected option's\n   * label again when the listbox closes or loses focus. With it, the input shows typed text as\n   * typed (also when it equals an option's value), a selected option's label, and a controlled\n   * `value` as soon as the parent sets it (a parent that normalizes or rejects the text). Not\n   * available with `multiselect` (a type error there): free text cannot be one of several values.\n   * @default false\n   */\n  freeform?: M extends true ? never : boolean;\n  /**\n   * Whether an option matches the typed text (the query, or with `freeform` the typed value).\n   * Called with every option that is not hidden (its `value`, `label` and `textValue`) and the\n   * text whenever the text is not empty; an option it returns `false` for is filtered out. It may\n   * keep options that do not contain the text: `filter={() => true}` with `query` and\n   * `onQueryChange` leaves the matching to you (a server-side search that replaces the options),\n   * and a filter that always keeps an option of your own gives a \"Create …\" entry. With a\n   * server-side search, keep the selected option among the children (or `items`), `hidden` while\n   * the results leave it out: a value without an option shows no label (the \"Async search\" story\n   * does this).\n   * @default a case-insensitive substring match on the option's `textValue`, else its `label`\n   */\n  filter?: (option: ListboxItem, query: string) => boolean;\n  /**\n   * Controlled query: the text typed since the last commit, which filters the options. A\n   * non-empty query shows in the input (hidden while `disabled` or `readOnly`); `''` shows the\n   * selected option's label (the selected labels with `multiselect`), except while the user edits\n   * the text, so erased text stays empty. Not used with `freeform`, where the typed text is the\n   * value.\n   */\n  query?: string;\n  /**\n   * Initial query for uncontrolled usage. A Combobox that starts disabled or read-only starts\n   * without it (as it starts closed). Not used with `freeform`.\n   * @default ''\n   */\n  defaultQuery?: string;\n  /**\n   * Called with the new query when it changes: as the user types, and with `''` when it resets (a\n   * commit, a close, a blur, Escape, the clear button, a form reset, or `disabled` or `readOnly`\n   * turned on while text is typed). A Combobox that mounts disabled or read-only reports nothing:\n   * it keeps a controlled query, which shows once it unlocks. Never called with `freeform`.\n   */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — opening, arrow keys, the pointer, a\n   * filter change that moves it — and with `null` when the list closes. It reports what\n   * `aria-activedescendant` points at, from an effect once the change commits. Fluent's\n   * `onActiveOptionChange` reports neither the pointer (its options have no hover highlight) nor\n   * the close.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Keeps disabled options in the arrow-key order (the first match highlighted while typing may\n   * then be a disabled one too); they still cannot be selected (Enter and a click do nothing and\n   * the list stays open). Unlike Fluent, which always keeps disabled options reachable, WaveUI\n   * skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /**\n   * Name of the value in form submissions (renders a hidden input; one per value with\n   * `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Combobox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation). Like a native readonly\n   * input, a `readOnly` Combobox does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /**\n   * The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). With\n   * `multiselect` the input has no limit while it shows the selected labels, so the limit applies\n   * to the typed query only.\n   */\n  maxLength?: number;\n  /**\n   * The value cannot be changed: the input is read-only and the listbox neither opens (click,\n   * keyboard, a controlled `open`) nor commits; Escape is left to the page. Turning it (or\n   * `disabled`) on while the listbox is open closes it (`onOpenChange(false)`).\n   */\n  readOnly?: boolean;\n  /**\n   * Shows a clear button while a value is selected (not while `readOnly`; while `disabled` it is\n   * shown disabled, as in DatePicker and TimePicker). It clears the value\n   * (`onValueChange('')`; every value with `multiselect`, `onValueChange([])`), drops typed text,\n   * closes the list and moves focus to the input. It is a tab stop after the input.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph of the expand button at the end of the input (default: a chevron). The button\n   * opens and closes the list without moving focus out of the input and is not a tab stop\n   * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n   * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n   * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n   * become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The built-in texts (the \"No matches\" status, the names of the clear and expand buttons and,\n   * with `multiselect`, the selected-labels text and the toggle announcements), for localization.\n   * Unset members keep their English defaults.\n   */\n  labels?: ComboboxLabels;\n  /**\n   * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,\n   * `disabled` and `hidden`; values unique). The open list renders one option per item that is\n   * not `hidden` and that the typed text matches (`filter`, on `textValue ?? label` by default; see\n   * `renderOption`); the closed list renders none. The keys, the selection and the input's label\n   * text follow `items`, also for a selected item whose option is not rendered. The children are\n   * neither read nor rendered: passing both warns once in development. Each option gets\n   * `aria-posinset` and `aria-setsize` from its place among the shown items (typing narrows\n   * them), and keeps one id 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 typing changes) or the function\n   * itself changes, so pass a stable function in a long list. Ignored without `items`, with a\n   * 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 open popup's list is the window's scroller, so it needs no height of yours: it scrolls\n   * within its own maximum height (15rem, 240 pixels at the default root size, less where the\n   * viewport has no room). Every option is exactly `itemSize` tall (the list sets its height,\n   * after the option's own `style`), so an option's content must fit in it: the default `Option`\n   * with one line of text is 32 pixels tall.\n   *\n   * The window counts the shown options: typing narrows it, as it narrows `aria-setsize`. The\n   * arrow keys move over all of them; the active option stays rendered while it is scrolled away,\n   * so `aria-activedescendant` always names an element, and when a key (or typing) makes it\n   * active the list and the window move to it in the same update. Opening the list scrolls the\n   * active option, else the first selected one, to the middle of the list, and again once the\n   * popup's positioning has given the list its height (a short viewport) unless it was scrolled\n   * first. A closed list renders no option. The browser's scroll anchoring is off on a windowed\n   * list (the window lays the options out).\n   */\n  virtualWindow?: VirtualWindow;\n  /**\n   * Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers).\n   * With `multiselect`, a focus while the input shows the selected labels then selects them;\n   * `event.preventDefault()` skips that.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The Combobox component's type: a multi-select signature, then the single-select one. */\nexport interface ComboboxComponent {\n  (props: ComboboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ComboboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\n/**\n * An edit a `beforeinput` event announced: its `inputType`, and the selection it replaces, recorded\n * before the edit changes it. `range` is `null` where the edit does not replace the selection: a\n * drop inserts at the drop point, and an undo or a redo restores earlier text.\n */\ninterface AnnouncedEdit {\n  inputType: string;\n  range: readonly [number, number] | null;\n}\n\n/** The edits that restore earlier text: D11 rule 3 applies to them (R17). */\nconst HISTORY_EDITS: ReadonlySet<string> = new Set(['historyUndo', 'historyRedo']);\n\n/**\n * How the control came to be locked (`disabled` or `readOnly`): not at all, by a change while\n * mounted, or since it mounted.\n */\ntype LockState = 'unlocked' | 'locked' | 'mounted-locked';\n\n/** The labels read from the children in data mode, where none are read. */\nconst NO_LABELS: ReadonlyMap<string, string> = new Map<string, string>();\n\n/** The default `filter` (0.7's match): a case-insensitive substring of `textValue ?? label`. */\nfunction matchesText(item: ListboxItem, text: string): boolean {\n  return (item.textValue ?? item.label).toLowerCase().includes(text.toLowerCase());\n}\n\nconst ComboboxRoot = (props: ComboboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder,\n    disabled = false,\n    size: sizeProp,\n    positioning,\n    appearance: appearanceProp,\n    freeform: freeformProp = false,\n    filter,\n    query: queryProp,\n    defaultQuery,\n    onQueryChange,\n    onActiveOptionChange,\n    disabledOptionsFocusable = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    clearable = false,\n    expandIcon,\n    labels,\n    items,\n    renderOption,\n    virtualWindow,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Combobox', 'onOptionSelect', 'onValueChange');\n\n  // The multi-select signature has no `freeform` (D11); passed anyway from JavaScript, it is\n  // ignored there, with a warning.\n  const freeform = freeformProp && !multiselect;\n  const freeformIgnored = freeformProp && multiselect;\n  React.useEffect(() => {\n    if (freeformIgnored) {\n      warnOnce(\n        'Combobox:freeform-multiselect',\n        'Combobox: `freeform` is not available with `multiselect`: a multi-select Combobox ' +\n          'selects options only.',\n      );\n    }\n  }, [freeformIgnored]);\n  // With `freeform` the typed text is the value, so the query props are unused (D12).\n  const queryIgnored = freeform && (queryProp !== undefined || defaultQuery !== undefined);\n  React.useEffect(() => {\n    if (queryIgnored) {\n      warnOnce(\n        'Combobox:query-freeform',\n        'Combobox: `query` and `defaultQuery` are not used with `freeform`: the typed text is the ' +\n          'value (`value`, `onValueChange`).',\n      );\n    }\n  }, [queryIgnored]);\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const validates = isRequired && !readOnly;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\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  // The selected values, for the listbox and the multi-select paths: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript (bypassing the type system)\n  // is none rather than a crash, as 0.7 did for the single-select string.\n  const values = toValues(value);\n  // The single-select value as 0.7 read it.\n  const single = multiselect ? '' : (value as string);\n\n  const interactive = !disabled && !readOnly;\n  // A combobox that starts disabled or read-only never shows its list, so it starts closed (no\n  // close to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  const open = openState && interactive;\n  // The query (D12): the text typed since the last commit, which filters the options, and\n  // `editing`, set while the user edits it, so erased text stays empty instead of showing the\n  // committed value. A Combobox that starts locked starts without a query, as it starts closed.\n  // Freeform: the text is the value, so the query is unused (`onQueryChange` is never called)\n  // and 0.7's draft follows the text instead.\n  const [query, setQuery] = useControllable(\n    freeform ? undefined : queryProp,\n    interactive ? (defaultQuery ?? '') : '',\n    freeform ? undefined : onQueryChange,\n  );\n  const [editing, setEditing] = React.useState(false);\n  const [freeformDraft, setFreeformDraft] = React.useState<string | null>(null);\n  // Text typed since the last commit, the filter; `null` shows the committed value's label\n  // (input-pickers#7), or the selected labels with `multiselect`: the query while it is not empty\n  // or the user edits it, and never while locked. Freeform: the input shows the value, and the\n  // draft follows that text.\n  const draft = freeform ? freeformDraft : interactive && (editing || query !== '') ? query : null;\n  // Locking the control (readOnly/disabled) while typing drops the typed text, so the input shows\n  // the committed value again: hidden during render above, the editing state and the freeform\n  // draft dropped here (adjust-during-render pattern, C-HOOKS), and the query reset reported from\n  // an effect, since `onQueryChange` never runs during render (D12). `lock` is how the control\n  // came to be locked: `'locked'` by a change while mounted, whose reset is reported once, or\n  // `'mounted-locked'` since it mounted, which reports nothing and keeps a controlled query,\n  // hidden until the control unlocks (R20).\n  const [lock, setLock] = React.useState<LockState>(interactive ? 'unlocked' : 'mounted-locked');\n  if (interactive && lock !== 'unlocked') {\n    setLock('unlocked');\n  } else if (!interactive && lock === 'unlocked') {\n    setLock('locked');\n    setEditing(false);\n    setFreeformDraft(null);\n  }\n  React.useEffect(() => {\n    if (lock === 'locked') setQuery('');\n  }, [lock, setQuery]);\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  // Freeform: the value the user typed last. While the value still equals it, the input shows it\n  // as typed, even when it equals an option's value (not that option's label).\n  const [typedValue, setTypedValue] = React.useState<string | null>(null);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n  // Data mode reads every label from `items` (listbox.getItem), so the children are not walked.\n  const dataMode = items !== undefined;\n  const optionLabels = React.useMemo<ReadonlyMap<string, string>>(\n    () => (dataMode ? NO_LABELS : collectOptionLabels(children)),\n    [dataMode, children],\n  );\n  useItemsAndChildrenWarning('Combobox', items, children);\n  useDataModeWarnings('Combobox', { items, renderOption, virtualWindow, children });\n  // A window renders data mode only.\n  const activeWindow = dataMode ? virtualWindow : undefined;\n  // useListbox's navigability predicate: `filter` (else the 0.7 match) bound to the typed text,\n  // while there is any (D13).\n  const filterText = draft ?? '';\n  const listFilter = React.useMemo(\n    () =>\n      filterText ? (item: ListboxItem) => (filter ?? matchesText)(item, filterText) : undefined,\n    [filterText, filter],\n  );\n\n  // 0.7's `setDraft(text)`: the typed text becomes `text` (the query, reported, while editing).\n  const editDraft = (text: string) => {\n    if (freeform) {\n      setFreeformDraft(text);\n    } else {\n      setEditing(true);\n      setQuery(text);\n    }\n  };\n  // 0.7's `setDraft(null)`: the typed text is dropped, so the input shows the committed value\n  // again (the query resets to `''`).\n  const dropDraft = () => {\n    if (freeform) {\n      setFreeformDraft(null);\n    } else {\n      setEditing(false);\n      setQuery('');\n    }\n  };\n\n  const commitText = (text: string) => {\n    setTypedValue(text);\n    setValue(text);\n    onOptionSelect?.(text);\n  };\n\n  const close = () => {\n    setOpen(false);\n    dropDraft();\n  };\n\n  // APG: Escape on a closed listbox clears the textbox. Freeform: the text is the value, so it is\n  // cleared. Otherwise only a typed filter is dropped (the input shows the selected label again);\n  // without one there is nothing to clear and Escape is left to the page.\n  let clearDraft: (() => void) | undefined;\n  if (freeform) {\n    clearDraft = () => {\n      setFreeformDraft(null);\n      commitText('');\n    };\n  } else if (draft) {\n    clearDraft = dropDraft;\n  }\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => {\n      if (next) setOpen(true);\n      else close();\n    },\n    mode: 'editable',\n    multiselect,\n    disabledOptionsFocusable,\n    items,\n    selectedValues: values,\n    onSelect: (next, details) => {\n      if (!multiselect) {\n        // 0.7 order: the value callback first, the deprecated one after.\n        setValue(next);\n        onOptionSelect?.(next);\n        dropDraft();\n        setTypedValue(null);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      onOptionSelect?.(next);\n      // The toggled option's label: the item useListbox passed in `details` (its own result,\n      // `listbox`, cannot be read from inside the options object passed to it), else the label\n      // read from `children` before the option registered, else the raw value. Announces a\n      // toggle the user made (D41): never a controlled change, a clear or a form reset, none of\n      // which reach this callback.\n      announceToggle(\n        labels,\n        details?.item.label ?? optionLabels.get(next) ?? next,\n        added,\n        updated.length,\n      );\n      // A toggle clears the query, so the labels show again, selected (R18); the list stays open\n      // (D11).\n      dropDraft();\n    },\n    filter: listFilter,\n    // Typing a filter makes its first match active (like Fluent's Combobox), so Enter selects what\n    // the list shows instead of submitting the form. Nothing is active on open or with the text\n    // cleared. Freeform: the text is the value, so Enter keeps it unless the user moved to an\n    // option.\n    autoHighlight: !freeform && draft ? 'first' : false,\n    onActiveValueChange: onActiveOptionChange,\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    idPrefix: 'combobox-listbox',\n    onClearDraft: clearDraft,\n  });\n\n  const labelOf = (v: string) => listbox.getItem(v)?.label ?? optionLabels.get(v);\n  // Multi-select: the selected labels in selection order, values without an option left out\n  // (D10), joined by `labels.selection`.\n  let labelsText = '';\n  if (multiselect) {\n    const shown = values.map(labelOf).filter((label): label is string => label !== undefined);\n    if (shown.length > 0) labelsText = (labels?.selection ?? defaultSelectionLabel)(shown);\n  }\n  // Multi-select: while no text is typed, the input shows the selected labels (D11); without any\n  // (no value, or no selected value with an option) it shows its placeholder, as a Dropdown does.\n  const showingLabels = multiselect && draft === null && labelsText !== '';\n\n  // The input text. Multi-select: the typed query, else the selected labels. Freeform: the value\n  // as typed while it is the value the user typed last, else the label of the option with that\n  // value, else the value itself — so the text follows a controlled parent that normalizes or\n  // rejects what was typed while the input still has focus. Otherwise: the typed filter, else the\n  // selected option's label.\n  const optionLabel = single ? labelOf(single) : undefined;\n  let inputText: string;\n  if (multiselect) inputText = draft ?? labelsText;\n  else if (freeform) inputText = single === typedValue ? single : (optionLabel ?? single);\n  else inputText = draft ?? optionLabel ?? '';\n  // Freeform: the filter follows the text (adjust-during-render pattern, C-HOOKS; the text does not\n  // depend on the filter, so this settles in one pass).\n  if (freeform && freeformDraft !== null && freeformDraft !== inputText) {\n    setFreeformDraft(inputText);\n  }\n\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the list, or \"No matches\" for a draft.\n  const surfaceOpen = open && (expanded || !!draft);\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    positioning,\n    open,\n    surfaceOpen,\n    onDismiss: close,\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef, setReference);\n  // The window scrolls the shown list only, which mounts with the popup (C-POPUPS: the window\n  // holds it in state); the closed list in place is another, hidden element.\n  const listScrollRef = useMergedRefs<HTMLUListElement>(\n    expanded ? activeWindow?.scrollRef : undefined,\n  );\n  useShownListScroll(expanded, activeWindow, listbox.items, listbox.activeValue, values);\n\n  useFormReset(\n    inputRef,\n    () => {\n      if (multiselect) {\n        // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n        setValue((current) => resetValues(current, defaultValue));\n      } else {\n        setValue(defaultValue ?? '');\n      }\n      dropDraft();\n      setTypedValue(null);\n    },\n    form,\n  );\n\n  // D11 rule 1: focusing the input while it shows the labels (Tab, a click, a Field label) selects\n  // them, so an edit of any kind replaces them natively, without the value being rewritten during\n  // the edit. A pointer press sets the caret on its mouseup, which would drop that selection, so\n  // the mouseup of the press that focused the input is prevented (only that one: a later press in\n  // the focused input places the caret as usual). The ref is written in handlers only (C-HOOKS).\n  const pointerFocusRef = React.useRef(false);\n  const handleMouseDown = (event: React.MouseEvent<HTMLInputElement>) => {\n    pointerFocusRef.current = showingLabels && !isFocused(event.currentTarget);\n  };\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (showingLabels) event.currentTarget.select();\n  };\n  const handleMouseUp = (event: React.MouseEvent<HTMLInputElement>) => {\n    if (!pointerFocusRef.current) return;\n    pointerFocusRef.current = false;\n    event.preventDefault();\n  };\n  // Rule 1 also holds whenever the labels return to the focused input (R18): a toggle, a close\n  // from the keyboard, a controlled change or a form reset writes them with the caret at their\n  // end, so they are selected again here. A press that moves the caret into them changes neither\n  // dependency, so the caret stays and rule 2 takes what is typed there.\n  React.useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (showingLabels && input && isFocused(input)) input.select();\n  }, [showingLabels, labelsText]);\n\n  // Multi-select: the edit a `beforeinput` announced (the last moment before an edit of any kind,\n  // with the selection it replaces still in place; React has no event for it), for the change\n  // that follows.\n  const announcedEditRef = React.useRef<AnnouncedEdit | null>(null);\n  // Multi-select: an edit that leaves the text as it was (the labels replaced by the same text: a\n  // one-letter label typed again, a paste of exactly the labels) changes no value, so React reports\n  // no change for it, while a browser fires `input` for every edit. Typing the labels' text is a\n  // query (R17), so this listener starts it; an undo or a redo keeps rule 3 (the labels show, with\n  // no query). The event is remembered, so a change React does report for it is not handled twice.\n  const handledInputRef = React.useRef<Event | null>(null);\n  const handleUnchangedEdit = useEventCallback((event: Event) => {\n    const input = event.currentTarget as HTMLInputElement;\n    if (!showingLabels || input.value !== labelsText) return;\n    announcedEditRef.current = null;\n    if (HISTORY_EDITS.has((event as Partial<InputEvent>).inputType ?? '')) return;\n    handledInputRef.current = event;\n    editDraft(labelsText);\n    if (!open) setOpen(true);\n  });\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!multiselect || !input) return;\n    const record = (event: InputEvent) => {\n      const { inputType } = event;\n      const { selectionStart, selectionEnd } = input;\n      announcedEditRef.current = {\n        inputType,\n        range:\n          inputType === 'insertFromDrop' ||\n          HISTORY_EDITS.has(inputType) ||\n          selectionStart === null ||\n          selectionEnd === null\n            ? null\n            : [selectionStart, selectionEnd],\n      };\n    };\n    input.addEventListener('beforeinput', record);\n    input.addEventListener('input', handleUnchangedEdit);\n    return () => {\n      input.removeEventListener('beforeinput', record);\n      input.removeEventListener('input', handleUnchangedEdit);\n    };\n  }, [multiselect, handleUnchangedEdit]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close as a closed list would handle Escape — clear\n      // the text if there is any, otherwise leave the key to an enclosing layer (overlays#1).\n      close();\n      if (clearDraft && event.currentTarget.value !== '') {\n        event.preventDefault();\n        clearDraft();\n      }\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.nativeEvent === handledInputRef.current) return;\n    const text = event.target.value;\n    // The edit the last `beforeinput` announced, if this change is that edit. A change nothing\n    // announced (autofill, an extension, a script) has none, and neither has one after an edit\n    // that was announced and then not made (cancelled, or blocked).\n    const announced = announcedEditRef.current;\n    announcedEditRef.current = null;\n    const edit =\n      announced && announced.inputType === (event.nativeEvent as { inputType?: string }).inputType\n        ? announced\n        : null;\n    if (!multiselect) {\n      editDraft(text);\n    } else if (text === labelsText && (edit === null || HISTORY_EDITS.has(edit.inputType))) {\n      // D11 rule 3, for an undo or a redo (R17): text equal to the labels shows them again, with\n      // no query. Any other edit that leaves their text, typed or pasted, is a query.\n      dropDraft();\n    } else if (showingLabels) {\n      // D11 rule 2: the query is the text the edit inserted into the labels. With the selection\n      // the edit replaced (all of the labels after a focus, rule 1), that is the text now in its\n      // place, however much of it looks like the labels (R16); without one (a drop, an undo or a\n      // redo, an edit the input did not announce), the new value without the part it shares with\n      // the labels at its start and its end. Backspace and Delete leave an empty query and never\n      // remove a value (rule 4).\n      const range = edit?.range;\n      editDraft(\n        (range && replacedText(labelsText, text, range[0], range[1])) ??\n          insertedText(labelsText, text),\n      );\n    } else {\n      editDraft(text);\n    }\n    if (!open) setOpen(true);\n    if (freeform) commitText(text);\n  };\n\n  // The expand button opens and closes the list like the input's own keys; focus stays in (or\n  // returns to) the input.\n  const handleExpandClick = () => {\n    if (!interactive) return;\n    if (open) close();\n    else setOpen(true);\n    inputRef.current?.focus();\n  };\n\n  // Clearing is not an option activation: the state is set directly, not through `commitText`\n  // (which calls the deprecated `onOptionSelect` in freeform mode). The button disappears with the\n  // value, so focus moves to the input explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue(multiselect ? EMPTY_VALUES : '');\n    setTypedValue(null);\n    dropDraft();\n    setOpen(false);\n    inputRef.current?.focus();\n  };\n\n  const showExpand = showsExpandButton(expandIcon);\n  // Read-only comboboxes offer no clear action (the value cannot change).\n  const showClear = clearable && (multiselect ? values.length > 0 : single !== '') && !readOnly;\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\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    <div\n      data-size={size}\n      data-appearance={appearance}\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(comboboxClassNames.root, 'relative inline-flex flex-col', className)}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          // Multi-select: the selected labels take the placeholder's place (D11).\n          placeholder={multiselect && labelsText !== '' ? undefined : placeholder}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          // Multi-select: no limit while the labels show, so typing into them (the caret moved\n          // there) is never blocked; the limit applies to the typed query only.\n          maxLength={showingLabels ? undefined : maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={inputText}\n          onChange={handleChange}\n          onClick={() => {\n            if (!open && interactive) setOpen(true);\n          }}\n          onMouseDown={handleMouseDown}\n          onMouseUp={handleMouseUp}\n          // Read-only: no listbox keys at all (they would open, commit or clear the value).\n          onKeyDown={composeEventHandlers(onKeyDown, readOnly ? undefined : handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={composeEventHandlers(onFocus, handleFocus)}\n          onBlur={composeEventHandlers(onBlur, dropDraft, {\n            checkDefaultPrevented: false,\n          })}\n          className={cn(\n            comboboxClassNames.input,\n            inputHeightClasses[size],\n            'w-full',\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground placeholder:text-muted-foreground',\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\n          )}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus in the input, so its blur does not act on a draft before the clear.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              comboboxClassNames.clearButton,\n              pickerIconButtonClasses(size, appearance),\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n          </button>\n        )}\n        {showExpand && (\n          <PickerExpandButton\n            component=\"Combobox\"\n            expandIcon={expandIcon}\n            label={labels?.expand ?? 'Show options'}\n            expanded={expanded}\n            listboxId={listbox.listboxId}\n            disabled={disabled || !!readOnly}\n            onToggle={handleExpandClick}\n            size={size}\n            appearance={appearance}\n            className={comboboxClassNames.expandButton}\n            iconClassName={comboboxClassNames.expandIcon}\n          />\n        )}\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        // A windowed list is laid out by the window: the browser's scroll anchoring only fights it.\n        listClassName={cn(comboboxClassNames.listbox, activeWindow && '[overflow-anchor:none]')}\n        surfaceClassName={comboboxClassNames.surface}\n        emptyContent={\n          draft ? (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                comboboxClassNames.emptyMessage,\n                'px-3 py-1.5 text-body-1 text-muted-foreground',\n              )}\n            >\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n        listProps={activeWindow ? { ref: listScrollRef } : undefined}\n      >\n        {/* Data mode: the options of the shown items while the list shows (labels come from\n            `items`, so a closed list needs none), or the window's; the children are ignored. */}\n        {!dataMode\n          ? children\n          : expanded &&\n            (activeWindow\n              ? renderListboxWindow(\n                  listbox.items,\n                  activeWindow,\n                  optionsState,\n                  comboboxClassNames.spacer,\n                )\n              : renderListboxItems(listbox.items, optionsState))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : single}\n        type=\"text\"\n        // Like a native readonly input, a read-only Combobox is barred from constraint validation\n        // (the user could not fix it); its value is still submitted.\n        required={validates}\n        onInvalid={() => inputRef.current?.focus()}\n      />\n    </div>\n  );\n};\nComboboxRoot.displayName = 'Combobox';\n\n/** Flat name of `Combobox.Option` for React Server Components. */\nexport const ComboboxOption = Option;\n/** Flat name of `Combobox.OptionGroup` for React Server Components. */\nexport const ComboboxOptionGroup = OptionGroup;\n\n/**\n * An editable combobox: a text input with a filterable listbox of `Option`s (APG combobox with\n * list autocomplete). Typing filters the options; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter selects, Escape closes. Without `freeform` the text is only a\n * filter: its first match becomes active while typing, and the input shows the selected option's\n * label again when the listbox closes. With `freeform` the text itself is the value. Text that\n * matches no option shows \"No matches\" (`labels.noMatches`), announced through a status region.\n * `filter` replaces the match (it may keep options that do not contain the text, for a server-side\n * search or a \"Create …\" entry), and `query`/`defaultQuery`/`onQueryChange` control the typed\n * text (not with `freeform`), which resets to `''` on a commit, a close, a blur, Escape, the clear\n * button and a form reset. The expand button at the end of the input (a chevron, see\n * `expandIcon`) opens and closes the list without taking focus from the input and is not a tab\n * stop; `clearable` adds a clear button, a tab stop after the input. Both sit with the input in a\n * wrapper `<div>` inside the root.\n *\n * `multiselect` turns the value into an array (Fluent's `selectedOptions`): options draw a\n * checkbox; Enter and a click toggle an option and keep the list open (Tab, Escape and\n * Alt+ArrowUp close without committing), and every toggle the user makes is announced\n * (`labels.added`/`labels.removed`, never for a controlled change, a clear or a form reset).\n * While no text is typed the input shows the selected labels in selection order\n * (`labels.selection`, values without an option left out) instead of the placeholder. Focusing\n * the input selects them, and so does their return to the focused input (a toggle, a close, a\n * form reset), so typing, pasting or composing text replaces them with a query that filters the\n * options; text inserted into them queries only what was inserted, an undo or a redo back to them\n * shows them again, and a toggle, a close or a blur clears the query. Backspace and Delete only\n * edit the text: the options, the clear button (which clears every value) and a form reset change\n * the value. `freeform` is not available with `multiselect`, and a non-literal\n * `multiselect={flag}` is a type error: render two elements, one for each mode.\n *\n * **Data mode**: `items` passes the options as data instead of children. The open list renders an\n * option per matching item (`renderOption` draws it, an `Option` with the item's label by\n * default) and the closed list none; the keys, the filter and the input's text follow the data,\n * and each option carries `aria-posinset` and `aria-setsize` among the shown options. A long list\n * takes a `virtualWindow` (from `useVirtualWindow({ itemSize })`): the open list then renders only\n * the options in view, plus an overscan, with spacers for the others, every option `itemSize`\n * tall; the active option stays rendered, and opening scrolls it (else the first selected option)\n * to the middle of the list.\n *\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission (one hidden input per value with\n * `multiselect`), validation and reset (a `multiselect` reset is compared by content, so restoring\n * the same values reports nothing). The open listbox renders in a portal; while closed it stays\n * in the DOM, hidden.\n *\n * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\n *\n * Sub-components: `Combobox.Option`, `Combobox.OptionGroup`. React Server Components import the\n * flat names `ComboboxOption` / `ComboboxOptionGroup` (dotted access needs a client file).\n */\nexport const Combobox = /* @__PURE__ */ Object.assign(ComboboxRoot, {\n  Option,\n  OptionGroup,\n}) as ComboboxComponent;\n"],"mappings":"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"}

package/dist/components/input/Dropdown.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/useControllable.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),l=require("../../hooks/useListbox.cjs"),u=require("../../lib/styles.cjs"),ee=require("../button/Button.slots.cjs"),d=require("../../lib/icons.cjs"),te=require("./inputLook.cjs"),ne=require("./Input.cjs"),re=require("../../hooks/useFormReset.cjs"),ie=require("../internal/HiddenInput.cjs"),f=require("./pickerStyles.cjs"),ae=require("./Combobox.expand.cjs"),p=require("./Option.cjs"),m=require("./pickerLabels.cjs"),h=require("./pickerValues.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");var v=e=>{let{multiselect:v=!1,value:y,defaultValue:b,onValueChange:x,onOptionSelect:S,open:oe,defaultOpen:se,onOpenChange:ce,onActiveOptionChange:le,disabledOptionsFocusable:ue=!1,placeholder:de=`Select an option`,renderValue:C,disabled:w=!1,size:fe,positioning:pe,appearance:me,name:he,form:T,required:E,clearable:ge=!1,expandIcon:D,labels:O,autoFocus:_e,tabIndex:ve,id:ye,"aria-label":be,"aria-labelledby":xe,"aria-describedby":Se,"aria-invalid":Ce,"aria-required":we,"aria-errormessage":Te,"aria-details":Ee,onFocus:De,onBlur:Oe,onKeyDown:ke,onKeyUp:Ae,controlRef:je,className:Me,children:k,ref:Ne,...Pe}=e;S!==void 0&&n.warnDeprecated(`Dropdown`,`onOptionSelect`,`onValueChange`);let A=c.useFieldContext(),Fe=E??A?.required??!1,j=c.useFieldControl({id:ye,"aria-label":be,"aria-labelledby":xe,"aria-describedby":Se,"aria-invalid":Ce,"aria-required":we??E}),Ie=ne.isInvalidLook(!1,j[`aria-invalid`]),{size:M,appearance:N}=te.useInputLook(fe,me),[Le,P]=o.useControllable(y,b??(v?h.EMPTY_VALUES:``),e=>{x?.(typeof e==`string`?e:[...e])}),F=h.toValues(Le),[I,L]=o.useControllable(oe,(se??!1)&&!w,ce),R=I&&!w,z=w&&I;g.useEffect(()=>{z&&L(!1)},[z,L]);let B=g.useRef(null),V=g.useRef(null),H=g.useMemo(()=>l.collectOptionLabels(k),[k]),U=l.useListbox({open:R,onOpenChange:e=>L(e),mode:`select-only`,multiselect:v,disabledOptionsFocusable:ue,selectedValues:F,onSelect:(e,t)=>{if(!v){P(e),S?.(e);return}let{values:n,added:r}=h.toggleValue(F,e);P(n),S?.(e),m.announceToggle(O,t?.item.label??H.get(e)??e,r,n.length)},onActiveValueChange:le,idPrefix:`dropdown-listbox`}),W=R&&U.items.length>0,{layerId:Re,setReference:ze,surfaceRef:Be,floatingProps:Ve}=p.useListboxPopup({positioning:pe,open:R,surfaceOpen:W,onDismiss:()=>L(!1),rootRef:B,anchorRef:V}),He=s.useMergedRefs(B,Ne),Ue=s.useMergedRefs(V,je,ze);re.useFormReset(V,()=>{if(!v){P(b??``);return}P(e=>h.resetValues(e,b))},T);let G=F.map(e=>U.getItem(e)?.label??H.get(e)).filter(e=>e!==void 0),K=v?G.length>0?(O?.selection??m.defaultSelectionLabel)(G):``:G[0]??``,q=ae.showsExpandButton(D),{glyph:J,button:Y}=ee.unwrapButtonGlyph(D);g.useEffect(()=>{Y&&n.warnOnce(`Dropdown:expandIcon-button`,`Dropdown: \`expandIcon\` received ${Y}; its children render as the glyph of the combobox button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`expandIcon={<MyIcon />}\`.`)},[Y]);let X=F.length>0,Z=C?X:K!==``,We=X?C?C(v?[...F]:F[0]??``):K:void 0,Ge=e=>{if(e.key===`Escape`&&R&&!W&&!e.nativeEvent.isComposing){L(!1);return}U.onKeyDown(e)},Ke=()=>{P(v?h.EMPTY_VALUES:``),L(!1),V.current?.focus()},Q=ge&&X,$=M===`small`?`end-2`:`end-3`,qe=j[`aria-label`]===void 0?j[`aria-labelledby`]??A?.labelId:j[`aria-labelledby`];return(0,_.jsxs)(`div`,{"data-size":M,"data-appearance":N,...Pe,ref:He,className:t.cn(a.dropdownClassNames.root,`relative inline-flex flex-col`,Me),children:[v&&(0,_.jsx)(m.PickerAnnouncer,{}),(0,_.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,_.jsxs)(`button`,{type:`button`,...j,...U.getComboboxProps(),"aria-expanded":W,"aria-errormessage":Te,"aria-details":Ee,ref:Ue,disabled:w,autoFocus:_e,tabIndex:ve,onClick:()=>L(e=>!e),onKeyDown:i.composeEventHandlers(ke,Ge),onKeyUp:i.composeEventHandlers(Ae,U.onKeyUp),onFocus:De,onBlur:Oe,className:t.cn(a.dropdownClassNames.button,`relative flex w-full items-center justify-between py-0 text-start`,u.inputHeightClasses[M],u.inputPaddingClasses[M],u.inputTextClasses[M],u.inputAppearanceClasses[N],`text-foreground`,f.pickerEndPadding(Number(Q)+Number(q),M),u.inputFocus,u.disabledStyles,Ie&&`border-destructive`),children:[(0,_.jsx)(`span`,{className:t.cn(a.dropdownClassNames.value,`truncate`,!Z&&`text-muted-foreground`),children:Z?We:de}),q&&(J!=null&&r.slotRendersContent(J)?r.renderSlot(J,`span`,t.cn(a.dropdownClassNames.expandIcon,`absolute inline-flex transition-transform motion-reduce:transition-none`,$,W&&`rotate-180`),{"aria-hidden":!0}):(0,_.jsx)(d.ChevronDownIcon,{size:f.pickerGlyphSize(M,`chevron`),className:t.cn(a.dropdownClassNames.expandIcon,`absolute transition-transform motion-reduce:transition-none`,$,W&&`rotate-180`)}))]}),Q&&(0,_.jsx)(`button`,{type:`button`,"aria-label":O?.clear??`Clear selection`,disabled:w,onMouseDown:e=>e.preventDefault(),onClick:Ke,className:t.cn(a.dropdownClassNames.clearButton,f.pickerIconButtonClasses(M,N),f.pickerButtonOffset(M,q?2:1),`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`),children:(0,_.jsx)(d.DismissIcon,{size:f.pickerGlyphSize(M,`icon`)})})]}),(0,_.jsx)(p.ListboxSurface,{listbox:U,layerId:Re,surfaceRef:Be,floatingProps:Ve,open:R,expanded:W,listClassName:a.dropdownClassNames.listbox,surfaceClassName:a.dropdownClassNames.surface,"aria-label":j[`aria-label`],"aria-labelledby":qe,children:k}),(0,_.jsx)(ie.HiddenInput,{name:he,form:T,disabled:w,value:v?F:F[0]??``,type:`text`,required:Fe,onInvalid:()=>V.current?.focus()})]})};v.displayName=`Dropdown`;var y=p.Option,b=p.OptionGroup,x=Object.assign(v,{Option:p.Option,OptionGroup:p.OptionGroup});exports.Dropdown=x,exports.DropdownOption=y,exports.DropdownOptionGroup=b;
+"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/useControllable.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),l=require("../../hooks/useListbox.cjs"),u=require("../../lib/styles.cjs"),ee=require("../button/Button.slots.cjs"),d=require("../../lib/icons.cjs"),te=require("./inputLook.cjs"),ne=require("./Input.cjs"),re=require("../../hooks/useFormReset.cjs"),ie=require("../internal/HiddenInput.cjs"),f=require("./pickerStyles.cjs"),ae=require("./Combobox.expand.cjs"),p=require("./Option.cjs"),m=require("./Option.data.cjs"),h=require("./pickerLabels.cjs"),g=require("./pickerValues.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var oe=new Map,y=e=>{let{multiselect:y=!1,value:se,defaultValue:b,onValueChange:ce,onOptionSelect:x,open:le,defaultOpen:ue,onOpenChange:de,onActiveOptionChange:fe,disabledOptionsFocusable:pe=!1,placeholder:me=`Select an option`,renderValue:S,disabled:C=!1,size:he,positioning:ge,appearance:_e,name:ve,form:w,required:T,clearable:ye=!1,expandIcon:E,labels:D,items:O,renderOption:k,virtualWindow:A,autoFocus:be,tabIndex:xe,id:Se,"aria-label":Ce,"aria-labelledby":we,"aria-describedby":Te,"aria-invalid":Ee,"aria-required":De,"aria-errormessage":Oe,"aria-details":ke,onFocus:Ae,onBlur:je,onKeyDown:Me,onKeyUp:Ne,controlRef:Pe,className:Fe,children:j,ref:Ie,...Le}=e;x!==void 0&&n.warnDeprecated(`Dropdown`,`onOptionSelect`,`onValueChange`);let M=c.useFieldContext(),Re=T??M?.required??!1,N=c.useFieldControl({id:Se,"aria-label":Ce,"aria-labelledby":we,"aria-describedby":Te,"aria-invalid":Ee,"aria-required":De??T}),ze=ne.isInvalidLook(!1,N[`aria-invalid`]),{size:P,appearance:F}=te.useInputLook(he,_e),[Be,I]=o.useControllable(se,b??(y?g.EMPTY_VALUES:``),e=>{ce?.(typeof e==`string`?e:[...e])}),L=g.toValues(Be),[Ve,R]=o.useControllable(le,(ue??!1)&&!C,de),z=Ve&&!C,B=C&&Ve;_.useEffect(()=>{B&&R(!1)},[B,R]);let V=_.useRef(null),H=_.useRef(null),U=O!==void 0,W=_.useMemo(()=>U?oe:l.collectOptionLabels(j),[U,j]);m.useItemsAndChildrenWarning(`Dropdown`,O,j),m.useDataModeWarnings(`Dropdown`,{items:O,renderOption:k,virtualWindow:A,children:j});let G=U?A:void 0,K=l.useListbox({open:z,onOpenChange:e=>R(e),mode:`select-only`,multiselect:y,disabledOptionsFocusable:pe,items:O,selectedValues:L,onSelect:(e,t)=>{if(!y){I(e),x?.(e);return}let{values:n,added:r}=g.toggleValue(L,e);I(n),x?.(e),h.announceToggle(D,t?.item.label??W.get(e)??e,r,n.length)},onActiveValueChange:fe,onScrollToItem:G?e=>G.scrollToIndex(e,{align:`auto`}):void 0,idPrefix:`dropdown-listbox`}),q=z&&K.items.length>0,{layerId:He,setReference:Ue,surfaceRef:We,floatingProps:Ge}=p.useListboxPopup({positioning:ge,open:z,surfaceOpen:q,onDismiss:()=>R(!1),rootRef:V,anchorRef:H}),Ke=s.useMergedRefs(V,Ie),qe=s.useMergedRefs(H,Pe,Ue),Je=s.useMergedRefs(q?G?.scrollRef:void 0);m.useShownListScroll(q,G,K.items,K.activeValue,L),re.useFormReset(H,()=>{if(!y){I(b??``);return}I(e=>g.resetValues(e,b))},w);let J=L.map(e=>K.getItem(e)?.label??W.get(e)).filter(e=>e!==void 0),Y=y?J.length>0?(D?.selection??h.defaultSelectionLabel)(J):``:J[0]??``,X=ae.showsExpandButton(E),{glyph:Z,button:Q}=ee.unwrapButtonGlyph(E);_.useEffect(()=>{Q&&n.warnOnce(`Dropdown:expandIcon-button`,`Dropdown: \`expandIcon\` received ${Q}; its children render as the glyph of the combobox button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`expandIcon={<MyIcon />}\`.`)},[Q]);let $=L.length>0,Ye=S?$:Y!==``,Xe=$?S?S(y?[...L]:L[0]??``):Y:void 0,Ze=e=>{if(e.key===`Escape`&&z&&!q&&!e.nativeEvent.isComposing){R(!1);return}K.onKeyDown(e)},Qe=()=>{I(y?g.EMPTY_VALUES:``),R(!1),H.current?.focus()},$e=ye&&$,et=P===`small`?`end-2`:`end-3`,tt=N[`aria-label`]===void 0?N[`aria-labelledby`]??M?.labelId:N[`aria-labelledby`],nt={selected:new Set(L),activeValue:K.activeValue,renderOption:k};return(0,v.jsxs)(`div`,{"data-size":P,"data-appearance":F,...Le,ref:Ke,className:t.cn(a.dropdownClassNames.root,`relative inline-flex flex-col`,Fe),children:[y&&(0,v.jsx)(h.PickerAnnouncer,{}),(0,v.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,v.jsxs)(`button`,{type:`button`,...N,...K.getComboboxProps(),"aria-expanded":q,"aria-errormessage":Oe,"aria-details":ke,ref:qe,disabled:C,autoFocus:be,tabIndex:xe,onClick:()=>R(e=>!e),onKeyDown:i.composeEventHandlers(Me,Ze),onKeyUp:i.composeEventHandlers(Ne,K.onKeyUp),onFocus:Ae,onBlur:je,className:t.cn(a.dropdownClassNames.button,`relative flex w-full items-center justify-between py-0 text-start`,u.inputHeightClasses[P],u.inputPaddingClasses[P],u.inputTextClasses[P],u.inputAppearanceClasses[F],`text-foreground`,f.pickerEndPadding(Number($e)+Number(X),P),u.inputFocus,u.disabledStyles,ze&&`border-destructive`),children:[(0,v.jsx)(`span`,{className:t.cn(a.dropdownClassNames.value,`truncate`,!Ye&&`text-muted-foreground`),children:Ye?Xe:me}),X&&(Z!=null&&r.slotRendersContent(Z)?r.renderSlot(Z,`span`,t.cn(a.dropdownClassNames.expandIcon,`absolute inline-flex transition-transform motion-reduce:transition-none`,et,q&&`rotate-180`),{"aria-hidden":!0}):(0,v.jsx)(d.ChevronDownIcon,{size:f.pickerGlyphSize(P,`chevron`),className:t.cn(a.dropdownClassNames.expandIcon,`absolute transition-transform motion-reduce:transition-none`,et,q&&`rotate-180`)}))]}),$e&&(0,v.jsx)(`button`,{type:`button`,"aria-label":D?.clear??`Clear selection`,disabled:C,onMouseDown:e=>e.preventDefault(),onClick:Qe,className:t.cn(a.dropdownClassNames.clearButton,f.pickerIconButtonClasses(P,F),f.pickerButtonOffset(P,X?2:1),`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`),children:(0,v.jsx)(d.DismissIcon,{size:f.pickerGlyphSize(P,`icon`)})})]}),(0,v.jsx)(p.ListboxSurface,{listbox:K,layerId:He,surfaceRef:We,floatingProps:Ge,open:z,expanded:q,listClassName:t.cn(a.dropdownClassNames.listbox,G&&`[overflow-anchor:none]`),surfaceClassName:a.dropdownClassNames.surface,"aria-label":N[`aria-label`],"aria-labelledby":tt,listProps:G?{ref:Je}:void 0,children:U?q&&(G?m.renderListboxWindow(K.items,G,nt,a.dropdownClassNames.spacer):m.renderListboxItems(K.items,nt)):j}),(0,v.jsx)(ie.HiddenInput,{name:ve,form:w,disabled:C,value:y?L:L[0]??``,type:`text`,required:Re,onInvalid:()=>H.current?.focus()})]})};y.displayName=`Dropdown`;var se=p.Option,b=p.OptionGroup,ce=Object.assign(y,{Option:p.Option,OptionGroup:p.OptionGroup});exports.Dropdown=ce,exports.DropdownOption=se,exports.DropdownOptionGroup=b;
 //# sourceMappingURL=Dropdown.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","names":["useFieldContext","useFieldControl","isInvalidLook","useInputLook","useControllable","EMPTY_VALUES","toValues","React","collectOptionLabels","useListbox","toggleValue","useListboxPopup","useMergedRefs","resetValues","defaultSelectionLabel","showsExpandButton","unwrapButtonGlyph","cn","dropdownClassNames","PickerAnnouncer","composeEventHandlers","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","slotRendersContent","renderSlot","ChevronDownIcon","pickerGlyphSize","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","ListboxSurface","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useMergedRefs","require_useFieldControl","require_useListbox","require_styles","require_Button_slots","require_icons","require_inputLook","require_Input","require_useFormReset","require_HiddenInput","require_pickerStyles","require_Combobox_expand","require_Option","require_pickerLabels","require_pickerValues","react","react_jsx_runtime","DropdownRoot","valueProp","openProp","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","field","isRequired","required","fieldProps","invalidLook","value","setValue","defaultValue","multiselect","onValueChange","next","values","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","children","listbox","updated","labels","details","added","onActiveOptionChange","expanded","rootMergedRef","ref","buttonMergedRef","controlRef","setReference","current","form","shownLabels","v","label","displayText","showExpand","expandIcon","expandGlyph","expandIconButton","hasValue","showValue","renderValue","valueNode","handleKeyDown","event","handleClear","showClear","clearable","expandOffset","size","listLabelledBy","appearance","className","onKeyDown","onKeyUp","placeholder","DropdownOption","DropdownOptionGroup","Dropdown"],"sources":["../../../src/components/input/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { dropdownClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon, DismissIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport {\n  disabledStyles,\n  focusRing,\n  inputAppearanceClasses,\n  inputFocus,\n  inputHeightClasses,\n  inputInvalid,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, PopupPositioningOptions } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { showsExpandButton } from './Combobox.expand';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport { announceToggle, defaultSelectionLabel, PickerAnnouncer } from './pickerLabels';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/*  Dropdown                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface DropdownLabels {\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /**\n   * The text of the selected labels shown in the combobox with `multiselect`, in selection order;\n   * values without an option are left out. Replaces the button's joined value text.\n   * @default (labels) => labels.join(', ')\n   */\n  selection?: (labels: string[]) => string;\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 Dropdown component. */\nexport interface DropdownProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`): the value is an array, options show\n   * a checkbox, Enter and Space toggle the highlighted option, a click toggles the clicked\n   * option, the list stays open, and each toggle is announced. A non-literal `multiselect={flag}`\n   * is a type 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 (Fluent's\n   * `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage.\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).\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (every\n   * toggle with `multiselect`).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open dropdown\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A dropdown that starts disabled starts closed. The\n   * list renders only in the browser: it is closed in the server HTML and opens once the dropdown\n   * has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Called after the active (highlighted) option changes — opening, arrow keys, typeahead, the\n   * pointer — and with `null` when the list closes. It reports what `aria-activedescendant` points\n   * at, from an effect once the change commits. Fluent's `onActiveOptionChange` reports neither the\n   * pointer (its options have no hover highlight) nor the close.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * highlighted-by-default option may then be a disabled one too); they still cannot be selected\n   * (Enter, Space and a click do nothing and the list stays open), and in single-select mode,\n   * reaching one with Tab or Alt+ArrowUp closes the list without selecting it. Unlike Fluent,\n   * which always keeps disabled options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /**\n   * Placeholder text shown when no value is selected. It is not an accessible name: label the\n   * Dropdown with a `Field`, `aria-label` or `aria-labelledby`.\n   * @default 'Select an option'\n   */\n  placeholder?: string;\n  /**\n   * Renders the button's content while a value is selected (the placeholder shows otherwise), in\n   * place of the selected label (`labels.selection` with `multiselect`). It receives the raw\n   * value(s), never a label; the content must be non-interactive, and its text is the combobox's\n   * value, so image-only content leaves the value empty.\n   * @default the selected label (`labels.selection` with `multiselect`)\n   */\n  renderValue?: M extends true\n    ? (value: string[]) => React.ReactNode\n    : (value: string) => React.ReactNode;\n  /**\n   * Whether the dropdown is disabled and non-interactive. Turning it on while the listbox is open\n   * closes it (`onOpenChange(false)`).\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size; the multi-select value text and clear button follow it.\n   */\n  size?: CoreSize;\n  /**\n   * Advanced positioning of the popup (Fluent's `positioning`): `offset`, `fitViewport`,\n   * `matchReferenceWidth` and `fallbackPlacements` (tried in order when the requested side has no\n   * room). The popup opens below the field.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Name of the value in form submissions (renders a hidden input; one per value with\n   * `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Dropdown is outside it. */\n  form?: string;\n  /** A value is required to submit the form (native constraint validation). */\n  required?: boolean;\n  /**\n   * Shows a clear button while a value is selected (shown disabled while `disabled`). It clears\n   * the value (every value with `multiselect`), closes the list and moves focus to the combobox\n   * button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph at the end of the button (default: a chevron). `null` or `undefined` keep it;\n   * `false`, or a value that renders nothing, hides it (the button's end padding follows,\n   * together with `clearable`). The default chevron's size and the glyph's offset follow\n   * `size`. Decorative content rendered inside the button: a `<button>` or `Button` passed\n   * here is not nested (its children become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The clear button's name and, with `multiselect`, the selected-labels text and the toggle\n   * announcements, for localization. Unset members keep their English defaults.\n   */\n  labels?: DropdownLabels;\n  /** Called when the `<button role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Called when the `<button role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /**\n   * Called on a key press on the `<button role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Called when a key is released on the `<button role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the `<button role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The Dropdown component's type: a multi-select signature, then the single-select one. */\nexport interface DropdownComponent {\n  (props: DropdownProps<true> & { multiselect: true }): React.ReactNode;\n  (props: DropdownProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst DropdownRoot = (props: DropdownProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    onActiveOptionChange,\n    disabledOptionsFocusable = false,\n    placeholder = 'Select an option',\n    renderValue,\n    disabled = false,\n    size: sizeProp,\n    positioning,\n    appearance: appearanceProp,\n    name,\n    form,\n    required,\n    clearable = false,\n    expandIcon,\n    labels,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Dropdown', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\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 display text and the clear/reset logic: a single value is its\n  // own one-element array, and a `value` passed as `null`/`undefined` from JavaScript (bypassing\n  // the type system) is none rather than a crash, as 0.7 did for the single-select string.\n  const values = toValues(value);\n\n  // A dropdown that starts disabled never shows its list, so it starts closed (no close to report\n  // later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && !disabled,\n    onOpenChange,\n  );\n  const open = openState && !disabled;\n  // Disabling also closes the list itself, not only the derived `open`, so enabling it again does\n  // not reopen it without a user action. The close is reported through onOpenChange (a consumer\n  // callback from an effect, C-HOOKS); a controlled `open` that stays true is not shown meanwhile.\n  const lockedOpen = disabled && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n  const optionLabels = React.useMemo(() => collectOptionLabels(children), [children]);\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'select-only',\n    multiselect,\n    disabledOptionsFocusable,\n    selectedValues: values,\n    onSelect: (next, details) => {\n      if (!multiselect) {\n        // 0.7 order: the value callback first, the deprecated one after.\n        setValue(next);\n        onOptionSelect?.(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      onOptionSelect?.(next);\n      // The committed option's label: the item useListbox passed in `details` (its own result,\n      // `listbox`, cannot be read from inside the options object passed to it), else the label\n      // read from `children` before the option registered, else the raw value. Announces a\n      // toggle the user made (D41): never a controlled change, a clear or a form reset, none of\n      // which reach this callback.\n      announceToggle(\n        labels,\n        details?.item.label ?? optionLabels.get(next) ?? next,\n        added,\n        updated.length,\n      );\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'dropdown-listbox',\n  });\n\n  const expanded = open && listbox.items.length > 0;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    positioning,\n    open,\n    surfaceOpen: expanded,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: buttonRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const buttonMergedRef = useMergedRefs<HTMLButtonElement>(buttonRef, controlRef, setReference);\n\n  useFormReset(\n    buttonRef,\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  const labelOf = (v: string) => listbox.getItem(v)?.label ?? optionLabels.get(v);\n  const shownLabels = values.map(labelOf).filter((label): label is string => label !== undefined);\n  const displayText = multiselect\n    ? shownLabels.length > 0\n      ? (labels?.selection ?? defaultSelectionLabel)(shownLabels)\n      : ''\n    : (shownLabels[0] ?? '');\n\n  // D15: the optional-indicator rule (Phase 1 D21) shared with Combobox's expand button, and the\n  // glyph slot rule shared with SplitButton, MenuButton `menuIcon` and Combobox/TimePicker\n  // `expandIcon` (C-SLOTS).\n  const showExpand = showsExpandButton(expandIcon);\n  const { glyph: expandGlyph, button: expandIconButton } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (expandIconButton) {\n      warnOnce(\n        'Dropdown:expandIcon-button',\n        `Dropdown: \\`expandIcon\\` received ${expandIconButton}; its children render as the ` +\n          'glyph of the combobox button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [expandIconButton]);\n\n  // D15: `renderValue` replaces the button's content while a value is selected, given the raw\n  // value(s) — never a label — so it is called only while `values` holds any (never for `''`/\n  // `[]`); without it, the selected label(s) computed above show as in 0.7.\n  const hasValue = values.length > 0;\n  const showValue = renderValue ? hasValue : displayText !== '';\n  const valueNode = !hasValue\n    ? undefined\n    : renderValue\n      ? (renderValue as (value: string | string[]) => React.ReactNode)(\n          multiselect ? [...values] : (values[0] ?? ''),\n        )\n      : displayText;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Escape' && open && !expanded && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close, but leave Escape to an enclosing layer\n      // (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The button disappears with the value, so focus moves to the combobox explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue(multiselect ? EMPTY_VALUES : '');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && hasValue;\n  // The expand glyph's inline-end offset per size (P4-01), shared by the chevron and a consumer\n  // glyph.\n  const expandOffset = size === 'small' ? 'end-2' : 'end-3';\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div\n      data-size={size}\n      data-appearance={appearance}\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(dropdownClassNames.root, 'relative inline-flex flex-col', className)}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <div className=\"relative flex items-center\">\n        <button\n          type=\"button\"\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={buttonMergedRef}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          onClick={() => setOpen((current) => !current)}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            dropdownClassNames.button,\n            // Every padding is set here (C-NATIVE), not left to an app-wide `button` rule. The end\n            // padding keeps the text clear of the chevron (and of the clear button while it shows).\n            'relative flex w-full items-center justify-between py-0 text-start',\n            inputHeightClasses[size],\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground',\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span\n            className={cn(\n              dropdownClassNames.value,\n              'truncate',\n              !showValue && 'text-muted-foreground',\n            )}\n          >\n            {showValue ? valueNode : placeholder}\n          </span>\n          {showExpand &&\n            (expandGlyph != null && slotRendersContent(expandGlyph) ? (\n              renderSlot(\n                expandGlyph,\n                'span',\n                cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute inline-flex transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                ),\n                { 'aria-hidden': true },\n              )\n            ) : (\n              <ChevronDownIcon\n                size={pickerGlyphSize(size, 'chevron')}\n                className={cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                )}\n              />\n            ))}\n        </button>\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus on the combobox while the pointer clears it.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              dropdownClassNames.clearButton,\n              pickerIconButtonClasses(size, appearance),\n              // Before the chevron while it shows, else at the end.\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n          </button>\n        )}\n      </div>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        listClassName={dropdownClassNames.listbox}\n        surfaceClassName={dropdownClassNames.surface}\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {children}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </div>\n  );\n};\nDropdownRoot.displayName = 'Dropdown';\n\n/** Flat name of `Dropdown.Option` for React Server Components. */\nexport const DropdownOption = Option;\n/** Flat name of `Dropdown.OptionGroup` for React Server Components. */\nexport const DropdownOptionGroup = OptionGroup;\n\n/**\n * A select-only combobox (APG): a button that opens a listbox of `Option`s. Enter, Space,\n * ArrowDown/ArrowUp, Home/End and typing a character open it and move the highlight\n * (`aria-activedescendant`); Enter/Space select, Tab selects the highlighted option and moves on,\n * Escape closes. The button's chevron (see `expandIcon`) turns while the list is open, and\n * `renderValue` replaces its content while a value is selected. `clearable` adds a clear button,\n * a tab stop after the combobox button; both sit in a wrapper `<div>` inside the root.\n *\n * `multiselect` turns the value into an array (Fluent's `selectedOptions`): options draw a\n * checkbox; Enter and Space toggle the highlighted option, a click toggles the clicked option, and\n * the list stays open (Tab, Escape and Alt+ArrowUp close without committing); the button shows the\n * selected labels in selection order (`labels.selection`, replacing the placeholder while any are\n * selected, values without an option left out) and every toggle the user makes is announced\n * (`labels.added`/`labels.removed`, never for a controlled change, a clear or a form reset).\n * `clearable` then clears every value. A non-literal `multiselect={flag}` is a type error: render\n * two elements, one for each mode.\n *\n * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`\n * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`\n * attributes and the remaining props stay on the root `<div>`. Inside a `Field` the button is\n * labelled and described by it — otherwise give it an `aria-label`. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission (one hidden input per value with\n * `multiselect`), validation and reset (a `multiselect` reset is compared by content, so restoring\n * the same values reports nothing). The open listbox renders in a portal; while closed it stays\n * in the DOM, hidden.\n *\n * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\n *\n * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the\n * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).\n */\nexport const Dropdown = /* @__PURE__ */ Object.assign(DropdownRoot, {\n  Option,\n  OptionGroup,\n}) as DropdownComponent;\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","names":["useFieldContext","useFieldControl","isInvalidLook","useInputLook","useControllable","EMPTY_VALUES","toValues","React","collectOptionLabels","useListbox","toggleValue","useListboxPopup","useMergedRefs","resetValues","defaultSelectionLabel","showsExpandButton","unwrapButtonGlyph","cn","dropdownClassNames","PickerAnnouncer","composeEventHandlers","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","slotRendersContent","renderSlot","ChevronDownIcon","pickerGlyphSize","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","ListboxSurface","renderListboxWindow","renderListboxItems","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useMergedRefs","require_useFieldControl","require_useListbox","require_styles","require_Button_slots","require_icons","require_inputLook","require_Input","require_useFormReset","require_HiddenInput","require_pickerStyles","require_Combobox_expand","require_Option","require_Option_data","require_pickerLabels","require_pickerValues","react","react_jsx_runtime","NO_LABELS","DropdownRoot","valueProp","openProp","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","field","isRequired","required","fieldProps","invalidLook","value","setValue","defaultValue","multiselect","onValueChange","next","values","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","dataMode","items","optionLabels","children","activeWindow","virtualWindow","listbox","updated","labels","details","added","onActiveOptionChange","index","expanded","rootMergedRef","ref","buttonMergedRef","controlRef","setReference","listScrollRef","current","form","shownLabels","v","label","displayText","showExpand","expandIcon","expandGlyph","expandIconButton","hasValue","showValue","renderValue","valueNode","handleKeyDown","event","handleClear","showClear","clearable","expandOffset","size","listLabelledBy","optionsState","appearance","className","onKeyDown","onKeyUp","placeholder","DropdownOption","DropdownOptionGroup","Dropdown"],"sources":["../../../src/components/input/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { dropdownClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon, DismissIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport {\n  disabledStyles,\n  focusRing,\n  inputAppearanceClasses,\n  inputFocus,\n  inputHeightClasses,\n  inputInvalid,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, PopupPositioningOptions } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { showsExpandButton } from './Combobox.expand';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n  ListboxSurface,\n  Option,\n  OptionGroup,\n  useListboxPopup,\n  type ListboxOptionRenderState,\n} from './Option';\nimport {\n  renderListboxItems,\n  renderListboxWindow,\n  useDataModeWarnings,\n  useItemsAndChildrenWarning,\n  useShownListScroll,\n} from './Option.data';\nimport { announceToggle, defaultSelectionLabel, PickerAnnouncer } from './pickerLabels';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/*  Dropdown                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface DropdownLabels {\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /**\n   * The text of the selected labels shown in the combobox with `multiselect`, in selection order;\n   * values without an option are left out. Replaces the button's joined value text.\n   * @default (labels) => labels.join(', ')\n   */\n  selection?: (labels: string[]) => string;\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 Dropdown component. */\nexport interface DropdownProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`): the value is an array, options show\n   * a checkbox, Enter and Space toggle the highlighted option, a click toggles the clicked\n   * option, the list stays open, and each toggle is announced. A non-literal `multiselect={flag}`\n   * is a type 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 (Fluent's\n   * `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage.\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).\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (every\n   * toggle with `multiselect`).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open dropdown\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A dropdown that starts disabled starts closed. The\n   * list renders only in the browser: it is closed in the server HTML and opens once the dropdown\n   * has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Called after the active (highlighted) option changes — opening, arrow keys, typeahead, the\n   * pointer — and with `null` when the list closes. It reports what `aria-activedescendant` points\n   * at, from an effect once the change commits. Fluent's `onActiveOptionChange` reports neither the\n   * pointer (its options have no hover highlight) nor the close.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * highlighted-by-default option may then be a disabled one too); they still cannot be selected\n   * (Enter, Space and a click do nothing and the list stays open), and in single-select mode,\n   * reaching one with Tab or Alt+ArrowUp closes the list without selecting it. Unlike Fluent,\n   * which always keeps disabled options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /**\n   * Placeholder text shown when no value is selected. It is not an accessible name: label the\n   * Dropdown with a `Field`, `aria-label` or `aria-labelledby`.\n   * @default 'Select an option'\n   */\n  placeholder?: string;\n  /**\n   * Renders the button's content while a value is selected (the placeholder shows otherwise), in\n   * place of the selected label (`labels.selection` with `multiselect`). It receives the raw\n   * value(s), never a label; the content must be non-interactive, and its text is the combobox's\n   * value, so image-only content leaves the value empty.\n   * @default the selected label (`labels.selection` with `multiselect`)\n   */\n  renderValue?: M extends true\n    ? (value: string[]) => React.ReactNode\n    : (value: string) => React.ReactNode;\n  /**\n   * Whether the dropdown is disabled and non-interactive. Turning it on while the listbox is open\n   * closes it (`onOpenChange(false)`).\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size; the multi-select value text and clear button follow it.\n   */\n  size?: CoreSize;\n  /**\n   * Advanced positioning of the popup (Fluent's `positioning`): `offset`, `fitViewport`,\n   * `matchReferenceWidth` and `fallbackPlacements` (tried in order when the requested side has no\n   * room). The popup opens below the field.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Name of the value in form submissions (renders a hidden input; one per value with\n   * `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Dropdown is outside it. */\n  form?: string;\n  /** A value is required to submit the form (native constraint validation). */\n  required?: boolean;\n  /**\n   * Shows a clear button while a value is selected (shown disabled while `disabled`). It clears\n   * the value (every value with `multiselect`), closes the list and moves focus to the combobox\n   * button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph at the end of the button (default: a chevron). `null` or `undefined` keep it;\n   * `false`, or a value that renders nothing, hides it (the button's end padding follows,\n   * together with `clearable`). The default chevron's size and the glyph's offset follow\n   * `size`. Decorative content rendered inside the button: a `<button>` or `Button` passed\n   * here is not nested (its children become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The clear button's name and, with `multiselect`, the selected-labels text and the toggle\n   * announcements, for localization. Unset members keep their English defaults.\n   */\n  labels?: DropdownLabels;\n  /**\n   * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,\n   * `disabled` and `hidden`; values unique). The open list renders one option per item that is\n   * not `hidden` (see `renderOption`); the closed list renders none. The keys, typeahead, the\n   * selection and the button's label text follow `items`, also for a selected item whose option\n   * is not rendered. The children are neither read nor rendered: passing both warns once in\n   * development. Each option gets `aria-posinset` and `aria-setsize` from its place among the\n   * shown items, and keeps one id 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 open popup's list is the window's scroller, so it needs no height of yours: it scrolls\n   * within its own maximum height (15rem, 240 pixels at the default root size, less where the\n   * viewport has no room). Every option is exactly `itemSize` tall (the list sets its height,\n   * after the option's own `style`), so an option's content must fit in it: the default `Option`\n   * 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 a key makes it active the list and the window move to it in the same\n   * update. Opening the list scrolls the active option (the selected one, by default) to the\n   * middle of the list, and again once the popup's positioning has given the list its height (a\n   * short viewport) unless it was scrolled first. A closed list renders no option. The browser's\n   * scroll anchoring is off on a windowed list (the window lays the options out).\n   */\n  virtualWindow?: VirtualWindow;\n  /** Called when the `<button role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Called when the `<button role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /**\n   * Called on a key press on the `<button role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Called when a key is released on the `<button role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the `<button role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The Dropdown component's type: a multi-select signature, then the single-select one. */\nexport interface DropdownComponent {\n  (props: DropdownProps<true> & { multiselect: true }): React.ReactNode;\n  (props: DropdownProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\n/** The labels read from the children in data mode, where none are read. */\nconst NO_LABELS: ReadonlyMap<string, string> = new Map<string, string>();\n\nconst DropdownRoot = (props: DropdownProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    onActiveOptionChange,\n    disabledOptionsFocusable = false,\n    placeholder = 'Select an option',\n    renderValue,\n    disabled = false,\n    size: sizeProp,\n    positioning,\n    appearance: appearanceProp,\n    name,\n    form,\n    required,\n    clearable = false,\n    expandIcon,\n    labels,\n    items,\n    renderOption,\n    virtualWindow,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Dropdown', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\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 display text and the clear/reset logic: a single value is its\n  // own one-element array, and a `value` passed as `null`/`undefined` from JavaScript (bypassing\n  // the type system) is none rather than a crash, as 0.7 did for the single-select string.\n  const values = toValues(value);\n\n  // A dropdown that starts disabled never shows its list, so it starts closed (no close to report\n  // later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && !disabled,\n    onOpenChange,\n  );\n  const open = openState && !disabled;\n  // Disabling also closes the list itself, not only the derived `open`, so enabling it again does\n  // not reopen it without a user action. The close is reported through onOpenChange (a consumer\n  // callback from an effect, C-HOOKS); a controlled `open` that stays true is not shown meanwhile.\n  const lockedOpen = disabled && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n  // Data mode reads every label from `items` (listbox.getItem), so the children are not walked.\n  const dataMode = items !== undefined;\n  const optionLabels = React.useMemo<ReadonlyMap<string, string>>(\n    () => (dataMode ? NO_LABELS : collectOptionLabels(children)),\n    [dataMode, children],\n  );\n  useItemsAndChildrenWarning('Dropdown', items, children);\n  useDataModeWarnings('Dropdown', { items, renderOption, virtualWindow, children });\n  // A window renders data mode only.\n  const activeWindow = dataMode ? virtualWindow : undefined;\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'select-only',\n    multiselect,\n    disabledOptionsFocusable,\n    items,\n    selectedValues: values,\n    onSelect: (next, details) => {\n      if (!multiselect) {\n        // 0.7 order: the value callback first, the deprecated one after.\n        setValue(next);\n        onOptionSelect?.(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      onOptionSelect?.(next);\n      // The committed option's label: the item useListbox passed in `details` (its own result,\n      // `listbox`, cannot be read from inside the options object passed to it), else the label\n      // read from `children` before the option registered, else the raw value. Announces a\n      // toggle the user made (D41): never a controlled change, a clear or a form reset, none of\n      // which reach this callback.\n      announceToggle(\n        labels,\n        details?.item.label ?? optionLabels.get(next) ?? next,\n        added,\n        updated.length,\n      );\n    },\n    onActiveValueChange: onActiveOptionChange,\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    idPrefix: 'dropdown-listbox',\n  });\n\n  const expanded = open && listbox.items.length > 0;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    positioning,\n    open,\n    surfaceOpen: expanded,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: buttonRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const buttonMergedRef = useMergedRefs<HTMLButtonElement>(buttonRef, controlRef, setReference);\n  // The window scrolls the shown list only, which mounts with the popup (C-POPUPS: the window\n  // holds it in state); the closed list in place is another, hidden element.\n  const listScrollRef = useMergedRefs<HTMLUListElement>(\n    expanded ? activeWindow?.scrollRef : undefined,\n  );\n  useShownListScroll(expanded, activeWindow, listbox.items, listbox.activeValue, values);\n\n  useFormReset(\n    buttonRef,\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  const labelOf = (v: string) => listbox.getItem(v)?.label ?? optionLabels.get(v);\n  const shownLabels = values.map(labelOf).filter((label): label is string => label !== undefined);\n  const displayText = multiselect\n    ? shownLabels.length > 0\n      ? (labels?.selection ?? defaultSelectionLabel)(shownLabels)\n      : ''\n    : (shownLabels[0] ?? '');\n\n  // D15: the optional-indicator rule (Phase 1 D21) shared with Combobox's expand button, and the\n  // glyph slot rule shared with SplitButton, MenuButton `menuIcon` and Combobox/TimePicker\n  // `expandIcon` (C-SLOTS).\n  const showExpand = showsExpandButton(expandIcon);\n  const { glyph: expandGlyph, button: expandIconButton } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (expandIconButton) {\n      warnOnce(\n        'Dropdown:expandIcon-button',\n        `Dropdown: \\`expandIcon\\` received ${expandIconButton}; its children render as the ` +\n          'glyph of the combobox button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [expandIconButton]);\n\n  // D15: `renderValue` replaces the button's content while a value is selected, given the raw\n  // value(s) — never a label — so it is called only while `values` holds any (never for `''`/\n  // `[]`); without it, the selected label(s) computed above show as in 0.7.\n  const hasValue = values.length > 0;\n  const showValue = renderValue ? hasValue : displayText !== '';\n  const valueNode = !hasValue\n    ? undefined\n    : renderValue\n      ? (renderValue as (value: string | string[]) => React.ReactNode)(\n          multiselect ? [...values] : (values[0] ?? ''),\n        )\n      : displayText;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Escape' && open && !expanded && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close, but leave Escape to an enclosing layer\n      // (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The button disappears with the value, so focus moves to the combobox explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue(multiselect ? EMPTY_VALUES : '');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && hasValue;\n  // The expand glyph's inline-end offset per size (P4-01), shared by the chevron and a consumer\n  // glyph.\n  const expandOffset = size === 'small' ? 'end-2' : 'end-3';\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\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    <div\n      data-size={size}\n      data-appearance={appearance}\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(dropdownClassNames.root, 'relative inline-flex flex-col', className)}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <div className=\"relative flex items-center\">\n        <button\n          type=\"button\"\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={buttonMergedRef}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          onClick={() => setOpen((current) => !current)}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            dropdownClassNames.button,\n            // Every padding is set here (C-NATIVE), not left to an app-wide `button` rule. The end\n            // padding keeps the text clear of the chevron (and of the clear button while it shows).\n            'relative flex w-full items-center justify-between py-0 text-start',\n            inputHeightClasses[size],\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground',\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span\n            className={cn(\n              dropdownClassNames.value,\n              'truncate',\n              !showValue && 'text-muted-foreground',\n            )}\n          >\n            {showValue ? valueNode : placeholder}\n          </span>\n          {showExpand &&\n            (expandGlyph != null && slotRendersContent(expandGlyph) ? (\n              renderSlot(\n                expandGlyph,\n                'span',\n                cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute inline-flex transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                ),\n                { 'aria-hidden': true },\n              )\n            ) : (\n              <ChevronDownIcon\n                size={pickerGlyphSize(size, 'chevron')}\n                className={cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                )}\n              />\n            ))}\n        </button>\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus on the combobox while the pointer clears it.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              dropdownClassNames.clearButton,\n              pickerIconButtonClasses(size, appearance),\n              // Before the chevron while it shows, else at the end.\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n          </button>\n        )}\n      </div>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        // A windowed list is laid out by the window: the browser's scroll anchoring only fights it.\n        listClassName={cn(dropdownClassNames.listbox, activeWindow && '[overflow-anchor:none]')}\n        surfaceClassName={dropdownClassNames.surface}\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n        listProps={activeWindow ? { ref: listScrollRef } : undefined}\n      >\n        {/* Data mode: the options of the shown items while the list shows (labels come from\n            `items`, so a closed list needs none), or the window's; the children are ignored. */}\n        {!dataMode\n          ? children\n          : expanded &&\n            (activeWindow\n              ? renderListboxWindow(\n                  listbox.items,\n                  activeWindow,\n                  optionsState,\n                  dropdownClassNames.spacer,\n                )\n              : renderListboxItems(listbox.items, optionsState))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </div>\n  );\n};\nDropdownRoot.displayName = 'Dropdown';\n\n/** Flat name of `Dropdown.Option` for React Server Components. */\nexport const DropdownOption = Option;\n/** Flat name of `Dropdown.OptionGroup` for React Server Components. */\nexport const DropdownOptionGroup = OptionGroup;\n\n/**\n * A select-only combobox (APG): a button that opens a listbox of `Option`s. Enter, Space,\n * ArrowDown/ArrowUp, Home/End and typing a character open it and move the highlight\n * (`aria-activedescendant`); Enter/Space select, Tab selects the highlighted option and moves on,\n * Escape closes. The button's chevron (see `expandIcon`) turns while the list is open, and\n * `renderValue` replaces its content while a value is selected. `clearable` adds a clear button,\n * a tab stop after the combobox button; both sit in a wrapper `<div>` inside the root.\n *\n * `multiselect` turns the value into an array (Fluent's `selectedOptions`): options draw a\n * checkbox; Enter and Space toggle the highlighted option, a click toggles the clicked option, and\n * the list stays open (Tab, Escape and Alt+ArrowUp close without committing); the button shows the\n * selected labels in selection order (`labels.selection`, replacing the placeholder while any are\n * selected, values without an option left out) and every toggle the user makes is announced\n * (`labels.added`/`labels.removed`, never for a controlled change, a clear or a form reset).\n * `clearable` then clears every value. A non-literal `multiselect={flag}` is a type error: render\n * two elements, one for each mode.\n *\n * **Data mode**: `items` passes the options as data instead of children. The open list renders an\n * option per item (`renderOption` draws it, an `Option` with the item's label by default) and the\n * closed list none; the keys, typeahead and the button's text follow the data, and each option\n * carries `aria-posinset` and `aria-setsize`. A long list takes a `virtualWindow` (from\n * `useVirtualWindow({ itemSize })`): the open list then renders only the options in view, plus an\n * overscan, with spacers for the others, every option `itemSize` tall; the active option stays\n * rendered, and opening scrolls it to the middle of the list.\n *\n * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`\n * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`\n * attributes and the remaining props stay on the root `<div>`. Inside a `Field` the button is\n * labelled and described by it — otherwise give it an `aria-label`. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission (one hidden input per value with\n * `multiselect`), validation and reset (a `multiselect` reset is compared by content, so restoring\n * the same values reports nothing). The open listbox renders in a portal; while closed it stays\n * in the DOM, hidden.\n *\n * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\n *\n * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the\n * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).\n */\nexport const Dropdown = /* @__PURE__ */ Object.assign(DropdownRoot, {\n  Option,\n  OptionGroup,\n}) as DropdownComponent;\n"],"mappings":"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"}