@mortenbrudvik/waveui 0.15.0 → 0.16.0

package/dist/components/input/Dropdown.mjs

@@ -15,150 +15,165 @@ 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 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";
-import * as p from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { pickerButtonOffset as ve, pickerEndPadding as ye, pickerGlyphSize as c, pickerIconButtonClasses as be } from "./pickerStyles.mjs";
+import { showsExpandButton as xe } from "./Combobox.expand.mjs";
+import { ListboxSurface as Se, Option as l, OptionGroup as u, useListboxPopup as Ce } from "./Option.mjs";
+import { renderListboxItems as we, renderListboxWindow as Te, useDataModeWarnings as Ee, useItemsAndChildrenWarning as De, useShownListScroll as Oe } from "./Option.data.mjs";
+import { PickerAnnouncer as ke, announceToggle as Ae, defaultSelectionLabel as je } from "./pickerLabels.mjs";
+import { EMPTY_VALUES as d, resetValues as Me, toValues as Ne, toggleValue as Pe } from "./pickerValues.mjs";
+import * as f from "react";
+import { jsx as p, jsxs as m } 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, 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(), 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(rt), [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),
+var Fe = /* @__PURE__ */ new Map(), h = (l) => {
+	let { multiselect: u = !1, value: h, defaultValue: g, onValueChange: _, onOptionSelect: v, open: Ie, defaultOpen: Le, onOpenChange: Re, onActiveOptionChange: ze, disabledOptionsFocusable: Be = !1, placeholder: Ve = "Select an option", renderValue: y, disabled: b = !1, size: He, positioning: Ue, appearance: We, name: Ge, form: x, required: S, clearable: Ke = !1, expandIcon: C, labels: w, items: T, renderOption: E, virtualWindow: D, autoFocus: qe, tabIndex: Je, id: Ye, "aria-label": Xe, "aria-labelledby": Ze, "aria-describedby": Qe, "aria-invalid": $e, "aria-required": et, "aria-errormessage": tt, "aria-details": nt, onFocus: rt, onBlur: it, onKeyDown: at, onKeyUp: ot, controlRef: st, className: ct, children: O, ref: lt, ...ut } = l;
+	v !== void 0 && t("Dropdown", "onOptionSelect", "onValueChange");
+	let k = te(), dt = S ?? k?.required ?? !1, A = ne({
+		id: Ye,
+		"aria-label": Xe,
+		"aria-labelledby": Ze,
+		"aria-describedby": Qe,
+		"aria-invalid": $e,
+		"aria-required": et ?? S
+	}), ft = he(!1, A["aria-invalid"]), { size: j, appearance: M } = me(He, We), [pt, N] = o(h, g ?? (u ? d : ""), (e) => {
+		_?.(typeof e == "string" ? e : [...e]);
+	}), P = Ne(pt), [F, I] = o(Ie, (Le ?? !1) && !b, Re), L = F && !b, R = b && F;
+	f.useEffect(() => {
+		R && I(!1);
+	}, [R, I]);
+	let z = f.useRef(null), B = f.useRef(null), V = T !== void 0, H = f.useMemo(() => V ? Fe : re(O), [V, O]);
+	De("Dropdown", T, O), Ee("Dropdown", {
+		items: T,
+		renderOption: E,
+		virtualWindow: D,
+		children: O
+	});
+	let U = V ? D : void 0, W = ie({
+		open: L,
+		onOpenChange: (e) => I(e),
 		mode: "select-only",
-		multiselect: d,
-		disabledOptionsFocusable: x,
-		selectedValues: F,
+		multiselect: u,
+		disabledOptionsFocusable: Be,
+		items: T,
+		selectedValues: P,
 		onSelect: (e, t) => {
-			if (!d) {
-				P(e), y?.(e);
+			if (!u) {
+				N(e), v?.(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);
+			let { values: n, added: r } = Pe(P, e);
+			N(n), v?.(e), Ae(w, t?.item.label ?? H.get(e) ?? e, r, n.length);
 		},
-		onActiveValueChange: b,
+		onActiveValueChange: ze,
+		onScrollToItem: U ? (e) => U.scrollToIndex(e, { align: "auto" }) : void 0,
 		idPrefix: "dropdown-listbox"
-	}), 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
-	}), ct = s(B, $e), lt = s(V, Ze, at);
-	ge(V, () => {
-		if (!d) {
-			P(_ ?? "");
+	}), G = L && W.items.length > 0, { layerId: mt, setReference: ht, surfaceRef: gt, floatingProps: _t } = Ce({
+		positioning: Ue,
+		open: L,
+		surfaceOpen: G,
+		onDismiss: () => I(!1),
+		rootRef: z,
+		anchorRef: B
+	}), vt = s(z, lt), yt = s(B, st, ht), bt = s(G ? U?.scrollRef : void 0);
+	Oe(G, U, W.items, W.activeValue, P), ge(B, () => {
+		if (!u) {
+			N(g ?? "");
 			return;
 		}
-		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 = 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 !== "", ut = X ? C ? C(d ? [...F] : F[0] ?? "") : K : void 0, dt = (e) => {
-		if (e.key === "Escape" && R && !W && !e.nativeEvent.isComposing) {
-			L(!1);
+		N((e) => Me(e, g));
+	}, x);
+	let K = P.map((e) => W.getItem(e)?.label ?? H.get(e)).filter((e) => e !== void 0), q = u ? K.length > 0 ? (w?.selection ?? je)(K) : "" : K[0] ?? "", J = xe(C), { glyph: Y, button: X } = de(C);
+	f.useEffect(() => {
+		X && n("Dropdown:expandIcon-button", `Dropdown: \`expandIcon\` received ${X}; 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 />}\`.`);
+	}, [X]);
+	let Z = P.length > 0, Q = y ? Z : q !== "", xt = Z ? y ? y(u ? [...P] : P[0] ?? "") : q : void 0, St = (e) => {
+		if (e.key === "Escape" && L && !G && !e.nativeEvent.isComposing) {
+			I(!1);
 			return;
 		}
-		U.onKeyDown(e);
-	}, ft = () => {
-		P(d ? f : ""), L(!1), V.current?.focus();
-	}, 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,
-		...et,
-		ref: ct,
-		className: e(a.root, "relative inline-flex flex-col", Qe),
+		W.onKeyDown(e);
+	}, Ct = () => {
+		N(u ? d : ""), I(!1), B.current?.focus();
+	}, wt = Ke && Z, Tt = j === "small" ? "end-2" : "end-3", Et = A["aria-label"] === void 0 ? A["aria-labelledby"] ?? k?.labelId : A["aria-labelledby"], $ = {
+		selected: new Set(P),
+		activeValue: W.activeValue,
+		renderOption: E
+	};
+	return /* @__PURE__ */ m("div", {
+		"data-size": j,
+		"data-appearance": M,
+		...ut,
+		ref: vt,
+		className: e(a.root, "relative inline-flex flex-col", ct),
 		children: [
-			d && /* @__PURE__ */ m(Ce, {}),
-			/* @__PURE__ */ h("div", {
+			u && /* @__PURE__ */ p(ke, {}),
+			/* @__PURE__ */ m("div", {
 				className: "relative flex items-center",
-				children: [/* @__PURE__ */ h("button", {
+				children: [/* @__PURE__ */ m("button", {
 					type: "button",
-					...j,
-					...U.getComboboxProps(),
-					"aria-expanded": W,
-					"aria-errormessage": Ge,
-					"aria-details": Ke,
-					ref: lt,
-					disabled: w,
-					autoFocus: Le,
-					tabIndex: Re,
-					onClick: () => L((e) => !e),
-					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 ? 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")
+					...A,
+					...W.getComboboxProps(),
+					"aria-expanded": G,
+					"aria-errormessage": tt,
+					"aria-details": nt,
+					ref: yt,
+					disabled: b,
+					autoFocus: qe,
+					tabIndex: Je,
+					onClick: () => I((e) => !e),
+					onKeyDown: i(at, St),
+					onKeyUp: i(ot, W.onKeyUp),
+					onFocus: rt,
+					onBlur: it,
+					className: e(a.button, "relative flex w-full items-center justify-between py-0 text-start", ce[j], le[j], ue[j], oe[M], "text-foreground", ye(Number(wt) + Number(J), j), se, ae, ft && "border-destructive"),
+					children: [/* @__PURE__ */ p("span", {
+						className: e(a.value, "truncate", !Q && "text-muted-foreground"),
+						children: Q ? xt : Ve
+					}), J && (Y != null && ee(Y) ? r(Y, "span", e(a.expandIcon, "absolute inline-flex transition-transform motion-reduce:transition-none", Tt, G && "rotate-180"), { "aria-hidden": !0 }) : /* @__PURE__ */ p(fe, {
+						size: c(j, "chevron"),
+						className: e(a.expandIcon, "absolute transition-transform motion-reduce:transition-none", Tt, G && "rotate-180")
 					}))]
-				}), Q && /* @__PURE__ */ m("button", {
+				}), wt && /* @__PURE__ */ p("button", {
 					type: "button",
-					"aria-label": O?.clear ?? "Clear selection",
-					disabled: w,
+					"aria-label": w?.clear ?? "Clear selection",
+					disabled: b,
 					onMouseDown: (e) => e.preventDefault(),
-					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") })
+					onClick: Ct,
+					className: e(a.clearButton, be(j, M), ve(j, J ? 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__ */ p(pe, { size: c(j, "icon") })
 				})]
 			}),
-			/* @__PURE__ */ m(xe, {
-				listbox: U,
-				layerId: it,
-				surfaceRef: ot,
-				floatingProps: st,
-				open: R,
-				expanded: W,
-				listClassName: a.listbox,
+			/* @__PURE__ */ p(Se, {
+				listbox: W,
+				layerId: mt,
+				surfaceRef: gt,
+				floatingProps: _t,
+				open: L,
+				expanded: G,
+				listClassName: e(a.listbox, U && "[overflow-anchor:none]"),
 				surfaceClassName: a.surface,
-				"aria-label": j["aria-label"],
-				"aria-labelledby": pt,
-				children: k
+				"aria-label": A["aria-label"],
+				"aria-labelledby": Et,
+				listProps: U ? { ref: bt } : void 0,
+				children: V ? G && (U ? Te(W.items, U, $, a.spacer) : we(W.items, $)) : O
 			}),
-			/* @__PURE__ */ m(_e, {
-				name: Fe,
-				form: T,
-				disabled: w,
-				value: d ? F : F[0] ?? "",
+			/* @__PURE__ */ p(_e, {
+				name: Ge,
+				form: x,
+				disabled: b,
+				value: u ? P : P[0] ?? "",
 				type: "text",
-				required: tt,
-				onInvalid: () => V.current?.focus()
+				required: dt,
+				onInvalid: () => B.current?.focus()
 			})
 		]
 	});
 };
-g.displayName = "Dropdown";
-var _ = u, v = d, y = /* @__PURE__ */ Object.assign(g, {
-	Option: u,
-	OptionGroup: d
+h.displayName = "Dropdown";
+var g = l, _ = u, v = /* @__PURE__ */ Object.assign(h, {
+	Option: l,
+	OptionGroup: u
 });
 //#endregion
-export { y as Dropdown, _ as DropdownOption, v as DropdownOptionGroup };
+export { v as Dropdown, g as DropdownOption, _ 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","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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"}
+{"version":3,"file":"Dropdown.mjs","names":["React","NO_LABELS","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","dataMode","items","optionLabels","collectOptionLabels","children","useItemsAndChildrenWarning","useDataModeWarnings","activeWindow","virtualWindow","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","index","expanded","useListboxPopup","rootMergedRef","useMergedRefs","ref","buttonMergedRef","controlRef","setReference","listScrollRef","useShownListScroll","useFormReset","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","optionsState","appearance","cn","dropdownClassNames","className","PickerAnnouncer","composeEventHandlers","onKeyDown","onKeyUp","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","pickerEndPadding","inputFocus","disabledStyles","placeholder","slotRendersContent","renderSlot","ChevronDownIcon","pickerGlyphSize","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","ListboxSurface","renderListboxWindow","renderListboxItems","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, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { showsExpandButton } from './Combobox.expand';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n  ListboxSurface,\n  Option,\n  OptionGroup,\n  useListboxPopup,\n  type ListboxOptionRenderState,\n} from './Option';\nimport {\n  renderListboxItems,\n  renderListboxWindow,\n  useDataModeWarnings,\n  useItemsAndChildrenWarning,\n  useShownListScroll,\n} from './Option.data';\nimport { announceToggle, defaultSelectionLabel, PickerAnnouncer } from './pickerLabels';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/*  Dropdown                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface DropdownLabels {\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /**\n   * The text of the selected labels shown in the combobox with `multiselect`, in selection order;\n   * values without an option are left out. Replaces the button's joined value text.\n   * @default (labels) => labels.join(', ')\n   */\n  selection?: (labels: string[]) => string;\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Dropdown component. */\nexport interface DropdownProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`): the value is an array, options show\n   * a checkbox, Enter and Space toggle the highlighted option, a click toggles the clicked\n   * option, the list stays open, and each toggle is announced. A non-literal `multiselect={flag}`\n   * is a type error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values (Fluent's\n   * `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming).\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (every\n   * toggle with `multiselect`).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open dropdown\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A dropdown that starts disabled starts closed. The\n   * list renders only in the browser: it is closed in the server HTML and opens once the dropdown\n   * has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Called after the active (highlighted) option changes — opening, arrow keys, typeahead, the\n   * pointer — and with `null` when the list closes. It reports what `aria-activedescendant` points\n   * at, from an effect once the change commits. Fluent's `onActiveOptionChange` reports neither the\n   * pointer (its options have no hover highlight) nor the close.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * highlighted-by-default option may then be a disabled one too); they still cannot be selected\n   * (Enter, Space and a click do nothing and the list stays open), and in single-select mode,\n   * reaching one with Tab or Alt+ArrowUp closes the list without selecting it. Unlike Fluent,\n   * which always keeps disabled options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /**\n   * Placeholder text shown when no value is selected. It is not an accessible name: label the\n   * Dropdown with a `Field`, `aria-label` or `aria-labelledby`.\n   * @default 'Select an option'\n   */\n  placeholder?: string;\n  /**\n   * Renders the button's content while a value is selected (the placeholder shows otherwise), in\n   * place of the selected label (`labels.selection` with `multiselect`). It receives the raw\n   * value(s), never a label; the content must be non-interactive, and its text is the combobox's\n   * value, so image-only content leaves the value empty.\n   * @default the selected label (`labels.selection` with `multiselect`)\n   */\n  renderValue?: M extends true\n    ? (value: string[]) => React.ReactNode\n    : (value: string) => React.ReactNode;\n  /**\n   * Whether the dropdown is disabled and non-interactive. Turning it on while the listbox is open\n   * closes it (`onOpenChange(false)`).\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size; the multi-select value text and clear button follow it.\n   */\n  size?: CoreSize;\n  /**\n   * Advanced positioning of the popup (Fluent's `positioning`): `offset`, `fitViewport`,\n   * `matchReferenceWidth` and `fallbackPlacements` (tried in order when the requested side has no\n   * room). The popup opens below the field.\n   * @default `{ matchReferenceWidth: true, fitViewport: true }`\n   */\n  positioning?: PopupPositioningOptions;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Name of the value in form submissions (renders a hidden input; one per value with\n   * `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Dropdown is outside it. */\n  form?: string;\n  /** A value is required to submit the form (native constraint validation). */\n  required?: boolean;\n  /**\n   * Shows a clear button while a value is selected (shown disabled while `disabled`). It clears\n   * the value (every value with `multiselect`), closes the list and moves focus to the combobox\n   * button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph at the end of the button (default: a chevron). `null` or `undefined` keep it;\n   * `false`, or a value that renders nothing, hides it (the button's end padding follows,\n   * together with `clearable`). The default chevron's size and the glyph's offset follow\n   * `size`. Decorative content rendered inside the button: a `<button>` or `Button` passed\n   * here is not nested (its children become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The clear button's name and, with `multiselect`, the selected-labels text and the toggle\n   * announcements, for localization. Unset members keep their English defaults.\n   */\n  labels?: DropdownLabels;\n  /**\n   * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,\n   * `disabled` and `hidden`; values unique). The open list renders one option per item that is\n   * not `hidden` (see `renderOption`); the closed list renders none. The keys, typeahead, the\n   * selection and the button's label text follow `items`, also for a selected item whose option\n   * is not rendered. The children are neither read nor rendered: passing both warns once in\n   * development. Each option gets `aria-posinset` and `aria-setsize` from its place among the\n   * shown items, and keeps one id per value. Without it, the options are the `Option` children.\n   */\n  items?: readonly ListboxItem[];\n  /**\n   * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`\n   * among the shown options). Return an `Option`, or an option component of your own on\n   * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,\n   * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its\n   * state, its position (`aria-posinset` and `aria-setsize`, which new `items` change) or the\n   * function itself changes, so pass a stable function in a long list. Ignored without `items`,\n   * with a development warning.\n   * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`\n   */\n  renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React.ReactNode;\n  /**\n   * Data mode: renders only the options in view of a long list, plus an overscan, and spacers\n   * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result\n   * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.\n   * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a\n   * development warning (a window renders a flat list).\n   *\n   * The open popup's list is the window's scroller, so it needs no height of yours: it scrolls\n   * within its own maximum height (15rem, 240 pixels at the default root size, less where the\n   * viewport has no room). Every option is exactly `itemSize` tall (the list sets its height,\n   * after the option's own `style`), so an option's content must fit in it: the default `Option`\n   * with one line of text is 32 pixels tall.\n   *\n   * The window counts the shown options (the items that are not `hidden`). The keys and typeahead\n   * move over all of them (Home and End to the first and the last, PageUp and PageDown by ten); the\n   * active option stays rendered while it is scrolled away, so `aria-activedescendant` always names\n   * an element, and when a key makes it active the list and the window move to it in the same\n   * update. Opening the list scrolls the active option (the selected one, by default) to the\n   * middle of the list, and again once the popup's positioning has given the list its height (a\n   * short viewport) unless it was scrolled first. A closed list renders no option. The browser's\n   * scroll anchoring is off on a windowed list (the window lays the options out).\n   */\n  virtualWindow?: VirtualWindow;\n  /** Called when the `<button role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Called when the `<button role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /**\n   * Called on a key press on the `<button role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Called when a key is released on the `<button role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the `<button role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The Dropdown component's type: a multi-select signature, then the single-select one. */\nexport interface DropdownComponent {\n  (props: DropdownProps<true> & { multiselect: true }): React.ReactNode;\n  (props: DropdownProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\n/** The labels read from the children in data mode, where none are read. */\nconst NO_LABELS: ReadonlyMap<string, string> = new Map<string, string>();\n\nconst DropdownRoot = (props: DropdownProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    onActiveOptionChange,\n    disabledOptionsFocusable = false,\n    placeholder = 'Select an option',\n    renderValue,\n    disabled = false,\n    size: sizeProp,\n    positioning,\n    appearance: appearanceProp,\n    name,\n    form,\n    required,\n    clearable = false,\n    expandIcon,\n    labels,\n    items,\n    renderOption,\n    virtualWindow,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Dropdown', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the display text and the clear/reset logic: a single value is its\n  // own one-element array, and a `value` passed as `null`/`undefined` from JavaScript (bypassing\n  // the type system) is none rather than a crash, as 0.7 did for the single-select string.\n  const values = toValues(value);\n\n  // A dropdown that starts disabled never shows its list, so it starts closed (no close to report\n  // later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && !disabled,\n    onOpenChange,\n  );\n  const open = openState && !disabled;\n  // Disabling also closes the list itself, not only the derived `open`, so enabling it again does\n  // not reopen it without a user action. The close is reported through onOpenChange (a consumer\n  // callback from an effect, C-HOOKS); a controlled `open` that stays true is not shown meanwhile.\n  const lockedOpen = disabled && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n  // Data mode reads every label from `items` (listbox.getItem), so the children are not walked.\n  const dataMode = items !== undefined;\n  const optionLabels = React.useMemo<ReadonlyMap<string, string>>(\n    () => (dataMode ? NO_LABELS : collectOptionLabels(children)),\n    [dataMode, children],\n  );\n  useItemsAndChildrenWarning('Dropdown', items, children);\n  useDataModeWarnings('Dropdown', { items, renderOption, virtualWindow, children });\n  // A window renders data mode only.\n  const activeWindow = dataMode ? virtualWindow : undefined;\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'select-only',\n    multiselect,\n    disabledOptionsFocusable,\n    items,\n    selectedValues: values,\n    onSelect: (next, details) => {\n      if (!multiselect) {\n        // 0.7 order: the value callback first, the deprecated one after.\n        setValue(next);\n        onOptionSelect?.(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      onOptionSelect?.(next);\n      // The committed option's label: the item useListbox passed in `details` (its own result,\n      // `listbox`, cannot be read from inside the options object passed to it), else the label\n      // read from `children` before the option registered, else the raw value. Announces a\n      // toggle the user made (D41): never a controlled change, a clear or a form reset, none of\n      // which reach this callback.\n      announceToggle(\n        labels,\n        details?.item.label ?? optionLabels.get(next) ?? next,\n        added,\n        updated.length,\n      );\n    },\n    onActiveValueChange: onActiveOptionChange,\n    // An active option that the window does not render (an adapter that keeps nothing): scrolled\n    // to by its index among the shown options, the window's count.\n    onScrollToItem: activeWindow\n      ? (index) => activeWindow.scrollToIndex(index, { align: 'auto' })\n      : undefined,\n    idPrefix: 'dropdown-listbox',\n  });\n\n  const expanded = open && listbox.items.length > 0;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    positioning,\n    open,\n    surfaceOpen: expanded,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: buttonRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const buttonMergedRef = useMergedRefs<HTMLButtonElement>(buttonRef, controlRef, setReference);\n  // The window scrolls the shown list only, which mounts with the popup (C-POPUPS: the window\n  // holds it in state); the closed list in place is another, hidden element.\n  const listScrollRef = useMergedRefs<HTMLUListElement>(\n    expanded ? activeWindow?.scrollRef : undefined,\n  );\n  useShownListScroll(expanded, activeWindow, listbox.items, listbox.activeValue, values);\n\n  useFormReset(\n    buttonRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  const labelOf = (v: string) => listbox.getItem(v)?.label ?? optionLabels.get(v);\n  const shownLabels = values.map(labelOf).filter((label): label is string => label !== undefined);\n  const displayText = multiselect\n    ? shownLabels.length > 0\n      ? (labels?.selection ?? defaultSelectionLabel)(shownLabels)\n      : ''\n    : (shownLabels[0] ?? '');\n\n  // D15: the optional-indicator rule (Phase 1 D21) shared with Combobox's expand button, and the\n  // glyph slot rule shared with SplitButton, MenuButton `menuIcon` and Combobox/TimePicker\n  // `expandIcon` (C-SLOTS).\n  const showExpand = showsExpandButton(expandIcon);\n  const { glyph: expandGlyph, button: expandIconButton } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (expandIconButton) {\n      warnOnce(\n        'Dropdown:expandIcon-button',\n        `Dropdown: \\`expandIcon\\` received ${expandIconButton}; its children render as the ` +\n          'glyph of the combobox button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [expandIconButton]);\n\n  // D15: `renderValue` replaces the button's content while a value is selected, given the raw\n  // value(s) — never a label — so it is called only while `values` holds any (never for `''`/\n  // `[]`); without it, the selected label(s) computed above show as in 0.7.\n  const hasValue = values.length > 0;\n  const showValue = renderValue ? hasValue : displayText !== '';\n  const valueNode = !hasValue\n    ? undefined\n    : renderValue\n      ? (renderValue as (value: string | string[]) => React.ReactNode)(\n          multiselect ? [...values] : (values[0] ?? ''),\n        )\n      : displayText;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Escape' && open && !expanded && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close, but leave Escape to an enclosing layer\n      // (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The button disappears with the value, so focus moves to the combobox explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue(multiselect ? EMPTY_VALUES : '');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && hasValue;\n  // The expand glyph's inline-end offset per size (P4-01), shared by the chevron and a consumer\n  // glyph.\n  const expandOffset = size === 'small' ? 'end-2' : 'end-3';\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  // What every option of data mode is drawn from, besides its item.\n  const optionsState = {\n    selected: new Set(values),\n    activeValue: listbox.activeValue,\n    renderOption,\n  };\n\n  return (\n    <div\n      data-size={size}\n      data-appearance={appearance}\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(dropdownClassNames.root, 'relative inline-flex flex-col', className)}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <div className=\"relative flex items-center\">\n        <button\n          type=\"button\"\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={buttonMergedRef}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          onClick={() => setOpen((current) => !current)}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            dropdownClassNames.button,\n            // Every padding is set here (C-NATIVE), not left to an app-wide `button` rule. The end\n            // padding keeps the text clear of the chevron (and of the clear button while it shows).\n            'relative flex w-full items-center justify-between py-0 text-start',\n            inputHeightClasses[size],\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground',\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span\n            className={cn(\n              dropdownClassNames.value,\n              'truncate',\n              !showValue && 'text-muted-foreground',\n            )}\n          >\n            {showValue ? valueNode : placeholder}\n          </span>\n          {showExpand &&\n            (expandGlyph != null && slotRendersContent(expandGlyph) ? (\n              renderSlot(\n                expandGlyph,\n                'span',\n                cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute inline-flex transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                ),\n                { 'aria-hidden': true },\n              )\n            ) : (\n              <ChevronDownIcon\n                size={pickerGlyphSize(size, 'chevron')}\n                className={cn(\n                  dropdownClassNames.expandIcon,\n                  'absolute transition-transform motion-reduce:transition-none',\n                  expandOffset,\n                  expanded && 'rotate-180',\n                )}\n              />\n            ))}\n        </button>\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus on the combobox while the pointer clears it.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              dropdownClassNames.clearButton,\n              pickerIconButtonClasses(size, appearance),\n              // Before the chevron while it shows, else at the end.\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n          </button>\n        )}\n      </div>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        // A windowed list is laid out by the window: the browser's scroll anchoring only fights it.\n        listClassName={cn(dropdownClassNames.listbox, activeWindow && '[overflow-anchor:none]')}\n        surfaceClassName={dropdownClassNames.surface}\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n        listProps={activeWindow ? { ref: listScrollRef } : undefined}\n      >\n        {/* Data mode: the options of the shown items while the list shows (labels come from\n            `items`, so a closed list needs none), or the window's; the children are ignored. */}\n        {!dataMode\n          ? children\n          : expanded &&\n            (activeWindow\n              ? renderListboxWindow(\n                  listbox.items,\n                  activeWindow,\n                  optionsState,\n                  dropdownClassNames.spacer,\n                )\n              : renderListboxItems(listbox.items, optionsState))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </div>\n  );\n};\nDropdownRoot.displayName = 'Dropdown';\n\n/** Flat name of `Dropdown.Option` for React Server Components. */\nexport const DropdownOption = Option;\n/** Flat name of `Dropdown.OptionGroup` for React Server Components. */\nexport const DropdownOptionGroup = OptionGroup;\n\n/**\n * A select-only combobox (APG): a button that opens a listbox of `Option`s. Enter, Space,\n * ArrowDown/ArrowUp, Home/End and typing a character open it and move the highlight\n * (`aria-activedescendant`); Enter/Space select, Tab selects the highlighted option and moves on,\n * Escape closes. The button's chevron (see `expandIcon`) turns while the list is open, and\n * `renderValue` replaces its content while a value is selected. `clearable` adds a clear button,\n * a tab stop after the combobox button; both sit in a wrapper `<div>` inside the root.\n *\n * `multiselect` turns the value into an array (Fluent's `selectedOptions`): options draw a\n * checkbox; Enter and Space toggle the highlighted option, a click toggles the clicked option, and\n * the list stays open (Tab, Escape and Alt+ArrowUp close without committing); the button shows the\n * selected labels in selection order (`labels.selection`, replacing the placeholder while any are\n * selected, values without an option left out) and every toggle the user makes is announced\n * (`labels.added`/`labels.removed`, never for a controlled change, a clear or a form reset).\n * `clearable` then clears every value. A non-literal `multiselect={flag}` is a type error: render\n * two elements, one for each mode.\n *\n * **Data mode**: `items` passes the options as data instead of children. The open list renders an\n * option per item (`renderOption` draws it, an `Option` with the item's label by default) and the\n * closed list none; the keys, typeahead and the button's text follow the data, and each option\n * carries `aria-posinset` and `aria-setsize`. A long list takes a `virtualWindow` (from\n * `useVirtualWindow({ itemSize })`): the open list then renders only the options in view, plus an\n * overscan, with spacers for the others, every option `itemSize` tall; the active option stays\n * rendered, and opening scrolls it to the middle of the list.\n *\n * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`\n * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`\n * attributes and the remaining props stay on the root `<div>`. Inside a `Field` the button is\n * labelled and described by it — otherwise give it an `aria-label`. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission (one hidden input per value with\n * `multiselect`), validation and reset (a `multiselect` reset is compared by content, so restoring\n * the same values reports nothing). The open listbox renders in a portal; while closed it stays\n * in the DOM, hidden.\n *\n * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\n *\n * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the\n * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).\n */\nexport const Dropdown = /* @__PURE__ */ Object.assign(DropdownRoot, {\n  Option,\n  OptionGroup,\n}) as DropdownComponent;\n"],"mappings":"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"}

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