@mortenbrudvik/waveui 0.10.0 → 0.12.0

package/dist/components/input/Dropdown.mjs

@@ -15,8 +15,8 @@ import { useInputLook as me } from "./inputLook.mjs";
 import { isInvalidLook as he } from "./Input.mjs";
 import { useFormReset as ge } from "../../hooks/useFormReset.mjs";
 import { HiddenInput as _e } from "../internal/HiddenInput.mjs";
-import { pickerButtonOffset as ve, pickerEndPadding as ye, pickerGlyphSize as c, pickerIconButtonClasses as be } from "./pickerStyles.mjs";
-import { showsExpandButton as l } from "./Combobox.expand.mjs";
+import { pickerButtonOffset as ve, pickerEndPadding as ye, pickerGlyphSize as c, pickerIconButtonClasses as l } from "./pickerStyles.mjs";
+import { showsExpandButton as be } from "./Combobox.expand.mjs";
 import { ListboxSurface as xe, Option as u, OptionGroup as d, useListboxPopup as Se } from "./Option.mjs";
 import { PickerAnnouncer as Ce, announceToggle as we, defaultSelectionLabel as Te } from "./pickerLabels.mjs";
 import { EMPTY_VALUES as f, resetValues as Ee, toValues as De, toggleValue as Oe } from "./pickerValues.mjs";
