@vjdesigns/vjdesigns-ui 2.5.0 → 3.1.0

package/dist/ai/llms-full.txt

@@ -1,4 +1,4 @@
-# @vjdesigns/vjdesigns-ui 2.4.0: full reference
+# @vjdesigns/vjdesigns-ui 3.0.0: full reference
 
 > Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.
 
@@ -1296,6 +1296,11 @@ real `<table role="grid">` with `aria-sort`, `aria-selected`,
 - `className`: `string`. Class name for the outer frame.
 - `style`: `CSSProperties`. Style for the outer frame.
 - `ref`: `Ref<HTMLTableElement>`. Ref to the `<table role="grid">`.
+- `treegrid`: `boolean` (default false). Rows form a hierarchy (groups, a tree): the table becomes a `role="treegrid"` and each row takes the `level` and `expanded` from `getRowProps`.
+- `getRowProps`: `(row: T) => DataGridRowProps`. Per-row level, expanded state, and class name.
+- `renderRowDetail`: `(row: T) => ReactNode`. 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.
+- `onRowsShown`: `(rows: readonly T[]) => void`. 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).
+- `onVisibleRangeChange`: `(range: { start: number; end: number }) => 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.
 
 ### Examples (Storybook stories)
 
@@ -1311,6 +1316,8 @@ real `<table role="grid">` with `aria-sort`, `aria-selected`,
 - Right To Left: In right-to-left layouts the columns mirror and ArrowRight moves toward the start.
 - Extending Columns: Extending columns: `headerEnd` adds content after a header's label, outside its sort button (here a column menu button), and `className` / `style` reach every cell of a column. Controls marked `data-grid-secondary` don't steal the header's focus: the sort button stays its target, and F2 then Tab reaches them.
 - Large data (100,000 rows): 100,000 rows with sorting, search, and selection. Only the rows in view (plus a few above and below) are in the page, so scrolling, sorting, filtering, and selecting stay instant at any size. Screen readers still hear the full count (`aria-rowcount`) and each row's position.
+- Row Levels And Details: Extension points for hierarchical and master-detail grids: `treegrid` with `getRowProps` (each row's level and expanded state), and `renderRowDetail` (a full-width row under a row). DataGridPro builds its grouping, tree data, and details on these.
+- Rows Shown And Range: `onRowsShown` reports the rows on screen, sorted, filtered, and paged, in order; `onVisibleRangeChange` reports which of them are rendered in view. DataGridPro builds cell ranges and loading while scrolling on these.
 
 ## EmptyState
 
@@ -3958,6 +3965,7 @@ focusable, covering the segment) inside a `<label>`. `ref` points at the
 - Controlled
 - In Fieldset
 - Composition: Stats period
+- Right To Left: Right to left: the segments run from the right and the thumb sits under the selected one.
 
 ## Select
 

package/dist/ai/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "summary": "Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.",
   "install": "npm install @vjdesigns/vjdesigns-ui",
   "stylesheet": "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
@@ -2302,6 +2302,37 @@
           "type": "Ref<HTMLTableElement>",
           "required": false,
           "description": "Ref to the `<table role=\"grid\">`."
+        },
+        {
+          "name": "treegrid",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Rows form a hierarchy (groups, a tree): the table becomes a\n`role=\"treegrid\"` and each row takes the `level` and `expanded` from\n`getRowProps`."
+        },
+        {
+          "name": "getRowProps",
+          "type": "(row: T) => DataGridRowProps",
+          "required": false,
+          "description": "Per-row level, expanded state, and class name."
+        },
+        {
+          "name": "renderRowDetail",
+          "type": "(row: T) => ReactNode",
+          "required": false,
+          "description": "Content for a full-width row under a row (master-detail), or null for\nnone. Its controls are outside the grid's arrow-key navigation: Tab from\nthe row moves into them. A grid with detail rows doesn't virtualize, so\npair it with `pageSize` for long lists."
+        },
+        {
+          "name": "onRowsShown",
+          "type": "(rows: readonly T[]) => void",
+          "required": false,
+          "description": "Called with the rows the grid shows, sorted, filtered, and paged, in\ndisplay order, whenever they change (to copy a cell range, or export\nexactly what's on screen)."
+        },
+        {
+          "name": "onVisibleRangeChange",
+          "type": "(range: { start: number; end: number }) => void",
+          "required": false,
+          "description": "Called with the range of shown rows (indexes into them, inclusive) that\nare rendered in view. With virtualization this follows scrolling, which\nis what \"load more while scrolling\" needs."
         }
       ],
       "subcomponents": [],
@@ -2354,6 +2385,14 @@
         {
           "name": "Large data (100,000 rows)",
           "description": "100,000 rows with sorting, search, and selection. Only the rows in view\n(plus a few above and below) are in the page, so scrolling, sorting,\nfiltering, and selecting stay instant at any size. Screen readers still\nhear the full count (`aria-rowcount`) and each row's position."
+        },
+        {
+          "name": "Row Levels And Details",
+          "description": "Extension points for hierarchical and master-detail grids: `treegrid`\nwith `getRowProps` (each row's level and expanded state), and\n`renderRowDetail` (a full-width row under a row). DataGridPro builds its\ngrouping, tree data, and details on these."
+        },
+        {
+          "name": "Rows Shown And Range",
+          "description": "`onRowsShown` reports the rows on screen, sorted, filtered, and paged,\nin order; `onVisibleRangeChange` reports which of them are rendered in\nview. DataGridPro builds cell ranges and loading while scrolling on these."
         }
       ]
     },
@@ -10689,6 +10728,10 @@
         {
           "name": "Composition: Stats period",
           "description": ""
+        },
+        {
+          "name": "Right To Left",
+          "description": "Right to left: the segments run from the right and the thumb sits under the selected one."
         }
       ]
     },

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

@@ -1 +1 @@
-"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;
+"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

@@ -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]`). */
@@ -157,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
@@ -191,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: 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;
+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;