@mortenbrudvik/waveui 0.9.0 → 0.10.0

package/dist/components/input/Dropdown.mjs

@@ -1,137 +1,163 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { warnDeprecated as ee } from "../../lib/dev.mjs";
-import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
-import { dropdownClassNames as n } from "../../lib/classNames.mjs";
-import { useControllable as r } from "../../hooks/useControllable.mjs";
-import { useMergedRefs as i } from "../../hooks/useMergedRefs.mjs";
+import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
+import { renderSlot as r, slotRendersContent as ee } from "../../lib/slot.mjs";
+import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
+import { dropdownClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as o } from "../../hooks/useControllable.mjs";
+import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
 import { useFieldContext as te, useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
-import { disabledStyles as re, inputAppearanceClasses as ie, inputFocus as ae, inputHeightClasses as oe, inputPaddingClasses as se, inputTextClasses as ce } from "../../lib/styles.mjs";
-import { ChevronDownIcon as le, DismissIcon as ue } from "../../lib/icons.mjs";
-import { useInputLook as a } from "./inputLook.mjs";
-import { isInvalidLook as o } from "./Input.mjs";
-import { useFormReset as s } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as de } from "../internal/HiddenInput.mjs";
-import { collectOptionLabels as fe, useListbox as pe } from "../../hooks/useListbox.mjs";
-import { pickerButtonOffset as me, pickerEndPadding as he, pickerGlyphSize as c, pickerIconButtonClasses as ge } from "./pickerStyles.mjs";
-import { ListboxSurface as _e, Option as l, OptionGroup as u, useListboxPopup as ve } from "./Option.mjs";
-import * as d from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { collectOptionLabels as re, useListbox as ie } from "../../hooks/useListbox.mjs";
+import { disabledStyles as ae, inputAppearanceClasses as oe, inputFocus as se, inputHeightClasses as ce, inputPaddingClasses as le, inputTextClasses as ue } from "../../lib/styles.mjs";
+import { unwrapButtonGlyph as de } from "../button/Button.slots.mjs";
+import { ChevronDownIcon as fe, DismissIcon as pe } from "../../lib/icons.mjs";
+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 { 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";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/input/Dropdown.tsx
-var m = (l) => {
-	let { value: u, defaultValue: m, onValueChange: h, onOptionSelect: g, open: _, defaultOpen: v, onOpenChange: y, placeholder: b = "Select an option", disabled: x = !1, size: S, appearance: C, name: w, form: T, required: E, clearable: D = !1, labels: O, autoFocus: k, tabIndex: A, id: j, "aria-label": M, "aria-labelledby": N, "aria-describedby": P, "aria-invalid": F, "aria-required": ye, "aria-errormessage": be, "aria-details": xe, onFocus: Se, onBlur: Ce, onKeyDown: we, onKeyUp: Te, controlRef: Ee, className: De, children: I, ref: Oe, ...ke } = l;
-	g !== void 0 && ee("Dropdown", "onOptionSelect", "onValueChange");
-	let L = te(), Ae = E ?? L?.required ?? !1, R = ne({
-		id: j,
-		"aria-label": M,
-		"aria-labelledby": N,
-		"aria-describedby": P,
-		"aria-invalid": F,
-		"aria-required": ye ?? E
-	}), je = o(!1, R["aria-invalid"]), { size: z, appearance: B } = a(S, C), [V, H] = r(u, m ?? "", h), [U, W] = r(_, (v ?? !1) && !x, y), G = U && !x, K = x && U;
-	d.useEffect(() => {
-		K && W(!1);
-	}, [K, W]);
-	let q = d.useRef(null), J = d.useRef(null), Me = d.useMemo(() => fe(I), [I]), Y = pe({
-		open: G,
-		onOpenChange: (e) => W(e),
+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;
+	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) => {
+		v?.(typeof e == "string" ? e : [...e]);
+	}), F = De(nt), [I, L] = o(ke, (Ae ?? !1) && !w, je), R = I && !w, z = w && I;
+	p.useEffect(() => {
+		z && L(!1);
+	}, [z, L]);
+	let B = p.useRef(null), V = p.useRef(null), H = p.useMemo(() => re(k), [k]), U = ie({
+		open: R,
+		onOpenChange: (e) => L(e),
 		mode: "select-only",
-		selectedValues: V ? [V] : [],
-		onSelect: (e) => {
-			H(e), g?.(e);
+		multiselect: d,
+		disabledOptionsFocusable: x,
+		selectedValues: F,
+		onSelect: (e, t) => {
+			if (!d) {
+				P(e), y?.(e);
+				return;
+			}
+			let { values: n, added: r } = Oe(F, e);
+			P(n), y?.(e), we(O, t?.item.label ?? H.get(e) ?? e, r, n.length);
 		},
+		onActiveValueChange: b,
 		idPrefix: "dropdown-listbox"
-	}), X = G && Y.items.length > 0, { layerId: Z, setReference: Ne, surfaceRef: Pe, floatingProps: Fe } = ve({
-		open: G,
-		surfaceOpen: X,
-		onDismiss: () => W(!1),
-		rootRef: q,
-		anchorRef: J
-	}), Ie = i(q, Oe), Le = i(J, Ee, Ne);
-	s(J, () => H(m ?? ""), T);
-	let Q = V ? Y.getItem(V)?.label ?? Me.get(V) ?? "" : "", Re = (e) => {
-		if (e.key === "Escape" && G && !X && !e.nativeEvent.isComposing) {
-			W(!1);
+	}), W = R && U.items.length > 0, { layerId: rt, setReference: it, surfaceRef: at, floatingProps: ot } = Se({
+		open: R,
+		surfaceOpen: W,
+		onDismiss: () => L(!1),
+		rootRef: B,
+		anchorRef: V
+	}), st = s(B, Qe), ct = s(V, Xe, it);
+	ge(V, () => {
+		if (!d) {
+			P(_ ?? "");
 			return;
 		}
-		Y.onKeyDown(e);
-	}, ze = () => {
-		H(""), W(!1), J.current?.focus();
-	}, $ = D && V !== "", Be = R["aria-label"] === void 0 ? R["aria-labelledby"] ?? L?.labelId : R["aria-labelledby"];
-	return /* @__PURE__ */ p("div", {
-		"data-size": z,
-		"data-appearance": B,
-		...ke,
-		ref: Ie,
-		className: e(n.root, "relative inline-flex flex-col", De),
+		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);
+	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) => {
+		if (e.key === "Escape" && R && !W && !e.nativeEvent.isComposing) {
+			L(!1);
+			return;
+		}
+		U.onKeyDown(e);
+	}, dt = () => {
+		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"];
+	return /* @__PURE__ */ h("div", {
+		"data-size": M,
+		"data-appearance": N,
+		...$e,
+		ref: st,
+		className: e(a.root, "relative inline-flex flex-col", Ze),
 		children: [
-			/* @__PURE__ */ p("div", {
+			d && /* @__PURE__ */ m(Ce, {}),
+			/* @__PURE__ */ h("div", {
 				className: "relative flex items-center",
-				children: [/* @__PURE__ */ p("button", {
+				children: [/* @__PURE__ */ h("button", {
 					type: "button",
-					...R,
-					...Y.getComboboxProps(),
-					"aria-expanded": X,
-					"aria-errormessage": be,
-					"aria-details": xe,
-					ref: Le,
-					disabled: x,
-					autoFocus: k,
-					tabIndex: A,
-					onClick: () => W((e) => !e),
-					onKeyDown: t(we, Re),
-					onKeyUp: t(Te, Y.onKeyUp),
-					onFocus: Se,
-					onBlur: Ce,
-					className: e(n.button, "relative flex w-full items-center justify-between py-0 text-start", oe[z], se[z], ce[z], ie[B], "text-foreground", he($ ? 2 : 1, z), ae, re, je && "border-destructive"),
-					children: [/* @__PURE__ */ f("span", {
-						className: e(n.value, "truncate", !Q && "text-muted-foreground"),
-						children: Q || b
-					}), /* @__PURE__ */ f(le, {
-						size: c(z, "chevron"),
-						className: e(n.expandIcon, "absolute transition-transform motion-reduce:transition-none", z === "small" ? "end-2" : "end-3", X && "rotate-180")
-					})]
-				}), $ && /* @__PURE__ */ f("button", {
+					...j,
+					...U.getComboboxProps(),
+					"aria-expanded": W,
+					"aria-errormessage": We,
+					"aria-details": Ge,
+					ref: ct,
+					disabled: w,
+					autoFocus: Ie,
+					tabIndex: Le,
+					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"),
+					children: [/* @__PURE__ */ m("span", {
+						className: e(a.value, "truncate", !Z && "text-muted-foreground"),
+						children: Z ? lt : 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")
+					}))]
+				}), Q && /* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": O?.clear ?? "Clear selection",
-					disabled: x,
+					disabled: w,
 					onMouseDown: (e) => e.preventDefault(),
-					onClick: ze,
-					className: e(n.clearButton, ge(z, B), me(z, 2), "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__ */ f(ue, { size: c(z, "icon") })
+					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"),
+					children: /* @__PURE__ */ m(pe, { size: c(M, "icon") })
 				})]
 			}),
-			/* @__PURE__ */ f(_e, {
-				listbox: Y,
-				layerId: Z,
-				surfaceRef: Pe,
-				floatingProps: Fe,
-				open: G,
-				expanded: X,
-				listboxClassName: n.listbox,
-				surfaceClassName: n.surface,
-				"aria-label": R["aria-label"],
-				"aria-labelledby": Be,
-				children: I
+			/* @__PURE__ */ m(xe, {
+				listbox: U,
+				layerId: rt,
+				surfaceRef: at,
+				floatingProps: ot,
+				open: R,
+				expanded: W,
+				listClassName: a.listbox,
+				surfaceClassName: a.surface,
+				"aria-label": j["aria-label"],
+				"aria-labelledby": ft,
+				children: k
 			}),
-			/* @__PURE__ */ f(de, {
-				name: w,
+			/* @__PURE__ */ m(_e, {
+				name: Pe,
 				form: T,
-				disabled: x,
-				value: V,
+				disabled: w,
+				value: d ? F : F[0] ?? "",
 				type: "text",
-				required: Ae,
-				onInvalid: () => J.current?.focus()
+				required: et,
+				onInvalid: () => V.current?.focus()
 			})
 		]
 	});
 };
-m.displayName = "Dropdown";
-var h = l, g = u, _ = /* @__PURE__ */ Object.assign(m, {
-	Option: l,
-	OptionGroup: u
+g.displayName = "Dropdown";
+var _ = u, v = d, y = /* @__PURE__ */ Object.assign(g, {
+	Option: u,
+	OptionGroup: d
 });
 //#endregion
-export { _ as Dropdown, h as DropdownOption, g as DropdownOptionGroup };
+export { y as Dropdown, _ as DropdownOption, v as DropdownOptionGroup };
 
 //# sourceMappingURL=Dropdown.mjs.map

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","onValueChange","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","collectOptionLabels","children","listbox","useListbox","next","expanded","useListboxPopup","rootMergedRef","useMergedRefs","ref","buttonMergedRef","controlRef","setReference","form","displayText","handleKeyDown","event","handleClear","showClear","clearable","listLabelledBy","size","appearance","cn","dropdownClassNames","className","current","composeEventHandlers","onKeyDown","onKeyUp","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","placeholder","ChevronDownIcon","pickerGlyphSize","labels","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 } from '../../lib/dev';\nimport { ChevronDownIcon, DismissIcon } from '../../lib/icons';\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 { HiddenInput } from '../internal/HiddenInput';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\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\n/** Properties for the Dropdown component. */\nexport interface DropdownProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Controlled selected value (`''` for none). */\n  value?: string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new value when a different option is selected. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again.\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   * 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   * 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.\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  /** Name of the value in form submissions (renders a hidden input). */\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, closes the list and moves focus to the combobox button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /** The name of the clear button, for localization. Unset members keep their English defaults. */\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\nconst DropdownRoot = (props: DropdownProps) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select an option',\n    disabled = false,\n    size: sizeProp,\n    appearance: appearanceProp,\n    name,\n    form,\n    required,\n    clearable = false,\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(valueProp, defaultValue ?? '', onValueChange);\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    selectedValues: value ? [value] : [],\n    onSelect: (next) => {\n      setValue(next);\n      onOptionSelect?.(next);\n    },\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(buttonRef, () => setValue(defaultValue ?? ''), form);\n\n  const displayText = value ? (listbox.getItem(value)?.label ?? optionLabels.get(value) ?? '') : '';\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('');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && value !== '';\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      <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(showClear ? 2 : 1, size),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span\n            className={cn(\n              dropdownClassNames.value,\n              'truncate',\n              !displayText && 'text-muted-foreground',\n            )}\n          >\n            {displayText || placeholder}\n          </span>\n          <ChevronDownIcon\n            size={pickerGlyphSize(size, 'chevron')}\n            className={cn(\n              dropdownClassNames.expandIcon,\n              'absolute transition-transform motion-reduce:transition-none',\n              size === 'small' ? 'end-2' : 'end-3',\n              expanded && 'rotate-180',\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              pickerButtonOffset(size, 2),\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        listboxClassName={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={value}\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. `clearable` adds a clear button, a tab stop after the combobox button; both sit\n * in a wrapper `<div>` inside the root.\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, validation and reset. The open\n * listbox renders in a portal; while closed it stays 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});\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 } 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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"}

package/dist/components/input/Listbox.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),ee=require("../../lib/classNames.cjs"),i=require("../../hooks/useControllable.cjs"),a=require("../../lib/focus.cjs"),te=require("../../hooks/useMergedRefs.cjs"),ne=require("../../hooks/useIsClient.cjs"),o=require("../../hooks/useFieldControl.cjs"),s=require("../../hooks/useListbox.cjs"),c=require("../../lib/styles.cjs"),l=require("../../hooks/useFormReset.cjs"),re=require("../internal/HiddenInput.cjs"),u=require("./Option.cjs"),d=require("./pickerLabels.cjs"),f=require("./pickerValues.cjs"),p=require("../../lib/events.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g="Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.",_={"aria-disabled":!0,"data-disabled":``},v=e=>{let{multiselect:v=!1,value:y,defaultValue:b,onValueChange:x,onActiveOptionChange:ie,disabled:S=!1,disabledOptionsFocusable:ae=!1,autoFocus:C=!1,labels:oe,name:se,form:w,required:T,id:E,"aria-label":D,"aria-labelledby":O,"aria-describedby":k,"aria-invalid":A,"aria-required":j,onFocus:M,onBlur:N,onKeyDown:P,onKeyUp:F,className:I,children:L,ref:R,...z}=e,ce=o.useFieldContext(),B=o.useFieldControl({id:E,"aria-label":D,"aria-labelledby":O,"aria-describedby":k,"aria-invalid":A,"aria-required":j??T},{labelable:!1}),[V,H]=i.useControllable(y,b??(v?f.EMPTY_VALUES:``),e=>{x?.(typeof e==`string`?e:[...e])}),U=f.toValues(V),[W,G]=m.useState(!1),K=m.useRef(null),q=ne.useIsClient(),J=m.useRef(!1);m.useLayoutEffect(()=>{let e=K.current;e&&(J.current||(J.current=!0,C&&!S&&q&&e.focus()),G(!S&&a.isFocused(e)))},[C,S,q]);let Y=s.useListbox({open:W&&!S,mode:`standalone`,multiselect:v,selectedValues:U,loop:!1,disabledOptionsFocusable:ae,onSelect:(e,t)=>{if(S)return;if(!v){H(e);return}let{values:n,added:r}=f.toggleValue(U,e);H(n),d.announceToggle(oe,t?.item.label??e,r,n.length)},onActiveValueChange:ie,idPrefix:`listbox`}),{ref:le,...X}=Y.getListboxProps(),ue=te.useMergedRefs(R,K,le),Z=X[`aria-activedescendant`],[de,Q]=m.useState(!1),[fe,pe]=m.useState(Z);fe!==Z&&(pe(Z),Q(!1)),m.useEffect(()=>{let e=K.current;if(Z===void 0||!e||typeof IntersectionObserver>`u`)return;let t=Array.from(e.querySelectorAll(`[role="option"]`)).find(e=>e.id===Z);if(!t)return;let n=new IntersectionObserver(e=>{let t=e[e.length-1];t&&Q(!t.isIntersecting)},{root:e});return n.observe(t),()=>n.disconnect()},[Z]),l.useFormReset(K,()=>{if(!v){H(b??``);return}H(e=>f.resetValues(e,b))},w);let $=!B[`aria-label`]?.trim()&&!B[`aria-labelledby`]?.trim();m.useEffect(()=>{$&&n.warnOnce(`Listbox:unnamed`,g)},[$]);let me=e=>{!S&&p.isOwnEvent(e)&&Y.onKeyDown(e)},he=e=>{e.target===e.currentTarget&&G(!0)},ge=e=>{let t=e.currentTarget;e.target===t&&!a.isFocused(t)&&G(!1)};return(0,h.jsxs)(`ul`,{...z,...B,...X,id:B.id??X.id,tabIndex:S?void 0:X.tabIndex,"aria-activedescendant":X[`aria-activedescendant`],"aria-multiselectable":X[`aria-multiselectable`],...S?_:void 0,autoFocus:C||void 0,ref:ue,onKeyDown:r.composeEventHandlers(P,me),onKeyUp:r.composeEventHandlers(F,Y.onKeyUp),onFocus:r.composeEventHandlers(M,he,{checkDefaultPrevented:!1}),onBlur:r.composeEventHandlers(N,ge,{checkDefaultPrevented:!1}),className:t.cn(ee.listboxClassNames.root,`relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground`,Y.activeValue===null||de?c.focusRing:`focus:outline-hidden`,S&&`cursor-not-allowed opacity-50 *:pointer-events-none`,I),children:[v&&(0,h.jsx)(d.PickerAnnouncer,{}),(0,h.jsx)(u.ListboxProvider,{value:Y.context,children:L}),(0,h.jsx)(re.HiddenInput,{name:se,form:w,disabled:S,value:v?U:U[0]??``,type:`text`,required:T??ce?.required??!1,onInvalid:()=>K.current?.focus()})]})};v.displayName=`Listbox`;var y=u.Option,b=u.OptionGroup,x=Object.assign(v,{Option:u.Option,OptionGroup:u.OptionGroup});exports.Listbox=x,exports.ListboxOption=y,exports.ListboxOptionGroup=b;
+//# sourceMappingURL=Listbox.cjs.map

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

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