@@ -24,18 +24,18 @@ import * as p from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/input/Dropdown.tsx
 var g = (u) => {
-	let { multiselect: d = !1, value: g, defaultValue: _, onValueChange: v, onOptionSelect: y, open: ke, defaultOpen: Ae, onOpenChange: je, onActiveOptionChange: b, disabledOptionsFocusable: x = !1, placeholder: S = "Select an option", renderValue: C, disabled: w = !1, size: Me, appearance: Ne, name: Pe, form: T, required: E, clearable: Fe = !1, expandIcon: D, labels: O, autoFocus: Ie, tabIndex: Le, id: Re, "aria-label": ze, "aria-labelledby": Be, "aria-describedby": Ve, "aria-invalid": He, "aria-required": Ue, "aria-errormessage": We, "aria-details": Ge, onFocus: Ke, onBlur: qe, onKeyDown: Je, onKeyUp: Ye, controlRef: Xe, className: Ze, children: k, ref: Qe, ...$e } = u;
+	let { multiselect: d = !1, value: g, defaultValue: _, onValueChange: v, onOptionSelect: y, open: ke, defaultOpen: Ae, onOpenChange: je, onActiveOptionChange: b, disabledOptionsFocusable: x = !1, placeholder: S = "Select an option", renderValue: C, disabled: w = !1, size: Me, positioning: Ne, appearance: Pe, name: Fe, form: T, required: E, clearable: Ie = !1, expandIcon: D, labels: O, autoFocus: Le, tabIndex: Re, id: ze, "aria-label": Be, "aria-labelledby": Ve, "aria-describedby": He, "aria-invalid": Ue, "aria-required": We, "aria-errormessage": Ge, "aria-details": Ke, onFocus: qe, onBlur: Je, onKeyDown: Ye, onKeyUp: Xe, controlRef: Ze, className: Qe, children: k, ref: $e, ...et } = u;
 	y !== void 0 && t("Dropdown", "onOptionSelect", "onValueChange");
-	let A = te(), et = E ?? A?.required ?? !1, j = ne({
-		id: Re,
-		"aria-label": ze,
-		"aria-labelledby": Be,
-		"aria-describedby": Ve,
-		"aria-invalid": He,
-		"aria-required": Ue ?? E
-	}), tt = he(!1, j["aria-invalid"]), { size: M, appearance: N } = me(Me, Ne), [nt, P] = o(g, _ ?? (d ? f : ""), (e) => {
+	let A = te(), tt = E ?? A?.required ?? !1, j = ne({
+		id: ze,
+		"aria-label": Be,
+		"aria-labelledby": Ve,
+		"aria-describedby": He,
+		"aria-invalid": Ue,
+		"aria-required": We ?? E
+	}), nt = he(!1, j["aria-invalid"]), { size: M, appearance: N } = me(Me, Pe), [rt, P] = o(g, _ ?? (d ? f : ""), (e) => {
 		v?.(typeof e == "string" ? e : [...e]);
-	}), F = De(nt), [I, L] = o(ke, (Ae ?? !1) && !w, je), R = I && !w, z = w && I;
+	}), F = De(rt), [I, L] = o(ke, (Ae ?? !1) && !w, je), R = I && !w, z = w && I;
 	p.useEffect(() => {
 		z && L(!1);
 	}, [z, L]);
@@ -56,13 +56,14 @@ var g = (u) => {
 		},
 		onActiveValueChange: b,
 		idPrefix: "dropdown-listbox"
-	}), W = R && U.items.length > 0, { layerId: rt, setReference: it, surfaceRef: at, floatingProps: ot } = Se({
+	}), W = R && U.items.length > 0, { layerId: it, setReference: at, surfaceRef: ot, floatingProps: st } = Se({
+		positioning: Ne,
 		open: R,
 		surfaceOpen: W,
 		onDismiss: () => L(!1),
 		rootRef: B,
 		anchorRef: V
-	}), st = s(B, Qe), ct = s(V, Xe, it);
+	}), ct = s(B, $e), lt = s(V, Ze, at);
 	ge(V, () => {
 		if (!d) {
 			P(_ ?? "");
@@ -70,25 +71,25 @@ var g = (u) => {
 		}
 		P((e) => Ee(e, _));
 	}, T);
-	let G = F.map((e) => U.getItem(e)?.label ?? H.get(e)).filter((e) => e !== void 0), K = d ? G.length > 0 ? (O?.selection ?? Te)(G) : "" : G[0] ?? "", q = l(D), { glyph: J, button: Y } = de(D);
+	let G = F.map((e) => U.getItem(e)?.label ?? H.get(e)).filter((e) => e !== void 0), K = d ? G.length > 0 ? (O?.selection ?? Te)(G) : "" : G[0] ?? "", q = be(D), { glyph: J, button: Y } = de(D);
 	p.useEffect(() => {
 		Y && n("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 !== "", lt = X ? C ? C(d ? [...F] : F[0] ?? "") : K : void 0, ut = (e) => {
+	let X = F.length > 0, Z = C ? X : K !== "", ut = X ? C ? C(d ? [...F] : F[0] ?? "") : K : void 0, dt = (e) => {
 		if (e.key === "Escape" && R && !W && !e.nativeEvent.isComposing) {
 			L(!1);
 			return;
 		}
 		U.onKeyDown(e);
-	}, dt = () => {
+	}, ft = () => {
 		P(d ? f : ""), L(!1), V.current?.focus();
-	}, Q = Fe && X, $ = M === "small" ? "end-2" : "end-3", ft = j["aria-label"] === void 0 ? j["aria-labelledby"] ?? A?.labelId : j["aria-labelledby"];
+	}, Q = Ie && X, $ = M === "small" ? "end-2" : "end-3", pt = j["aria-label"] === void 0 ? j["aria-labelledby"] ?? A?.labelId : j["aria-labelledby"];
 	return /* @__PURE__ */ h("div", {
 		"data-size": M,
 		"data-appearance": N,
-		...$e,
-		ref: st,
-		className: e(a.root, "relative inline-flex flex-col", Ze),
+		...et,
+		ref: ct,
+		className: e(a.root, "relative inline-flex flex-col", Qe),
 		children: [
 			d && /* @__PURE__ */ m(Ce, {}),
 			/* @__PURE__ */ h("div", {
@@ -98,21 +99,21 @@ var g = (u) => {
 					...j,
 					...U.getComboboxProps(),
 					"aria-expanded": W,
-					"aria-errormessage": We,
-					"aria-details": Ge,
-					ref: ct,
+					"aria-errormessage": Ge,
+					"aria-details": Ke,
+					ref: lt,
 					disabled: w,
-					autoFocus: Ie,
-					tabIndex: Le,
+					autoFocus: Le,
+					tabIndex: Re,
 					onClick: () => L((e) => !e),
-					onKeyDown: i(Je, ut),
-					onKeyUp: i(Ye, U.onKeyUp),
-					onFocus: Ke,
-					onBlur: qe,
-					className: e(a.button, "relative flex w-full items-center justify-between py-0 text-start", ce[M], le[M], ue[M], oe[N], "text-foreground", ye(Number(Q) + Number(q), M), se, ae, tt && "border-destructive"),
+					onKeyDown: i(Ye, dt),
+					onKeyUp: i(Xe, U.onKeyUp),
+					onFocus: qe,
+					onBlur: Je,
+					className: e(a.button, "relative flex w-full items-center justify-between py-0 text-start", ce[M], le[M], ue[M], oe[N], "text-foreground", ye(Number(Q) + Number(q), M), se, ae, nt && "border-destructive"),
 					children: [/* @__PURE__ */ m("span", {
 						className: e(a.value, "truncate", !Z && "text-muted-foreground"),
-						children: Z ? lt : S
+						children: Z ? ut : S
 					}), q && (J != null && ee(J) ? r(J, "span", e(a.expandIcon, "absolute inline-flex transition-transform motion-reduce:transition-none", $, W && "rotate-180"), { "aria-hidden": !0 }) : /* @__PURE__ */ m(fe, {
 						size: c(M, "chevron"),
 						className: e(a.expandIcon, "absolute transition-transform motion-reduce:transition-none", $, W && "rotate-180")
@@ -122,31 +123,31 @@ var g = (u) => {
 					"aria-label": O?.clear ?? "Clear selection",
 					disabled: w,
 					onMouseDown: (e) => e.preventDefault(),
-					onClick: dt,
-					className: e(a.clearButton, be(M, N), ve(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"),
+					onClick: ft,
+					className: e(a.clearButton, l(M, N), ve(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: /* @__PURE__ */ m(pe, { size: c(M, "icon") })
 				})]
 			}),
 			/* @__PURE__ */ m(xe, {
 				listbox: U,
-				layerId: rt,
-				surfaceRef: at,
-				floatingProps: ot,
+				layerId: it,
+				surfaceRef: ot,
+				floatingProps: st,
 				open: R,
 				expanded: W,
 				listClassName: a.listbox,
 				surfaceClassName: a.surface,
 				"aria-label": j["aria-label"],
-				"aria-labelledby": ft,
+				"aria-labelledby": pt,
 				children: k
 			}),
 			/* @__PURE__ */ m(_e, {
-				name: Pe,
+				name: Fe,
 				form: T,
 				disabled: w,
 				value: d ? F : F[0] ?? "",
 				type: "text",
-				required: et,
+				required: tt,
 				onInvalid: () => V.current?.focus()
 			})
 		]

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","names":["React","DropdownRoot","valueProp","openProp","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","warnDeprecated","field","useFieldContext","isRequired","required","fieldProps","useFieldControl","invalidLook","isInvalidLook","useInputLook","value","setValue","useControllable","defaultValue","multiselect","EMPTY_VALUES","next","values","toValues","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","collectOptionLabels","children","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","expanded","useListboxPopup","rootMergedRef","useMergedRefs","ref","buttonMergedRef","controlRef","setReference","resetValues","current","form","shownLabels","v","label","displayText","defaultSelectionLabel","showExpand","showsExpandButton","expandIcon","expandGlyph","expandIconButton","unwrapButtonGlyph","warnOnce","hasValue","showValue","renderValue","valueNode","handleKeyDown","event","handleClear","showClear","clearable","expandOffset","size","listLabelledBy","appearance","cn","dropdownClassNames","className","PickerAnnouncer","composeEventHandlers","onKeyDown","onKeyUp","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","placeholder","slotRendersContent","renderSlot","ChevronDownIcon","pickerGlyphSize","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","ListboxSurface","HiddenInput","DropdownOption","Option","DropdownOptionGroup","OptionGroup","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 } 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   * 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    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    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.mjs","names":["React","DropdownRoot","valueProp","openProp","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","warnDeprecated","field","useFieldContext","isRequired","required","fieldProps","useFieldControl","invalidLook","isInvalidLook","useInputLook","value","setValue","useControllable","defaultValue","multiselect","EMPTY_VALUES","next","values","toValues","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","collectOptionLabels","children","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","expanded","useListboxPopup","rootMergedRef","useMergedRefs","ref","buttonMergedRef","controlRef","setReference","resetValues","current","form","shownLabels","v","label","displayText","defaultSelectionLabel","showExpand","showsExpandButton","expandIcon","expandGlyph","expandIconButton","unwrapButtonGlyph","warnOnce","hasValue","showValue","renderValue","valueNode","handleKeyDown","event","handleClear","showClear","clearable","expandOffset","size","listLabelledBy","appearance","cn","dropdownClassNames","className","PickerAnnouncer","composeEventHandlers","onKeyDown","onKeyUp","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","placeholder","slotRendersContent","renderSlot","ChevronDownIcon","pickerGlyphSize","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","ListboxSurface","HiddenInput","DropdownOption","Option","DropdownOptionGroup","OptionGroup","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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"}

package/dist/components/input/Option.cjs

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

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

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