@box-kite/react 2.3.1 → 2.4.1

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,A=e=>p.keyOf(i,e),[j,re]=(0,u.useState)(!1),ie=(0,u.useCallback)(e=>re(e===`top`),[]),ae=(0,u.useRef)(null),oe=(0,u.useCallback)(e=>{ae.current=e,k(e)},[k]),se=typeof D==`object`?D:{},{virtualized:M,startIndex:N,endIndex:P,offsetY:ce,totalHeight:le,contentRef:ue,onScroll:F}=_({count:r.length,scrollerRef:ae,enabled:typeof D==`boolean`?D:void 0,activeIndex:f,...se}),I=M?r.slice(N,P):r,L=(e,t)=>{let n=M?N+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`,...M?{"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:oe,component:`combobox.items`,...E,variant:[T,{closed:!O&&!j,closedUp:!O&&j}],id:x,props:{...v(r.length>0,l,C===!0,S),...ne,...M?{onScroll:F}:{}},children:[M?(0,d.jsx)(n.default,{ref:ue,component:`combobox.window`,variant:T,style:{height:le,paddingTop:ce},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:A=e=>`Remove ${e}`,virtualize:j,query:re,defaultQuery:ie,onQueryChange:ae,open:oe,defaultOpen:se,onOpenChange:M,multiple:N=!1,value:P,defaultValue:ce,onValueChange:le,id:ue,...F}=c,I=i.t(`combobox`),L=ue??w?.id??`${I}-field`,de=`${I}-listbox`,fe=`${I}-label`,pe=_!=null&&_!==!1,me=(0,u.useCallback)(e=>`${I}-option-${e}`,[I]),R=(0,u.useRef)(null),he=(0,u.useRef)(null),z=(0,u.useRef)(null),ge=(0,u.useCallback)(t=>{z.current=t,e.d(f,t)},[f]),_e=r.a((e,t)=>{le?.(N?e:e[0]??null,t)}),ve=(0,u.useMemo)(()=>P===void 0?void 0:p.toArray(P),[P]),[B,ye]=a.a({value:ve,defaultValue:()=>p.toArray(ce),onChange:_e,interaction:{component:`combobox`,type:`valueChange`,content:[`value`]}}),[V,H]=a.a({value:oe,defaultValue:se??!1,onChange:M,interaction:{component:`combobox`,type:`openChange`}}),[be,U]=r.i({value:re,defaultValue:ie??``,onChange:ae}),[W,G]=(0,u.useState)(!1),K=(0,u.useCallback)(e=>p.keyOf(g,e),[g]),xe=N||B[0]===void 0?``:p.labelOf(g,B[0]),q=W||be!==``?be:xe,J=(0,u.useMemo)(()=>p.rowsFor({data:h,def:g,query:q,filter:T,typed:W,createRow:k}),[h,g,q,T,W,k]),Se=(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||Se(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&&N?`deselect`:`select`;ye(p.toggle(B,r,N,K),{reason:a,event:t}),G(!1),U(``,{reason:`select`,event:t}),N||H(!1,{reason:`select`,event:t})}),Ce=r.t({count:J.length,focusItems:!1,defaultActiveIndex:-1,isDisabled:Se,onSelect:X}),{activeIndex:Z,setActiveIndex:we,activeItem:Te}=Ce;r.r({enabled:V,inside:[R,he],onDismiss:(e,t)=>Y(e===`escape`?`escape`:`outside-pointer`,t)}),t.n(()=>{!V||Z===-1||Te()?.scrollIntoView?.({block:`nearest`})},[V,Z,Te]);let Q=pe?fe:w?.[`aria-labelledby`],Ee=w?.[`aria-label`],[De,Oe]=(0,u.useState)();t.n(()=>{if(!V||Q||Ee)return;let e=Array.from(z.current?.labels??[],e=>e.textContent?.trim()??``).filter(Boolean).join(` `)||void 0;e!==De&&Oe(e)},[V,Q,Ee,De]);let ke=Q?{"aria-labelledby":Q}:{"aria-label":Ee??De},$=(e,t,n)=>{H(!0,{reason:n,event:t});let r=e===`none`?-1:p.activeIndexFor(J,B,g,e);we(r,{reason:`programmatic`,event:t})},Ae=r.a(e=>{G(!0),U(e.target.value,{reason:`input`,event:e}),V||H(!0,{reason:`input`,event:e}),we(-1,{reason:`programmatic`,event:e})}),je=r.a((e,t)=>{ye(B.filter(t=>K(t)!==K(e)),{reason:`remove`,event:t})}),Me=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}))},Ne=r.a(e=>{if(w?.onKeyDown?.(e),!(e.defaultPrevented||C)){if(e.key===`Backspace`&&N&&q===``&&B.length>0){je(B[B.length-1],e);return}if(!V){Me(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)){we(-1,{reason:`programmatic`,event:e});return}Ce.onKeyDown(e)}}),Pe=r.a(e=>{!C&&!V&&$(`first`,e,`trigger`)}),Fe=r.a(e=>{C||e.target===z.current||(e.preventDefault(),z.current?.focus(),V||$(`first`,e,`trigger`))}),Ie=J.length>0||E===!0||O!==null,Le=V&&Z!==-1&&J.length>0?me(Z):void 0,Re=(0,d.jsx)(n.default,{tag:`input`,component:`combobox.field`,ref:ge,id:L,disabled:C,props:{...w,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":V,"aria-controls":V&&Ie?de:void 0,"aria-activedescendant":Le,"aria-labelledby":Q,autoComplete:`off`,spellCheck:!1,type:`text`,value:q,placeholder:x,onChange:Ae,onKeyDown:Ne,onClick:Pe}}),ze=!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`})})}),Be=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))),Ve=Ie&&(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:N,activeIndex:Z,optionId:me,rowRef:e=>Ce.itemProps(e).ref,onSelect:X,anchorRef:R,popupRef:he,listboxId:de,name:ke,loading:E,loadingText:D,emptyText:O,createLabel:ne,virtualize:j,variant:F.variant,itemsProps:ee})}),He=(0,d.jsxs)(s.default,{ref:R,component:`combobox`,ai:`center`,gap:1,flexWrap:`wrap`,...F,props:{onPointerDown:Fe},children:[Be,N&&(0,d.jsx)(m,{selection:B,def:g,display:g.display,removeLabel:A,onRemove:je,disabled:C,variant:F.variant}),Re,ze]});return pe?(0,d.jsxs)(s.default,{d:`column`,gap:1,width:`fit-content`,children:[(0,d.jsx)(n.default,{tag:`label`,component:`combobox.label`,id:fe,...v,props:{htmlFor:L},children:_}),He,Ve]}):(0,d.jsxs)(d.Fragment,{children:[He,Ve]})}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;