@box-kite/react 2.3.0 → 2.4.0

package/client.mjs

@@ -3,29 +3,29 @@ import { b as n, g as r, t as i, y as a } from "./platform.mjs";
 import { t as o } from "./effects.mjs";
 import s from "./box.mjs";
 import c, { useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { applyDesignToElement as g, applyThemeToElement as _, clearStoredTheme as v, defaultThemeName as y, documentRoot as b, getDefaultEngine as x, getSystemTheme as S, pauseTransitions as C, prepareReveal as w, readStoredTheme as T, transitionTheme as E, watchSystemTheme as D, writeStoredTheme as O } from "@box-kite/core";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { flushSync as j } from "react-dom";
+import { applyDesignToElement as g, applyThemeToElement as _, clearStoredTheme as v, defaultThemeName as y, documentRoot as b, getDefaultEngine as x, getSystemTheme as S, pauseTransitions as C, prepareReveal as w, readStoredTheme as T, transitionTheme as E, watchSystemTheme as ee, writeStoredTheme as D } from "@box-kite/core";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { flushSync as A } from "react-dom";
 //#region src/react/clientRuntime.ts
-var M = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
-function N(e) {
-	if (typeof e.createContext != "function") throw Error(M);
+var j = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
+function M(e) {
+	if (typeof e.createContext != "function") throw Error(j);
 }
 //#endregion
 //#region src/react/componentsContext.ts
-N(c);
-var P = c.createContext(void 0);
+M(c);
+var N = c.createContext(void 0);
 //#endregion
 //#region src/react/componentsProvider.tsx
-function F({ value: e, children: t }) {
-	return /* @__PURE__ */ k(P.Provider, {
+function P({ value: e, children: t }) {
+	return /* @__PURE__ */ O(N.Provider, {
 		value: e,
 		children: t
 	});
 }
 //#endregion
 //#region src/react/hooks/useVisibility.ts
-function I(e) {
+function F(e) {
 	let { node: t = null, event: n = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = h(!1), l = m(null);
 	return d(() => {
 		function e(e) {
@@ -60,23 +60,23 @@ function I(e) {
 }
 //#endregion
 //#region src/react/useStyles.ts
-var L = o;
-function R(t, n) {
-	let { classNames: r, signature: i, styleElements: a } = e(t, n, u(P));
-	return L(() => {
+var I = o;
+function L(t, n) {
+	let { classNames: r, signature: i, styleElements: a } = e(t, n, u(N));
+	return I(() => {
 		x().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function z(e, n) {
+function R(e, n) {
 	let r = e ? x().addGlobalStyles(e, n) : void 0;
-	return L(() => {
+	return I(() => {
 		x().flushSync();
 	}, [e, n]), t(r);
 }
-var B;
+var z;
 //#endregion
 //#region src/react/theme/themeContext.ts
 (function(e) {
@@ -104,108 +104,108 @@ var B;
 		e !== void 0 && n(e), t.warnings !== void 0 && a(t.warnings), Object.keys(t).length > 0 && x().configure(t);
 	}
 	e.configure = c;
-})(B ||= {}), N(c);
-var V = c.createContext({
+})(z ||= {}), M(c);
+var B = c.createContext({
 	theme: "",
 	setTheme: () => {},
 	setDesign: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function H(e) {
-	let { theme: t, use: n = "local", storageKey: r, globalStyles: i, viewTransition: a, components: c, design: u, designStorageKey: x } = e, M = c ? /* @__PURE__ */ k(F, {
+function V(e) {
+	let { theme: t, use: n = "local", storageKey: r, globalStyles: i, viewTransition: a, components: c, design: u, designStorageKey: x } = e, j = c ? /* @__PURE__ */ O(P, {
 		value: c,
 		children: e.children
-	}) : e.children, N = z(n === "global" ? i : void 0, "html"), [P, I] = h(t ?? y), [L, R] = h(t !== void 0), B = m(null), H = m(P), U = m(null), W = m(null), G = m(void 0), K = l((e) => {
+	}) : e.children, M = R(n === "global" ? i : void 0, "html"), [N, F] = h(t ?? y), [I, L] = h(t !== void 0), z = m(null), V = m(N), H = m(null), U = m(null), W = m(void 0), G = l((e) => {
 		if (!a) return e();
-		let t = E(() => j(e), a === "reveal" ? "reveal" : "fade");
-		G.current = t.finished, t.finished.then(() => G.current = void 0, () => G.current = void 0);
-	}, [a]), q = l((e) => K(() => {
-		e === null ? (r && v(r), R(!1)) : (r && O(r, e), I(e), R(!0));
-	}), [r, K]), [J, Y] = h(u), [ee, te] = h(u);
-	u !== ee && (te(u), Y(u));
-	let X = l((e) => K(() => {
-		W.current ??= C(), x && (e === null ? v : O)(x, e), Y(e ?? u);
+		let t = E(() => A(e), a === "reveal" ? "reveal" : "fade");
+		W.current = t.finished, t.finished.then(() => W.current = void 0, () => W.current = void 0);
+	}, [a]), K = l((e) => G(() => {
+		e === null ? (r && v(r), L(!1)) : (r && D(r, e), F(e), L(!0));
+	}), [r, G]), [q, J] = h(u), [te, ne] = h(u);
+	u !== te && (ne(u), J(u));
+	let Y = l((e) => G(() => {
+		U.current ??= C(), x && (e === null ? v : D)(x, e), J(e ?? u);
 	}), [
 		u,
 		x,
-		K
-	]), Z = m(null);
+		G
+	]), X = m(null), Z = m(q);
 	f(() => {
 		let e = x ? T(x) : null;
-		e && (Z.current = e, Y(e));
+		!e || e === Z.current || (X.current = e, J(e));
 	}, [x]), f(() => {
-		if (Z.current !== null && Z.current !== J) return;
-		Z.current = null;
-		let e = n === "global" && J ? b() : null, t = e ? g(e, J) : void 0;
-		return W.current?.(G.current), W.current = null, t;
-	}, [J, n]);
+		if (Z.current = q, X.current !== null && X.current !== q) return;
+		X.current = null;
+		let e = n === "global" && q ? b() : null, t = e ? g(e, q) : void 0;
+		return U.current?.(W.current), U.current = null, t;
+	}, [q, n]);
 	let Q = a === "reveal";
 	d(() => Q ? w() : void 0, [Q]);
-	let [ne, re] = h(t);
-	t !== ne && (re(t), t === void 0 ? R(!1) : (I(t), R(!0))), f(() => {
-		if (L) return;
+	let [re, ie] = h(t);
+	t !== re && (ie(t), t === void 0 ? L(!1) : (F(t), L(!0))), f(() => {
+		if (I) return;
 		let e = r ? T(r) : null, t = e ?? S();
-		if (t !== H.current && (B.current = t), I(t), e) {
-			R(!0);
+		if (t !== V.current && (z.current = t, F(t)), e) {
+			L(!0);
 			return;
 		}
-		return D(I);
-	}, [L, r]), o(() => {
-		P !== H.current && (U.current ??= C());
-	}, [P]), f(() => {
-		if (H.current = P, B.current !== null && B.current !== P) return;
-		B.current = null;
-		let e = U.current;
-		U.current = null;
-		let t = n === "global" ? b() : null, r = t ? _(t, P) : void 0;
-		return e?.(G.current), r;
-	}, [P, n]);
+		return ee(F);
+	}, [I, r]), o(() => {
+		N !== V.current && (H.current ??= C());
+	}, [N]), f(() => {
+		if (V.current = N, z.current !== null && z.current !== N) return;
+		z.current = null;
+		let e = H.current;
+		H.current = null;
+		let t = n === "global" ? b() : null, r = t ? _(t, N) : void 0;
+		return e?.(W.current), r;
+	}, [N, n]);
 	let $ = p(() => ({
-		theme: P,
-		setTheme: q,
-		design: J,
-		setDesign: X
+		theme: N,
+		setTheme: K,
+		design: q,
+		setDesign: Y
 	}), [
-		P,
+		N,
+		K,
 		q,
-		J,
-		X
+		Y
 	]);
-	return n === "local" ? /* @__PURE__ */ A(V.Provider, {
+	return n === "local" ? /* @__PURE__ */ k(B.Provider, {
 		value: $,
-		children: [N, /* @__PURE__ */ k(s, {
-			className: P,
+		children: [M, /* @__PURE__ */ O(s, {
+			className: N,
 			props: {
-				"data-theme": P,
-				"data-design": J
+				"data-theme": N,
+				"data-design": q
 			},
-			children: M
+			children: j
 		})]
-	}) : /* @__PURE__ */ A(V.Provider, {
+	}) : /* @__PURE__ */ k(B.Provider, {
 		value: $,
-		children: [N, M]
+		children: [M, j]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = u(V);
+		let { theme: e, setTheme: t } = u(B);
 		return [e, t];
 	}
 	e.useTheme = t;
 	function n() {
-		let { design: e, setDesign: t } = u(V);
+		let { design: e, setDesign: t } = u(B);
 		return [e, t];
 	}
 	e.useDesign = n;
-})(H ||= {});
-var U = H, W = /* @__PURE__ */ new WeakMap();
-function G(e) {
-	let t = W.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), W.set(e, t)), t;
+})(V ||= {});
+var H = V, U = /* @__PURE__ */ new WeakMap();
+function W(e) {
+	let t = U.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), U.set(e, t)), t;
 }
-function K(e = !0) {
-	let [t] = U.useTheme(), n = p(() => {
+function G(e = !0) {
+	let [t] = H.useTheme(), n = p(() => {
 		if (!e) return null;
 		let t = i();
 		if (!t) return null;
@@ -214,7 +214,7 @@ function K(e = !0) {
 	}, [e]);
 	return f(() => {
 		if (!t || !n) return;
-		let e = G(n), r = e.get(t) ?? 0;
+		let e = W(n), r = e.get(t) ?? 0;
 		return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
 			let r = (e.get(t) ?? 1) - 1;
 			r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
@@ -222,4 +222,4 @@ function K(e = !0) {
 	}, [n, t]), n;
 }
 //#endregion
-export { I as a, R as i, U as n, F as o, B as r, K as t };
+export { F as a, L as i, H as n, P as o, z as r, G as t };

package/components/combobox/comboboxListbox.d.ts

@@ -32,7 +32,8 @@ export interface ComboboxListboxProps<TRow> {
     /** The layer element — what the dismissal hook treats as *inside* the popup. */
     popupRef: React.Ref<HTMLDivElement>;
     listboxId: string;
-    labelledBy: string;
+    /** The listbox's `aria-labelledby` or `aria-label`: whatever names the field, never the field itself. */
+    name: Record<string, string | undefined>;
     /** Options are on their way. Says so rather than claiming the list is empty. */
     loading?: boolean;
     loadingText: React.ReactNode;

package/components/combobox.cjs

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

package/components/combobox.d.ts

@@ -36,7 +36,7 @@ interface BaseProps<TRow, TKey extends keyof ComponentsAndVariants = 'combobox'>
     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`. */
+    /** Attributes for the `<input>` that *is* the combobox — an `aria-label`, an `inputMode`. Its `id` is the top-level prop. */
     props?: Record<string, unknown>;
     /** Styles for the popup (`combobox.items`). */
     itemsProps?: BoxStyleProps;