@mortenbrudvik/waveui 0.10.0 → 0.11.0

package/dist/components/input/TagPicker.parts.mjs

@@ -0,0 +1,425 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { slotRendersContent as n } from "../../lib/slot.mjs";
+import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
+import { tagPickerButtonClassNames as i, tagPickerClassNames as a, tagPickerControlClassNames as o, tagPickerGroupClassNames as s, tagPickerInputClassNames as c, tagPickerListClassNames as l } from "../../lib/classNames.mjs";
+import { getArrowIntent as u, getDirection as d } from "../../lib/direction.mjs";
+import { FOCUSABLE_SELECTOR as f, isFocusable as p } from "../../lib/focus.mjs";
+import { useMergedRefs as m } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as h } from "../../lib/aria.mjs";
+import { focusRing as g, inputAppearanceClasses as _, inputFocusWithin as v } from "../../lib/styles.mjs";
+import { MERGED_DISABLED_FOCUSABLE_PROPS as y } from "../button/Button.slots.mjs";
+import { DismissIcon as b } from "../../lib/icons.mjs";
+import { pickerButtonOffset as x, pickerEndPadding as S, pickerGlyphSize as C, pickerIconButtonClasses as w } from "./pickerStyles.mjs";
+import { PickerExpandButton as T, showsExpandButton as E } from "./Combobox.expand.mjs";
+import { ListboxSurface as D, Option as O, OptionGroup as k } from "./Option.mjs";
+import { TagPickerControlContext as ee, useTagPickerContext as A, useTagPickerControlContext as j } from "./TagPicker.context.mjs";
+import { usePreserveFocus as te } from "../../hooks/usePreserveFocus.mjs";
+import { TagGroupHostContext as ne, TagHostContext as re } from "../data-display/TagGroup.context.mjs";
+import { tagRootClasses as ie } from "../data-display/tagStyles.mjs";
+import { Tag as ae } from "../data-display/Tag.mjs";
+import { TagGroup as oe } from "../data-display/TagGroup.mjs";
+import { TagPickerOption as M } from "./TagPicker.option.mjs";
+import * as N from "react";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+//#region src/components/input/TagPicker.parts.tsx
+var L = {
+	medium: {
+		control: "gap-1 px-2 py-1.5",
+		trigger: "py-0.5 text-body-1"
+	},
+	large: {
+		control: "gap-1.5 px-2.5 py-2",
+		trigger: "py-1 text-body-1"
+	},
+	"extra-large": {
+		control: "gap-1.5 px-3 py-2.5",
+		trigger: "py-1 text-body-2"
+	}
+}, R = {
+	medium: "top-1.5",
+	large: "top-1.5",
+	"extra-large": "top-2.25"
+};
+function z(e) {
+	return Array.from(e.querySelectorAll(f)).filter((t) => p(t) && !t.closest("[hidden]") && t.closest("[data-wave-tag-group]") === e);
+}
+function B(e) {
+	return e.shiftKey || e.ctrlKey || e.altKey || e.metaKey ? !1 : u(e.key, {
+		orientation: "horizontal",
+		dir: d(e.currentTarget)
+	}) === "prev";
+}
+function se(e) {
+	let [t, n] = N.useState(!1), [r, i] = N.useState(!1), [a, o] = N.useState(e), s = r;
+	return a !== e && (o(e), s = e && t, s !== r && i(s)), {
+		held: e && s,
+		onFocus: (e) => {
+			e.target === e.currentTarget && n(!0);
+		},
+		onBlur: (e) => {
+			e.target === e.currentTarget && (e.relatedTarget !== null || e.currentTarget.ownerDocument.hasFocus()) && (n(!1), i(!1));
+		}
+	};
+}
+var ce = { disabled: !0 };
+function V({ ctx: t, position: n }) {
+	let r = N.useRef(null), { triggerRef: i } = t;
+	te(r, () => i.current);
+	let o = se(t.disabled), s = t.disabled ? o.held ? y : ce : void 0;
+	return /* @__PURE__ */ F("button", {
+		type: "button",
+		ref: r,
+		"aria-label": t.labels.clear,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: () => t.clear(),
+		...s,
+		onFocus: o.onFocus,
+		onBlur: o.onBlur,
+		className: e(a.clearButton, R[t.size], w(t.coreSize, t.appearance), x(t.coreSize, n), g, "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed"),
+		children: /* @__PURE__ */ F(b, { size: C(t.coreSize, "icon") })
+	});
+}
+V.displayName = "TagPickerClearButton";
+function H({ ctx: t, expandIcon: n, children: i, className: s, onMouseDown: c, ref: l, ...u }) {
+	let { registerTrigger: d, setReference: p, controlRef: h } = t, g = N.useMemo(() => ({ registerTrigger: d }), [d]), y = m(l, h, p), b = n === void 0 ? t.expandIcon : n, x = E(b), C = t.clearable && t.selected.length > 0 && !t.readOnly, w = +!!x + +!!C, D = (e) => {
+		if (e.button !== 0) return;
+		let n = e.currentTarget, r = e.target;
+		if (!(r instanceof Element) || !n.contains(r)) return;
+		let i = r.closest(f);
+		i && n.contains(i) || t.disabled || (e.preventDefault(), t.interactive && t.toggleOpen(), t.focusTrigger());
+	};
+	return /* @__PURE__ */ F(ee.Provider, {
+		value: g,
+		children: /* @__PURE__ */ I("div", {
+			"data-wave-tagpicker-control": "",
+			role: "group",
+			"aria-disabled": t.disabled || void 0,
+			...u,
+			ref: y,
+			className: e(o.root, a.control, "relative flex flex-wrap items-center", L[t.size].control, _[t.appearance], v, t.invalidLook && "border-destructive", S(w, t.coreSize), t.disabled && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", t.collapsed && "flex-nowrap", s),
+			onMouseDown: r(c, D),
+			children: [
+				i ?? /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(K, {}), /* @__PURE__ */ F(Y, {})] }),
+				C && /* @__PURE__ */ F(V, {
+					ctx: t,
+					position: x ? 2 : 1
+				}),
+				x && /* @__PURE__ */ F(T, {
+					component: n === void 0 ? "TagPicker" : "TagPicker.Control",
+					expandIcon: b,
+					label: t.labels.expand,
+					expanded: t.expanded,
+					listboxId: t.listbox.listboxId,
+					disabled: t.disabled || t.readOnly,
+					onToggle: () => {
+						t.toggleOpen(), t.focusTrigger();
+					},
+					size: t.coreSize,
+					appearance: t.appearance,
+					dimDisabled: !t.disabled,
+					className: e(a.expandButton, R[t.size]),
+					iconClassName: a.expandIcon
+				})
+			]
+		})
+	});
+}
+H.displayName = "TagPickerControlImpl";
+var U = (e) => {
+	let t = A("TagPicker.Control");
+	return t ? /* @__PURE__ */ F(H, {
+		...e,
+		ctx: t
+	}) : null;
+};
+U.displayName = "TagPickerControl";
+function W({ ctx: e, value: t }) {
+	let r = e.labelOf(t), i = e.labels.remove(r), o = N.useMemo(() => ({
+		dismissName: i,
+		dismissButtonClassName: a.removeButton
+	}), [i]), s = e.entryOf(t)?.media, c = n(s), l = N.useMemo(() => c ? {
+		children: s,
+		"aria-hidden": !0
+	} : void 0, [c, s]);
+	return /* @__PURE__ */ F(re.Provider, {
+		value: o,
+		children: /* @__PURE__ */ F(ae, {
+			value: t,
+			className: a.tag,
+			media: l,
+			children: r
+		})
+	});
+}
+W.displayName = "TagPickerDefaultTag";
+function G({ ctx: n, children: i, "aria-label": o, className: c, onKeyDown: l, onClickCapture: f, ref: p, ...h }) {
+	let { groupRef: g, chipRef: _, hiddenValues: v, disabled: y, focusTrigger: b } = n, x = m(p, g), S = N.useRef(!1), C = N.useMemo(() => ({
+		removalFocus: "next",
+		hiddenValues: v,
+		dimDisabled: !y
+	}), [v, y]), w = i == null, T = w && n.warnsUnknownValues ? n.selected.filter((e) => n.entryOf(e) === void 0).join("\0") : "";
+	if (N.useEffect(() => {
+		T && t("TagPicker:unknown-value", `TagPicker: the selected value(s) ${T.split("\0").map((e) => `"${e}"`).join(", ")} match no option; the raw value is shown as the tag label.`);
+	}, [T]), n.selected.length === 0) return null;
+	let E = (e) => {
+		let t = e.target;
+		if (!(t instanceof HTMLElement)) return;
+		let n = z(e.currentTarget), r = n.indexOf(t);
+		if (r === -1) return;
+		if (e.key === "Escape") {
+			e.preventDefault(), b();
+			return;
+		}
+		let i = u(e.key, {
+			orientation: "horizontal",
+			dir: d(t)
+		});
+		i === "prev" && r > 0 ? (e.preventDefault(), n[r - 1].focus()) : i === "next" && (e.preventDefault(), r < n.length - 1 ? n[r + 1].focus() : b());
+	}, D = (e) => {
+		S.current && b(), n.removeTag(e);
+	}, O = (e) => {
+		f?.(e), e.target instanceof Node && e.currentTarget.contains(e.target) && (S.current = e.detail > 0);
+	}, k = v?.size ?? 0;
+	return /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(ne.Provider, {
+		value: C,
+		children: /* @__PURE__ */ F(oe, {
+			role: "list",
+			"aria-label": o ?? n.labels.selected,
+			dismissible: !n.readOnly,
+			disabled: y,
+			size: n.tagSize,
+			appearance: n.tagAppearance,
+			shape: "rounded",
+			onDismiss: D,
+			fallbackFocusRef: n.triggerRef,
+			...h,
+			ref: x,
+			className: e(s.root, a.group, "flex flex-wrap items-center gap-1", n.collapsed && "min-w-0 flex-nowrap overflow-hidden whitespace-nowrap *:shrink-0", c),
+			onKeyDown: r(l, E),
+			onClickCapture: O,
+			children: w ? n.selected.map((e) => /* @__PURE__ */ F(W, {
+				ctx: n,
+				value: e
+			}, e)) : i
+		})
+	}), k > 0 && /* @__PURE__ */ F("span", {
+		ref: _,
+		"aria-hidden": "true",
+		className: e(a.overflowCount, ie({
+			size: n.tagSize,
+			appearance: n.tagAppearance,
+			shape: "rounded"
+		}), "shrink-0 cursor-default"),
+		onMouseDown: (e) => {
+			e.preventDefault(), b();
+		},
+		children: n.labels.overflowCount(k)
+	})] });
+}
+G.displayName = "TagPickerGroupImpl";
+var K = (e) => {
+	let t = A("TagPicker.Group");
+	return t ? /* @__PURE__ */ F(G, {
+		...e,
+		ctx: t
+	}) : null;
+};
+K.displayName = "TagPickerGroup";
+function q(e, t) {
+	let n = t["aria-label"] !== void 0 || t["aria-labelledby"] !== void 0;
+	return {
+		id: t.id ?? e.triggerProps.id,
+		"aria-label": n ? t["aria-label"] : e.triggerProps["aria-label"],
+		"aria-labelledby": n ? t["aria-labelledby"] : e.triggerProps["aria-labelledby"]
+	};
+}
+function J({ ctx: t, control: n, placeholder: i, id: o, "aria-label": s, "aria-labelledby": l, "aria-describedby": u, onChange: d, onClick: f, onKeyDown: p, onKeyUp: g, onFocus: _, onBlur: v, className: y, ref: b, ...x }) {
+	let { registerTrigger: S } = n;
+	N.useLayoutEffect(() => S("input"), [S]);
+	let { triggerProps: C, inputProps: w, listbox: T } = t, E = m(b, t.triggerRef, w.controlRef), D = (e) => {
+		if (t.interactive) {
+			if (e.key === "Escape" && t.open && !t.surfaceOpen && !e.nativeEvent.isComposing) {
+				t.setOpen(!1);
+				return;
+			}
+			if (t.selected.length > 0) {
+				if (e.key === "Backspace" && t.query === "") {
+					e.preventDefault(), t.focusLastTagControl();
+					return;
+				}
+				let n = e.currentTarget;
+				if (B(e) && n.selectionStart === 0 && n.selectionEnd === 0 && t.focusLastTagControl()) {
+					e.preventDefault();
+					return;
+				}
+			}
+			T.onKeyDown(e);
+		}
+	}, O = q(t, {
+		id: o,
+		"aria-label": s,
+		"aria-labelledby": l
+	});
+	return /* @__PURE__ */ F("input", {
+		type: "text",
+		autoComplete: w.autoComplete,
+		autoCapitalize: w.autoCapitalize,
+		autoCorrect: w.autoCorrect,
+		maxLength: w.maxLength,
+		inputMode: w.inputMode,
+		spellCheck: w.spellCheck,
+		enterKeyHint: w.enterKeyHint,
+		"aria-invalid": C["aria-invalid"],
+		"aria-required": C["aria-required"],
+		"aria-errormessage": C["aria-errormessage"],
+		"aria-details": C["aria-details"],
+		tabIndex: C.tabIndex,
+		autoFocus: C.autoFocus,
+		...x,
+		...O,
+		...T.getComboboxProps(),
+		"aria-expanded": t.expanded,
+		"aria-describedby": h(u, C["aria-describedby"], t.summaryId),
+		ref: E,
+		disabled: t.disabled,
+		readOnly: t.readOnly,
+		placeholder: t.selected.length === 0 ? i ?? t.placeholder : "",
+		value: t.query,
+		onChange: r(d, (e) => t.editText(e.target.value)),
+		onClick: r(f, () => {
+			t.interactive && !t.open && t.setOpen(!0);
+		}),
+		onKeyDown: r(p, r(w.onKeyDown, D)),
+		onKeyUp: r(g, r(w.onKeyUp, T.onKeyUp)),
+		onFocus: r(_, w.onFocus),
+		onBlur: r(v, w.onBlur),
+		className: e(c.root, a.input, "min-w-15 flex-1 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-hidden", L[t.size].trigger, y)
+	});
+}
+J.displayName = "TagPickerInputImpl";
+var Y = (e) => {
+	let t = A("TagPicker.Input"), n = j("TagPicker.Input", t !== null);
+	return !t || !n ? null : /* @__PURE__ */ F(J, {
+		...e,
+		ctx: t,
+		control: n
+	});
+};
+Y.displayName = "TagPickerInput";
+function X({ ctx: t, control: n, placeholder: a, id: o, "aria-label": s, "aria-labelledby": c, "aria-describedby": l, onClick: u, onKeyDown: d, onKeyUp: f, className: p, ref: g, ..._ }) {
+	let { registerTrigger: v } = n;
+	N.useLayoutEffect(() => v("button"), [v]);
+	let { triggerProps: y, listbox: b } = t, x = m(g, t.triggerRef), S = (e) => {
+		if (t.interactive) {
+			if (t.selected.length > 0 && (e.key === "Backspace" || B(e)) && t.focusLastTagControl()) {
+				e.preventDefault();
+				return;
+			}
+			b.onKeyDown(e);
+		}
+	}, C = { ...b.getComboboxProps() };
+	delete C["aria-autocomplete"];
+	let w = q(t, {
+		id: o,
+		"aria-label": s,
+		"aria-labelledby": c
+	});
+	return /* @__PURE__ */ F("button", {
+		type: "button",
+		"aria-invalid": y["aria-invalid"],
+		"aria-required": y["aria-required"],
+		"aria-errormessage": y["aria-errormessage"],
+		"aria-details": y["aria-details"],
+		tabIndex: y.tabIndex,
+		autoFocus: y.autoFocus,
+		..._,
+		...w,
+		...C,
+		"aria-expanded": t.expanded,
+		"aria-readonly": t.readOnly || void 0,
+		"aria-describedby": h(l, y["aria-describedby"], t.summaryId),
+		ref: x,
+		disabled: t.disabled,
+		onClick: r(u, () => t.toggleOpen()),
+		onKeyDown: r(d, S),
+		onKeyUp: r(f, b.onKeyUp),
+		className: e(i.root, "min-w-15 flex-1 border-0 bg-transparent px-0 text-start text-foreground focus:outline-hidden disabled:cursor-not-allowed", L[t.size].trigger, p),
+		children: t.selected.length === 0 && /* @__PURE__ */ F("span", {
+			className: "text-muted-foreground",
+			children: a ?? t.placeholder
+		})
+	});
+}
+X.displayName = "TagPickerButtonImpl";
+var Z = (e) => {
+	let t = A("TagPicker.Button"), n = j("TagPicker.Button", t !== null);
+	return !t || !n ? null : /* @__PURE__ */ F(X, {
+		...e,
+		ctx: t,
+		control: n
+	});
+};
+Z.displayName = "TagPickerButton";
+function Q({ ctx: t, children: n, "aria-label": r, "aria-labelledby": i, className: o, ref: s, ...c }) {
+	let { registerList: u, listbox: d } = t;
+	N.useLayoutEffect(() => u(), [u]);
+	let f = t.showCreate ? t.labels.create(t.createText) : "", p = t.showCreate ? /* @__PURE__ */ F(O, {
+		value: t.createValue,
+		label: f,
+		"data-create": "",
+		className: e(a.option, a.createOption),
+		children: f
+	}, t.createValue) : null, m;
+	m = t.dataMode ? t.expanded && d.items.map((e) => {
+		if (e.value === t.createValue) return p;
+		let n = t.entryOf(e.value);
+		return /* @__PURE__ */ F(M, {
+			value: e.value,
+			label: e.label,
+			media: n?.media,
+			secondaryContent: n?.secondaryContent,
+			className: a.option,
+			children: e.label
+		}, e.value);
+	}) : /* @__PURE__ */ I(P, { children: [n, p] });
+	let h = r !== void 0 || i !== void 0;
+	return /* @__PURE__ */ F(D, {
+		listbox: d,
+		layerId: t.layerId,
+		surfaceRef: t.surfaceRef,
+		floatingProps: t.floatingProps,
+		open: t.open,
+		expanded: t.expanded,
+		showCheck: !1,
+		listClassName: e(l.root, a.listbox, o),
+		surfaceClassName: a.surface,
+		emptyContent: t.emptyContent ? /* @__PURE__ */ F("div", {
+			"aria-hidden": "true",
+			className: e(a.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
+			children: t.labels.noMatches
+		}) : void 0,
+		"aria-label": h ? r : t.listLabel["aria-label"],
+		"aria-labelledby": h ? i : t.listLabel["aria-labelledby"],
+		listProps: {
+			...c,
+			ref: s
+		},
+		children: m
+	});
+}
+Q.displayName = "TagPickerListImpl";
+var $ = (e) => {
+	let t = A("TagPicker.List");
+	return t ? /* @__PURE__ */ F(Q, {
+		...e,
+		ctx: t
+	}) : null;
+};
+$.displayName = "TagPickerList";
+var le = k;
+//#endregion
+export { Z as TagPickerButton, U as TagPickerControl, K as TagPickerGroup, Y as TagPickerInput, $ as TagPickerList, le as TagPickerOptionGroup, z as tagListControls };
+
+//# sourceMappingURL=TagPicker.parts.mjs.map

package/dist/components/input/TagPicker.parts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.parts.mjs","names":["_Fragment","React","TAG_PICKER_SIZE","END_BUTTON_TOP","tagListControls","group","FOCUSABLE_SELECTOR","isFocusable","element","isPreviousArrow","event","getArrowIntent","getDirection","useClearButtonHold","focused","setFocused","held","setHeld","prevDisabled","setPrevDisabled","disabled","isHeld","NATIVELY_DISABLED","TagPickerClearButton","ref","ctx","triggerRef","hold","stateProps","MERGED_DISABLED_FOCUSABLE_PROPS","cn","tagPickerClassNames","pickerIconButtonClasses","pickerButtonOffset","position","focusRing","DismissIcon","pickerGlyphSize","TagPickerControlImpl","rest","controlContext","registerTrigger","mergedRef","useMergedRefs","controlRef","setReference","glyph","expandIcon","showExpand","showsExpandButton","showClear","buttons","handlePress","control","target","focusable","TagPickerControlContext","tagPickerControlClassNames","inputAppearanceClasses","inputFocusWithin","pickerEndPadding","className","composeEventHandlers","onMouseDown","children","Fragment","TagPickerGroup","TagPickerInput","PickerExpandButton","TagPickerControl","useTagPickerContext","props","TagPickerDefaultTag","label","value","dismissName","host","media","hasMedia","slotRendersContent","mediaSlot","TagHostContext","Tag","TagPickerGroupImpl","ariaLabel","groupRef","pointerRef","hiddenValues","usesDefaultTags","unknownValues","warnOnce","v","handleKeyDown","controls","index","focusTrigger","intent","handleDismiss","handleClickCapture","onClickCapture","hiddenCount","TagGroupHostContext","TagGroup","tagPickerGroupClassNames","onKeyDown","chipRef","tagRootClasses","triggerNaming","named","own","TagPickerInputImpl","ariaLabelledBy","ariaDescribedBy","inputProps","input","naming","triggerProps","listbox","joinIds","placeholder","onChange","onClick","onKeyUp","onFocus","onBlur","tagPickerInputClassNames","useTagPickerControlContext","TagPickerButtonImpl","comboboxProps","tagPickerButtonClassNames","TagPickerButton","TagPickerListImpl","registerList","createLabel","createOption","Option","content","item","entry","TagPickerOption","ownName","ListboxSurface","tagPickerListClassNames","TagPickerList","TagPickerOptionGroup","OptionGroup"],"sources":["../../../src/components/input/TagPicker.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport {\n  tagPickerButtonClassNames,\n  tagPickerClassNames,\n  tagPickerControlClassNames,\n  tagPickerGroupClassNames,\n  tagPickerInputClassNames,\n  tagPickerListClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { FOCUSABLE_SELECTOR, isFocusable } from '../../lib/focus';\nimport { DismissIcon } from '../../lib/icons';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport {\n  focusRing,\n  inputAppearanceClasses,\n  inputFocusWithin,\n  inputInvalidWithin,\n} from '../../lib/styles';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\nimport { MERGED_DISABLED_FOCUSABLE_PROPS } from '../button/Button.slots';\nimport { Tag } from '../data-display/Tag';\nimport { TagGroup } from '../data-display/TagGroup';\nimport {\n  TAG_GROUP_SELECTOR,\n  TagGroupHostContext,\n  TagHostContext,\n} from '../data-display/TagGroup.context';\nimport type { TagGroupHostOptions, TagHostContextValue } from '../data-display/TagGroup.context';\nimport { tagRootClasses } from '../data-display/tagStyles';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport { ListboxSurface, Option, OptionGroup } from './Option';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} from './pickerStyles';\nimport {\n  TagPickerControlContext,\n  useTagPickerContext,\n  useTagPickerControlContext,\n} from './TagPicker.context';\nimport type { TagPickerContextValue, TagPickerControlContextValue } from './TagPicker.context';\nimport { TagPickerOption } from './TagPicker.option';\nimport type { TagPickerSize } from './TagPicker.root';\n\n/* ------------------------------------------------------------------ */\n/*  Shared                                                             */\n/* ------------------------------------------------------------------ */\n\n/** Per-size classes of the control and the trigger (medium is the 0.7 look). */\nconst TAG_PICKER_SIZE: Readonly<Record<TagPickerSize, { control: string; trigger: string }>> = {\n  medium: { control: 'gap-1 px-2 py-1.5', trigger: 'py-0.5 text-body-1' },\n  large: { control: 'gap-1.5 px-2.5 py-2', trigger: 'py-1 text-body-1' },\n  'extra-large': { control: 'gap-1.5 px-3 py-2.5', trigger: 'py-1 text-body-2' },\n};\n\n/**\n * The offset that centres an end button's box on the control's first row: the control's top\n * padding plus half the row (the trigger line) minus half the box.\n */\nconst END_BUTTON_TOP: Readonly<Record<TagPickerSize, string>> = {\n  medium: 'top-1.5',\n  large: 'top-1.5',\n  'extra-large': 'top-2.25',\n};\n\n/**\n * The focusable controls of a tag list in DOM order (D57): the group's focusable elements that are\n * not hidden and whose nearest tag group is this one (a nested group's controls are its own).\n */\nexport function tagListControls(group: HTMLElement): HTMLElement[] {\n  return Array.from(group.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    (element) =>\n      isFocusable(element) &&\n      !element.closest('[hidden]') &&\n      element.closest(TAG_GROUP_SELECTOR) === group,\n  );\n}\n\n/** A previous-arrow press with no modifier (Left, Right in RTL). */\nfunction isPreviousArrow(event: React.KeyboardEvent<HTMLElement>): boolean {\n  if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return false;\n  return (\n    getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(event.currentTarget),\n    }) === 'prev'\n  );\n}\n\n/** What the held focus of the clear button needs (see {@link useClearButtonHold}). */\ninterface ClearButtonHold {\n  held: boolean;\n  onFocus: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  onBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * The clear button disabled while it has focus keeps it, unavailable, until focus leaves it (D61,\n * §4 T-T6's hold under D25's rule): adjusted during render from the previous `disabled`; a blur\n * after which focus went nowhere (the window lost focus) keeps the hold.\n */\nfunction useClearButtonHold(disabled: boolean): ClearButtonHold {\n  const [focused, setFocused] = React.useState(false);\n  const [held, setHeld] = React.useState(false);\n  const [prevDisabled, setPrevDisabled] = React.useState(disabled);\n  let isHeld = held;\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    isHeld = disabled && focused;\n    if (isHeld !== held) setHeld(isHeld);\n  }\n  const onFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  const onBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n    if (event.target !== event.currentTarget) return;\n    const departed = event.relatedTarget !== null || event.currentTarget.ownerDocument.hasFocus();\n    if (!departed) return;\n    setFocused(false);\n    setHeld(false);\n  };\n  return { held: disabled && isHeld, onFocus, onBlur };\n}\n\nconst NATIVELY_DISABLED = { disabled: true } as const;\n\n/* ------------------------------------------------------------------ */\n/*  The end buttons                                                    */\n/* ------------------------------------------------------------------ */\n\ninterface TagPickerClearButtonProps {\n  ctx: TagPickerContextValue;\n  /** 1: at the inline end; 2: before the expand button. */\n  position: 1 | 2;\n}\n\n/**\n * The clear button (`clearable`, D61): removes every tag, clears the text, closes the list and\n * focuses the trigger. It never drops focus to the page: unmounting while it has focus hands focus\n * to the trigger, and disabled while it has focus it stays focusable until focus leaves it.\n */\nfunction TagPickerClearButton({ ctx, position }: TagPickerClearButtonProps) {\n  const ref = React.useRef<HTMLButtonElement>(null);\n  const { triggerRef } = ctx;\n  usePreserveFocus(ref, () => triggerRef.current);\n  const hold = useClearButtonHold(ctx.disabled);\n  const stateProps = ctx.disabled\n    ? hold.held\n      ? MERGED_DISABLED_FOCUSABLE_PROPS\n      : NATIVELY_DISABLED\n    : undefined;\n  return (\n    <button\n      type=\"button\"\n      ref={ref}\n      aria-label={ctx.labels.clear}\n      // Keeps focus in the trigger: a press must not blur it.\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={() => ctx.clear()}\n      {...stateProps}\n      onFocus={hold.onFocus}\n      onBlur={hold.onBlur}\n      className={cn(\n        tagPickerClassNames.clearButton,\n        END_BUTTON_TOP[ctx.size],\n        pickerIconButtonClasses(ctx.coreSize, ctx.appearance),\n        pickerButtonOffset(ctx.coreSize, position),\n        focusRing,\n        // The control dims as a whole (D66): the button keeps only the not-allowed cursor.\n        'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',\n      )}\n    >\n      <DismissIcon size={pickerGlyphSize(ctx.coreSize, 'icon')} />\n    </button>\n  );\n}\nTagPickerClearButton.displayName = 'TagPickerClearButton';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.Control                                                  */\n/* ------------------------------------------------------------------ */\n\n/** Props of TagPicker.Control: the field that holds the tags, the trigger and the end buttons. */\nexport interface TagPickerControlProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** As TagPicker's `expandIcon`; wins over it when it is not `undefined`. */\n  expandIcon?: Slot<'span'>;\n  /** @default `<TagPicker.Group /><TagPicker.Input />` */\n  children?: React.ReactNode;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface ControlImplProps extends TagPickerControlProps {\n  ctx: TagPickerContextValue;\n}\n\nfunction TagPickerControlImpl({\n  ctx,\n  expandIcon,\n  children,\n  className,\n  onMouseDown,\n  ref,\n  ...rest\n}: ControlImplProps) {\n  const { registerTrigger, setReference, controlRef } = ctx;\n  const controlContext = React.useMemo<TagPickerControlContextValue>(\n    () => ({ registerTrigger }),\n    [registerTrigger],\n  );\n  // The control is the popup's anchor: the list opens below it, as wide as it (0.10).\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, controlRef, setReference);\n\n  const glyph = expandIcon !== undefined ? expandIcon : ctx.expandIcon;\n  const showExpand = showsExpandButton(glyph);\n  const showClear = ctx.clearable && ctx.selected.length > 0 && !ctx.readOnly;\n  const buttons = (showExpand ? 1 : 0) + (showClear ? 1 : 0);\n\n  // A press on the empty area (D66): not inside a focusable element of the control, the primary\n  // button, inside the control in the DOM. It keeps focus in the trigger and toggles the list.\n  const handlePress = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    const control = event.currentTarget;\n    const target = event.target;\n    if (!(target instanceof Element) || !control.contains(target)) return;\n    const focusable = target.closest(FOCUSABLE_SELECTOR);\n    if (focusable && control.contains(focusable)) return;\n    if (ctx.disabled) return;\n    event.preventDefault();\n    if (ctx.interactive) ctx.toggleOpen();\n    ctx.focusTrigger();\n  };\n\n  return (\n    <TagPickerControlContext.Provider value={controlContext}>\n      <div\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={ctx.disabled || undefined}\n        {...rest}\n        ref={mergedRef}\n        className={cn(\n          tagPickerControlClassNames.root,\n          tagPickerClassNames.control,\n          'relative flex flex-wrap items-center',\n          TAG_PICKER_SIZE[ctx.size].control,\n          inputAppearanceClasses[ctx.appearance],\n          inputFocusWithin,\n          ctx.invalidLook && inputInvalidWithin,\n          pickerEndPadding(buttons, ctx.coreSize),\n          // Dimmed once (D66); a focus ring inside (a held remove button) lifts it.\n          ctx.disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n          ctx.collapsed && 'flex-nowrap',\n          className,\n        )}\n        onMouseDown={composeEventHandlers(onMouseDown, handlePress)}\n      >\n        {children ?? (\n          <>\n            <TagPickerGroup />\n            <TagPickerInput />\n          </>\n        )}\n        {showClear && <TagPickerClearButton ctx={ctx} position={showExpand ? 2 : 1} />}\n        {showExpand && (\n          <PickerExpandButton\n            component={expandIcon !== undefined ? 'TagPicker.Control' : 'TagPicker'}\n            expandIcon={glyph}\n            label={ctx.labels.expand}\n            expanded={ctx.expanded}\n            listboxId={ctx.listbox.listboxId}\n            disabled={ctx.disabled || ctx.readOnly}\n            onToggle={() => {\n              ctx.toggleOpen();\n              ctx.focusTrigger();\n            }}\n            size={ctx.coreSize}\n            appearance={ctx.appearance}\n            dimDisabled={!ctx.disabled}\n            className={cn(tagPickerClassNames.expandButton, END_BUTTON_TOP[ctx.size])}\n            iconClassName={tagPickerClassNames.expandIcon}\n          />\n        )}\n      </div>\n    </TagPickerControlContext.Provider>\n  );\n}\nTagPickerControlImpl.displayName = 'TagPickerControlImpl';\n\n/**\n * The field of a TagPicker (`TagPicker.Control`): a `role=\"group\"` box in the picker's look that\n * holds the tag list, the trigger and, at its inline end, the clear button (`clearable`) and the\n * expand button (`expandIcon`, a chevron by default; this part's `expandIcon` wins over\n * TagPicker's). Without children it renders `TagPicker.Group` and `TagPicker.Input`. A press on\n * its empty area (not on a tag's button or link, or a trigger) toggles the list and keeps focus in\n * the trigger; read-only, it only focuses the trigger. Render exactly one trigger in it,\n * `TagPicker.Input` or `TagPicker.Button`. It takes neither `size` nor `appearance`: TagPicker's\n * apply.\n */\nexport const TagPickerControl = (props: TagPickerControlProps) => {\n  const ctx = useTagPickerContext('TagPicker.Control');\n  if (!ctx) return null;\n  return <TagPickerControlImpl {...props} ctx={ctx} />;\n};\nTagPickerControl.displayName = 'TagPickerControl';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.Group                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of TagPicker.Group: the list of selected tags (a TagGroup with `role=\"list\"`). */\nexport interface TagPickerGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'role' | 'defaultValue'\n> {\n  /**\n   * The tags of the selected values: `Tag`s with a `value` each (leave `dismissible` unset), in\n   * `value` order (the single-line layout matches the tags to the values by position).\n   * @default one Tag per selected value, named \"Remove <label>\" (`labels.remove`)\n   */\n  children?: React.ReactNode;\n  /** @default TagPicker's `labels.selected` ('Selected') */\n  'aria-label'?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface DefaultTagProps {\n  ctx: TagPickerContextValue;\n  value: string;\n}\n\n/**\n * A default tag (D55): a Tag named by the option's label, with TagPicker's part classes, the\n * remove button named by `labels.remove` alone and the option entry's `media`, decorative.\n */\nfunction TagPickerDefaultTag({ ctx, value }: DefaultTagProps) {\n  const label = ctx.labelOf(value);\n  const dismissName = ctx.labels.remove(label);\n  const host = React.useMemo<TagHostContextValue>(\n    () => ({ dismissName, dismissButtonClassName: tagPickerClassNames.removeButton }),\n    [dismissName],\n  );\n  const media = ctx.entryOf(value)?.media;\n  const hasMedia = slotRendersContent(media);\n  const mediaSlot = React.useMemo<SlotObject<'span'> | undefined>(\n    () => (hasMedia ? { children: media, 'aria-hidden': true } : undefined),\n    [hasMedia, media],\n  );\n  return (\n    <TagHostContext.Provider value={host}>\n      <Tag value={value} className={tagPickerClassNames.tag} media={mediaSlot}>\n        {label}\n      </Tag>\n    </TagHostContext.Provider>\n  );\n}\nTagPickerDefaultTag.displayName = 'TagPickerDefaultTag';\n\ninterface GroupImplProps extends TagPickerGroupProps {\n  ctx: TagPickerContextValue;\n}\n\nfunction TagPickerGroupImpl({\n  ctx,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  onKeyDown,\n  onClickCapture,\n  ref,\n  ...rest\n}: GroupImplProps) {\n  const { groupRef, chipRef, hiddenValues, disabled, focusTrigger } = ctx;\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, groupRef);\n  // Whether the click behind the latest dismissal was a pointer click (D56).\n  const pointerRef = React.useRef(false);\n  const host = React.useMemo<TagGroupHostOptions>(\n    () => ({ removalFocus: 'next', hiddenValues, dimDisabled: !disabled }),\n    [hiddenValues, disabled],\n  );\n\n  // The 0.10 warning, only in the 0.10 configuration (D58): data mode, the default tags, no\n  // free tagging.\n  const usesDefaultTags = children === undefined || children === null;\n  const unknownValues =\n    usesDefaultTags && ctx.warnsUnknownValues\n      ? ctx.selected.filter((value) => ctx.entryOf(value) === undefined).join('\\u0000')\n      : '';\n  React.useEffect(() => {\n    if (!unknownValues) return;\n    warnOnce(\n      'TagPicker:unknown-value',\n      `TagPicker: the selected value(s) ${unknownValues\n        .split('\\u0000')\n        .map((v) => `\"${v}\"`)\n        .join(', ')} match no option; the raw value is shown as the tag label.`,\n    );\n  }, [unknownValues]);\n\n  // An empty `role=\"list\"` is not rendered (0.10, Fluent's renderTagPickerGroup).\n  if (ctx.selected.length === 0) return null;\n\n  // The keys of the tag list stay 0.10's (D57), for controls of this group in the DOM.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = event.target;\n    if (!(target instanceof HTMLElement)) return;\n    const controls = tagListControls(event.currentTarget);\n    const index = controls.indexOf(target);\n    if (index === -1) return;\n    if (event.key === 'Escape') {\n      // Consumed here, so an enclosing layer ignores it (0.5 §5.4).\n      event.preventDefault();\n      focusTrigger();\n      return;\n    }\n    const intent = getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(target),\n    });\n    if (intent === 'prev' && index > 0) {\n      event.preventDefault();\n      controls[index - 1].focus();\n    } else if (intent === 'next') {\n      event.preventDefault();\n      if (index < controls.length - 1) controls[index + 1].focus();\n      else focusTrigger();\n    }\n  };\n\n  // A pointer removal focuses the trigger first, whether or not the tag goes (D56); focus placed\n  // here wins over TagGroup's move to the next tag.\n  const handleDismiss = (value: string) => {\n    if (pointerRef.current) focusTrigger();\n    ctx.removeTag(value);\n  };\n\n  // Records the `detail` of every click inside the list in the DOM (the consumer's handler runs\n  // first; a click it prevents is still recorded).\n  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {\n    onClickCapture?.(event);\n    if (event.target instanceof Node && event.currentTarget.contains(event.target)) {\n      pointerRef.current = event.detail > 0;\n    }\n  };\n\n  const hiddenCount = hiddenValues?.size ?? 0;\n  return (\n    <>\n      <TagGroupHostContext.Provider value={host}>\n        <TagGroup\n          role=\"list\"\n          aria-label={ariaLabel ?? ctx.labels.selected}\n          dismissible={!ctx.readOnly}\n          disabled={disabled}\n          size={ctx.tagSize}\n          appearance={ctx.tagAppearance}\n          shape=\"rounded\"\n          onDismiss={handleDismiss}\n          fallbackFocusRef={ctx.triggerRef}\n          {...rest}\n          ref={mergedRef}\n          className={cn(\n            tagPickerGroupClassNames.root,\n            tagPickerClassNames.group,\n            'flex flex-wrap items-center gap-1',\n            ctx.collapsed && 'min-w-0 flex-nowrap overflow-hidden whitespace-nowrap *:shrink-0',\n            className,\n          )}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onClickCapture={handleClickCapture}\n        >\n          {usesDefaultTags\n            ? ctx.selected.map((value) => (\n                <TagPickerDefaultTag key={value} ctx={ctx} value={value} />\n              ))\n            : children}\n        </TagGroup>\n      </TagGroupHostContext.Provider>\n      {hiddenCount > 0 && (\n        // The \"+N\" chip (D62): hidden from assistive technology, which hears the summary.\n        <span\n          ref={chipRef}\n          aria-hidden=\"true\"\n          className={cn(\n            tagPickerClassNames.overflowCount,\n            tagRootClasses({ size: ctx.tagSize, appearance: ctx.tagAppearance, shape: 'rounded' }),\n            'shrink-0 cursor-default',\n          )}\n          // A press focuses the trigger (every tag shows); the list does not change.\n          onMouseDown={(event) => {\n            event.preventDefault();\n            focusTrigger();\n          }}\n        >\n          {ctx.labels.overflowCount(hiddenCount)}\n        </span>\n      )}\n    </>\n  );\n}\nTagPickerGroupImpl.displayName = 'TagPickerGroupImpl';\n\n/**\n * The selected tags of a TagPicker (`TagPicker.Group`): a `TagGroup` with `role=\"list\"` named\n * \"Selected\" (`labels.selected`, or its own `aria-label`), rendered only while a value is\n * selected. Without children it renders a Tag per selected value, named by the option's label,\n * with a remove button named \"Remove <label>\" (`labels.remove`). Your own Tags in it are the\n * selected values' tags: give each a `value`, leave `dismissible` unset (a read-only picker then\n * shows no remove buttons), and pass `dismissLabel=\"Remove\"` for TagPicker's wording (a Tag's own\n * Dismiss button is named \"Dismiss <text>\"). Each remove button is a Tab stop; Delete, Backspace,\n * Enter and Space remove its tag, and focus moves to the next tag, else to the trigger; a click\n * focuses the trigger. Left and Right (mirrored in RTL) move between the controls of the list and\n * from the last one to the trigger; Escape returns to the trigger. Its tags take the picker's look,\n * one Tag size smaller (a Tag's own `size` and `appearance` win). With `overflow=\"count\"` the\n * tags are measured by position: render your own Tags in `value` order. Fluent's TagPickerGroup is a\n * listbox of tags: an option cannot hold a Dismiss button.\n */\nexport const TagPickerGroup = (props: TagPickerGroupProps) => {\n  const ctx = useTagPickerContext('TagPicker.Group');\n  if (!ctx) return null;\n  return <TagPickerGroupImpl {...props} ctx={ctx} />;\n};\nTagPickerGroup.displayName = 'TagPickerGroup';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.Input                                                    */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of TagPicker.Input: the text field, the combobox. The form fields (`name`, `form`,\n * `required`) are TagPicker's: its hidden inputs submit the tags, never the typed text.\n */\nexport interface TagPickerInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'defaultValue'\n  | 'type'\n  | 'size'\n  | 'disabled'\n  | 'readOnly'\n  | 'name'\n  | 'form'\n  | 'required'\n> {\n  /** Shown while no tag is selected. @default TagPicker's `placeholder` */\n  placeholder?: string;\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * The attributes the trigger takes from the root and its own naming (D65): its own `id`, and its\n * own `aria-label`/`aria-labelledby` pair when it has either, replace the root's.\n */\nfunction triggerNaming(\n  ctx: TagPickerContextValue,\n  own: { id?: string; 'aria-label'?: string; 'aria-labelledby'?: string },\n) {\n  const named = own['aria-label'] !== undefined || own['aria-labelledby'] !== undefined;\n  return {\n    id: own.id ?? ctx.triggerProps.id,\n    'aria-label': named ? own['aria-label'] : ctx.triggerProps['aria-label'],\n    'aria-labelledby': named ? own['aria-labelledby'] : ctx.triggerProps['aria-labelledby'],\n  };\n}\n\ninterface InputImplProps extends TagPickerInputProps {\n  ctx: TagPickerContextValue;\n  control: TagPickerControlContextValue;\n}\n\nfunction TagPickerInputImpl({\n  ctx,\n  control,\n  placeholder,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  onChange,\n  onClick,\n  onKeyDown,\n  onKeyUp,\n  onFocus,\n  onBlur,\n  className,\n  ref,\n  ...rest\n}: InputImplProps) {\n  const { registerTrigger } = control;\n  React.useLayoutEffect(() => registerTrigger('input'), [registerTrigger]);\n  const { triggerProps, inputProps, listbox } = ctx;\n  const mergedRef = useMergedRefs<HTMLInputElement>(\n    ref,\n    ctx.triggerRef as React.Ref<HTMLInputElement>,\n    inputProps.controlRef,\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: no listbox keys at all (they would open the list, add or remove tags).\n    if (!ctx.interactive) return;\n    if (event.key === 'Escape' && ctx.open && !ctx.surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (every option selected, no query): close, but leave Escape to an\n      // enclosing layer (overlays#1) instead of consuming it for an invisible list.\n      ctx.setOpen(false);\n      return;\n    }\n    if (ctx.selected.length > 0) {\n      if (event.key === 'Backspace' && ctx.query === '') {\n        // Backspace moves to the last tag; Backspace or Delete there removes it (input-pickers#14).\n        event.preventDefault();\n        ctx.focusLastTagControl();\n        return;\n      }\n      const input = event.currentTarget;\n      if (\n        isPreviousArrow(event) &&\n        input.selectionStart === 0 &&\n        input.selectionEnd === 0 &&\n        ctx.focusLastTagControl()\n      ) {\n        event.preventDefault();\n        return;\n      }\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const naming = triggerNaming(ctx, {\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  });\n\n  return (\n    <input\n      type=\"text\"\n      autoComplete={inputProps.autoComplete}\n      autoCapitalize={inputProps.autoCapitalize}\n      autoCorrect={inputProps.autoCorrect}\n      maxLength={inputProps.maxLength}\n      inputMode={inputProps.inputMode}\n      spellCheck={inputProps.spellCheck}\n      enterKeyHint={inputProps.enterKeyHint}\n      aria-invalid={triggerProps['aria-invalid']}\n      aria-required={triggerProps['aria-required']}\n      aria-errormessage={triggerProps['aria-errormessage']}\n      aria-details={triggerProps['aria-details']}\n      tabIndex={triggerProps.tabIndex}\n      autoFocus={triggerProps.autoFocus}\n      {...rest}\n      {...naming}\n      {...listbox.getComboboxProps()}\n      aria-expanded={ctx.expanded}\n      aria-describedby={joinIds(ariaDescribedBy, triggerProps['aria-describedby'], ctx.summaryId)}\n      ref={mergedRef}\n      disabled={ctx.disabled}\n      readOnly={ctx.readOnly}\n      placeholder={ctx.selected.length === 0 ? (placeholder ?? ctx.placeholder) : ''}\n      value={ctx.query}\n      onChange={composeEventHandlers(onChange, (event: React.ChangeEvent<HTMLInputElement>) =>\n        ctx.editText(event.target.value),\n      )}\n      // A click opens a closed list and never closes it (Combobox's input rule, D66).\n      onClick={composeEventHandlers(onClick, () => {\n        if (ctx.interactive && !ctx.open) ctx.setOpen(true);\n      })}\n      onKeyDown={composeEventHandlers(\n        onKeyDown,\n        composeEventHandlers(inputProps.onKeyDown, handleKeyDown),\n      )}\n      onKeyUp={composeEventHandlers(\n        onKeyUp,\n        composeEventHandlers(inputProps.onKeyUp, listbox.onKeyUp),\n      )}\n      onFocus={composeEventHandlers(onFocus, inputProps.onFocus)}\n      onBlur={composeEventHandlers(onBlur, inputProps.onBlur)}\n      className={cn(\n        tagPickerInputClassNames.root,\n        tagPickerClassNames.input,\n        'min-w-15 flex-1 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-hidden',\n        TAG_PICKER_SIZE[ctx.size].trigger,\n        className,\n      )}\n    />\n  );\n}\nTagPickerInputImpl.displayName = 'TagPickerInputImpl';\n\n/**\n * The text field of a TagPicker (`TagPicker.Input`): the `<input role=\"combobox\">` that filters\n * the options as you type, inside `TagPicker.Control`. TagPicker's `id`, name, description, Field\n * wiring and text input attributes reach it (its own `id`, `aria-label` and `aria-labelledby`\n * replace TagPicker's, and its `aria-describedby` comes first); its handlers run before\n * TagPicker's `onKeyDown` and the built-in keys. Backspace in the empty field, and Left (Right in\n * RTL) with the caret at its start, focus the last tag. The form fields are TagPicker's.\n */\nexport const TagPickerInput = (props: TagPickerInputProps) => {\n  const ctx = useTagPickerContext('TagPicker.Input');\n  const control = useTagPickerControlContext('TagPicker.Input', ctx !== null);\n  if (!ctx || !control) return null;\n  return <TagPickerInputImpl {...props} ctx={ctx} control={control} />;\n};\nTagPickerInput.displayName = 'TagPickerInput';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.Button                                                   */\n/* ------------------------------------------------------------------ */\n\n/** Props of TagPicker.Button: a trigger without text entry (select-only). */\nexport interface TagPickerButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value' | 'type' | 'disabled' | 'children'\n> {\n  /** Shown while no tag is selected. @default TagPicker's `placeholder` */\n  placeholder?: string;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\ninterface ButtonImplProps extends TagPickerButtonProps {\n  ctx: TagPickerContextValue;\n  control: TagPickerControlContextValue;\n}\n\nfunction TagPickerButtonImpl({\n  ctx,\n  control,\n  placeholder,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  onClick,\n  onKeyDown,\n  onKeyUp,\n  className,\n  ref,\n  ...rest\n}: ButtonImplProps) {\n  const { registerTrigger } = control;\n  React.useLayoutEffect(() => registerTrigger('button'), [registerTrigger]);\n  const { triggerProps, listbox } = ctx;\n  const mergedRef = useMergedRefs<HTMLButtonElement>(\n    ref,\n    ctx.triggerRef as React.Ref<HTMLButtonElement>,\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (!ctx.interactive) return;\n    if (\n      ctx.selected.length > 0 &&\n      (event.key === 'Backspace' || isPreviousArrow(event)) &&\n      ctx.focusLastTagControl()\n    ) {\n      event.preventDefault();\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The editable mode's `aria-autocomplete` of the server HTML and the first render is not a\n  // button's (D63), so the part drops it itself.\n  const comboboxProps = { ...listbox.getComboboxProps() };\n  delete comboboxProps['aria-autocomplete'];\n  const naming = triggerNaming(ctx, {\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  });\n\n  return (\n    <button\n      type=\"button\"\n      aria-invalid={triggerProps['aria-invalid']}\n      aria-required={triggerProps['aria-required']}\n      aria-errormessage={triggerProps['aria-errormessage']}\n      aria-details={triggerProps['aria-details']}\n      tabIndex={triggerProps.tabIndex}\n      autoFocus={triggerProps.autoFocus}\n      {...rest}\n      {...naming}\n      {...comboboxProps}\n      aria-expanded={ctx.expanded}\n      aria-readonly={ctx.readOnly || undefined}\n      aria-describedby={joinIds(ariaDescribedBy, triggerProps['aria-describedby'], ctx.summaryId)}\n      ref={mergedRef}\n      disabled={ctx.disabled}\n      onClick={composeEventHandlers(onClick, () => ctx.toggleOpen())}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      className={cn(\n        tagPickerButtonClassNames.root,\n        // Padding and background set here (C-NATIVE); the control's focus look shows its focus.\n        'min-w-15 flex-1 border-0 bg-transparent px-0 text-start text-foreground focus:outline-hidden disabled:cursor-not-allowed',\n        TAG_PICKER_SIZE[ctx.size].trigger,\n        className,\n      )}\n    >\n      {ctx.selected.length === 0 && (\n        <span className=\"text-muted-foreground\">{placeholder ?? ctx.placeholder}</span>\n      )}\n    </button>\n  );\n}\nTagPickerButtonImpl.displayName = 'TagPickerButtonImpl';\n\n/**\n * A select-only trigger for a TagPicker (`TagPicker.Button`), in place of `TagPicker.Input`: a\n * `<button role=\"combobox\">` for a short fixed list, with no text entry. Down, Up, Home, End and\n * typing a letter open the list and move; Enter and Space open it or add the active option and\n * keep it open; Escape, Alt+Up and Tab close it; a click toggles it. Backspace and Left (Right in\n * RTL) focus the last tag. It shows the placeholder while no tag is selected, else nothing, and\n * stays the click area of the rest of the row. No query, no filter and no create option\n * (`allowCreate` needs `TagPicker.Input`). TagPicker's `id`, name, description and Field wiring\n * reach it; pass handlers and `ref` on it (TagPicker's `onKeyDown` and `controlRef` are the\n * Input's). Read-only, it renders `aria-readonly`. Fluent's TagPickerButton is visually hidden\n * once a tag is selected; this one stays.\n */\nexport const TagPickerButton = (props: TagPickerButtonProps) => {\n  const ctx = useTagPickerContext('TagPicker.Button');\n  const control = useTagPickerControlContext('TagPicker.Button', ctx !== null);\n  if (!ctx || !control) return null;\n  return <TagPickerButtonImpl {...props} ctx={ctx} control={control} />;\n};\nTagPickerButton.displayName = 'TagPickerButton';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.List                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Props of TagPicker.List: the option list, shown in a popup while open. */\nexport interface TagPickerListProps extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  | 'role'\n  | 'id'\n  | 'hidden'\n  | 'tabIndex'\n  | 'aria-multiselectable'\n  | 'aria-activedescendant'\n  | 'dangerouslySetInnerHTML'\n> {\n  /**\n   * `TagPicker.Option`s, `Option`s and `TagPicker.OptionGroup`s. Keep the options of selected\n   * values rendered: TagPicker hides them and reads their labels.\n   * @default one TagPicker.Option per available entry of TagPicker's `options`\n   */\n  children?: React.ReactNode;\n  /**\n   * Names the listbox (with `aria-labelledby`): the List's own pair replaces TagPicker's name.\n   * @default TagPicker's `aria-label`, else its `aria-labelledby`, else the Field label\n   */\n  'aria-label'?: string;\n  /** Ids of the elements that name the listbox (see `aria-label`). */\n  'aria-labelledby'?: string;\n  /** Merged last onto the `role=\"listbox\"` element (a `max-h-*` replaces the default height). */\n  className?: string;\n  ref?: React.Ref<HTMLUListElement>;\n}\n\ninterface ListImplProps extends TagPickerListProps {\n  ctx: TagPickerContextValue;\n}\n\nfunction TagPickerListImpl({\n  ctx,\n  children,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  className,\n  ref,\n  ...rest\n}: ListImplProps) {\n  const { registerList, listbox } = ctx;\n  React.useLayoutEffect(() => registerList(), [registerList]);\n\n  const createLabel = ctx.showCreate ? ctx.labels.create(ctx.createText) : '';\n  const createOption = ctx.showCreate ? (\n    <Option\n      key={ctx.createValue}\n      value={ctx.createValue}\n      label={createLabel}\n      data-create=\"\"\n      className={cn(tagPickerClassNames.option, tagPickerClassNames.createOption)}\n    >\n      {createLabel}\n    </Option>\n  ) : null;\n\n  let content: React.ReactNode;\n  if (ctx.dataMode) {\n    // Data mode (0.10's rendering): an option per listed entry while expanded, the create option\n    // in its place, last.\n    content =\n      ctx.expanded &&\n      listbox.items.map((item) => {\n        if (item.value === ctx.createValue) return createOption;\n        const entry = ctx.entryOf(item.value);\n        return (\n          <TagPickerOption\n            key={item.value}\n            value={item.value}\n            label={item.label}\n            media={entry?.media}\n            secondaryContent={entry?.secondaryContent}\n            className={tagPickerClassNames.option}\n          >\n            {item.label}\n          </TagPickerOption>\n        );\n      });\n  } else {\n    // Registration mode: the consumer's options, then the create option after every option and\n    // group.\n    content = (\n      <>\n        {children}\n        {createOption}\n      </>\n    );\n  }\n\n  const ownName = ariaLabel !== undefined || ariaLabelledBy !== undefined;\n  return (\n    <ListboxSurface\n      listbox={listbox}\n      layerId={ctx.layerId}\n      surfaceRef={ctx.surfaceRef}\n      floatingProps={ctx.floatingProps}\n      open={ctx.open}\n      expanded={ctx.expanded}\n      showCheck={false}\n      listClassName={cn(tagPickerListClassNames.root, tagPickerClassNames.listbox, className)}\n      surfaceClassName={tagPickerClassNames.surface}\n      emptyContent={\n        ctx.emptyContent ? (\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              tagPickerClassNames.emptyMessage,\n              'px-3 py-1.5 text-body-1 text-muted-foreground',\n            )}\n          >\n            {ctx.labels.noMatches}\n          </div>\n        ) : undefined\n      }\n      aria-label={ownName ? ariaLabel : ctx.listLabel['aria-label']}\n      aria-labelledby={ownName ? ariaLabelledBy : ctx.listLabel['aria-labelledby']}\n      listProps={{ ...rest, ref }}\n    >\n      {content}\n    </ListboxSurface>\n  );\n}\nTagPickerListImpl.displayName = 'TagPickerListImpl';\n\n/**\n * The option list of a TagPicker (`TagPicker.List`): a `<ul role=\"listbox\">`, multi-selectable,\n * that opens in a popup below the field. Render it directly inside TagPicker (a Fragment is fine);\n * without one TagPicker adds the default list. Without children it renders a `TagPicker.Option`\n * per available entry of TagPicker's `options`. With children (`TagPicker.Option`s, `Option`s,\n * `TagPicker.OptionGroup`s) they are the options: keep the options of selected values rendered,\n * since TagPicker hides them and reads their labels. Its own `aria-label`/`aria-labelledby`\n * replace the list's name (TagPicker's, else the Field label); its `className` comes last on the\n * list, its other attributes and `ref` reach the list element.\n */\nexport const TagPickerList = (props: TagPickerListProps) => {\n  const ctx = useTagPickerContext('TagPicker.List');\n  if (!ctx) return null;\n  return <TagPickerListImpl {...props} ctx={ctx} />;\n};\nTagPickerList.displayName = 'TagPickerList';\n\n/* ------------------------------------------------------------------ */\n/*  TagPicker.OptionGroup                                              */\n/* ------------------------------------------------------------------ */\n\n/**\n * A group of options in TagPicker's list (`TagPicker.OptionGroup`): `OptionGroup` itself, with a\n * heading that names it. It hides itself while every option in it is hidden, so a group whose\n * options are all selected disappears.\n */\nexport const TagPickerOptionGroup = OptionGroup;\n"],"mappings":"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"}

