@box-kite/react 1.0.0 → 2.0.1

package/components/combobox.d.ts

@@ -0,0 +1,121 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { ComboboxFilter, ComboboxRow, ComboboxRowDef } from '../utils/combobox/comboboxUtils';
+import { ComboboxVirtualize } from './combobox/comboboxListbox';
+/** Why the listbox opened or closed. `select` is the transition worth telling apart from a dismissal. */
+export type ComboboxOpenReason = 'trigger' | 'input' | 'select' | 'escape' | 'outside-pointer' | 'tab' | 'imperative';
+/** Why the selection changed. `remove` is a chip's own button; `deselect` is toggling a row back off. */
+export type ComboboxValueReason = 'select' | 'deselect' | 'create' | 'remove';
+/** Why the typed text changed. Only `input` came from a keystroke; the rest are the component tidying up. */
+export type ComboboxQueryReason = 'input' | 'select' | 'clear' | 'close';
+/** How a row is read and how it is drawn. Only `label` is required — it is the text and the name. */
+export interface ComboboxDef<TRow> extends ComboboxRowDef<TRow> {
+    /** Custom row rendering. The label is still what is searched, what the field shows and what is read out. */
+    display?: (row: TRow) => React.ReactNode;
+}
+interface BaseProps<TRow, TKey extends keyof ComponentsAndVariants = 'combobox'> extends Omit<BoxProps<'div', TKey>, 'ref' | 'tag' | 'children' | 'defaultValue' | 'onChange' | 'disabled' | 'placeholder' | 'open'> {
+    /** Every row the combobox can offer. Filtered by the query unless `filter` is `false`. */
+    data: TRow[];
+    /**
+     * How to read a row: its `label` (the text, which is searched and read out), its `key` (what makes two
+     * rows the same row), and optionally `disabled` and `display`. A key of the row, or a function.
+     */
+    def: ComboboxDef<TRow>;
+    /**
+     * The combobox's name, rendered above it in a real `<label>`. A combobox is not named by what it
+     * contains, so without this (or an `aria-label` of your own in `props`) it has no accessible name.
+     */
+    label?: React.ReactNode;
+    /** Styles for the `<label>` itself — it sits above the control rather than wrapping it. */
+    labelProps?: BoxProps<'label'>;
+    /** The field's placeholder. Not a name — it is gone on the first keystroke. See `label`. */
+    placeholder?: string;
+    /** What the selection submits under: one hidden input per selected row, carrying its key. */
+    name?: string;
+    /** Not editable and not openable, but still read out. The real attribute, on the field itself. */
+    disabled?: boolean;
+    /** Attributes for the `<input>` that *is* the combobox — an `aria-label`, an `inputMode`, an `id`. */
+    props?: Record<string, unknown>;
+    /** Styles for the popup (`combobox.items`). */
+    itemsProps?: BoxStyleProps;
+    /** Drop the chevron. It is decoration either way: `aria-hidden` and never focusable. */
+    hideIcon?: boolean;
+    /**
+     * Which rows a query leaves, and in what order — it takes the whole list so it can rank as well as
+     * reject, and is handed the label reader so composing it with the built-in one costs nothing.
+     * `false` means the data is already filtered, which is what a server that searched needs.
+     */
+    filter?: ComboboxFilter<TRow> | false;
+    /** Rows are on their way. The popup says so rather than claiming there are none. */
+    loading?: boolean;
+    /** What the popup shows while `loading` and there is nothing to show yet. */
+    loadingText?: React.ReactNode;
+    /** What the popup shows when the query matched nothing. */
+    emptyText?: React.ReactNode;
+    /**
+     * Turns the query into the row it would create, or `null` to refuse it. Its presence is what offers a
+     * create row at all, and one is never offered for a query a row already answers by name.
+     */
+    createRow?: (query: string) => TRow | null;
+    /** What the create row reads. Given the query, since the row it would make is not the one shown. */
+    createLabel?: (query: string) => React.ReactNode;
+    /**
+     * Render only the rows on screen, which is what a list of thousands needs to open in one frame. On by
+     * default above a hundred rows; an object tunes it (`threshold` is what turns it on earlier),
+     * `false` never windows and `true` always does. Rows have to be a uniform height for it, which is
+     * measured rather than declared — a `display` that varies one wants `false`.
+     */
+    virtualize?: boolean | ComboboxVirtualize;
+    /** A chip's remove button's accessible name, given the row's label. */
+    removeLabel?: (label: string) => string;
+    /** The typed text. Controlled — pair it with `onQueryChange`, which is also the hook an async search uses. */
+    query?: string;
+    /** The text the field starts with when the combobox owns its own query. */
+    defaultQuery?: string;
+    /** Fires with the text and why it changed. Only `input` came from a keystroke. */
+    onQueryChange?: ChangeHandler<string, ComboboxQueryReason>;
+    /** Whether the listbox is showing. Controlled — pair it with `onOpenChange`. */
+    open?: boolean;
+    /** Whether it starts open, when the combobox owns that itself. */
+    defaultOpen?: boolean;
+    /** Fires with the new state and why: a press, a keystroke, a choice, Escape, or a press outside. */
+    onOpenChange?: ChangeHandler<boolean, ComboboxOpenReason>;
+}
+/**
+ * One row at a time, which is the default: the value is a row or `null`, and the field shows the selected
+ * row's label whenever nothing is being typed.
+ */
+interface SingleProps<TRow> {
+    /** Leave it off, or `false`. See the multiple half for the other shape. */
+    multiple?: false;
+    /** The selected row, or `null`. Controlled — pair it with `onValueChange`. */
+    value?: TRow | null;
+    /** What is selected to begin with, when the combobox owns its own value. */
+    defaultValue?: TRow | null;
+    /** Fires with the row itself — the object out of `data`, not a key dug out of it — and why. */
+    onValueChange?: ChangeHandler<TRow | null, ComboboxValueReason>;
+}
+/**
+ * Several rows, shown as chips in front of the field, and the value is an array. Choosing a row that is
+ * already chosen takes it off again, which is the keyboard's way to a chip its own button cannot reach.
+ */
+interface MultipleProps<TRow> {
+    /** `true` is what turns the value into an array — the one shape a combobox cannot read off its value. */
+    multiple: true;
+    /** The selected rows. Controlled — pair it with `onValueChange`. */
+    value?: TRow[];
+    /** What is selected to begin with, when the combobox owns its own value. */
+    defaultValue?: TRow[];
+    /** Fires with the whole selection, as rows, and why it changed. */
+    onValueChange?: ChangeHandler<TRow[], ComboboxValueReason>;
+}
+type Props<TRow, TKey extends keyof ComponentsAndVariants = 'combobox'> = BaseProps<TRow, TKey> & (SingleProps<TRow> | MultipleProps<TRow>);
+interface ComboboxType {
+    <TRow, TKey extends keyof ComponentsAndVariants = 'combobox'>(props: Props<TRow, TKey> & RefAttributes<HTMLInputElement>): React.ReactNode;
+}
+declare const Combobox: ComboboxType;
+export default Combobox;
+export { default as ComboboxUtils } from '../utils/combobox/comboboxUtils';
+export type { ComboboxFilter, ComboboxRow, ComboboxRowDef, ComboboxVirtualize };

