@elliemae/ds-data-table 3.80.0-next.14 → 3.80.0-next.19

package/dist/types/parts/Row.d.ts

@@ -2,13 +2,15 @@ import React from 'react';
 import type { DSDataTableT } from '../react-desc-prop-types.js';
 export declare const Row: React.ComponentType<{
     row: DSDataTableT.InternalRow;
-    measureRef?: (el: HTMLElement | null) => void;
+    measureElement?: DSDataTableT.DataTableVirtualizer['measureElement'];
+    itemIndex?: number;
     itemWrapperStyle?: React.CSSProperties;
     isDragOverlay: boolean;
 }>;
 declare const RowWithContext: (props: {
     row: DSDataTableT.InternalRow;
-    measureRef?: (el: HTMLElement | null) => void;
+    measureElement?: DSDataTableT.DataTableVirtualizer["measureElement"];
+    itemIndex?: number;
     itemWrapperStyle?: React.CSSProperties;
     isDragOverlay: boolean;
 }) => React.JSX.Element;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,4 +1,4 @@
-import type { Range, useVirtual } from 'react-virtual/types';
+import type { Range, useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
 import type { ZustandT } from '@elliemae/ds-zustand-helpers';
 import type { DSPaginationT } from '@elliemae/ds-pagination';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
@@ -11,6 +11,17 @@ import { DSDataTableName, DSDataTableSlots } from './constants/index.js';
 export declare namespace DSDataTableT {
     type PropsT<D, R, O> = Partial<D> & R & O;
     type InternalPropsT<D, R, O> = D & R & O;
+    /**
+     * Single source of truth for the virtualizer's element generics — reused across both
+     * UseAutoCalculatedT and Context so they can't drift out of sync with each other, and must
+     * match useAutocalculated/index.tsx's own useVirtualizer<HTMLDivElement, Element> call exactly
+     * (Virtualizer is invariant across methods like scrollToFn, so a mismatched generic here is a
+     * real dts build failure, not just a lint nit). Item element is deliberately left as the broad
+     * `Element` default (not narrowed to HTMLDivElement) — ds-system's mergeRefs/innerRef typing on
+     * styled components is HTMLElement-generic, and narrowing here breaks that assignability in
+     * Row.tsx.
+     */
+    export type DataTableVirtualizer = ReturnType<typeof useVirtualizer<HTMLDivElement, Element>>;
     export type InternalAtoms = {
         drilldownRowId: string | null;
         focusedRowId: string | null;
@@ -28,7 +39,7 @@ export declare namespace DSDataTableT {
         visibleRangeRef: React.MutableRefObject<Range>;
         columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;
         columnHeaderCallbackRef: (node: HTMLDivElement | null) => void;
-        /** Sticky header height (px) — drives both useVirtual paddingStart and the scroll container's scroll-padding-top (PUI-18626). */
+        /** Sticky header height (px) — drives both the virtualizer's paddingStart and the scroll container's scroll-padding-top (PUI-18626). */
         headerHeightPx: number;
         virtualListRef: React.MutableRefObject<HTMLDivElement | null>;
         flattenedData: InternalRow[];
@@ -36,7 +47,15 @@ export declare namespace DSDataTableT {
         isEmptyContent: boolean;
         firstFocuseableColumnHeaderId: string | undefined;
         visibleColumns: InternalColumn[];
-        virtualListHelpers: ReturnType<typeof useVirtual>;
+        virtualListHelpers: DataTableVirtualizer;
+        /**
+         * Fresh pulls of virtualListHelpers.getVirtualItems()/.getTotalSize(), taken on every render of
+         * useAutoCalculated. virtualListHelpers itself is the same mutated-in-place instance across
+         * renders (v3), so store selectors reading it as a whole never see a reference change — these
+         * two fields are what Rows.tsx/VirtualRowsList.tsx actually select for fresh values.
+         */
+        virtualItems: VirtualItem[];
+        totalSize: number;
         layoutHelpers: {
             totalColumnsWidth: number | string;
             gridLayout: string[];
@@ -285,7 +304,9 @@ export declare namespace DSDataTableT {
         isEmptyContent: boolean;
         firstFocuseableColumnHeaderId: string | undefined;
         visibleColumns: InternalColumn[];
-        virtualListHelpers: ReturnType<typeof useVirtual>;
+        virtualListHelpers: DataTableVirtualizer;
+        virtualItems: VirtualItem[];
+        totalSize: number;
         layoutHelpers: {
             totalColumnsWidth: number | string;
             gridLayout: string[];
@@ -390,8 +411,8 @@ export declare namespace DSDataTableT {
             }[];
         };
         actionRef?: React.MutableRefObject<{
-            scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];
-            scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];
+            scrollToIndex: DataTableVirtualizer['scrollToIndex'];
+            scrollToOffset: DataTableVirtualizer['scrollToOffset'];
         }>;
         noResultsSecondaryMessage?: string;
         noResultsButtonLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.80.0-next.14",
+  "version": "3.80.0-next.19",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -37,44 +37,44 @@
     "indent": 4
   },
   "dependencies": {
+    "@elliemae/ds-button-v2": "3.80.0-next.19",
+    "@elliemae/ds-circular-progress-indicator": "3.80.0-next.19",
+    "@elliemae/ds-dialog": "3.80.0-next.19",
+    "@elliemae/ds-drag-and-drop": "3.80.0-next.19",
+    "@elliemae/ds-dropdownmenu-v2": "3.80.0-next.19",
+    "@elliemae/ds-floating-context": "3.80.0-next.19",
+    "@elliemae/ds-form-checkbox": "3.80.0-next.19",
+    "@elliemae/ds-form-combobox": "3.80.0-next.19",
+    "@elliemae/ds-form-date-range-picker": "3.80.0-next.19",
+    "@elliemae/ds-form-date-time-picker": "3.80.0-next.19",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.80.0-next.19",
+    "@elliemae/ds-form-input-text": "3.80.0-next.19",
+    "@elliemae/ds-form-layout-blocks": "3.80.0-next.19",
+    "@elliemae/ds-form-radio": "3.80.0-next.19",
+    "@elliemae/ds-grid": "3.80.0-next.19",
+    "@elliemae/ds-hooks-focus-trap": "3.80.0-next.19",
+    "@elliemae/ds-icons": "3.80.0-next.19",
     "@elliemae/ds-legacy-dropdownmenu": "1.0.16",
-    "react-virtual": "~2.10.4",
+    "@elliemae/ds-menu-button": "3.80.0-next.19",
+    "@elliemae/ds-pagination": "3.80.0-next.19",
+    "@elliemae/ds-pills-v2": "3.80.0-next.19",
+    "@elliemae/ds-props-helpers": "3.80.0-next.19",
+    "@elliemae/ds-skeleton": "3.80.0-next.19",
+    "@elliemae/ds-system": "3.80.0-next.19",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.19",
+    "@elliemae/ds-zustand-helpers": "3.80.0-next.19",
+    "@tanstack/react-virtual": "3.13.18",
     "uid": "^2.0.2",
-    "use-onclickoutside": "0.4.1",
-    "@elliemae/ds-button-v2": "3.80.0-next.14",
-    "@elliemae/ds-dialog": "3.80.0-next.14",
-    "@elliemae/ds-circular-progress-indicator": "3.80.0-next.14",
-    "@elliemae/ds-floating-context": "3.80.0-next.14",
-    "@elliemae/ds-drag-and-drop": "3.80.0-next.14",
-    "@elliemae/ds-dropdownmenu-v2": "3.80.0-next.14",
-    "@elliemae/ds-form-checkbox": "3.80.0-next.14",
-    "@elliemae/ds-form-combobox": "3.80.0-next.14",
-    "@elliemae/ds-form-date-range-picker": "3.80.0-next.14",
-    "@elliemae/ds-form-input-text": "3.80.0-next.14",
-    "@elliemae/ds-form-layout-blocks": "3.80.0-next.14",
-    "@elliemae/ds-grid": "3.80.0-next.14",
-    "@elliemae/ds-form-date-time-picker": "3.80.0-next.14",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.80.0-next.14",
-    "@elliemae/ds-form-radio": "3.80.0-next.14",
-    "@elliemae/ds-hooks-focus-trap": "3.80.0-next.14",
-    "@elliemae/ds-icons": "3.80.0-next.14",
-    "@elliemae/ds-menu-button": "3.80.0-next.14",
-    "@elliemae/ds-pagination": "3.80.0-next.14",
-    "@elliemae/ds-pills-v2": "3.80.0-next.14",
-    "@elliemae/ds-props-helpers": "3.80.0-next.14",
-    "@elliemae/ds-system": "3.80.0-next.14",
-    "@elliemae/ds-skeleton": "3.80.0-next.14",
-    "@elliemae/ds-typescript-helpers": "3.80.0-next.14",
-    "@elliemae/ds-zustand-helpers": "3.80.0-next.14"
+    "use-onclickoutside": "0.4.1"
   },
   "devDependencies": {
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.19",
+    "@elliemae/ds-tabs": "3.80.0-next.19",
+    "@elliemae/ds-test-utils": "3.80.0-next.19",
+    "@elliemae/ds-toolbar-v2": "3.80.0-next.19",
     "jest": "^30.0.0",
     "styled-components": "~5.3.11",
-    "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.14",
-    "@elliemae/ds-test-utils": "3.80.0-next.14",
-    "@elliemae/ds-tabs": "3.80.0-next.14",
-    "@elliemae/ds-toolbar-v2": "3.80.0-next.14"
+    "styled-system": "^5.1.5"
   },
   "peerDependencies": {
     "lodash-es": "^4.18.1",