package/dist/components/input/TagPicker.root.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),ee=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useControllable.cjs"),te=require("../../hooks/useId.cjs"),ne=require("../../hooks/useMergedRefs.cjs"),re=require("../../hooks/useIsClient.cjs"),ie=require("../../hooks/useFieldControl.cjs"),ae=require("../../hooks/useAnnounce.cjs"),oe=require("../../hooks/useListbox.cjs"),se=require("./inputLook.cjs"),ce=require("./Input.cjs"),le=require("../../hooks/useFormReset.cjs"),ue=require("../internal/HiddenInput.cjs"),de=require("./Option.cjs"),o=require("./pickerLabels.cjs"),s=require("./pickerValues.cjs"),fe=require("./TagPicker.context.cjs"),c=require("./TagPicker.create.cjs"),pe=require("./TagPicker.overflow.cjs"),l=require("./TagPicker.parts.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var me=[`medium`,`large`,`extra-large`],he=[],ge=new Map,_e={medium:`extra-small`,large:`small`,"extra-large":`medium`},ve=e=>`Remove ${e}`,ye=e=>`Selected: ${e.join(`, `)}`,be=e=>`Create "${e}"`,xe=e=>`+${e}`;function Se(e,t){return(e.textValue??e.label).toLowerCase().includes(t.toLowerCase())}function Ce(e){return`TagPicker: render exactly one trigger, \`TagPicker.Input\` or \`TagPicker.Button\`, inside \`TagPicker.Control\` (found ${e}).`}var we="TagPicker: `allowCreate` needs `TagPicker.Input`: `TagPicker.Button` has no text to create a tag from, so no create option is offered.",Te=`TagPicker.List: render one TagPicker.List, directly inside TagPicker (a Fragment is fine). A second list, or one inside a component of your own, splits the options over two lists.`;function Ee(e){if(e!=null){for(let{node:t}of n.flattenChildren(e))if(n.isElementOfType(t,l.TagPickerList))return t}}var f=e=>{let{options:n=he,children:f,value:De,defaultValue:Oe,onValueChange:ke,onChange:Ae,open:je,defaultOpen:Me,onOpenChange:Ne,placeholder:Pe=`Select...`,filter:Fe,query:Ie,defaultQuery:Le,onQueryChange:Re,disabled:p=!1,size:ze,appearance:Be,name:Ve,form:He,required:Ue,autoComplete:We=`off`,autoCapitalize:Ge,autoCorrect:Ke,maxLength:qe,readOnly:m=!1,allowCreate:h=!1,onOptionCreate:Je,clearable:Ye=!1,expandIcon:Xe,overflow:Ze=`wrap`,labels:g,inputMode:Qe,spellCheck:$e,enterKeyHint:et,autoFocus:tt,tabIndex:nt,id:rt,"aria-label":it,"aria-labelledby":at,"aria-describedby":ot,"aria-invalid":st,"aria-required":ct,"aria-errormessage":lt,"aria-details":ut,onFocus:dt,onBlur:ft,onKeyDown:pt,onKeyUp:mt,controlRef:ht,className:gt,ref:_t,...vt}=e;Ae!==void 0&&r.warnDeprecated(`TagPicker`,`onChange`,`onValueChange`);let _=Ze===`count`?`count`:`wrap`,yt=ie.useFieldContext(),bt=(Ue??yt?.required??!1)&&!m,{id:xt,"aria-label":v,"aria-labelledby":y,"aria-describedby":St,"aria-invalid":b,"aria-required":Ct}=ie.useFieldControl({id:rt,"aria-label":it,"aria-labelledby":at,"aria-describedby":ot,"aria-invalid":st,"aria-required":ct??Ue}),wt=ce.isInvalidLook(!1,b),{size:x,appearance:S}=se.useInputLook(ze,Be,{sizes:me,defaultSize:`medium`}),Tt=x===`medium`?`medium`:`large`,Et=_e[x],Dt=S===`filled-darker`?`outline`:`filled`,[C,w]=a.useControllable(De,Oe??s.EMPTY_VALUES,e=>{let t=[...e];ke?.(t),Ae?.(t)}),T=u.useMemo(()=>new Set(C),[C]),E=!p&&!m,[Ot,D]=a.useControllable(je,(Me??!1)&&E,Ne),kt=re.useIsClient(),O=Ot&&E&&kt,At=u.useRef(new Map),[k,jt]=u.useState(`input`),Mt=u.useCallback(e=>{let t={},n=At.current,r=()=>n.values().next().value??`input`;return n.set(t,e),jt(r()),()=>{n.delete(t),jt(r())}},[]),A=u.useRef(0),Nt=u.useCallback(()=>(A.current+=1,()=>{--A.current}),[]);u.useEffect(()=>{let e=At.current.size;e!==1&&r.warnOnce(`TagPicker:trigger`,Ce(e)),A.current>1&&r.warnOnce(`TagPicker.List:placement`,Te)});let j=k===`button`,[Pt,M]=a.useControllable(Ie,E?Le??``:``,Re),N=E&&!j?Pt:``,[P,Ft]=u.useState(E?`unlocked`:`mounted-locked`);E&&P!==`unlocked`?Ft(`unlocked`):!E&&P===`unlocked`&&Ft(`locked`),u.useEffect(()=>{P===`locked`&&M(``)},[P,M]);let It=!E&&Ot;u.useEffect(()=>{It&&D(!1)},[It,D]),ae.useAnnounce();let F=u.useRef(null),I=u.useRef(null),Lt=u.useRef(null),L=u.useRef(null),Rt=u.useRef(null),R=te.useId(`tagpicker-summary`),z=te.useId(`tagpicker-create`);u.useEffect(()=>{h&&j&&r.warnOnce(`TagPicker:allowCreate-button`,we)},[h,j]);let zt=Ee(f),B=zt?.props.children,V=B!=null,H=u.useMemo(()=>V?oe.collectOptionLabels(B):ge,[V,B]),U=u.useMemo(()=>{let e=new Map;for(let t of n)e.has(t.value)||e.set(t.value,t);return e},[n]),W=u.useMemo(()=>({remove:g?.remove??ve,selected:g?.selected??`Selected`,create:g?.create??be,clear:g?.clear??`Clear selection`,expand:g?.expand??`Show options`,overflowCount:g?.overflowCount??xe,noMatches:g?.noMatches??`No matches`}),[g]),Bt=h&&E&&!j&&O&&N.trim()!==``,G=Bt&&!V?c.createOptionText(N,{labels:n.map(e=>e.label),values:n.map(e=>e.value),selected:C}):null,Vt=u.useMemo(()=>{if(V)return;let e=n.filter(e=>!T.has(e.value)).map(e=>({value:e.value,label:e.label}));return G!==null&&e.push({value:z,label:W.create(G)}),e},[V,n,T,G,z,W]),Ht=u.useMemo(()=>{if(!V&&!N)return;let e=Fe??Se;return t=>t.value===z||!T.has(t.value)&&(N===``||e(t,N))},[V,N,Fe,T,z]),Ut=(e,t)=>{if(!E||C.includes(e))return;let n=[...C,e];w(n),M(``),o.announceToggle(g,t,!0,n.length)},Wt=()=>{let e=N.trim();if(!E||e===``)return;Je?.(e);let t=[...C,e];w(t),M(``),o.announceToggle(g,e,!0,t.length)},K=oe.useListbox({open:O,onOpenChange:e=>D(e),mode:j?`select-only`:`editable`,multiselect:!0,selectedValues:C,onSelect:(e,t)=>{e===z?Wt():Ut(e,t?.item.label??e)},items:Vt,filter:Ht,autoHighlight:j?`selected`:N?`first`:!1,idPrefix:`tagpicker-listbox`,onClearDraft:N&&!j?()=>M(``):void 0}),Gt=K.getItem,q=u.useCallback(e=>(V?Gt(e)?.label:void 0)??H.get(e)??U.get(e)?.label??e,[V,Gt,H,U]),J=G;if(Bt&&V){let e=K.items.filter(e=>e.value!==z);J=c.createOptionText(N,{labels:[...n.map(e=>e.label),...H.values(),...e.map(e=>e.label),...C.map(q)],values:[...n.map(e=>e.value),...H.keys(),...e.map(e=>e.value)],selected:C})}let Y=J!==null,X=O&&(K.items.length>0||Y),Kt=W.noMatches,Z=O&&(X||N!==``),qt=Z&&!X&&!Y,{layerId:Jt,setReference:Yt,surfaceRef:Xt,floatingProps:Zt}=de.useListboxPopup({open:O,surfaceOpen:Z,onDismiss:()=>D(!1),rootRef:F,anchorRef:I}),Qt=ne.useMergedRefs(F,_t);le.useFormReset(F,()=>{let e=Oe??s.EMPTY_VALUES;w(t=>s.sameValues(t,e)?t:[...e]),M(``)},He);let{focusWithin:$t,onFocus:en,onBlur:tn}=pe.useFocusWithin(_===`count`),Q=_===`count`&&!$t&&!O,nn=u.useMemo(()=>C.map(q),[C,q]),rn=pe.useTagOverflow({active:Q,values:C,labels:nn,control:Lt,group:L,chip:Rt,trigger:I}),$=i.useEventCallback(()=>{I.current?.focus()}),an=i.useEventCallback(()=>{E&&D(!O)}),on=i.useEventCallback(e=>{if(!E||!C.includes(e))return;let t=C.filter(t=>t!==e);w(t),o.announceToggle(g,q(e),!1,t.length)}),sn=i.useEventCallback(()=>{$(),E&&(C.length>0&&w([]),M(``),D(!1))}),cn=i.useEventCallback(e=>{if(!E)return;M(e),O||D(!0);let t=V?Array.from(H,([e,t])=>({value:e,label:t})):n;K.setActiveValue(c.findExactMatch(e,t,T))}),ln=i.useEventCallback(()=>{let e=L.current,t=e?l.tagListControls(e).at(-1):void 0;return t?.focus(),t!==void 0}),un=i.useEventCallback(e=>D(e)),dn=u.useCallback(e=>U.get(e),[U]),fn=u.useMemo(()=>({id:xt,"aria-label":v,"aria-labelledby":y,"aria-describedby":St,"aria-invalid":b,"aria-required":Ct,"aria-errormessage":lt,"aria-details":ut,tabIndex:nt,autoFocus:tt}),[xt,v,y,St,b,Ct,lt,ut,nt,tt]),pn=u.useMemo(()=>({autoComplete:We,autoCapitalize:Ge,autoCorrect:Ke,maxLength:qe,inputMode:Qe,spellCheck:$e,enterKeyHint:et,onFocus:dt,onBlur:ft,onKeyDown:pt,onKeyUp:mt,controlRef:ht}),[We,Ge,Ke,qe,Qe,$e,et,dt,ft,pt,mt,ht]),mn=v===void 0?y??yt?.labelId:y,hn=u.useMemo(()=>({"aria-label":v,"aria-labelledby":mn}),[v,mn]),gn=C.length>0,_n=u.useMemo(()=>({size:x,appearance:S,coreSize:Tt,tagSize:Et,tagAppearance:Dt,disabled:p,readOnly:m,interactive:E,invalidLook:wt,selected:C,labelOf:q,entryOf:dn,labels:W,placeholder:Pe,options:n,warnsUnknownValues:!V&&!h,dataMode:!V,listbox:K,open:O,expanded:X,query:N,surfaceOpen:Z,showCreate:Y,createText:J??``,createValue:z,emptyContent:N!==``&&!Y,layerId:Jt,surfaceRef:Xt,floatingProps:Zt,listLabel:hn,triggerProps:fn,inputProps:pn,summaryId:gn?R:void 0,triggerRef:I,setReference:Yt,controlRef:Lt,groupRef:L,chipRef:Rt,registerTrigger:Mt,registerList:Nt,triggerKind:k,setOpen:un,toggleOpen:an,focusTrigger:$,removeTag:on,clear:sn,editText:cn,focusLastTagControl:ln,expandIcon:Xe,clearable:Ye,overflow:_,collapsed:Q,hiddenValues:rn}),[x,S,Tt,Et,Dt,p,m,E,wt,C,q,dn,W,Pe,n,V,h,K,O,X,N,Z,Y,J,z,Jt,Xt,Zt,hn,fn,pn,gn,R,Yt,Mt,Nt,k,un,an,$,on,sn,cn,ln,Xe,Ye,_,Q,rn]),vn=f==null?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(l.TagPickerControl,{}),(0,d.jsx)(l.TagPickerList,{})]}):(0,d.jsxs)(d.Fragment,{children:[f,zt===void 0&&(0,d.jsx)(l.TagPickerList,{})]});return(0,d.jsxs)(`div`,{"data-size":x,"data-appearance":S,"data-overflow":_,"data-collapsed":Q?``:void 0,...vt,ref:Qt,className:t.cn(ee.tagPickerClassNames.root,`relative`,gt),onFocus:en,onBlur:tn,children:[(0,d.jsx)(fe.TagPickerContext.Provider,{value:_n,children:vn}),gn&&(0,d.jsx)(`span`,{id:R,hidden:!0,children:(g?.summary??ye)(C.map(q))}),(0,d.jsx)(`span`,{role:`status`,className:`sr-only`,children:qt&&Kt}),(0,d.jsx)(ue.HiddenInput,{name:Ve,form:He,disabled:p,value:C,type:`text`,required:bt,onInvalid:$})]})};f.displayName=`TagPicker`,exports.TagPickerRoot=f;
+//# sourceMappingURL=TagPicker.root.cjs.map