package/components/combobox.mjs

@@ -0,0 +1,563 @@
+"use client";
+import { n as e } from "../effects.mjs";
+import t from "../box.mjs";
+import { a as n, i as r, r as i, t as a } from "../behavior.mjs";
+import { t as o } from "../identity.mjs";
+import { Path as s, Svg as c } from "./svg.mjs";
+import l from "./flex.mjs";
+import u from "./overlay.mjs";
+import d from "./presence.mjs";
+import { forwardRef as f, useCallback as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/utils/combobox/comboboxUtils.ts
+var b;
+(function(e) {
+	function t(e, t) {
+		return typeof e == "function" ? e(t) : t[e];
+	}
+	e.read = t;
+	function n(e, n) {
+		let r = t(e.label, n);
+		return r == null ? "" : String(r);
+	}
+	e.labelOf = n;
+	function r(e, r) {
+		return e.key === void 0 ? n(e, r) : t(e.key, r);
+	}
+	e.keyOf = r;
+	function i(e, n) {
+		return e.disabled !== void 0 && t(e.disabled, n) === !0;
+	}
+	e.isDisabled = i;
+	let a = /\p{M}/gu;
+	function o(e) {
+		return e.normalize("NFD").replace(a, "").toLowerCase();
+	}
+	e.normalize = o;
+	function s(e, t) {
+		return o(e).includes(o(t));
+	}
+	e.matches = s;
+	function c(e, t, n) {
+		return t === "" ? e : e.filter((e) => s(n(e), t));
+	}
+	e.filterRows = c;
+	function l(e) {
+		return e == null ? [] : Array.isArray(e) ? e : [e];
+	}
+	e.toArray = l;
+	function u(e, t, n) {
+		let r = n(t);
+		return e.some((e) => n(e) === r);
+	}
+	e.isSelected = u;
+	function d(e, t, n, r) {
+		return n ? u(e, t, r) ? e.filter((e) => r(e) !== r(t)) : [...e, t] : [t];
+	}
+	e.toggle = d;
+	function f(e) {
+		let { data: t, def: r, query: i, filter: a, typed: s, createRow: c } = e, l = (e) => n(r, e), u = (!s || a === !1 ? t : a(t, i, l)).map((e) => ({
+			kind: "option",
+			row: e
+		}));
+		return c && i !== "" && !t.some((e) => o(l(e)) === o(i)) && c(i) !== null && u.push({
+			kind: "create",
+			query: i
+		}), u;
+	}
+	e.rowsFor = f;
+	function p(e, t) {
+		return t.kind === "option" && i(e, t.row);
+	}
+	e.isRowDisabled = p;
+	function m(e, t, n, i = "first") {
+		let a = (e) => r(n, e), o = e.findIndex((e) => e.kind === "option" && u(t, e.row, a));
+		if (o !== -1 && !p(n, e[o])) return o;
+		let s = e.map((e, t) => p(n, e) ? -1 : t).filter((e) => e !== -1);
+		return (i === "last" ? s[s.length - 1] : s[0]) ?? -1;
+	}
+	e.activeIndexFor = m;
+})(b ||= {});
+var x = b;
+//#endregion
+//#region src/components/combobox/comboboxChips.tsx
+function S(e) {
+	let { selection: t, def: n, display: r, removeLabel: i, onRemove: a, disabled: o, variant: u } = e;
+	return /* @__PURE__ */ v(_, { children: t.map((e) => {
+		let t = x.labelOf(n, e);
+		return /* @__PURE__ */ y(l, {
+			component: "combobox.chip",
+			variant: u,
+			ai: "center",
+			gap: 1,
+			children: [r?.(e) ?? t, !o && /* @__PURE__ */ v(l, {
+				tag: "button",
+				component: "combobox.remove",
+				variant: u,
+				ai: "center",
+				jc: "center",
+				props: {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": i(t),
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: (t) => {
+						t.stopPropagation(), a(e, t);
+					}
+				},
+				children: /* @__PURE__ */ v(c, {
+					viewBox: "0 0 24 24",
+					width: "0.625rem",
+					props: { fill: "none" },
+					children: /* @__PURE__ */ v(s, {
+						d: "M6 6 18 18M18 6 6 18",
+						stroke: "currentColor",
+						strokeWidth: 3,
+						strokeLinecap: "round"
+					})
+				})
+			})]
+		}, x.keyOf(n, e));
+	}) });
+}
+//#endregion
+//#region src/utils/virtual/virtualUtils.ts
+var C;
+(function(e) {
+	let t = e.DEFAULT_OVERSCAN = 4, n = e.DEFAULT_THRESHOLD = 100;
+	e.DEFAULT_ITEM_HEIGHT = 36, e.DEFAULT_VIEW_HEIGHT = 248;
+	function r(e, t, n) {
+		return Math.min(Math.max(e, t), n);
+	}
+	function i(e, t, r = n) {
+		return t ?? e > r;
+	}
+	e.shouldVirtualize = i;
+	function a(e) {
+		let { count: n, itemHeight: i, viewHeight: a, scrollTop: o, overscan: s = t, activeIndex: c = -1 } = e;
+		if (n <= 0 || i <= 0) return {
+			startIndex: 0,
+			endIndex: Math.max(0, n),
+			offsetY: 0,
+			totalHeight: 0
+		};
+		let l = Math.max(1, Math.ceil(a / i)), u = Math.min(n, l + s * 2), d = n - u, f = r(Math.floor(o / i) - s, 0, d);
+		return c >= 0 && c < n && (c < f ? f = r(c - s, 0, d) : c >= f + u && (f = r(c + 1 + s - u, 0, d))), {
+			startIndex: f,
+			endIndex: f + u,
+			offsetY: f * i,
+			totalHeight: n * i
+		};
+	}
+	e.windowFor = a;
+})(C ||= {});
+var w = C;
+//#endregion
+//#region src/react/hooks/useVirtualization.ts
+function ee(t) {
+	let { count: r, scrollerRef: i, itemHeight: a, viewHeight: o, overscan: s, threshold: c, enabled: l, activeIndex: u } = t, [d, f] = g({
+		top: 0,
+		at: -1
+	}), [m, _] = g({
+		itemHeight: 0,
+		viewHeight: 0
+	}), v = h(null), y = p((e) => {
+		v.current = e;
+	}, []), b = w.shouldVirtualize(r, l, c), x = n(() => {
+		let e = i.current, t = v.current;
+		if (!e || !t) return;
+		let n = t.children, r = n[0], a = n[1], o = a ? a.offsetTop - r.offsetTop : r?.offsetHeight ?? 0, s = e.clientHeight;
+		_((e) => e.itemHeight === o && e.viewHeight === s ? e : {
+			itemHeight: o,
+			viewHeight: s
+		});
+	});
+	e(() => {
+		if (!b || (x(), typeof ResizeObserver > "u")) return;
+		let e = i.current;
+		if (!e) return;
+		let t = new ResizeObserver(x);
+		return t.observe(e), () => t.disconnect();
+	}, [
+		b,
+		r,
+		x,
+		i
+	]);
+	let S = n((e) => {
+		f({
+			top: e.currentTarget.scrollTop,
+			at: u ?? -1
+		});
+	}), C = w.windowFor({
+		count: r,
+		itemHeight: a ?? (m.itemHeight > 0 ? m.itemHeight : w.DEFAULT_ITEM_HEIGHT),
+		viewHeight: o ?? (m.viewHeight > 0 ? m.viewHeight : w.DEFAULT_VIEW_HEIGHT),
+		scrollTop: d.top,
+		overscan: s,
+		activeIndex: u === d.at ? -1 : u
+	});
+	return b ? {
+		...C,
+		virtualized: b,
+		contentRef: y,
+		onScroll: S
+	} : {
+		startIndex: 0,
+		endIndex: r,
+		offsetY: 0,
+		totalHeight: 0,
+		virtualized: b,
+		contentRef: y,
+		onScroll: S
+	};
+}
+//#endregion
+//#region src/components/combobox/comboboxListbox.tsx
+function te(e, t, n, r) {
+	return e ? {
+		role: "listbox",
+		"aria-labelledby": r,
+		...t ? { "aria-multiselectable": !0 } : {},
+		...n ? { "aria-busy": !0 } : {}
+	} : { role: "status" };
+}
+function ne(e) {
+	let { presence: n, rows: r, def: i, display: a, selection: o, multiple: s, activeIndex: c, optionId: d, rowRef: f, onSelect: m } = e, { anchorRef: _, popupRef: b, listboxId: S, labelledBy: C, loading: w, loadingText: ne, emptyText: re, createLabel: T, variant: E, itemsProps: D } = e, { virtualize: O } = e, { present: ie, ref: k, props: A } = n, ae = (e) => x.keyOf(i, e), [j, M] = g(!1), oe = p((e) => M(e === "top"), []), se = h(null), ce = p((e) => {
+		se.current = e, k(e);
+	}, [k]), le = typeof O == "object" ? O : {}, { virtualized: N, startIndex: ue, endIndex: de, offsetY: fe, totalHeight: pe, contentRef: P, onScroll: F } = ee({
+		count: r.length,
+		scrollerRef: se,
+		enabled: typeof O == "boolean" ? O : void 0,
+		activeIndex: c,
+		...le
+	}), I = N ? r.slice(ue, de) : r, L = (e, t) => {
+		let n = N ? ue + t : t, s = e.kind === "option" && x.isSelected(o, e.row, ae), u = x.isRowDisabled(i, e);
+		return /* @__PURE__ */ v(l, {
+			ref: f(n),
+			component: "combobox.item",
+			variant: [E, {
+				create: e.kind === "create",
+				highlighted: n === c
+			}],
+			selected: s,
+			ai: "center",
+			gap: 2,
+			id: d(n),
+			props: {
+				role: "option",
+				...N ? {
+					"aria-setsize": r.length,
+					"aria-posinset": n + 1
+				} : {},
+				...u ? { "aria-disabled": !0 } : {},
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: (e) => !u && m(n, e)
+			},
+			children: e.kind === "create" ? T(e.query) : a?.(e.row) ?? x.labelOf(i, e.row)
+		}, e.kind === "option" ? ae(e.row) : "create");
+	};
+	return /* @__PURE__ */ v(u, {
+		ref: b,
+		anchor: _,
+		side: "bottom",
+		align: "start",
+		offset: .5,
+		matchWidth: !0,
+		onSideChange: oe,
+		children: /* @__PURE__ */ y(t, {
+			ref: ce,
+			component: "combobox.items",
+			...D,
+			variant: [E, {
+				closed: !ie && !j,
+				closedUp: !ie && j
+			}],
+			id: S,
+			props: {
+				...te(r.length > 0, s, w === !0, C),
+				...A,
+				...N ? { onScroll: F } : {}
+			},
+			children: [N ? /* @__PURE__ */ v(t, {
+				ref: P,
+				component: "combobox.window",
+				variant: E,
+				style: {
+					height: pe,
+					paddingTop: fe
+				},
+				children: I.map(L)
+			}) : I.map(L), r.length === 0 && /* @__PURE__ */ v(t, {
+				component: "combobox.message",
+				variant: E,
+				children: w ? ne : re
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/combobox.tsx
+var re = /* @__PURE__ */ new Set([
+	" ",
+	"Home",
+	"End",
+	"ArrowLeft",
+	"ArrowRight"
+]);
+function T(u, f) {
+	let { data: b, def: C, label: w, labelProps: ee, placeholder: te, name: T, disabled: E, props: D, itemsProps: O, hideIcon: ie, filter: k = x.filterRows, loading: A, loadingText: ae = "Loading...", emptyText: j = "No results", createRow: M, createLabel: oe = (e) => `Create "${e}"`, removeLabel: se = (e) => `Remove ${e}`, virtualize: ce, query: le, defaultQuery: N, onQueryChange: ue, open: de, defaultOpen: fe, onOpenChange: pe, multiple: P = !1, value: F, defaultValue: I, onValueChange: L, ...R } = u, z = o("combobox"), B = R.id ?? `${z}-field`, me = `${z}-listbox`, V = `${z}-label`, H = w != null && w !== !1, he = p((e) => `${z}-option-${e}`, [z]), ge = h(null), _e = h(null), ve = h(null), ye = p((e) => {
+		ve.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+	}, [f]), be = n((e, t) => {
+		L?.(P ? e : e[0] ?? null, t);
+	}), xe = m(() => F === void 0 ? void 0 : x.toArray(F), [F]), [U, Se] = r({
+		value: xe,
+		defaultValue: () => x.toArray(I),
+		onChange: be
+	}), [W, G] = r({
+		value: de,
+		defaultValue: fe ?? !1,
+		onChange: pe
+	}), [Ce, K] = r({
+		value: le,
+		defaultValue: N ?? "",
+		onChange: ue
+	}), [we, q] = g(!1), J = p((e) => x.keyOf(C, e), [C]), Te = P || U[0] === void 0 ? "" : x.labelOf(C, U[0]), Y = we || Ce !== "" ? Ce : Te, X = m(() => x.rowsFor({
+		data: b,
+		def: C,
+		query: Y,
+		filter: k,
+		typed: we,
+		createRow: M
+	}), [
+		b,
+		C,
+		Y,
+		k,
+		we,
+		M
+	]), Ee = p((e) => X[e] ? x.isRowDisabled(C, X[e]) : !1, [X, C]), De = n((e, t) => {
+		G(!1, {
+			reason: e,
+			event: t
+		}), e !== "escape" && (q(!1), K("", {
+			reason: "close",
+			event: t
+		}));
+	}), Z = n((e, t) => {
+		let n = X[e];
+		if (!n || Ee(e)) return;
+		let r = n.kind === "create" ? M?.(n.query) : n.row;
+		if (r == null) return;
+		let i = x.isSelected(U, r, J), a = n.kind === "create" ? "create" : i && P ? "deselect" : "select";
+		Se(x.toggle(U, r, P, J), {
+			reason: a,
+			event: t
+		}), q(!1), K("", {
+			reason: "select",
+			event: t
+		}), P || G(!1, {
+			reason: "select",
+			event: t
+		});
+	}), Oe = a({
+		count: X.length,
+		focusItems: !1,
+		defaultActiveIndex: -1,
+		isDisabled: Ee,
+		onSelect: Z
+	}), { activeIndex: Q, setActiveIndex: ke, activeItem: Ae } = Oe;
+	i({
+		enabled: W,
+		inside: [ge, _e],
+		onDismiss: (e, t) => De(e === "escape" ? "escape" : "outside-pointer", t)
+	}), e(() => {
+		!W || Q === -1 || Ae()?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		W,
+		Q,
+		Ae
+	]);
+	let $ = (e, t, n) => {
+		G(!0, {
+			reason: n,
+			event: t
+		});
+		let r = e === "none" ? -1 : x.activeIndexFor(X, U, C, e);
+		ke(r, {
+			reason: "programmatic",
+			event: t
+		});
+	}, je = n((e) => {
+		q(!0), K(e.target.value, {
+			reason: "input",
+			event: e
+		}), W || G(!0, {
+			reason: "input",
+			event: e
+		}), ke(-1, {
+			reason: "programmatic",
+			event: e
+		});
+	}), Me = n((e, t) => {
+		Se(U.filter((t) => J(t) !== J(e)), {
+			reason: "remove",
+			event: t
+		});
+	}), Ne = (e) => {
+		let { key: t } = e;
+		if (t === "ArrowDown" || t === "ArrowUp") {
+			e.preventDefault(), $(t === "ArrowUp" ? "last" : e.altKey ? "none" : "first", e, "trigger");
+			return;
+		}
+		t === "Escape" && Y !== "" && (q(!0), K("", {
+			reason: "clear",
+			event: e
+		}));
+	}, Pe = n((e) => {
+		if (D?.onKeyDown?.(e), !(e.defaultPrevented || E)) {
+			if (e.key === "Backspace" && P && Y === "" && U.length > 0) {
+				Me(U[U.length - 1], e);
+				return;
+			}
+			if (!W) {
+				Ne(e);
+				return;
+			}
+			if (e.key === "Tab") {
+				Q !== -1 && Z(Q, e), De("tab", e);
+				return;
+			}
+			if (e.altKey && e.key === "ArrowUp") {
+				e.preventDefault(), Q === -1 ? De("trigger", e) : Z(Q, e);
+				return;
+			}
+			if (re.has(e.key)) {
+				ke(-1, {
+					reason: "programmatic",
+					event: e
+				});
+				return;
+			}
+			Oe.onKeyDown(e);
+		}
+	}), Fe = n((e) => {
+		!E && !W && $("first", e, "trigger");
+	}), Ie = n((e) => {
+		E || e.target === ve.current || (e.preventDefault(), ve.current?.focus(), W || $("first", e, "trigger"));
+	}), Le = X.length > 0 || A === !0 || j !== null, Re = W && Q !== -1 && X.length > 0 ? he(Q) : void 0, ze = /* @__PURE__ */ v(t, {
+		tag: "input",
+		component: "combobox.field",
+		ref: ye,
+		id: B,
+		disabled: E,
+		props: {
+			...D,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": W,
+			"aria-controls": W && Le ? me : void 0,
+			"aria-activedescendant": Re,
+			"aria-labelledby": H ? V : D?.["aria-labelledby"],
+			autoComplete: "off",
+			spellCheck: !1,
+			type: "text",
+			value: Y,
+			placeholder: te,
+			onChange: je,
+			onKeyDown: Pe,
+			onClick: Fe
+		}
+	}), Be = !ie && /* @__PURE__ */ v(l, {
+		component: "combobox.icon",
+		rotate: W ? 180 : 0,
+		props: { "aria-hidden": !0 },
+		children: /* @__PURE__ */ v(c, {
+			viewBox: "0 0 10 6",
+			width: "0.6rem",
+			props: { fill: "none" },
+			children: /* @__PURE__ */ v(s, {
+				d: "m1 1 4 4 4-4",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	}), Ve = T === void 0 ? null : U.map((e) => /* @__PURE__ */ v(t, {
+		tag: "input",
+		props: {
+			type: "hidden",
+			name: T,
+			value: String(J(e))
+		}
+	}, J(e))), He = Le && /* @__PURE__ */ v(d, {
+		present: W,
+		children: (e) => /* @__PURE__ */ v(ne, {
+			presence: e,
+			rows: X,
+			def: C,
+			display: C.display,
+			selection: U,
+			multiple: P,
+			activeIndex: Q,
+			optionId: he,
+			rowRef: (e) => Oe.itemProps(e).ref,
+			onSelect: Z,
+			anchorRef: ge,
+			popupRef: _e,
+			listboxId: me,
+			labelledBy: H ? V : B,
+			loading: A,
+			loadingText: ae,
+			emptyText: j,
+			createLabel: oe,
+			virtualize: ce,
+			variant: R.variant,
+			itemsProps: O
+		})
+	}), Ue = /* @__PURE__ */ y(l, {
+		ref: ge,
+		component: "combobox",
+		ai: "center",
+		gap: 1,
+		flexWrap: "wrap",
+		...R,
+		props: { onPointerDown: Ie },
+		children: [
+			Ve,
+			P && /* @__PURE__ */ v(S, {
+				selection: U,
+				def: C,
+				display: C.display,
+				removeLabel: se,
+				onRemove: Me,
+				disabled: E,
+				variant: R.variant
+			}),
+			ze,
+			Be
+		]
+	});
+	return H ? /* @__PURE__ */ y(l, {
+		d: "column",
+		gap: 1,
+		width: "fit-content",
+		children: [
+			/* @__PURE__ */ v(t, {
+				tag: "label",
+				component: "combobox.label",
+				id: V,
+				...ee,
+				props: { htmlFor: B },
+				children: w
+			}),
+			Ue,
+			He
+		]
+	}) : /* @__PURE__ */ y(_, { children: [Ue, He] });
+}
+var E = f(T);
+E.displayName = "Combobox";
+//#endregion
+export { x as ComboboxUtils, E as default };

package/components/dataGrid/components/dataGridAggregateValue.d.ts

@@ -0,0 +1,10 @@
+import { default as AggregateCellModel } from '../models/aggregateCellModel';
+interface Props<TRow> {
+    cell: AggregateCellModel<TRow>;
+}
+/**
+ * What an aggregated cell draws when the column supplies no `AggregateCell` of its own. The scope picks the
+ * style node, so a group row's totals and the footer's are themed apart without two components.
+ */
+export default function DataGridAggregateValue<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridCell.d.ts

@@ -1,9 +1,10 @@
 import { BoxProps } from '../../../box';
+import { default as AggregateCellModel } from '../models/aggregateCellModel';
 import { default as CellModel } from '../models/cellModel';
 import { default as GroupRowCellModel } from '../models/groupRowCellModel';
 interface Props<TRow> extends BoxProps {
     children: React.ReactNode;
-    cell: CellModel<TRow> | GroupRowCellModel<TRow>;
+    cell: CellModel<TRow> | GroupRowCellModel<TRow> | AggregateCellModel<TRow>;
     /** Navigation coordinates. `columnIndex` counts rendered cells, which a group row has fewer of. */
     row: number;
     columnIndex: number;