@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/data-display/DataGrid/DataGrid.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../hooks/useMergedRef.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../../utils/announce.cjs.js"),a=require("../../feedback/Spinner/Spinner.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../../layout/ScrollArea/ScrollArea.cjs.js"),c=require("../../forms/CheckBox/CheckBox.cjs.js"),ee=require("../../navigation/Pagination/Pagination.cjs.js"),l=require("./dataGridUtils.cjs.js"),u=require("./DataGrid.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var te={compact:u.default.compact,comfortable:u.default.comfortable,spacious:u.default.spacious},ne={plain:u.default.plain,striped:u.default.striped,outline:u.default.outline},re={start:u.default.alignStart,center:u.default.alignCenter,end:u.default.alignEnd},ie=10,ae=`a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]`,p=e=>Array.from(e.querySelectorAll(ae));function m(e){return e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?!0:e instanceof HTMLInputElement?![`checkbox`,`radio`,`button`,`submit`,`reset`,`color`,`file`,`image`].includes(e.type):e.getAttribute(`contenteditable`)===`true`}function h(e){let t=p(e).filter(e=>!e.hasAttribute(`data-grid-secondary`));return t.length===1&&!m(t[0])?t[0]:e}var oe=e=>{let[t,n]=(e.getAttribute(`data-cell`)??`0:0`).split(`:`).map(Number);return[t,n]},se=e=>typeof e==`number`?`${e}px`:e,ce=e=>e.id;function g({rows:m,columns:g,getRowId:_=ce,getRowLabel:le,"aria-label":v,"aria-labelledby":y,"aria-describedby":ue,sort:de,defaultSort:fe,onSortChange:pe,multiSort:me=!0,filter:b=``,selectionMode:x=`none`,selected:he,defaultSelected:ge,onSelectedChange:_e,isRowSelectable:ve,pageSize:S,page:ye,defaultPage:be=1,onPageChange:xe,manual:C=!1,rowCount:Se,onRowActivate:w,loading:T=!1,emptyState:Ce,density:we=`comfortable`,variant:Te=`outline`,hoverable:Ee=!0,stickyHeader:De=!0,maxHeight:Oe,layout:ke=`auto`,tableStyle:Ae,className:je,style:Me,ref:Ne}){let{messages:E,locale:D}=t.useLocale(),O=E.dataGrid,k=(0,d.useRef)(null),Pe=(0,d.useId)(),Fe=`${Pe}-pages`,Ie=`${Pe}-name`,Le=n.useMergedRef(k,Ne),[A,Re]=e.useControllableState({value:de,defaultValue:fe??[],onChange:pe}),[j,M]=e.useControllableState({value:he,defaultValue:ge??[],onChange:_e}),[ze,N]=e.useControllableState({value:ye,defaultValue:be,onChange:xe}),P=(0,d.useMemo)(()=>C?m.slice():l.sortRows(l.filterRows(m,b,g),A,g,D),[C,m,b,g,A,D]),F=C?Se??m.length:P.length,I=S?Math.max(1,Math.ceil(F/S)):1,L=Math.min(Math.max(1,ze),I),R=S&&!C?(L-1)*S:0,z=S&&!C?P.slice(R,R+S):P,B=S?(L-1)*S:0,V=`${b}|${JSON.stringify(A)}`,Be=(0,d.useRef)(V);(0,d.useEffect)(()=>{Be.current!==V&&(Be.current=V,S&&L!==1&&N(1))},[V,S,L,N]);let Ve=(0,d.useRef)(b);(0,d.useEffect)(()=>{if(Ve.current===b)return;let e=window.setTimeout(()=>{Ve.current=b,i.announce(F===0?O.noResults:O.rowCount(F))},600);return()=>window.clearTimeout(e)},[b,F,O]);let H=x===`multiple`,U=x!==`none`,W=+!!H,G=g.length+W,He=g.find(e=>e.rowHeader)??g[0],Ue=e=>le?.(e)??String((He&&l.getCellValue(e,He))??_(e)),We=e=>e.headerLabel??(typeof e.header==`string`?e.header:e.key),K=(0,d.useMemo)(()=>new Set(j),[j]),Ge=e=>ve?.(e)??!0,q=(0,d.useMemo)(()=>P.filter(e=>ve?.(e)??!0).map(_),[P,ve,_]),J=q.filter(e=>K.has(e)).length,Ke=q.length>0&&J===q.length,qe=J>0&&!Ke,Je=(0,d.useRef)(null),Y=(0,d.useRef)(!1),Ye=(e,t,n)=>{let r=z[e];if(!r||!Ge(r))return;let i=_(r);if(x===`single`){M(K.has(i)&&n!==!0?[]:[i]),Je.current=e;return}let a=n??!K.has(i),o=Je.current,s=[i];if(t&&o!==null&&o!==e){let[t,n]=o<e?[o,e]:[e,o];s=z.slice(t,n+1).filter(Ge).map(_)}let c=new Set(j);for(let e of s)a?c.add(e):c.delete(e);Je.current=e,M(Array.from(c))},Xe=e=>{let t=new Set(j);for(let n of q)e?t.add(n):t.delete(n);M(Array.from(t))},Ze=(e,t)=>{let n=A.find(t=>t.key===e.key),r=n?n.direction===`ascending`?`descending`:null:`ascending`,a;a=t&&me?n?r?A.map(t=>t.key===e.key?{key:t.key,direction:r}:t):A.filter(t=>t.key!==e.key):[...A,{key:e.key,direction:`ascending`}]:r?[{key:e.key,direction:r}]:[],Re(a),i.announce(r?O.sorted(We(e),r===`ascending`?O.ascending:O.descending):O.sortCleared)},Qe=z.length,[$e,et]=(0,d.useState)({r:0,c:0}),X=Math.min($e.r,Qe),Z=Math.min($e.c,G-1),[tt,Q]=(0,d.useState)(!1),[nt,rt]=(0,d.useState)(0),it=(e,t)=>k.current?.querySelector(`[data-cell="${e}:${t}"]`)??null;(0,d.useLayoutEffect)(()=>{let e=k.current;if(!e)return;for(let t of e.querySelectorAll(`[data-cell]`)){t.tabIndex=-1;for(let e of p(t))e.tabIndex=-1}let t=it(X,Z);if(t){if(tt)for(let e of p(t))e.tabIndex=0;else h(t).tabIndex=0}}),(0,d.useLayoutEffect)(()=>{if(nt===0)return;let e=it(X,Z);if(!e)return;let t=h(e);t.focus({preventScroll:!0}),(t===e?e:t).scrollIntoView?.({block:`nearest`,inline:`nearest`})},[nt]);let $=(e,t)=>{Q(!1),et({r:Math.max(0,Math.min(e,Qe)),c:Math.max(0,Math.min(t,G-1))}),rt(e=>e+1)},at=e=>{let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=oe(n);(r!==X||i!==Z)&&et({r,c:i}),Q(t!==n&&t!==h(n))},ot=e=>{let t=e.relatedTarget;(!t||!k.current?.contains(t))&&Q(!1)},st=e=>{if(Y.current=e.shiftKey,e.defaultPrevented||e.nativeEvent.isComposing)return;let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=oe(n);if(tt||t!==n&&t!==h(n)){if(e.key===`Escape`)e.preventDefault(),Q(!1),n.focus();else if(e.key===`Tab`){let r=p(n);if(r.length===0)return;e.preventDefault(),r[(r.indexOf(t)+(e.shiftKey?-1:1)+r.length)%r.length].focus()}return}let a=getComputedStyle(n).direction===`rtl`,o=e.ctrlKey||e.metaKey,s=r>0?z[r-1]:void 0;switch(e.key){case`ArrowDown`:e.preventDefault(),$(r+1,i);return;case`ArrowUp`:e.preventDefault(),$(r-1,i);return;case`ArrowRight`:e.preventDefault(),$(r,a?i-1:i+1);return;case`ArrowLeft`:e.preventDefault(),$(r,a?i+1:i-1);return;case`Home`:e.preventDefault(),$(o?0:r,0);return;case`End`:e.preventDefault(),$(o?Qe:r,G-1);return;case`PageDown`:e.preventDefault(),$(Math.max(1,r+ie),i);return;case`PageUp`:e.preventDefault(),$(Math.max(+(r>0),r-ie),i);return;case`Enter`:case`F2`:{let r=p(n);r.length>0&&(t===n||e.key===`F2`)?(e.preventDefault(),Q(!0),r[0].focus()):e.key===`Enter`&&t===n&&s&&w&&(e.preventDefault(),w(s));return}case` `:s&&U&&t===n&&(e.preventDefault(),Ye(r-1,e.shiftKey));return;default:o&&e.key.toLowerCase()===`a`&&H&&(e.preventDefault(),Xe(!Ke))}},ct=(0,d.useMemo)(()=>new Intl.NumberFormat(D),[D]),lt=(0,d.useMemo)(()=>new Intl.DateTimeFormat(D,{dateStyle:`medium`}),[D]),ut=e=>e==null?``:typeof e==`number`?ct.format(e):e instanceof Date?lt.format(e):String(e),dt=(e,t)=>{if(e.target.closest(ae))return;let n=z[t];x===`single`&&Ye(t,!1,!0),n&&w&&w(n)},ft=A[0],pt=!C&&b.trim()!==``,mt=!!S||H&&J>0,ht=F===0?0:B+1,gt=Math.min(F,B+z.length);return(0,f.jsxs)(`div`,{className:r.cx(u.default.frame,ne[Te],te[we],Ee&&u.default.hoverable,De&&u.default.sticky,je),style:Me,children:[(0,f.jsx)(s.ScrollArea,{scrollbars:`both`,maxHeight:Oe,shadows:!1,tabIndex:-1,className:u.default.scroll,children:(0,f.jsxs)(`table`,{ref:Le,role:`grid`,className:r.cx(u.default.table,ke===`fixed`&&u.default.fixed),style:Ae,"aria-label":v,"aria-labelledby":y,"aria-describedby":ue,"aria-rowcount":F+1,"aria-colcount":G,"aria-multiselectable":H||void 0,"aria-busy":T||void 0,onKeyDown:st,onFocus:at,onBlur:ot,onPointerDown:e=>{Y.current=e.shiftKey},children:[(0,f.jsx)(`thead`,{className:u.default.head,children:(0,f.jsxs)(`tr`,{"aria-rowindex":1,children:[H&&(0,f.jsx)(`th`,{role:`columnheader`,"data-cell":`0:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(u.default.cell,u.default.selectCell),children:(0,f.jsx)(c.CheckBox,{checked:Ke,indeterminate:qe,disabled:q.length===0,onCheckedChange:e=>Xe(qe?!0:e),"aria-label":E.table.selectAll})}),g.map((e,t)=>{let n=t+W,i=A.findIndex(t=>t.key===e.key),a=i>=0?A[i].direction:null,s=a===`ascending`?o.ArrowUpIcon:a===`descending`?o.ArrowDownIcon:o.SortIcon,c=e.align??(e.numeric?`end`:`start`);return(0,f.jsxs)(`th`,{role:`columnheader`,"data-cell":`0:${n}`,"aria-colindex":n+1,scope:`col`,"aria-sort":ft?.key===e.key?ft.direction:void 0,"data-sorted":a??void 0,className:r.cx(u.default.cell,u.default.headerCell,e.sortable&&u.default.sortableCell,re[c],e.numeric&&u.default.numeric,e.headerEnd!=null&&u.default.hasHeaderEnd,e.className),style:{inlineSize:se(e.width),minInlineSize:se(e.minWidth),...e.style},children:[e.sortable?(0,f.jsxs)(`button`,{type:`button`,className:u.default.sortButton,onClick:t=>Ze(e,t.shiftKey||Y.current),children:[(0,f.jsx)(`span`,{className:u.default.sortLabel,children:e.header}),(0,f.jsxs)(`span`,{className:u.default.sortIcon,"aria-hidden":`true`,children:[(0,f.jsx)(s,{size:`sm`,strokeWidth:2.5}),A.length>1&&i>=0&&(0,f.jsx)(`span`,{className:u.default.sortPriority,children:i+1})]})]}):e.header,e.headerEnd]},e.key)})]})}),(0,f.jsx)(`tbody`,{className:u.default.body,children:z.length===0?(0,f.jsx)(`tr`,{className:u.default.emptyRow,children:(0,f.jsx)(`td`,{role:`gridcell`,colSpan:G,className:r.cx(u.default.cell,u.default.emptyCell),children:T?(0,f.jsxs)(`span`,{className:u.default.loadingInline,children:[(0,f.jsx)(a.Spinner,{size:`sm`,decorative:!0}),E.table.loading]}):Ce??(pt?O.noResults:O.empty)})}):z.map((e,t)=>{let n=_(e),i=t+1,a=K.has(n),o=Ge(e);return(0,f.jsxs)(`tr`,{"aria-rowindex":B+t+2,"aria-selected":U?a:void 0,"aria-disabled":U&&!o?!0:void 0,"data-selected":a||void 0,className:r.cx(u.default.row,(w||x===`single`)&&u.default.clickable),onClick:e=>dt(e,t),children:[H&&(0,f.jsx)(`td`,{role:`gridcell`,"data-cell":`${i}:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(u.default.cell,u.default.selectCell),children:(0,f.jsx)(c.CheckBox,{checked:a,disabled:!o,onCheckedChange:e=>Ye(t,Y.current,e),"aria-label":E.table.selectRowNamed(Ue(e))})}),g.map((n,o)=>{let s=o+W,c=l.getCellValue(e,n),ee=n.cell?n.cell(e,{value:c,rowIndex:R+t,selected:a}):ut(c),d=n.align??(n.numeric?`end`:`start`),te=n.rowHeader?`th`:`td`;return(0,f.jsx)(te,{role:n.rowHeader?`rowheader`:`gridcell`,"data-cell":`${i}:${s}`,"aria-colindex":s+1,scope:n.rowHeader?`row`:void 0,className:r.cx(u.default.cell,n.rowHeader&&u.default.rowHeader,re[d],n.numeric&&u.default.numeric,n.className),style:n.style,children:ee},n.key)})]},n)})})]})}),T&&z.length>0&&(0,f.jsx)(`div`,{className:u.default.loadingOverlay,children:(0,f.jsx)(a.Spinner,{label:E.table.loading})}),(0,f.jsx)(`span`,{hidden:!0,id:Fe,children:E.pagination.nav}),v&&!y&&(0,f.jsx)(`span`,{hidden:!0,id:Ie,children:v}),mt&&(0,f.jsxs)(`div`,{className:u.default.footer,children:[(0,f.jsx)(`span`,{role:`status`,className:u.default.status,children:H&&J>0?O.selectedCount(J):null}),S?(0,f.jsxs)(`div`,{className:u.default.paging,children:[(0,f.jsx)(`span`,{className:u.default.range,children:O.range(ht,gt,F)}),I>1&&(0,f.jsx)(ee.Pagination,{size:`sm`,compact:!0,pageCount:I,page:L,onPageChange:N,"aria-labelledby":`${Fe} ${y??Ie}`})]}):null]})]})}exports.DataGrid=g,exports.compareValues=l.compareValues,exports.filterRows=l.filterRows,exports.getCellValue=l.getCellValue,exports.sortRows=l.sortRows;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../../hooks/useVirtualizer.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../../utils/announce.cjs.js"),a=require("../../forms/CheckBox/CheckBox.cjs.js"),o=require("../../feedback/Spinner/Spinner.cjs.js"),s=require("../../layout/ScrollArea/ScrollArea.cjs.js"),c=require("../../navigation/Pagination/Pagination.cjs.js"),l=require("../../primitives/Icon/icons.cjs.js"),u=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),d=require("./dataGridUtils.cjs.js"),f=require("./DataGrid.module.css.cjs.js");let p=require("react"),m=require("react/jsx-runtime");var ee={compact:f.default.compact,comfortable:f.default.comfortable,spacious:f.default.spacious},te={plain:f.default.plain,striped:f.default.striped,outline:f.default.outline},ne={start:f.default.alignStart,center:f.default.alignCenter,end:f.default.alignEnd},re=10,ie=100,ae=2e3,oe={compact:37,comfortable:49,spacious:65},se=`a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]`,h=e=>Array.from(e.querySelectorAll(se)),ce=`[data-cell], [data-cell] :is(${se})`;function g(e){return e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?!0:e instanceof HTMLInputElement?![`checkbox`,`radio`,`button`,`submit`,`reset`,`color`,`file`,`image`].includes(e.type):e.getAttribute(`contenteditable`)===`true`}function _(e){let t=h(e).filter(e=>!e.hasAttribute(`data-grid-secondary`));return t.length===1&&!g(t[0])?t[0]:e}var le=e=>{let[t,n]=(e.getAttribute(`data-cell`)??`0:0`).split(`:`).map(Number);return[t,n]},ue=e=>typeof e==`number`?`${e}px`:e,de=e=>e.id;function v({rows:g,columns:v,getRowId:y=de,getRowLabel:fe,"aria-label":pe,"aria-labelledby":me,"aria-describedby":he,sort:ge,defaultSort:_e,onSortChange:ve,multiSort:ye=!0,filter:be,selectionMode:b=`none`,selected:xe,defaultSelected:Se,onSelectedChange:Ce,isRowSelectable:x,pageSize:S,virtualize:we=`auto`,page:Te,defaultPage:Ee=1,onPageChange:De,manual:C=!1,rowCount:Oe,onRowActivate:w,loading:T=!1,emptyState:ke,density:Ae=`comfortable`,variant:je=`outline`,hoverable:Me=!0,stickyHeader:Ne=!0,maxHeight:Pe,layout:Fe,tableStyle:Ie,className:Le,style:Re,ref:ze}){let{messages:E,locale:D}=u.useLocale(),O=E.dataGrid,k=(0,p.useRef)(null),Be=(0,p.useId)(),Ve=`${Be}-pages`,He=`${Be}-name`,Ue=t.useMergedRef(k,ze),[A,We]=e.useControllableState({value:ge,defaultValue:_e??[],onChange:ve}),[j,Ge]=e.useControllableState({value:xe,defaultValue:Se??[],onChange:Ce}),[Ke,qe]=e.useControllableState({value:Te,defaultValue:Ee,onChange:De}),M=(0,p.useMemo)(()=>C?null:d.sortIndices(g,A,v,D),[C,g,A,v,D]),N=(0,p.useMemo)(()=>d.createSearchIndex(g,v),[g,v]),P=be??``,Je=(0,p.useDeferredValue)(P),Ye=be!==void 0&&!C;(0,p.useEffect)(()=>{if(!Ye||g.length<ae||typeof window>`u`)return;let e=window.requestIdleCallback??(e=>window.setTimeout(()=>e({didTimeout:!1,timeRemaining:()=>8}),50)),t=window.cancelIdleCallback??window.clearTimeout,n=0,r=0,i=t=>{for(;n<g.length&&t.timeRemaining()>2;)for(let e=Math.min(g.length,n+1e3);n<e;n++)N.text(n);n<g.length&&(r=e(i))};return r=e(i),()=>t(r)},[Ye,g,N]);let F=(0,p.useMemo)(()=>{if(C||!M)return g;let e=d.searchWords(Je);if(e.length===0)return M.map(e=>g[e]);let t=[];for(let n of M)d.matchesWords(N.text(n),e)&&t.push(g[n]);return t},[C,M,g,Je,N]),I=C?Oe??g.length:F.length,Xe=S?Math.max(1,Math.ceil(I/S)):1,L=Math.min(Math.max(1,Ke),Xe),Ze=S&&!C?(L-1)*S:0,R=S&&!C?F.slice(Ze,Ze+S):F,z=S?(L-1)*S:0,B=we===`auto`?R.length>ie:we,Qe=(0,p.useRef)(null),$e=(0,p.useRef)(null),[et,tt]=(0,p.useState)(0);(0,p.useLayoutEffect)(()=>{let e=$e.current;if(!B||!e)return;let t=()=>tt(e.offsetHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[B]);let V=n.useVirtualizer({count:B?R.length:0,scrollElement:Qe,estimateSize:oe[Ae],paddingStart:et,overscan:10,initialCount:30}),nt=Pe??(B?`70vh`:void 0),rt=Fe??(B?`fixed`:`auto`),H=`${P}|${JSON.stringify(A)}`,it=(0,p.useRef)(H);(0,p.useEffect)(()=>{it.current!==H&&(it.current=H,S&&L!==1&&qe(1))},[H,S,L,qe]);let at=(0,p.useRef)(P);(0,p.useEffect)(()=>{if(at.current===P)return;let e=window.setTimeout(()=>{at.current=P,i.announce(I===0?O.noResults:O.rowCount(I))},600);return()=>window.clearTimeout(e)},[P,I,O]);let U=b===`multiple`,ot=b!==`none`,st=+!!U,W=v.length+st,ct=v.find(e=>e.rowHeader)??v[0],lt=e=>fe?.(e)??String((ct&&d.getCellValue(e,ct))??y(e)),ut=e=>e.headerLabel??(typeof e.header==`string`?e.header:e.key),G=(0,p.useMemo)(()=>new Set(j),[j]),dt=e=>x?.(e)??!0,K=(0,p.useMemo)(()=>F.filter(e=>x?.(e)??!0).map(y),[F,x,y]),q=(0,p.useMemo)(()=>{let e=0;for(let t of K)G.has(t)&&e++;return e},[K,G]),ft=K.length>0&&q===K.length,pt=q>0&&!ft,mt=(0,p.useRef)(null),J=(0,p.useRef)(!1),ht=(e,t,n)=>{let r=R[e];if(!r||!dt(r))return;let i=y(r);if(b===`single`){Ge(G.has(i)&&n!==!0?[]:[i]),mt.current=e;return}let a=n??!G.has(i),o=mt.current,s=[i];if(t&&o!==null&&o!==e){let[t,n]=o<e?[o,e]:[e,o];s=R.slice(t,n+1).filter(dt).map(y)}let c=new Set(j);for(let e of s)a?c.add(e):c.delete(e);mt.current=e,Ge(Array.from(c))},gt=e=>{let t=new Set(j);for(let n of K)e?t.add(n):t.delete(n);Ge(Array.from(t))},_t=(e,t)=>{let n=A.find(t=>t.key===e.key),r=n?n.direction===`ascending`?`descending`:null:`ascending`,a;a=t&&ye?n?r?A.map(t=>t.key===e.key?{key:t.key,direction:r}:t):A.filter(t=>t.key!==e.key):[...A,{key:e.key,direction:`ascending`}]:r?[{key:e.key,direction:r}]:[],We(a),i.announce(r?O.sorted(ut(e),r===`ascending`?O.ascending:O.descending):O.sortCleared)},vt=R.length,[yt,bt]=(0,p.useState)({r:0,c:0}),Y=Math.min(yt.r,vt),X=Math.min(yt.c,W-1),[xt,Z]=(0,p.useState)(!1),[St,Ct]=(0,p.useState)(0),wt=(e,t)=>k.current?.querySelector(`[data-cell="${e}:${t}"]`)??null;(0,p.useLayoutEffect)(()=>{let e=k.current;if(!e)return;let t=wt(Y,X);!t&&Y>0&&(t=e.querySelector(`tbody [data-cell$=":${X}"]`));let n=new Set;if(t){if(xt)for(let e of h(t))n.add(e);else n.add(_(t))}for(let t of e.querySelectorAll(ce)){let e=n.has(t)?`0`:`-1`;t.getAttribute(`tabindex`)!==e&&t.setAttribute(`tabindex`,e)}});let Tt=(0,p.useRef)(!1),Et=()=>{let e=wt(Y,X);if(!e)return!1;let t=_(e);return t.focus({preventScroll:!0}),(t===e?e:t).scrollIntoView?.({block:`nearest`,inline:`nearest`}),!0};(0,p.useLayoutEffect)(()=>{St!==0&&(Tt.current=!Et())},[St]),(0,p.useLayoutEffect)(()=>{Tt.current&&(Et()?Tt.current=!1:B&&Y>0&&V.scrollToIndex(Y-1))});let Q=(e,t)=>{let n=Math.max(0,Math.min(e,vt));Z(!1),bt({r:n,c:Math.max(0,Math.min(t,W-1))}),B&&n>0&&V.scrollToIndex(n-1),Ct(e=>e+1)},Dt=e=>{let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=le(n);(r!==Y||i!==X)&&bt({r,c:i}),Z(t!==n&&t!==_(n))},Ot=e=>{let t=e.relatedTarget;t&&k.current?.contains(t)||Z(!1)},kt=e=>{if(J.current=e.shiftKey,e.defaultPrevented||e.nativeEvent.isComposing)return;let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=le(n);if(xt||t!==n&&t!==_(n)){if(e.key===`Escape`)e.preventDefault(),Z(!1),n.focus();else if(e.key===`Tab`){let r=h(n);if(r.length===0)return;e.preventDefault(),r[(r.indexOf(t)+(e.shiftKey?-1:1)+r.length)%r.length].focus()}return}let a=getComputedStyle(n).direction===`rtl`,o=e.ctrlKey||e.metaKey,s=r>0?R[r-1]:void 0;switch(e.key){case`ArrowDown`:e.preventDefault(),Q(r+1,i);return;case`ArrowUp`:e.preventDefault(),Q(r-1,i);return;case`ArrowRight`:e.preventDefault(),Q(r,a?i-1:i+1);return;case`ArrowLeft`:e.preventDefault(),Q(r,a?i+1:i-1);return;case`Home`:e.preventDefault(),Q(o?0:r,0);return;case`End`:e.preventDefault(),Q(o?vt:r,W-1);return;case`PageDown`:e.preventDefault(),Q(Math.max(1,r+re),i);return;case`PageUp`:e.preventDefault(),Q(Math.max(+(r>0),r-re),i);return;case`Enter`:case`F2`:{let r=h(n);r.length>0&&(t===n||e.key===`F2`)?(e.preventDefault(),Z(!0),r[0].focus()):e.key===`Enter`&&t===n&&s&&w&&(e.preventDefault(),w(s));return}case` `:s&&ot&&t===n&&(e.preventDefault(),ht(r-1,e.shiftKey));return;default:o&&e.key.toLowerCase()===`a`&&U&&(e.preventDefault(),gt(!ft))}},At=(0,p.useMemo)(()=>new Intl.NumberFormat(D),[D]),jt=(0,p.useMemo)(()=>new Intl.DateTimeFormat(D,{dateStyle:`medium`}),[D]),Mt=e=>e==null?``:typeof e==`number`?At.format(e):e instanceof Date?jt.format(e):String(e),Nt=(e,t)=>{if(e.target.closest(se))return;let n=R[t];b===`single`&&ht(t,!1,!0),n&&w&&w(n)},$=B?n.withExtraItems(V,Y>0?[Y-1]:[]):R.map((e,t)=>({index:t,start:0,end:0,size:0})),Pt=$[$.length-1],Ft=B&&Pt?V.totalSize-Pt.end:0,It=A[0],Lt=!C&&Je.trim()!==``,Rt=!!S||U&&q>0,zt=I===0?0:z+1,Bt=Math.min(I,z+R.length);return(0,m.jsxs)(`div`,{className:r.cx(f.default.frame,te[je],ee[Ae],Me&&f.default.hoverable,Ne&&f.default.sticky,Le),style:B?{...Re,"--_head-h":`${et}px`}:Re,children:[(0,m.jsx)(s.ScrollArea,{scrollbars:`both`,maxHeight:nt,shadows:!1,tabIndex:-1,className:f.default.scroll,viewportRef:Qe,viewportClassName:B?f.default.virtualViewport:void 0,children:(0,m.jsxs)(`table`,{ref:Ue,role:`grid`,className:r.cx(f.default.table,rt===`fixed`&&f.default.fixed),style:Ie,"aria-label":pe,"aria-labelledby":me,"aria-describedby":he,"aria-rowcount":I+1,"aria-colcount":W,"aria-multiselectable":U||void 0,"aria-busy":T||void 0,onKeyDown:kt,onFocus:Dt,onBlur:Ot,onPointerDown:e=>{J.current=e.shiftKey},children:[(0,m.jsx)(`thead`,{ref:$e,className:f.default.head,children:(0,m.jsxs)(`tr`,{"aria-rowindex":1,children:[U&&(0,m.jsx)(`th`,{role:`columnheader`,"data-cell":`0:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(f.default.cell,f.default.selectCell),children:(0,m.jsx)(a.CheckBox,{checked:ft,indeterminate:pt,disabled:K.length===0,onCheckedChange:e=>gt(pt?!0:e),"aria-label":E.table.selectAll})}),v.map((e,t)=>{let n=t+st,i=A.findIndex(t=>t.key===e.key),a=i>=0?A[i].direction:null,o=a===`ascending`?l.ArrowUpIcon:a===`descending`?l.ArrowDownIcon:l.SortIcon,s=e.align??(e.numeric?`end`:`start`);return(0,m.jsxs)(`th`,{role:`columnheader`,"data-cell":`0:${n}`,"aria-colindex":n+1,scope:`col`,"aria-sort":It?.key===e.key?It.direction:void 0,"data-sorted":a??void 0,className:r.cx(f.default.cell,f.default.headerCell,e.sortable&&f.default.sortableCell,ne[s],e.numeric&&f.default.numeric,e.headerEnd!=null&&f.default.hasHeaderEnd,e.className),style:{inlineSize:ue(e.width),minInlineSize:ue(e.minWidth),...e.style},children:[e.sortable?(0,m.jsxs)(`button`,{type:`button`,className:f.default.sortButton,onClick:t=>_t(e,t.shiftKey||J.current),children:[(0,m.jsx)(`span`,{className:f.default.sortLabel,children:e.header}),(0,m.jsxs)(`span`,{className:f.default.sortIcon,"aria-hidden":`true`,children:[(0,m.jsx)(o,{size:`sm`,strokeWidth:2.5}),A.length>1&&i>=0&&(0,m.jsx)(`span`,{className:f.default.sortPriority,children:i+1})]})]}):e.header,e.headerEnd]},e.key)})]})}),(0,m.jsx)(`tbody`,{className:f.default.body,children:R.length===0?(0,m.jsx)(`tr`,{className:f.default.emptyRow,children:(0,m.jsx)(`td`,{role:`gridcell`,colSpan:W,className:r.cx(f.default.cell,f.default.emptyCell),children:T?(0,m.jsxs)(`span`,{className:f.default.loadingInline,children:[(0,m.jsx)(o.Spinner,{size:`sm`,decorative:!0}),E.table.loading]}):ke??(Lt?O.noResults:O.empty)})}):(0,m.jsxs)(m.Fragment,{children:[$.map((e,t)=>{let n=e.index,i=R[n],o=y(i),s=n+1,c=G.has(o),l=dt(i),u=B?e.start-(t===0?et:$[t-1].end):0;return(0,m.jsxs)(p.Fragment,{children:[u>.5&&(0,m.jsx)(`tr`,{"aria-hidden":`true`,className:f.default.spacer,style:{blockSize:u},children:(0,m.jsx)(`td`,{colSpan:W})}),(0,m.jsxs)(`tr`,{ref:B?V.measureElement:void 0,"data-index":B?n:void 0,"data-even":(z+n)%2==1||void 0,"aria-rowindex":z+n+2,"aria-selected":ot?c:void 0,"aria-disabled":ot&&!l?!0:void 0,"data-selected":c||void 0,className:r.cx(f.default.row,(w||b===`single`)&&f.default.clickable),onClick:e=>Nt(e,n),children:[U&&(0,m.jsx)(`td`,{role:`gridcell`,"data-cell":`${s}:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(f.default.cell,f.default.selectCell),children:(0,m.jsx)(a.CheckBox,{checked:c,disabled:!l,onCheckedChange:e=>ht(n,J.current,e),"aria-label":E.table.selectRowNamed(lt(i))})}),v.map((e,t)=>{let a=t+st,o=d.getCellValue(i,e),l=e.cell?e.cell(i,{value:o,rowIndex:Ze+n,selected:c}):Mt(o),u=e.align??(e.numeric?`end`:`start`),p=e.rowHeader?`th`:`td`;return(0,m.jsx)(p,{role:e.rowHeader?`rowheader`:`gridcell`,"data-cell":`${s}:${a}`,"aria-colindex":a+1,scope:e.rowHeader?`row`:void 0,className:r.cx(f.default.cell,e.rowHeader&&f.default.rowHeader,ne[u],e.numeric&&f.default.numeric,e.className),style:e.style,children:l},e.key)})]})]},o)}),Ft>.5&&(0,m.jsx)(`tr`,{"aria-hidden":`true`,className:f.default.spacer,style:{blockSize:Ft},children:(0,m.jsx)(`td`,{colSpan:W})})]})})]})}),T&&R.length>0&&(0,m.jsx)(`div`,{className:f.default.loadingOverlay,children:(0,m.jsx)(o.Spinner,{label:E.table.loading})}),(0,m.jsx)(`span`,{hidden:!0,id:Ve,children:E.pagination.nav}),pe&&!me&&(0,m.jsx)(`span`,{hidden:!0,id:He,children:pe}),Rt&&(0,m.jsxs)(`div`,{className:f.default.footer,children:[(0,m.jsx)(`span`,{role:`status`,className:f.default.status,children:U&&q>0?O.selectedCount(q):null}),S?(0,m.jsxs)(`div`,{className:f.default.paging,children:[(0,m.jsx)(`span`,{className:f.default.range,children:O.range(zt,Bt,I)}),Xe>1&&(0,m.jsx)(c.Pagination,{size:`sm`,compact:!0,pageCount:Xe,page:L,onPageChange:qe,"aria-labelledby":`${Ve} ${me??He}`})]}):null]})]})}exports.DataGrid=v,exports.compareValues=d.compareValues,exports.createSearchIndex=d.createSearchIndex,exports.filterRows=d.filterRows,exports.getCellValue=d.getCellValue,exports.sortIndices=d.sortIndices,exports.sortRows=d.sortRows;

