@vjdesigns/vjdesigns-ui 2.4.0 → 3.0.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:we,pageSize:x,virtualize:Te=`auto`,page:Ee,defaultPage:De=1,onPageChange:Oe,manual:S=!1,rowCount:ke,onRowActivate:C,loading:w=!1,emptyState:Ae,density:je=`comfortable`,variant:Me=`outline`,hoverable:Ne=!0,stickyHeader:Pe=!0,maxHeight:Fe,layout:Ie,tableStyle:Le,treegrid:Re=!1,getRowProps:ze,renderRowDetail:Be,onRowsShown:Ve,onVisibleRangeChange:He,className:Ue,style:We,ref:Ge}){let{messages:T,locale:E}=u.useLocale(),D=T.dataGrid,O=(0,p.useRef)(null),Ke=(0,p.useId)(),qe=`${Ke}-pages`,Je=`${Ke}-name`,Ye=t.useMergedRef(O,Ge),[k,Xe]=e.useControllableState({value:ge,defaultValue:_e??[],onChange:ve}),[A,Ze]=e.useControllableState({value:xe,defaultValue:Se??[],onChange:Ce}),[Qe,j]=e.useControllableState({value:Ee,defaultValue:De,onChange:Oe}),M=(0,p.useMemo)(()=>S?null:d.sortIndices(g,k,v,E),[S,g,k,v,E]),N=(0,p.useMemo)(()=>d.createSearchIndex(g,v),[g,v]),P=be??``,$e=(0,p.useDeferredValue)(P),et=be!==void 0&&!S;(0,p.useEffect)(()=>{if(!et||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)},[et,g,N]);let F=(0,p.useMemo)(()=>{if(S||!M)return g;let e=d.searchWords($e);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},[S,M,g,$e,N]),I=S?ke??g.length:F.length,tt=x?Math.max(1,Math.ceil(I/x)):1,L=Math.min(Math.max(1,Qe),tt),nt=x&&!S?(L-1)*x:0,R=x&&!S?F.slice(nt,nt+x):F,z=x?(L-1)*x:0,B=!Be&&(Te===`auto`?R.length>ie:Te),rt=(0,p.useRef)(null),it=(0,p.useRef)(null),[at,ot]=(0,p.useState)(0);(0,p.useLayoutEffect)(()=>{let e=it.current;if(!B||!e)return;let t=()=>ot(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:rt,estimateSize:oe[je],paddingStart:at,overscan:10,initialCount:30}),st=Fe??(B?`70vh`:void 0),ct=Ie??(B?`fixed`:`auto`),H=`${P}|${JSON.stringify(k)}`,lt=(0,p.useRef)(H);(0,p.useEffect)(()=>{lt.current!==H&&(lt.current=H,x&&L!==1&&j(1))},[H,x,L,j]);let ut=(0,p.useRef)(P);(0,p.useEffect)(()=>{if(ut.current===P)return;let e=window.setTimeout(()=>{ut.current=P,i.announce(I===0?D.noResults:D.rowCount(I))},600);return()=>window.clearTimeout(e)},[P,I,D]);let U=b===`multiple`,dt=b!==`none`,ft=+!!U,W=v.length+ft,pt=v.find(e=>e.rowHeader)??v[0],mt=e=>fe?.(e)??String((pt&&d.getCellValue(e,pt))??y(e)),ht=e=>e.headerLabel??(typeof e.header==`string`?e.header:e.key),G=(0,p.useMemo)(()=>new Set(A),[A]),gt=e=>we?.(e)??!0,K=(0,p.useMemo)(()=>F.filter(e=>we?.(e)??!0).map(y),[F,we,y]),q=(0,p.useMemo)(()=>{let e=0;for(let t of K)G.has(t)&&e++;return e},[K,G]),_t=K.length>0&&q===K.length,vt=q>0&&!_t,yt=(0,p.useRef)(null),J=(0,p.useRef)(!1),bt=(e,t,n)=>{let r=R[e];if(!r||!gt(r))return;let i=y(r);if(b===`single`){Ze(G.has(i)&&n!==!0?[]:[i]),yt.current=e;return}let a=n??!G.has(i),o=yt.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(gt).map(y)}let c=new Set(A);for(let e of s)a?c.add(e):c.delete(e);yt.current=e,Ze(Array.from(c))},xt=e=>{let t=new Set(A);for(let n of K)e?t.add(n):t.delete(n);Ze(Array.from(t))},St=(e,t)=>{let n=k.find(t=>t.key===e.key),r=n?n.direction===`ascending`?`descending`:null:`ascending`,a;a=t&&ye?n?r?k.map(t=>t.key===e.key?{key:t.key,direction:r}:t):k.filter(t=>t.key!==e.key):[...k,{key:e.key,direction:`ascending`}]:r?[{key:e.key,direction:r}]:[],Xe(a),i.announce(r?D.sorted(ht(e),r===`ascending`?D.ascending:D.descending):D.sortCleared)},Ct=R.length,[wt,Tt]=(0,p.useState)({r:0,c:0}),Y=Math.min(wt.r,Ct),X=Math.min(wt.c,W-1),[Et,Z]=(0,p.useState)(!1),[Dt,Ot]=(0,p.useState)(0),kt=(e,t)=>O.current?.querySelector(`[data-cell="${e}:${t}"]`)??null;(0,p.useLayoutEffect)(()=>{let e=O.current;if(!e)return;let t=kt(Y,X);!t&&Y>0&&(t=e.querySelector(`tbody [data-cell$=":${X}"]`));let n=new Set;if(t){if(Et)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 At=(0,p.useRef)(!1),jt=()=>{let e=kt(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)(()=>{Dt!==0&&(At.current=!jt())},[Dt]),(0,p.useLayoutEffect)(()=>{At.current&&(jt()?At.current=!1:B&&Y>0&&V.scrollToIndex(Y-1))});let Q=(e,t)=>{let n=Math.max(0,Math.min(e,Ct));Z(!1),Tt({r:n,c:Math.max(0,Math.min(t,W-1))}),B&&n>0&&V.scrollToIndex(n-1),Ot(e=>e+1)},Mt=e=>{let t=e.target,n=t.closest(`[data-cell]`);if(!n||!O.current?.contains(n))return;let[r,i]=le(n);(r!==Y||i!==X)&&Tt({r,c:i}),Z(t!==n&&t!==_(n))},Nt=e=>{let t=e.relatedTarget;t&&O.current?.contains(t)||Z(!1)},Pt=e=>{if(J.current=e.shiftKey,e.defaultPrevented||e.nativeEvent.isComposing)return;let t=e.target,n=t.closest(`[data-cell]`);if(!n||!O.current?.contains(n))return;let[r,i]=le(n);if(Et||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?Ct: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&&C&&(e.preventDefault(),C(s));return}case` `:s&&dt&&t===n&&(e.preventDefault(),bt(r-1,e.shiftKey));return;default:o&&e.key.toLowerCase()===`a`&&U&&(e.preventDefault(),xt(!_t))}},Ft=(0,p.useMemo)(()=>new Intl.NumberFormat(E),[E]),It=(0,p.useMemo)(()=>new Intl.DateTimeFormat(E,{dateStyle:`medium`}),[E]),Lt=e=>e==null?``:typeof e==`number`?Ft.format(e):e instanceof Date?It.format(e):String(e),Rt=(e,t)=>{if(e.target.closest(se))return;let n=R[t];b===`single`&&bt(t,!1,!0),n&&C&&C(n)},$=B?n.withExtraItems(V,Y>0?[Y-1]:[]):R.map((e,t)=>({index:t,start:0,end:0,size:0})),zt=$[$.length-1],Bt=(0,p.useRef)({});Bt.current.fn=Ve,(0,p.useEffect)(()=>{let e=Bt.current,t=e.last;t===R||t&&t.length===R.length&&t.every((e,t)=>e===R[t])||(e.last=R,e.fn?.(R))});let Vt=B?V.virtualItems:$,Ht=Vt[0]?.index??0,Ut=Vt[Vt.length-1]?.index??-1,Wt=(0,p.useRef)(He);Wt.current=He,(0,p.useEffect)(()=>{Wt.current?.({start:Ht,end:Ut})},[Ht,Ut]);let Gt=B&&zt?V.totalSize-zt.end:0,Kt=k[0],qt=!S&&$e.trim()!==``,Jt=!!x||U&&q>0,Yt=I===0?0:z+1,Xt=Math.min(I,z+R.length);return(0,m.jsxs)(`div`,{className:r.cx(f.default.frame,te[Me],ee[je],Ne&&f.default.hoverable,Pe&&f.default.sticky,Ue),style:B?{...We,"--_head-h":`${at}px`}:We,children:[(0,m.jsx)(s.ScrollArea,{scrollbars:`both`,maxHeight:st,shadows:!1,tabIndex:-1,className:f.default.scroll,viewportRef:rt,viewportClassName:B?f.default.virtualViewport:void 0,children:(0,m.jsxs)(`table`,{ref:Ye,role:Re?`treegrid`:`grid`,className:r.cx(f.default.table,ct===`fixed`&&f.default.fixed),style:Le,"aria-label":pe,"aria-labelledby":me,"aria-describedby":he,"aria-rowcount":I+1,"aria-colcount":W,"aria-multiselectable":U||void 0,"aria-busy":w||void 0,onKeyDown:Pt,onFocus:Mt,onBlur:Nt,onPointerDown:e=>{J.current=e.shiftKey},children:[(0,m.jsx)(`thead`,{ref:it,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:_t,indeterminate:vt,disabled:K.length===0,onCheckedChange:e=>xt(vt?!0:e),"aria-label":T.table.selectAll})}),v.map((e,t)=>{let n=t+ft,i=k.findIndex(t=>t.key===e.key),a=i>=0?k[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":Kt?.key===e.key?Kt.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=>St(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}),k.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:w?(0,m.jsxs)(`span`,{className:f.default.loadingInline,children:[(0,m.jsx)(o.Spinner,{size:`sm`,decorative:!0}),T.table.loading]}):Ae??(qt?D.noResults:D.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=ze?.(i),u=Be?.(i),ee=gt(i),te=B?e.start-(t===0?at:$[t-1].end):0;return(0,m.jsxs)(p.Fragment,{children:[te>.5&&(0,m.jsx)(`tr`,{"aria-hidden":`true`,className:f.default.spacer,style:{blockSize:te},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":dt&&l?.selectable!==!1?c:void 0,"aria-disabled":dt&&!ee&&l?.selectable!==!1?!0:void 0,"data-selected":c||void 0,"aria-level":l?.level,"aria-expanded":l?.expanded,className:r.cx(f.default.row,(C||b===`single`)&&f.default.clickable,l?.className),onClick:e=>Rt(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:l?.selectable!==!1&&(0,m.jsx)(a.CheckBox,{checked:c,disabled:!ee,onCheckedChange:e=>bt(n,J.current,e),"aria-label":T.table.selectRowNamed(mt(i))})}),v.map((e,t)=>{let a=t+ft,o=d.getCellValue(i,e),l=e.cell?e.cell(i,{value:o,rowIndex:nt+n,selected:c}):Lt(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)})]}),u!=null&&u!==!1&&(0,m.jsx)(`tr`,{className:f.default.detailRow,children:(0,m.jsx)(`td`,{colSpan:W,className:r.cx(f.default.cell,f.default.detailCell),children:u})})]},o)}),Gt>.5&&(0,m.jsx)(`tr`,{"aria-hidden":`true`,className:f.default.spacer,style:{blockSize:Gt},children:(0,m.jsx)(`td`,{colSpan:W})})]})})]})}),w&&R.length>0&&(0,m.jsx)(`div`,{className:f.default.loadingOverlay,children:(0,m.jsx)(o.Spinner,{label:T.table.loading})}),(0,m.jsx)(`span`,{hidden:!0,id:qe,children:T.pagination.nav}),pe&&!me&&(0,m.jsx)(`span`,{hidden:!0,id:Je,children:pe}),Jt&&(0,m.jsxs)(`div`,{className:f.default.footer,children:[(0,m.jsx)(`span`,{role:`status`,className:f.default.status,children:U&&q>0?D.selectedCount(q):null}),x?(0,m.jsxs)(`div`,{className:f.default.paging,children:[(0,m.jsx)(`span`,{className:f.default.range,children:D.range(Yt,Xt,I)}),tt>1&&(0,m.jsx)(c.Pagination,{size:`sm`,compact:!0,pageCount:tt,page:L,onPageChange:j,"aria-labelledby":`${qe} ${me??Je}`})]}):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. */
@@ -19,6 +19,21 @@ export interface DataGridCellContext {
     /** Whether the row is selected. */
     selected: boolean;
 }
+/** Per-row additions from `getRowProps`, for hierarchical rows (groups, trees). */
+export interface DataGridRowProps {
+    /** Depth in a hierarchy, from 1 (sets `aria-level`; use with `treegrid`). */
+    level?: number;
+    /** Whether the row's children are shown (sets `aria-expanded`). Leave unset for a row with no children. */
+    expanded?: boolean;
+    /** Class name for the row. */
+    className?: string;
+    /**
+     * `false` marks a row that isn't a data row (a group header): it gets no
+     * checkbox and no selected or disabled state. Also return false from
+     * `isRowSelectable` for it. @default true
+     */
+    selectable?: boolean;
+}
 /** One column of a `DataGrid`. */
 export interface DataGridColumn<T> {
     /** Unique key. Also the default field read from each row (`row[key]`). */
@@ -103,6 +118,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 +161,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). */
@@ -146,6 +172,36 @@ export interface DataGridProps<T> {
     style?: CSSProperties;
     /** Ref to the `<table role="grid">`. */
     ref?: Ref<HTMLTableElement>;
+    /**
+     * Rows form a hierarchy (groups, a tree): the table becomes a
+     * `role="treegrid"` and each row takes the `level` and `expanded` from
+     * `getRowProps`. @default false
+     */
+    treegrid?: boolean;
+    /** Per-row level, expanded state, and class name. */
+    getRowProps?: (row: T) => DataGridRowProps;
+    /**
+     * Content for a full-width row under a row (master-detail), or null for
+     * none. Its controls are outside the grid's arrow-key navigation: Tab from
+     * the row moves into them. A grid with detail rows doesn't virtualize, so
+     * pair it with `pageSize` for long lists.
+     */
+    renderRowDetail?: (row: T) => ReactNode;
+    /**
+     * Called with the rows the grid shows, sorted, filtered, and paged, in
+     * display order, whenever they change (to copy a cell range, or export
+     * exactly what's on screen).
+     */
+    onRowsShown?: (rows: readonly T[]) => void;
+    /**
+     * Called with the range of shown rows (indexes into them, inclusive) that
+     * are rendered in view. With virtualization this follows scrolling, which
+     * is what "load more while scrolling" needs.
+     */
+    onVisibleRangeChange?: (range: {
+        start: number;
+        end: number;
+    }) => void;
 }
 /**
  * An interactive data table (WAI-ARIA APG "Data Grid"): sortable columns
@@ -180,4 +236,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, treegrid, getRowProps, renderRowDetail, onRowsShown, onVisibleRangeChange, className, style, ref, }: DataGridProps<T>): import("react").JSX.Element;