@mortenbrudvik/waveui 0.10.0 → 0.11.0

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

@@ -0,0 +1,153 @@
+"use client";
+import { TAG_GROUP_SELECTOR as e, TAG_ITEM_SELECTOR as t } from "../data-display/TagGroup.context.mjs";
+import * as n from "react";
+//#region src/components/input/TagPicker.overflow.ts
+var r = /* @__PURE__ */ new Set();
+function i() {
+	return r;
+}
+function a(e, t) {
+	if (e === t) return !0;
+	if (e.size !== t.size) return !1;
+	for (let n of e) if (!t.has(n)) return !1;
+	return !0;
+}
+function o(e) {
+	let t = parseFloat(e);
+	return Number.isFinite(t) ? t : 0;
+}
+var s = class {
+	snapshot = r;
+	listeners = /* @__PURE__ */ new Set();
+	widths = /* @__PURE__ */ new Map();
+	revealPending = !1;
+	chipWidth = 0;
+	chipPassAllowed = !1;
+	subscribe = (e) => (this.listeners.add(e), () => {
+		this.listeners.delete(e);
+	});
+	getSnapshot = () => this.snapshot;
+	reset() {
+		this.chipWidth = 0, this.revealPending = !1, this.chipPassAllowed = !1, this.publish(r);
+	}
+	measureFromTrigger(e, t, n) {
+		this.chipPassAllowed = !0, this.measure(e, t, n);
+	}
+	measureAfterChip(e, t, n) {
+		if (this.revealPending) {
+			this.revealPending = !1, this.measureFromTrigger(e, t, n);
+			return;
+		}
+		this.chipPassAllowed && (n.chip?.offsetWidth ?? 0) !== this.chipWidth && (this.chipPassAllowed = !1, this.measure(e, t, n));
+	}
+	measure(n, i, a) {
+		let { control: s, group: c, chip: l, trigger: u } = a, d = l?.offsetWidth ?? 0;
+		if (this.chipWidth = d, !s || !c || s.clientWidth === 0) {
+			this.publish(r);
+			return;
+		}
+		let f = s.ownerDocument.defaultView, p = f?.getComputedStyle(s), m = f?.getComputedStyle(c), h = o(p?.columnGap ?? ""), g = o(m?.columnGap ?? ""), _ = u ? o(f?.getComputedStyle(u).minWidth ?? "") : 0, v = l ? 2 : 1, y = s.clientWidth - o(p?.paddingLeft ?? "") - o(p?.paddingRight ?? "") - _ - d - h * v, b = Array.from(c.querySelectorAll(t)).filter((t) => t.parentElement?.closest(e) === c), x = !1;
+		if (n.forEach((e, t) => {
+			let n = b[t], r = i[t] ?? e;
+			n && !n.hidden ? this.widths.set(e, {
+				width: n.offsetWidth,
+				label: r
+			}) : this.widths.get(e)?.label !== r && (x = !0);
+		}), x) {
+			this.revealPending = !0, this.publish(r);
+			return;
+		}
+		let S = 0, C = 0;
+		for (let e of n) {
+			let t = this.widths.get(e)?.width ?? 0, n = S + (C > 0 ? g : 0) + t;
+			if (C > 0 && n > y) break;
+			S = n, C++;
+		}
+		this.publish(C >= n.length ? r : new Set(n.slice(C)));
+	}
+	publish(e) {
+		if (!a(e, this.snapshot)) {
+			this.snapshot = e;
+			for (let e of Array.from(this.listeners)) e();
+		}
+	}
+};
+function c(e) {
+	let { active: t, values: r, labels: a, control: o, group: c, chip: l, trigger: u } = e, [d] = n.useState(() => new s()), f = n.useSyncExternalStore(d.subscribe, d.getSnapshot, i), p = `${r.join("\0")}\u0001${a.join("\0")}`, m = n.useRef(r), h = n.useRef(a);
+	n.useLayoutEffect(() => {
+		m.current = r, h.current = a;
+	}), n.useLayoutEffect(() => {
+		if (!t) {
+			d.reset();
+			return;
+		}
+		let e = () => ({
+			control: o.current,
+			group: c.current,
+			chip: l.current,
+			trigger: u.current
+		}), n = () => d.measureFromTrigger(m.current, h.current, e());
+		n();
+		let r = o.current;
+		if (!r || typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(() => {
+			n();
+		});
+		return i.observe(r), () => i.disconnect();
+	}, [
+		t,
+		p,
+		d,
+		o,
+		c,
+		l,
+		u
+	]);
+	let g = f.size;
+	return n.useLayoutEffect(() => {
+		t && d.measureAfterChip(m.current, h.current, {
+			control: o.current,
+			group: c.current,
+			chip: l.current,
+			trigger: u.current
+		});
+	}, [
+		t,
+		g,
+		d,
+		o,
+		c,
+		l,
+		u
+	]), t ? f : void 0;
+}
+var l = class {
+	focused = !1;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (e) => (this.listeners.add(e), () => {
+		this.listeners.delete(e);
+	});
+	set(e) {
+		if (e !== this.focused) {
+			this.focused = e;
+			for (let e of Array.from(this.listeners)) e();
+		}
+	}
+};
+function u(e) {
+	let [t] = n.useState(() => new l());
+	return {
+		focusWithin: n.useSyncExternalStore(t.subscribe, () => e && t.focused, () => !1),
+		onFocus: (e) => {
+			e.currentTarget.contains(e.target) && t.set(!0);
+		},
+		onBlur: (e) => {
+			let n = e.relatedTarget;
+			(!(n instanceof Node) || !e.currentTarget.contains(n)) && t.set(!1);
+		}
+	};
+}
+//#endregion
+export { u as useFocusWithin, c as useTagOverflow };
+
+//# sourceMappingURL=TagPicker.overflow.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.overflow.mjs","names":["React","EMPTY","getEmpty","sameSet","a","b","value","px","number","TagOverflowStore","listener","values","labels","elements","chipWidth","chip","control","group","view","controlStyle","groupStyle","controlGap","tagGap","triggerMin","trigger","outerGaps","available","tags","TAG_ITEM_SELECTOR","element","TAG_GROUP_SELECTOR","stale","tag","index","label","used","visible","width","next","useTagOverflow","options","store","hidden","valuesKey","valuesRef","labelsRef","active","measure","observed","observer","hiddenCount","FocusWithinStore","focused","useFocusWithin","event"],"sources":["../../../src/components/input/TagPicker.overflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { TAG_GROUP_SELECTOR, TAG_ITEM_SELECTOR } from '../data-display/TagGroup.context';\n\n/*\n * The measuring of TagPicker's single-line layout (`overflow=\"count\"`, D62): which tags give way\n * to the \"+N\" count. A store read through `useSyncExternalStore` (Overflow's pattern), connected\n * in a layout effect, so the first result renders before paint, with one ResizeObserver on the\n * control. Module-only.\n */\n\nconst EMPTY: ReadonlySet<string> = new Set<string>();\n\nfunction getEmpty(): ReadonlySet<string> {\n  return EMPTY;\n}\n\nfunction sameSet(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {\n  if (a === b) return true;\n  if (a.size !== b.size) return false;\n  for (const value of a) if (!b.has(value)) return false;\n  return true;\n}\n\n/** A number of pixels from a computed length (`''` and `normal` are 0). */\nfunction px(value: string): number {\n  const number = parseFloat(value);\n  return Number.isFinite(number) ? number : 0;\n}\n\n/** The elements the measuring reads. */\nexport interface TagOverflowElements {\n  control: HTMLElement | null;\n  group: HTMLElement | null;\n  chip: HTMLElement | null;\n  trigger: HTMLElement | null;\n}\n\n/** The hidden tag values of the single-line layout, and the tag widths seen while visible. */\nclass TagOverflowStore {\n  private snapshot: ReadonlySet<string> = EMPTY;\n  private readonly listeners = new Set<() => void>();\n  /** Widths of the tags (by value), read while each was visible, with the label they had then. */\n  private readonly widths = new Map<string, { width: number; label: string }>();\n  /** A hidden tag changed its label: every tag shows, and the next pass measures again. */\n  private revealPending = false;\n  /** The chip's width at the last measure (0 while it does not render). */\n  private chipWidth = 0;\n  /** Whether the chip's next width change may measure once more (reset by every trigger). */\n  private chipPassAllowed = false;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): ReadonlySet<string> => this.snapshot;\n\n  /** Shows every tag again (the layout wraps, or nothing is measured). */\n  reset(): void {\n    this.chipWidth = 0;\n    this.revealPending = false;\n    this.chipPassAllowed = false;\n    this.publish(EMPTY);\n  }\n\n  /** A measure from a trigger (connect, resize, new values): allows one chip pass after it. */\n  measureFromTrigger(\n    values: readonly string[],\n    labels: readonly string[],\n    elements: TagOverflowElements,\n  ): void {\n    this.chipPassAllowed = true;\n    this.measure(values, labels, elements);\n  }\n\n  /**\n   * After the chip rendered, unmounted or changed: measures once more when its width changed,\n   * at most once per trigger, so a count that changes the chip's width cannot loop.\n   */\n  measureAfterChip(\n    values: readonly string[],\n    labels: readonly string[],\n    elements: TagOverflowElements,\n  ): void {\n    if (this.revealPending) {\n      // The tags a label change revealed have rendered: measure them (a trigger of its own).\n      this.revealPending = false;\n      this.measureFromTrigger(values, labels, elements);\n      return;\n    }\n    if (!this.chipPassAllowed) return;\n    if ((elements.chip?.offsetWidth ?? 0) === this.chipWidth) return;\n    this.chipPassAllowed = false;\n    this.measure(values, labels, elements);\n  }\n\n  /**\n   * Measures and publishes the hidden values: the largest prefix of `values` whose tags (and the\n   * gaps between them) fit the control's content width less the trigger's minimum width, the\n   * chip's width and the gaps around them; at least one tag stays.\n   */\n  private measure(\n    values: readonly string[],\n    labels: readonly string[],\n    elements: TagOverflowElements,\n  ): void {\n    const { control, group, chip, trigger } = elements;\n    const chipWidth = chip?.offsetWidth ?? 0;\n    this.chipWidth = chipWidth;\n    if (!control || !group || control.clientWidth === 0) {\n      // No layout (the server, a hidden picker): every tag shows.\n      this.publish(EMPTY);\n      return;\n    }\n    const view = control.ownerDocument.defaultView;\n    const controlStyle = view?.getComputedStyle(control);\n    const groupStyle = view?.getComputedStyle(group);\n    const controlGap = px(controlStyle?.columnGap ?? '');\n    const tagGap = px(groupStyle?.columnGap ?? '');\n    const triggerMin = trigger ? px(view?.getComputedStyle(trigger).minWidth ?? '') : 0;\n    // The group and the trigger, plus the chip while it renders: one gap between each.\n    const outerGaps = chip ? 2 : 1;\n    const available =\n      control.clientWidth -\n      px(controlStyle?.paddingLeft ?? '') -\n      px(controlStyle?.paddingRight ?? '') -\n      triggerMin -\n      chipWidth -\n      controlGap * outerGaps;\n\n    // The tags of this group in DOM order, which is the order of the selected values.\n    const tags = Array.from(group.querySelectorAll<HTMLElement>(TAG_ITEM_SELECTOR)).filter(\n      (element) => element.parentElement?.closest(TAG_GROUP_SELECTOR) === group,\n    );\n    let stale = false;\n    values.forEach((value, index) => {\n      const tag = tags[index];\n      const label = labels[index] ?? value;\n      if (tag && !tag.hidden) this.widths.set(value, { width: tag.offsetWidth, label });\n      else if (this.widths.get(value)?.label !== label) stale = true;\n    });\n    if (stale) {\n      // A hidden tag's width is unknown for its current label: show every tag, and measure once\n      // they have rendered.\n      this.revealPending = true;\n      this.publish(EMPTY);\n      return;\n    }\n\n    let used = 0;\n    let visible = 0;\n    for (const value of values) {\n      const width = this.widths.get(value)?.width ?? 0;\n      const next = used + (visible > 0 ? tagGap : 0) + width;\n      if (visible > 0 && next > available) break;\n      used = next;\n      visible++;\n    }\n    this.publish(visible >= values.length ? EMPTY : new Set(values.slice(visible)));\n  }\n\n  private publish(next: ReadonlySet<string>): void {\n    if (sameSet(next, this.snapshot)) return;\n    this.snapshot = next;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\n/** Options of {@link useTagOverflow}. */\nexport interface UseTagOverflowOptions {\n  /** Whether the tags stay on one line (count mode while collapsed); otherwise nothing is measured. */\n  active: boolean;\n  /** The selected values, in tag order. */\n  values: readonly string[];\n  /** Their labels, in the same order: a changed label re-measures its tag. */\n  labels: readonly string[];\n  control: React.RefObject<HTMLElement | null>;\n  group: React.RefObject<HTMLElement | null>;\n  chip: React.RefObject<HTMLElement | null>;\n  trigger: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * The values of the tags that give way to the \"+N\" count while TagPicker's single-line layout is\n * active (`undefined` otherwise). It measures when it becomes active, on a resize of the control\n * (one ResizeObserver, created only while active), when the selected values or their labels\n * change (a hidden tag whose label changed is shown first, then measured), and once more when\n * the chip's width changes; it publishes only when the hidden set changes. The server render\n * and the first client render hide nothing.\n */\nexport function useTagOverflow(options: UseTagOverflowOptions): ReadonlySet<string> | undefined {\n  const { active, values, labels, control, group, chip, trigger } = options;\n  const [store] = React.useState(() => new TagOverflowStore());\n  const hidden = React.useSyncExternalStore(store.subscribe, store.getSnapshot, getEmpty);\n  // The values and their labels, compared by content: a new tag or a new label measures again.\n  const valuesKey = `${values.join('\\u0000')}\\u0001${labels.join('\\u0000')}`;\n  const valuesRef = React.useRef(values);\n  const labelsRef = React.useRef(labels);\n\n  React.useLayoutEffect(() => {\n    valuesRef.current = values;\n    labelsRef.current = labels;\n  });\n\n  React.useLayoutEffect(() => {\n    if (!active) {\n      store.reset();\n      return undefined;\n    }\n    const elements = (): TagOverflowElements => ({\n      control: control.current,\n      group: group.current,\n      chip: chip.current,\n      trigger: trigger.current,\n    });\n    const measure = () =>\n      store.measureFromTrigger(valuesRef.current, labelsRef.current, elements());\n    measure();\n    const observed = control.current;\n    if (!observed || typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(() => {\n      measure();\n    });\n    observer.observe(observed);\n    return () => observer.disconnect();\n    // `valuesKey` re-measures when the selected values change (compared by content).\n  }, [active, valuesKey, store, control, group, chip, trigger]);\n\n  // The chip mounts, unmounts or changes its text after a measure: when its width changed, measure\n  // once more (a second change in that pass is left for the next trigger, so nothing loops).\n  const hiddenCount = hidden.size;\n  React.useLayoutEffect(() => {\n    if (!active) return;\n    store.measureAfterChip(valuesRef.current, labelsRef.current, {\n      control: control.current,\n      group: group.current,\n      chip: chip.current,\n      trigger: trigger.current,\n    });\n  }, [active, hiddenCount, store, control, group, chip, trigger]);\n\n  return active ? hidden : undefined;\n}\n\n/** Whether focus is inside the picker's root, kept outside React state (see {@link useFocusWithin}). */\nclass FocusWithinStore {\n  focused = false;\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  set(focused: boolean): void {\n    if (focused === this.focused) return;\n    this.focused = focused;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\n/** What {@link useFocusWithin} returns. */\nexport interface FocusWithin {\n  /** Whether focus is inside the root; always `false` while `active` is. */\n  focusWithin: boolean;\n  /** For the root's `onFocus`: focus inside it in the DOM. */\n  onFocus: (event: React.FocusEvent<HTMLElement>) => void;\n  /** For the root's `onBlur`: focus left it (or the window). */\n  onBlur: (event: React.FocusEvent<HTMLElement>) => void;\n}\n\n/**\n * Tracks focus inside the root in every mode, but renders only for it while `active` (count\n * mode): a wrapping picker does not re-render on focus moves, and a switch to count mode reads\n * where focus is at that moment, so the state never goes stale. The server render and hydration\n * read `false`.\n */\nexport function useFocusWithin(active: boolean): FocusWithin {\n  const [store] = React.useState(() => new FocusWithinStore());\n  const focusWithin = React.useSyncExternalStore(\n    store.subscribe,\n    () => active && store.focused,\n    () => false,\n  );\n  const onFocus = (event: React.FocusEvent<HTMLElement>) => {\n    if (event.currentTarget.contains(event.target)) store.set(true);\n  };\n  const onBlur = (event: React.FocusEvent<HTMLElement>) => {\n    const next = event.relatedTarget;\n    if (!(next instanceof Node) || !event.currentTarget.contains(next)) store.set(false);\n  };\n  return { focusWithin, onFocus, onBlur };\n}\n"],"mappings":";;;;AAUA,IAAMC,oBAA6B,IAAI,IAAY;AAEnD,SAASC,IAAgC;CACvC,OAAOD;AACT;AAEA,SAASE,EAAQ,GAAwB,GAAiC;CACxE,IAAIC,MAAMC,GAAG,OAAO;CACpB,IAAID,EAAE,SAASC,EAAE,MAAM,OAAO;CAC9B,KAAK,IAAMC,KAASF,GAAG,IAAI,CAACC,EAAE,IAAIC,CAAK,GAAG,OAAO;CACjD,OAAO;AACT;AAGA,SAASC,EAAG,GAAuB;CACjC,IAAMC,IAAS,WAAWF,CAAK;CAC/B,OAAO,OAAO,SAASE,CAAM,IAAIA,IAAS;AAC5C;AAWA,IAAMC,IAAN,MAAuB;CACrB,WAAwCR;CACxC,4BAA6B,IAAI,IAAgB;CAEjD,yBAA0B,IAAI,IAA8C;CAE5E,gBAAwB;CAExB,YAAoB;CAEpB,kBAA0B;CAE1B,aAAa,OACX,KAAK,UAAU,IAAIS,CAAQ,SACd;EACX,KAAK,UAAU,OAAOA,CAAQ;CAChC;CAGF,oBAAyC,KAAK;CAG9C,QAAc;EAIZ,AAHA,KAAK,YAAY,GACjB,KAAK,gBAAgB,IACrB,KAAK,kBAAkB,IACvB,KAAK,QAAQT,CAAK;CACpB;CAGA,mBACE,GACA,GACA,GACM;EAEN,AADA,KAAK,kBAAkB,IACvB,KAAK,QAAQU,GAAQC,GAAQC,CAAQ;CACvC;CAMA,iBACE,GACA,GACA,GACM;EACN,IAAI,KAAK,eAAe;GAGtB,AADA,KAAK,gBAAgB,IACrB,KAAK,mBAAmBF,GAAQC,GAAQC,CAAQ;GAChD;EACF;EACA,AAAK,KAAK,oBACLA,EAAS,MAAM,eAAe,OAAO,KAAK,cAC/C,KAAK,kBAAkB,IACvB,KAAK,QAAQF,GAAQC,GAAQC,CAAQ;CACvC;CAOA,QACE,GACA,GACA,GACM;EACN,IAAM,EAAE,YAAS,UAAO,SAAM,eAAYA,GACpCC,IAAYC,GAAM,eAAe;EAEvC,IADA,KAAK,YAAYD,GACb,CAACE,KAAW,CAACC,KAASD,EAAQ,gBAAgB,GAAG;GAEnD,KAAK,QAAQf,CAAK;GAClB;EACF;EACA,IAAMiB,IAAOF,EAAQ,cAAc,aAC7BG,IAAeD,GAAM,iBAAiBF,CAAO,GAC7CI,IAAaF,GAAM,iBAAiBD,CAAK,GACzCI,IAAad,EAAGY,GAAc,aAAa,EAAE,GAC7CG,IAASf,EAAGa,GAAY,aAAa,EAAE,GACvCG,IAAaC,IAAUjB,EAAGW,GAAM,iBAAiBM,CAAO,CAAC,CAAC,YAAY,EAAE,IAAI,GAE5EC,IAAYV,IAAO,IAAI,GACvBW,IACJV,EAAQ,cACRT,EAAGY,GAAc,eAAe,EAAE,IAClCZ,EAAGY,GAAc,gBAAgB,EAAE,IACnCI,IACAT,IACAO,IAAaI,GAGTE,IAAO,MAAM,KAAKV,EAAM,iBAA8BW,CAAiB,CAAC,CAAC,CAAC,QAC7E,MAAYC,EAAQ,eAAe,QAAQC,CAAkB,MAAMb,CACtE,GACIc,IAAQ;EAOZ,IANApB,EAAO,SAAS,GAAO,MAAU;GAC/B,IAAMqB,IAAML,EAAKM,IACXC,IAAQtB,EAAOqB,MAAU3B;GAC/B,AAAI0B,KAAO,CAACA,EAAI,SAAQ,KAAK,OAAO,IAAI1B,GAAO;IAAE,OAAO0B,EAAI;IAAa;GAAM,CAAC,IACvE,KAAK,OAAO,IAAI1B,CAAK,CAAC,EAAE,UAAU4B,MAAO,IAAQ;EAC5D,CAAC,GACGH,GAAO;GAIT,AADA,KAAK,gBAAgB,IACrB,KAAK,QAAQ9B,CAAK;GAClB;EACF;EAEA,IAAIkC,IAAO,GACPC,IAAU;EACd,KAAK,IAAM9B,KAASK,GAAQ;GAC1B,IAAM0B,IAAQ,KAAK,OAAO,IAAI/B,CAAK,CAAC,EAAE,SAAS,GACzCgC,IAAOH,KAAQC,IAAU,IAAId,IAAS,KAAKe;GACjD,IAAID,IAAU,KAAKE,IAAOZ,GAAW;GAErC,AADA,IAAOY,GACP;EACF;EACA,KAAK,QAAQF,KAAWzB,EAAO,SAASV,IAAQ,IAAI,IAAIU,EAAO,MAAMyB,CAAO,CAAC,CAAC;CAChF;CAEA,QAAgB,GAAiC;EAC/C,IAAI,GAAQE,GAAM,KAAK,QAAQ,GAC/B;QAAK,WAAWA;GAChB,KAAK,IAAM5B,KAAY,MAAM,KAAK,KAAK,SAAS,GAAG,EAAS;EAD5C;CAElB;AACF;AAwBA,SAAgB6B,EAAe,GAAiE;CAC9F,IAAM,EAAE,WAAQ,WAAQ,WAAQ,YAAS,UAAO,SAAM,eAAYC,GAC5D,CAACC,KAASzC,EAAM,eAAe,IAAIS,EAAiB,CAAC,GACrDiC,IAAS1C,EAAM,qBAAqByC,EAAM,WAAWA,EAAM,aAAavC,CAAQ,GAEhFyC,IAAY,GAAGhC,EAAO,KAAK,IAAQ,EAAE,QAAQC,EAAO,KAAK,IAAQ,KACjEgC,IAAY5C,EAAM,OAAOW,CAAM,GAC/BkC,IAAY7C,EAAM,OAAOY,CAAM;CAOrC,AALAZ,EAAM,sBAAsB;EAE1B,AADA,EAAU,UAAUW,GACpB,EAAU,UAAUC;CACtB,CAAC,GAEDZ,EAAM,sBAAsB;EAC1B,IAAI,CAAC8C,GAAQ;GACX,EAAM,MAAM;GACZ;EACF;EACA,IAAMjC,WAAuC;GAC3C,SAASG,EAAQ;GACjB,OAAOC,EAAM;GACb,MAAMF,EAAK;GACX,SAASS,EAAQ;EACnB,IACMuB,UACJN,EAAM,mBAAmBG,EAAU,SAASC,EAAU,SAAShC,EAAS,CAAC;EAC3E,EAAQ;EACR,IAAMmC,IAAWhC,EAAQ;EACzB,IAAI,CAACgC,KAAY,OAAO,iBAAmB,KAAa;EACxD,IAAMC,IAAW,IAAI,qBAAqB;GACxC,EAAQ;EACV,CAAC;EAED,OADAA,EAAS,QAAQD,CAAQ,SACZC,EAAS,WAAW;CAEnC,GAAG;EAACH;EAAQH;EAAWF;EAAOzB;EAASC;EAAOF;EAAMS;CAAO,CAAC;CAI5D,IAAM0B,IAAcR,EAAO;CAW3B,OAVA1C,EAAM,sBAAsB;EAC1B,AAAK8C,KACLL,EAAM,iBAAiBG,EAAU,SAASC,EAAU,SAAS;GAC3D,SAAS7B,EAAQ;GACjB,OAAOC,EAAM;GACb,MAAMF,EAAK;GACX,SAASS,EAAQ;EACnB,CAAC;CACH,GAAG;EAACsB;EAAQI;EAAaT;EAAOzB;EAASC;EAAOF;EAAMS;CAAO,CAAC,GAEvDsB,IAASJ,IAAS,KAAA;AAC3B;AAGA,IAAMS,IAAN,MAAuB;CACrB,UAAU;CACV,4BAA6B,IAAI,IAAgB;CAEjD,aAAa,OACX,KAAK,UAAU,IAAIzC,CAAQ,SACd;EACX,KAAK,UAAU,OAAOA,CAAQ;CAChC;CAGF,IAAI,GAAwB;EAC1B,IAAI0C,MAAY,KAAK,SACrB;QAAK,UAAUA;GACf,KAAK,IAAM1C,KAAY,MAAM,KAAK,KAAK,SAAS,GAAG,EAAS;EAD7C;CAEjB;AACF;AAkBA,SAAgB2C,EAAe,GAA8B;CAC3D,IAAM,CAACZ,KAASzC,EAAM,eAAe,IAAImD,EAAiB,CAAC;CAa3D,OAAO;EAAE,aAZWnD,EAAM,qBACxByC,EAAM,iBACAK,KAAUL,EAAM,eAChB,EASC;EAAa,UAPL,MAAyC;GACxD,AAAIa,EAAM,cAAc,SAASA,EAAM,MAAM,KAAGb,EAAM,IAAI,EAAI;EAChE;EAK+B,SAJf,MAAyC;GACvD,IAAMH,IAAOgB,EAAM;GACnB,CAAI,EAAEhB,aAAgB,SAAS,CAACgB,EAAM,cAAc,SAAShB,CAAI,MAAGG,EAAM,IAAI,EAAK;EACrF;CACsC;AACxC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.parts.cjs","names":["FOCUSABLE_SELECTOR","isFocusable","getArrowIntent","getDirection","React","MERGED_DISABLED_FOCUSABLE_PROPS","cn","tagPickerClassNames","pickerIconButtonClasses","pickerButtonOffset","focusRing","DismissIcon","pickerGlyphSize","useMergedRefs","showsExpandButton","TagPickerControlContext","tagPickerControlClassNames","inputAppearanceClasses","inputFocusWithin","pickerEndPadding","composeEventHandlers","_Fragment","PickerExpandButton","useTagPickerContext","slotRendersContent","TagHostContext","Tag","TagGroupHostContext","TagGroup","tagPickerGroupClassNames","tagRootClasses","joinIds","tagPickerInputClassNames","useTagPickerControlContext","tagPickerButtonClassNames","Option","TagPickerOption","ListboxSurface","tagPickerListClassNames","OptionGroup","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_direction","require_focus","require_useMergedRefs","require_aria","require_styles","require_Button_slots","require_icons","require_pickerStyles","require_Combobox_expand","require_Option","require_TagPicker_context","require_usePreserveFocus","require_TagGroup_context","require_tagStyles","require_Tag","require_TagGroup","require_TagPicker_option","react","react_jsx_runtime","TAG_PICKER_SIZE","END_BUTTON_TOP","tagListControls","group","element","isPreviousArrow","event","useClearButtonHold","focused","setFocused","held","setHeld","prevDisabled","setPrevDisabled","disabled","isHeld","NATIVELY_DISABLED","TagPickerClearButton","ref","ctx","triggerRef","hold","stateProps","position","TagPickerControlImpl","rest","controlContext","registerTrigger","mergedRef","controlRef","setReference","glyph","expandIcon","showExpand","showClear","buttons","handlePress","control","target","focusable","className","onMouseDown","children","TagPickerGroup","TagPickerInput","TagPickerControl","props","TagPickerDefaultTag","label","value","dismissName","host","media","hasMedia","mediaSlot","TagPickerGroupImpl","ariaLabel","groupRef","pointerRef","hiddenValues","usesDefaultTags","unknownValues","v","handleKeyDown","controls","index","focusTrigger","intent","handleDismiss","handleClickCapture","onClickCapture","hiddenCount","onKeyDown","chipRef","triggerNaming","named","own","TagPickerInputImpl","ariaLabelledBy","ariaDescribedBy","inputProps","input","listbox","naming","triggerProps","placeholder","onChange","onClick","onKeyUp","onFocus","onBlur","TagPickerButtonImpl","comboboxProps","TagPickerButton","TagPickerListImpl","registerList","createLabel","createOption","content","item","entry","ownName","TagPickerList","TagPickerOptionGroup"],"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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"}