package/dist/components/data-display/DataGrid/DataGrid.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode, Ref } from 'react';
 import { DataGridRowId, DataGridSortItem } from './dataGridUtils';
 export type { DataGridRowId, DataGridSortItem } from './dataGridUtils';
-export { compareValues, filterRows, getCellValue, sortRows } from './dataGridUtils';
+export { compareValues, createSearchIndex, filterRows, getCellValue, sortIndices, sortRows, } from './dataGridUtils';
 /** Horizontal alignment of a column's cells. */
 export type DataGridAlign = "start" | "center" | "end";
 /** Row height and padding. */
@@ -103,6 +103,17 @@ export interface DataGridProps<T> {
     isRowSelectable?: (row: T) => boolean;
     /** Rows per page. Shows a footer with the range and `Pagination`. Without it, every row shows. */
     pageSize?: number;
+    /**
+     * Render only the rows in view (plus a few above and below), so grids of
+     * 100,000+ rows scroll, sort, filter, and select without delay. `"auto"`
+     * turns it on when more than 100 rows show at once. While it's on, the body
+     * scrolls inside the grid (its height is `maxHeight`, 70% of the window by
+     * default) and the table uses fixed layout unless you set `layout`, so
+     * columns keep their widths while you scroll; give columns a `width` to
+     * size them. Screen readers still get the full count (`aria-rowcount`)
+     * and each row's position (`aria-rowindex`). @default "auto"
+     */
+    virtualize?: boolean | "auto";
     /** Current page, starting at 1 (controlled). */
     page?: number;
     /** Initial page when uncontrolled. @default 1 */
@@ -135,7 +146,7 @@ export interface DataGridProps<T> {
     maxHeight?: CSSProperties["maxHeight"];
     /**
      * Table layout. `fixed` makes column widths exact (content wraps or clips
-     * instead of widening a column). @default "auto"
+     * instead of widening a column). @default "auto" ("fixed" while virtualized)
      */
     layout?: "auto" | "fixed";
     /** Style for the `<table>` (for example a total width when columns are resized). */
@@ -180,4 +191,4 @@ export interface DataGridProps<T> {
  * />
  * ```
  */
-export declare function DataGrid<T>({ rows, columns, getRowId, getRowLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, sort: sortProp, defaultSort, onSortChange, multiSort, filter, selectionMode, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, pageSize, page: pageProp, defaultPage, onPageChange, manual, rowCount, onRowActivate, loading, emptyState, density, variant, hoverable, stickyHeader, maxHeight, layout, tableStyle, className, style, ref, }: DataGridProps<T>): import("react").JSX.Element;
+export declare function DataGrid<T>({ rows, columns, getRowId, getRowLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, sort: sortProp, defaultSort, onSortChange, multiSort, filter: filterProp, selectionMode, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, pageSize, virtualize, page: pageProp, defaultPage, onPageChange, manual, rowCount, onRowActivate, loading, emptyState, density, variant, hoverable, stickyHeader, maxHeight, layout, tableStyle, className, style, ref, }: DataGridProps<T>): import("react").JSX.Element;