@mortenbrudvik/waveui 0.11.0 → 0.12.0

package/dist/components/input/Dropdown.mjs

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

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

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

package/dist/components/input/Option.cjs

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