@dynatrace/strato-components 3.6.0 → 3.7.1

package/esm/tables/DataTable/components/DataTableRow.js

@@ -12,12 +12,11 @@ import { DataTablePinningShadowCells } from "./ColumnPinning/DataTablePinningSha
 import { DataTableCell } from "./DataTableCell.js";
 import * as styles from "./DataTableRow.sty.js";
 import { rowDetailsExpandedRowCell } from "../features/RowDetails/RowDetails.sty.js";
-import { useRowInteractivityProps } from "../features/RowInteractivity/RowInteractivity.js";
-import { SubRowCellContextProvider } from "../features/SubRows/SubRowCellContext.js";
+import { useRowInteractivityProps } from "../features/RowInteractivity/hooks/useRowInteractivityProps.js";
+import { SubRowCellContextProvider } from "../features/SubRows/components/SubRowCellContext.js";
 const ROW_LONG_PRESS_TIMEOUT_DURATION = 500;
 function DataTableRow(props) {
   const {
-    row,
     virtualRow,
     rowCount,
     virtualColumns,
@@ -33,19 +32,19 @@ function DataTableRow(props) {
   const virtualRowIndex = virtualRow.index;
   const hasSubRows = table.options.enableExpanding === true;
   const subRowIndicatorColumnId = hasSubRows ? table.getSubRowIndicatorColumnId() : null;
-  const subRowDepth = hasSubRows ? row.getSubRowDepth() : 0;
-  const thresholdPill = row.getThresholdPill();
-  const tableState = table.getState();
-  const floatingMenuInfoRowId = tableState.floatingMenuInfo?.rowId;
-  const floatingMenuInfoColumnId = tableState.floatingMenuInfo?.columnId;
+  const subRowDepth = hasSubRows ? props.row.getSubRowDepth() : 0;
+  const thresholdPill = props.row.getThresholdPill();
+  const floatingMenuState = table.atoms.floatingMenuInfo?.get();
+  const floatingMenuInfoRowId = floatingMenuState?.rowId;
+  const floatingMenuInfoColumnId = floatingMenuState?.columnId;
   const scrollToIndex = scrollToIndexProp ?? (() => void 0);
-  const { rowInteractivityClassName, rowInteractivityProps } = useRowInteractivityProps(row, scrollToIndex);
-  const rowLink = row.getLinkForRow();
+  const { rowInteractivityClassName, rowInteractivityProps } = useRowInteractivityProps(props.row, scrollToIndex);
+  const rowLink = props.row.getLinkForRow();
   const rowLinkRef = useRef(null);
   const { setNodeRef } = useSortable({
-    id: row.id,
+    id: props.row.id,
     data: {
-      row,
+      row: props.row,
       rowIndex: virtualRowIndex,
       virtualRow
     }
@@ -66,8 +65,8 @@ function DataTableRow(props) {
     if (isLongPress.current || !(target instanceof HTMLElement) && !(target instanceof SVGElement)) {
       return;
     }
-    const row2 = target.closest('[role="row"]');
-    if (row2 === null || isTargetInteractive(row2, target)) {
+    const row = target.closest('[role="row"]');
+    if (row === null || isTargetInteractive(row, target)) {
       return;
     }
     const nativeEvent = event.nativeEvent;
@@ -87,8 +86,8 @@ function DataTableRow(props) {
   const rightPinnedColumns = table.getRightVisibleLeafColumns();
   const firstRightPinnedColumn = rightPinnedColumns.at(0);
   const firstRightPinnedVirtualColumnIndex = virtualColumns[virtualColumns.length - rightPinnedColumns.length]?.index;
-  const gridRowPosition = row.getGridRowPosition(virtualItemIndex);
-  const visibleCells = row.getVisibleCells();
+  const gridRowPosition = props.row.getGridRowPosition(virtualItemIndex);
+  const visibleCells = props.row.getVisibleCells();
   let linkHandlingEvents = {};
   if (rowLink) {
     linkHandlingEvents = {
@@ -102,18 +101,18 @@ function DataTableRow(props) {
       {
         role: "row",
         ref: rowMeasure,
-        "data-rowid": row.id,
+        "data-rowid": props.row.id,
         "data-row": virtualRowIndex,
         className: clsx(
           styles.row({
-            rowSeparation: table.getVisualVariantOptions().rowSeparation,
+            rowSeparation: table.atoms.visualVariantConfig?.get().rowSeparation,
             rowParity,
             isDraggedRow
           }),
           {
             [tableStyles.firstBodyRow]: virtualRowIndex === 0,
             [tableStyles.lastBodyRow]: virtualRowIndex === rowCount - 1,
-            [`${rowDetailsExpandedRowCell}`]: row.getIsDetailsOpen(),
+            [`${rowDetailsExpandedRowCell}`]: props.row.getIsDetailsOpen(),
             [rowInteractivityClassName]: !isInDragOverlay
           }
         ),
@@ -136,11 +135,11 @@ function DataTableRow(props) {
           ...linkHandlingEvents
         },
         children: [
-          /* @__PURE__ */ jsx(DataTableRowContextProvider, { value: row, children: virtualColumns.map((virtualCell) => {
+          /* @__PURE__ */ jsx(DataTableRowContextProvider, { value: props.row, children: virtualColumns.map((virtualCell) => {
             const virtualCellIndex = virtualCell.index;
             const cell = visibleCells[virtualCellIndex];
             const column = cell.column;
-            const hasActiveFloatingMenu = floatingMenuInfoRowId === row.id && floatingMenuInfoColumnId === column.id;
+            const hasActiveFloatingMenu = floatingMenuInfoRowId === props.row.id && floatingMenuInfoColumnId === column.id;
             return /* @__PURE__ */ jsx(
               SubRowCellContextProvider,
               {
@@ -158,7 +157,7 @@ function DataTableRow(props) {
                     dragAndDropRef: setNodeRef,
                     subRowDepth,
                     thresholdPill,
-                    rowData: row.original,
+                    rowData: props.row.original,
                     cellDeps: column.columnDef?.meta?.cellDeps?.(cell).toString()
                   }
                 )
@@ -193,7 +192,7 @@ function DataTableRow(props) {
           index: firstRightPinnedVirtualColumnIndex
         },
         gridRowPosition,
-        rowId: row.id
+        rowId: props.row.id
       }
     )
   ] });

package/esm/tables/DataTable/components/DataTableRow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableRow.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type { ScrollToOptions, VirtualItem } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type KeyboardEvent, type PointerEvent, type JSX, useRef } from 'react';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { isTargetInteractive } from '../../utils/is-target-interactive.js';\nimport {\n  DataTableRowContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport { DataTablePinningShadowCells } from './ColumnPinning/DataTablePinningShadowCells.js';\nimport { DataTableCell } from './DataTableCell.js';\nimport * as styles from './DataTableRow.sty.js';\nimport { rowDetailsExpandedRowCell } from '../features/RowDetails/RowDetails.sty.js';\nimport { useRowInteractivityProps } from '../features/RowInteractivity/RowInteractivity.js';\nimport { SubRowCellContextProvider } from '../features/SubRows/SubRowCellContext.js';\nimport type { Row } from '../hooks/useTable/types.js';\n\n/** Duration (ms) for long press on touch devices. */\nconst ROW_LONG_PRESS_TIMEOUT_DURATION = 500;\n\ninterface DataTableRowProps<TData> extends StylingProps {\n  /**\n   * DataTable row object.\n   */\n  row: Row<TData>;\n  /**\n   * The virtual item in the row virtualizer.\n   */\n  virtualRow: VirtualItem;\n  /**\n   * The index of the row in the virtual items array, representing the currently rendered rows.\n   */\n  virtualItemIndex: number;\n  /**\n   * Total number of rows currently rendered in the table.\n   */\n  rowCount: number;\n  /**\n   * The virtual items in the column virtualizer.\n   */\n  virtualColumns: VirtualItem[];\n  /**\n   * Whether the row is currently being reordered via drag and drop.\n   * The dragged row is the original row that is rendered in the table.\n   */\n  isDraggedRow: boolean;\n  /**\n   * Whether the row is currently in the drag overlay.\n   * The row that is in the overlay is a copy of the row being dragged.\n   */\n  isInDragOverlay: boolean;\n  /**\n   * Parity of the row to keep track of the zebra stripe patterns.\n   */\n  rowParity?: 'even' | 'odd';\n  /**\n   * Measure function for row sizing that is called when the row is rendered to the dom.\n   */\n  rowMeasure?: (node: Element | null) => void;\n  /**\n   * Measure function for column sizing that is called when the column cells are rendered to the dom.\n   */\n  columnMeasure?: (node: Element | null) => void;\n  /**\n   * rowVirtualizer function for scrolling to the row with the specified index.\n   */\n  scrollToIndex?: (index: number, options?: ScrollToOptions) => void;\n}\n\n/**\n * Wrapper around all cells in a row.\n * @internal\n */\nexport function DataTableRow<TData>(\n  props: Readonly<DataTableRowProps<TData>>,\n): JSX.Element {\n  const {\n    row,\n    virtualRow,\n    rowCount,\n    virtualColumns,\n    isDraggedRow,\n    isInDragOverlay,\n    virtualItemIndex,\n    rowParity,\n    rowMeasure,\n    columnMeasure,\n    scrollToIndex: scrollToIndexProp,\n  } = props;\n\n  const table = useDataTable();\n  const virtualRowIndex = virtualRow.index;\n  const hasSubRows = table.options.enableExpanding === true;\n  const subRowIndicatorColumnId = hasSubRows\n    ? table.getSubRowIndicatorColumnId()\n    : null;\n  const subRowDepth = hasSubRows ? row.getSubRowDepth() : 0;\n  const thresholdPill = row.getThresholdPill();\n\n  const tableState = table.getState();\n  const floatingMenuInfoRowId = tableState.floatingMenuInfo?.rowId;\n  const floatingMenuInfoColumnId = tableState.floatingMenuInfo?.columnId;\n\n  const scrollToIndex = scrollToIndexProp ?? (() => undefined);\n  const { rowInteractivityClassName, rowInteractivityProps } =\n    useRowInteractivityProps<TData>(row, scrollToIndex);\n\n  const rowLink = row.getLinkForRow();\n  const rowLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const { setNodeRef } = useSortable({\n    id: row.id,\n    data: {\n      row,\n      rowIndex: virtualRowIndex,\n      virtualRow,\n    },\n  });\n\n  const isLongPress = useRef(false);\n  // after some researching it looks like the average duration for recognizing long press is ~400-500ms\n  // however, this may differ depending on the device\n  // Sources:\n  // - https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer/minimumpressduration\n  // - https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewConfiguration.java\n  const longPressTimeout = useRef<NodeJS.Timeout | null>(null);\n\n  const handleOpenRowLinkOnEnter = (event: KeyboardEvent): void => {\n    if (!rowLink) {\n      return;\n    }\n\n    const isRowEnter =\n      (event.target as HTMLElement).getAttribute('role') === 'row' &&\n      event.key === 'Enter';\n\n    if (isRowEnter) {\n      rowLinkRef.current?.click();\n    }\n  };\n\n  const handleClickOnRowLink = (event: PointerEvent<HTMLElement>): void => {\n    const { target } = event;\n\n    // early exit if a cell actions menu was opened on long press or right-click,\n    // or if the target is not a valid element\n    if (\n      isLongPress.current ||\n      (!(target instanceof HTMLElement) && !(target instanceof SVGElement))\n    ) {\n      return;\n    }\n\n    const row = target.closest('[role=\"row\"]');\n    // early exit if an element outside or an interactive element inside the row was clicked\n    if (row === null || isTargetInteractive(row, target)) {\n      return;\n    }\n\n    const nativeEvent = event.nativeEvent;\n    const newEvent = new MouseEvent('click', {\n      ...event.nativeEvent,\n      // For some reason the Ctrl and Meta key as well as the button key have to be manually set,\n      // even though the native event already contains the correct values\n      ctrlKey: nativeEvent.ctrlKey === true,\n      metaKey: nativeEvent.metaKey === true,\n      button: nativeEvent.button,\n    });\n\n    // Dispatching a synthetic event allows to open the link in a new tab in the background\n    // when clicking on an cell for which cell actions are defined, for instance.\n    rowLinkRef.current?.dispatchEvent(newEvent);\n  };\n\n  // get the last left pinned and first right pinned column to be able to display a shadow to indicate overflow\n  const leftPinnedColumns = table.getLeftVisibleLeafColumns();\n  const lastLeftPinnedColumn = leftPinnedColumns.at(-1);\n  const lastLeftPinnedVirtualColumnIndex = leftPinnedColumns.length - 1;\n  const rightPinnedColumns = table.getRightVisibleLeafColumns();\n  const firstRightPinnedColumn = rightPinnedColumns.at(0);\n  const firstRightPinnedVirtualColumnIndex =\n    virtualColumns[virtualColumns.length - rightPinnedColumns.length]?.index;\n\n  const gridRowPosition = row.getGridRowPosition(virtualItemIndex);\n  const visibleCells = row.getVisibleCells();\n\n  let linkHandlingEvents = {};\n  if (rowLink) {\n    linkHandlingEvents = {\n      onPointerUp: handleClickOnRowLink,\n      onKeyUp: handleOpenRowLinkOnEnter,\n    };\n  }\n\n  return (\n    <>\n      <div\n        role=\"row\"\n        ref={rowMeasure}\n        data-rowid={row.id}\n        data-row={virtualRowIndex}\n        className={clsx(\n          styles.row({\n            rowSeparation: table.getVisualVariantOptions().rowSeparation,\n            rowParity,\n            isDraggedRow,\n          }),\n          {\n            [tableStyles.firstBodyRow]: virtualRowIndex === 0,\n            [tableStyles.lastBodyRow]: virtualRowIndex === rowCount - 1,\n            [`${rowDetailsExpandedRowCell}`]: row.getIsDetailsOpen(),\n            [rowInteractivityClassName]: !isInDragOverlay,\n          },\n        )}\n        style={{\n          ...gridRowPosition,\n        }}\n        onTouchStart={() => {\n          // we need to set this timeout to detect if the user performed a long press on the row\n          longPressTimeout.current = setTimeout(() => {\n            isLongPress.current = true;\n          }, ROW_LONG_PRESS_TIMEOUT_DURATION);\n        }}\n        onTouchEnd={() => {\n          // clear the long press timer on touch release\n          if (longPressTimeout.current !== null) {\n            clearTimeout(longPressTimeout.current);\n          }\n          isLongPress.current = false;\n        }}\n        // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n        {...(!isInDragOverlay && {\n          ...rowInteractivityProps,\n          ...linkHandlingEvents,\n        })}\n      >\n        <DataTableRowContextProvider value={row as Row<unknown>}>\n          {virtualColumns.map((virtualCell) => {\n            const virtualCellIndex = virtualCell.index;\n            const cell = visibleCells[virtualCellIndex];\n            const column = cell.column;\n            const hasActiveFloatingMenu =\n              floatingMenuInfoRowId === row.id &&\n              floatingMenuInfoColumnId === column.id;\n\n            return (\n              <SubRowCellContextProvider\n                key={`${virtualRow.key}-${virtualCell.key}`}\n                isSubRowIndicatorColumn={\n                  hasSubRows && subRowIndicatorColumnId === column.id\n                }\n                cell={cell}\n              >\n                <DataTableCell\n                  cell={cell}\n                  virtualColumnIndex={virtualCellIndex}\n                  virtualRowIndex={virtualRowIndex}\n                  isInDragOverlay={isInDragOverlay}\n                  hasActiveFloatingMenu={hasActiveFloatingMenu}\n                  columnMeasure={columnMeasure}\n                  dragAndDropRef={setNodeRef}\n                  subRowDepth={subRowDepth}\n                  thresholdPill={thresholdPill}\n                  rowData={row.original}\n                  cellDeps={column.columnDef?.meta?.cellDeps?.(cell).toString()}\n                />\n              </SubRowCellContextProvider>\n            );\n          })}\n        </DataTableRowContextProvider>\n        {rowLink && (\n          // this link element solely holds the link for interactive rows and is not visible to the user\n          // it's not directly clickable; instead, the link is opened by interactions with the row (click, enter)\n          // eslint-disable-next-line jsx-a11y/anchor-has-content\n          <a\n            ref={rowLinkRef}\n            href={rowLink}\n            onPointerDown={(event: PointerEvent) => event.stopPropagation()}\n            style={{ display: 'none' }}\n          />\n        )}\n      </div>\n      {!isDraggedRow && (\n        <DataTablePinningShadowCells\n          lastLeftPinnedColumn={{\n            column: lastLeftPinnedColumn,\n            index: lastLeftPinnedVirtualColumnIndex,\n          }}\n          firstRightPinnedColumn={{\n            column: firstRightPinnedColumn,\n            index: firstRightPinnedVirtualColumnIndex,\n          }}\n          gridRowPosition={gridRowPosition}\n          rowId={row.id}\n        />\n      )}\n    </>\n  );\n}\n"],
-  "mappings": "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",
-  "names": ["row"]
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type { Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ScrollToOptions, VirtualItem } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type KeyboardEvent, type PointerEvent, type JSX, useRef } from 'react';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { isTargetInteractive } from '../../utils/is-target-interactive.js';\nimport {\n  DataTableRowContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport { DataTablePinningShadowCells } from './ColumnPinning/DataTablePinningShadowCells.js';\nimport { DataTableCell } from './DataTableCell.js';\nimport * as styles from './DataTableRow.sty.js';\nimport { rowDetailsExpandedRowCell } from '../features/RowDetails/RowDetails.sty.js';\nimport { useRowInteractivityProps } from '../features/RowInteractivity/hooks/useRowInteractivityProps.js';\nimport { SubRowCellContextProvider } from '../features/SubRows/components/SubRowCellContext.js';\n\n/** Duration (ms) for long press on touch devices. */\nconst ROW_LONG_PRESS_TIMEOUT_DURATION = 500;\n\ninterface DataTableRowProps extends StylingProps {\n  /**\n   * DataTable row object.\n   */\n  row: Row<TableFeatures, RowData>;\n  /**\n   * The virtual item in the row virtualizer.\n   */\n  virtualRow: VirtualItem;\n  /**\n   * The index of the row in the virtual items array, representing the currently rendered rows.\n   */\n  virtualItemIndex: number;\n  /**\n   * Total number of rows currently rendered in the table.\n   */\n  rowCount: number;\n  /**\n   * The virtual items in the column virtualizer.\n   */\n  virtualColumns: VirtualItem[];\n  /**\n   * Whether the row is currently being reordered via drag and drop.\n   * The dragged row is the original row that is rendered in the table.\n   */\n  isDraggedRow: boolean;\n  /**\n   * Whether the row is currently in the drag overlay.\n   * The row that is in the overlay is a copy of the row being dragged.\n   */\n  isInDragOverlay: boolean;\n  /**\n   * Parity of the row to keep track of the zebra stripe patterns.\n   */\n  rowParity?: 'even' | 'odd';\n  /**\n   * Measure function for row sizing that is called when the row is rendered to the dom.\n   */\n  rowMeasure?: (node: Element | null) => void;\n  /**\n   * Measure function for column sizing that is called when the column cells are rendered to the dom.\n   */\n  columnMeasure?: (node: Element | null) => void;\n  /**\n   * rowVirtualizer function for scrolling to the row with the specified index.\n   */\n  scrollToIndex?: (index: number, options?: ScrollToOptions) => void;\n}\n\n/**\n * Wrapper around all cells in a props.row.\n * @internal\n */\nexport function DataTableRow(props: Readonly<DataTableRowProps>): JSX.Element {\n  const {\n    virtualRow,\n    rowCount,\n    virtualColumns,\n    isDraggedRow,\n    isInDragOverlay,\n    virtualItemIndex,\n    rowParity,\n    rowMeasure,\n    columnMeasure,\n    scrollToIndex: scrollToIndexProp,\n  } = props;\n\n  const table = useDataTable();\n  const virtualRowIndex = virtualRow.index;\n  const hasSubRows = table.options.enableExpanding === true;\n  const subRowIndicatorColumnId = hasSubRows\n    ? table.getSubRowIndicatorColumnId()\n    : null;\n  const subRowDepth = hasSubRows ? props.row.getSubRowDepth() : 0;\n  const thresholdPill = props.row.getThresholdPill();\n\n  const floatingMenuState = table.atoms.floatingMenuInfo?.get();\n  const floatingMenuInfoRowId = floatingMenuState?.rowId;\n  const floatingMenuInfoColumnId = floatingMenuState?.columnId;\n\n  const scrollToIndex = scrollToIndexProp ?? (() => undefined);\n  const { rowInteractivityClassName, rowInteractivityProps } =\n    useRowInteractivityProps(props.row, scrollToIndex);\n\n  const rowLink = props.row.getLinkForRow();\n  const rowLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const { setNodeRef } = useSortable({\n    id: props.row.id,\n    data: {\n      row: props.row,\n      rowIndex: virtualRowIndex,\n      virtualRow,\n    },\n  });\n\n  const isLongPress = useRef(false);\n  // after some researching it looks like the average duration for recognizing long press is ~400-500ms\n  // however, this may differ depending on the device\n  // Sources:\n  // - https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer/minimumpressduration\n  // - https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewConfiguration.java\n  const longPressTimeout = useRef<NodeJS.Timeout | null>(null);\n\n  const handleOpenRowLinkOnEnter = (event: KeyboardEvent): void => {\n    if (!rowLink) {\n      return;\n    }\n\n    const isRowEnter =\n      (event.target as HTMLElement).getAttribute('role') === 'row' &&\n      event.key === 'Enter';\n\n    if (isRowEnter) {\n      rowLinkRef.current?.click();\n    }\n  };\n\n  const handleClickOnRowLink = (event: PointerEvent<HTMLElement>): void => {\n    const { target } = event;\n\n    // early exit if a cell actions menu was opened on long press or right-click,\n    // or if the target is not a valid element\n    if (\n      isLongPress.current ||\n      (!(target instanceof HTMLElement) && !(target instanceof SVGElement))\n    ) {\n      return;\n    }\n\n    const row = target.closest('[role=\"row\"]');\n    // early exit if an element outside or an interactive element inside the row was clicked\n    if (row === null || isTargetInteractive(row, target)) {\n      return;\n    }\n\n    const nativeEvent = event.nativeEvent;\n    const newEvent = new MouseEvent('click', {\n      ...event.nativeEvent,\n      // For some reason the Ctrl and Meta key as well as the button key have to be manually set,\n      // even though the native event already contains the correct values\n      ctrlKey: nativeEvent.ctrlKey === true,\n      metaKey: nativeEvent.metaKey === true,\n      button: nativeEvent.button,\n    });\n\n    // Dispatching a synthetic event allows to open the link in a new tab in the background\n    // when clicking on an cell for which cell actions are defined, for instance.\n    rowLinkRef.current?.dispatchEvent(newEvent);\n  };\n\n  // get the last left pinned and first right pinned column to be able to display a shadow to indicate overflow\n  const leftPinnedColumns = table.getLeftVisibleLeafColumns();\n  const lastLeftPinnedColumn = leftPinnedColumns.at(-1);\n  const lastLeftPinnedVirtualColumnIndex = leftPinnedColumns.length - 1;\n  const rightPinnedColumns = table.getRightVisibleLeafColumns();\n  const firstRightPinnedColumn = rightPinnedColumns.at(0);\n  const firstRightPinnedVirtualColumnIndex =\n    virtualColumns[virtualColumns.length - rightPinnedColumns.length]?.index;\n\n  const gridRowPosition = props.row.getGridRowPosition(virtualItemIndex);\n  const visibleCells = props.row.getVisibleCells();\n\n  let linkHandlingEvents = {};\n  if (rowLink) {\n    linkHandlingEvents = {\n      onPointerUp: handleClickOnRowLink,\n      onKeyUp: handleOpenRowLinkOnEnter,\n    };\n  }\n\n  return (\n    <>\n      <div\n        role=\"row\"\n        ref={rowMeasure}\n        data-rowid={props.row.id}\n        data-row={virtualRowIndex}\n        className={clsx(\n          styles.row({\n            rowSeparation: table.atoms.visualVariantConfig?.get().rowSeparation,\n            rowParity,\n            isDraggedRow,\n          }),\n          {\n            [tableStyles.firstBodyRow]: virtualRowIndex === 0,\n            [tableStyles.lastBodyRow]: virtualRowIndex === rowCount - 1,\n            [`${rowDetailsExpandedRowCell}`]: props.row.getIsDetailsOpen(),\n            [rowInteractivityClassName]: !isInDragOverlay,\n          },\n        )}\n        style={{\n          ...gridRowPosition,\n        }}\n        onTouchStart={() => {\n          // we need to set this timeout to detect if the user performed a long press on the row\n          longPressTimeout.current = setTimeout(() => {\n            isLongPress.current = true;\n          }, ROW_LONG_PRESS_TIMEOUT_DURATION);\n        }}\n        onTouchEnd={() => {\n          // clear the long press timer on touch release\n          if (longPressTimeout.current !== null) {\n            clearTimeout(longPressTimeout.current);\n          }\n          isLongPress.current = false;\n        }}\n        // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n        {...(!isInDragOverlay && {\n          ...rowInteractivityProps,\n          ...linkHandlingEvents,\n        })}\n      >\n        <DataTableRowContextProvider value={props.row}>\n          {virtualColumns.map((virtualCell) => {\n            const virtualCellIndex = virtualCell.index;\n            const cell = visibleCells[virtualCellIndex];\n            const column = cell.column;\n            const hasActiveFloatingMenu =\n              floatingMenuInfoRowId === props.row.id &&\n              floatingMenuInfoColumnId === column.id;\n\n            return (\n              <SubRowCellContextProvider\n                key={`${virtualRow.key}-${virtualCell.key}`}\n                isSubRowIndicatorColumn={\n                  hasSubRows && subRowIndicatorColumnId === column.id\n                }\n                cell={cell}\n              >\n                <DataTableCell\n                  cell={cell}\n                  virtualColumnIndex={virtualCellIndex}\n                  virtualRowIndex={virtualRowIndex}\n                  isInDragOverlay={isInDragOverlay}\n                  hasActiveFloatingMenu={hasActiveFloatingMenu}\n                  columnMeasure={columnMeasure}\n                  dragAndDropRef={setNodeRef}\n                  subRowDepth={subRowDepth}\n                  thresholdPill={thresholdPill}\n                  rowData={props.row.original}\n                  cellDeps={column.columnDef?.meta?.cellDeps?.(cell).toString()}\n                />\n              </SubRowCellContextProvider>\n            );\n          })}\n        </DataTableRowContextProvider>\n        {rowLink && (\n          // this link element solely holds the link for interactive rows and is not visible to the user\n          // it's not directly clickable; instead, the link is opened by interactions with the row (click, enter)\n          // eslint-disable-next-line jsx-a11y/anchor-has-content\n          <a\n            ref={rowLinkRef}\n            href={rowLink}\n            onPointerDown={(event: PointerEvent) => event.stopPropagation()}\n            style={{ display: 'none' }}\n          />\n        )}\n      </div>\n      {!isDraggedRow && (\n        <DataTablePinningShadowCells\n          lastLeftPinnedColumn={{\n            column: lastLeftPinnedColumn,\n            index: lastLeftPinnedVirtualColumnIndex,\n          }}\n          firstRightPinnedColumn={{\n            column: firstRightPinnedColumn,\n            index: firstRightPinnedVirtualColumnIndex,\n          }}\n          gridRowPosition={gridRowPosition}\n          rowId={props.row.id}\n        />\n      )}\n    </>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/esm/tables/DataTable/components/DataTableRow.sty.js

@@ -6,7 +6,7 @@ import "../features/RowDetails/RowDetails.css";
 import "../features/RowInteractivity/RowInteractivity.css";
 import "./DataTableRow.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var row = _7a468({ defaultClassName: "_1y5fzv0-3-6-0", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-6-0", horizontalDividers: "_1y5fzv2-3-6-0", zebraStripes: "_1y5fzv3-3-6-0" }, rowParity: { even: "_1y5fzv4-3-6-0", odd: "_1y5fzv5-3-6-0" }, isDraggedRow: { true: "_1y5fzv6-3-6-0", false: "_1y5fzv7-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-6-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-6-0"]] });
+var row = _7a468({ defaultClassName: "_1y5fzv0-3-7-1", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-7-1", horizontalDividers: "_1y5fzv2-3-7-1", zebraStripes: "_1y5fzv3-3-7-1" }, rowParity: { even: "_1y5fzv4-3-7-1", odd: "_1y5fzv5-3-7-1" }, isDraggedRow: { true: "_1y5fzv6-3-7-1", false: "_1y5fzv7-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-7-1"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-7-1"]] });
 export {
   row
 };

package/esm/tables/DataTable/components/DataTableRow.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableRow.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../DataTable.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var row = _7a468({defaultClassName:'_1y5fzv0-3-6-0',variantClassNames:{rowSeparation:{none:'_1y5fzv1-3-6-0',horizontalDividers:'_1y5fzv2-3-6-0',zebraStripes:'_1y5fzv3-3-6-0'},rowParity:{even:'_1y5fzv4-3-6-0',odd:'_1y5fzv5-3-6-0'},isDraggedRow:{true:'_1y5fzv6-3-6-0',false:'_1y5fzv7-3-6-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_1y5fzv8-3-6-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_1y5fzv9-3-6-0']]});"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../DataTable.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var row = _7a468({defaultClassName:'_1y5fzv0-3-7-1',variantClassNames:{rowSeparation:{none:'_1y5fzv1-3-7-1',horizontalDividers:'_1y5fzv2-3-7-1',zebraStripes:'_1y5fzv3-3-7-1'},rowParity:{even:'_1y5fzv4-3-7-1',odd:'_1y5fzv5-3-7-1'},isDraggedRow:{true:'_1y5fzv6-3-7-1',false:'_1y5fzv7-3-7-1'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_1y5fzv8-3-7-1'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_1y5fzv9-3-7-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,MAAM,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,oBAAmB,kBAAiB,cAAa,iBAAgB,GAAE,WAAU,EAAC,MAAK,kBAAiB,KAAI,iBAAgB,GAAE,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,eAAc,gBAAe,WAAU,OAAM,GAAE,gBAAgB,GAAE,CAAC,EAAC,eAAc,gBAAe,WAAU,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableScrollShadow.css

@@ -1,8 +1,8 @@
-._1al677r0-3-6-0 {
+._1al677r0-3-7-1 {
   position: sticky;
   pointer-events: none;
 }
-._1al677r0-3-6-0::after {
+._1al677r0-3-7-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -10,19 +10,19 @@
   width: 50px;
   pointer-events: none;
 }
-[data-theme="light"] ._1al677r1-3-6-0::after {
+[data-theme="light"] ._1al677r1-3-7-1::after {
   box-shadow: inset 12px 0px 12px -32px var(--dt-colors-theme-foreground-10, #2d2e4e), inset 18px 0px 18px -32px var(--dt-colors-theme-foreground-10, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r1-3-6-0::after {
+[data-theme="dark"] ._1al677r1-3-7-1::after {
   box-shadow: inset 12px 0px 12px -16px var(--dt-colors-theme-foreground-20, #fff), inset 16px 0px 16px -16px var(--dt-colors-theme-foreground-20, #fff);
 }
-[data-theme="light"] ._1al677r2-3-6-0::after {
+[data-theme="light"] ._1al677r2-3-7-1::after {
   box-shadow: inset -12px 0px 12px -32px var(--dt-colors-theme-foreground-10, #2d2e4e), inset -18px 0px 18px -32px var(--dt-colors-theme-foreground-10, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r2-3-6-0::after {
+[data-theme="dark"] ._1al677r2-3-7-1::after {
   box-shadow: inset -12px 0px 12px -16px var(--dt-colors-theme-foreground-20, #fff), inset -16px 0px 16px -16px var(--dt-colors-theme-foreground-20, #fff);
 }
-._1al677r3-3-6-0 {
+._1al677r3-3-7-1 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -33,10 +33,10 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r3-3-6-0::after {
+._1al677r3-3-7-1::after {
   left: 0;
 }
-._1al677r4-3-6-0 {
+._1al677r4-3-7-1 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -46,6 +46,6 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r4-3-6-0::after {
+._1al677r4-3-7-1::after {
   right: 0;
 }

package/esm/tables/DataTable/components/DataTableScrollShadow.sty.js

@@ -1,6 +1,6 @@
 import "./DataTableScrollShadow.css";
-var scrollShadow = { left: "_1al677r1-3-6-0 _1al677r0-3-6-0", right: "_1al677r2-3-6-0 _1al677r0-3-6-0" };
-var tableEdgeShadow = { left: "_1al677r3-3-6-0 _1al677r1-3-6-0 _1al677r0-3-6-0", right: "_1al677r4-3-6-0 _1al677r2-3-6-0 _1al677r0-3-6-0" };
+var scrollShadow = { left: "_1al677r1-3-7-1 _1al677r0-3-7-1", right: "_1al677r2-3-7-1 _1al677r0-3-7-1" };
+var tableEdgeShadow = { left: "_1al677r3-3-7-1 _1al677r1-3-7-1 _1al677r0-3-7-1", right: "_1al677r4-3-7-1 _1al677r2-3-7-1 _1al677r0-3-7-1" };
 export {
   scrollShadow,
   tableEdgeShadow

package/esm/tables/DataTable/components/DataTableScrollShadow.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableScrollShadow.css.ts"],
-  "sourcesContent": ["import './DataTableScrollShadow.css';\nexport var scrollShadow = {left:'_1al677r1-3-6-0 _1al677r0-3-6-0',right:'_1al677r2-3-6-0 _1al677r0-3-6-0'};\nexport var tableEdgeShadow = {left:'_1al677r3-3-6-0 _1al677r1-3-6-0 _1al677r0-3-6-0',right:'_1al677r4-3-6-0 _1al677r2-3-6-0 _1al677r0-3-6-0'};"],
+  "sourcesContent": ["import './DataTableScrollShadow.css';\nexport var scrollShadow = {left:'_1al677r1-3-7-1 _1al677r0-3-7-1',right:'_1al677r2-3-7-1 _1al677r0-3-7-1'};\nexport var tableEdgeShadow = {left:'_1al677r3-3-7-1 _1al677r1-3-7-1 _1al677r0-3-7-1',right:'_1al677r4-3-7-1 _1al677r2-3-7-1 _1al677r0-3-7-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe,EAAC,MAAK,mCAAkC,OAAM,kCAAiC;AAClG,IAAI,kBAAkB,EAAC,MAAK,mDAAkD,OAAM,kDAAiD;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableStatePlaceholder.js

@@ -7,9 +7,15 @@ import { dataTableMessages } from "../messages.js";
 const DataTableStatePlaceholder = (props) => {
   const table = useDataTable();
   const intl = useIntl();
-  const isLoading = table.getState().loading;
+  const isLoading = table.atoms.loading?.get();
   if (isLoading) {
-    return /* @__PURE__ */ jsx(LoadingState, { headerHeight: table.getTotalHeaderHeight() });
+    return /* @__PURE__ */ jsx(
+      LoadingState,
+      {
+        headerHeight: table.getTotalHeaderHeight(),
+        scrollOffset: props.scrollOffset
+      }
+    );
   }
   const { isColumnsEmpty, isDataEmpty, allColumnsHidden, emptyStateSlot } = props;
   if (isDataEmpty) {

package/esm/tables/DataTable/components/DataTableStatePlaceholder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableStatePlaceholder.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { useDataTable } from '../contexts/DataTableContext.js';\nimport { LoadingState } from '../features/LoadingState/LoadingState.js';\nimport { dataTableMessages } from '../messages.js';\n\n/**\n * Renders state indicators for the `DataTable`, showing either a loading state\n * or an empty state when there is no data to display.\n */\nexport const DataTableStatePlaceholder = (props: {\n  isColumnsEmpty: boolean;\n  isDataEmpty: boolean;\n  allColumnsHidden: boolean;\n  emptyStateSlot: ReturnType<typeof DataTableEmptyState>;\n}): JSX.Element | null => {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const isLoading = table.getState().loading;\n\n  if (isLoading) {\n    return <LoadingState headerHeight={table.getTotalHeaderHeight()} />;\n  }\n\n  const { isColumnsEmpty, isDataEmpty, allColumnsHidden, emptyStateSlot } =\n    props;\n\n  if (isDataEmpty) {\n    return emptyStateSlot ?? <DataTableEmptyState />;\n  }\n\n  if (isColumnsEmpty) {\n    return (\n      emptyStateSlot ?? (\n        <DataTableEmptyState>\n          {intl.formatMessage(dataTableMessages.noColumnsAvailable)}\n        </DataTableEmptyState>\n      )\n    );\n  }\n\n  if (allColumnsHidden) {\n    return (\n      <DataTableEmptyState>\n        {intl.formatMessage(dataTableMessages.noColumnsVisible)}\n      </DataTableEmptyState>\n    );\n  }\n\n  return null;\n};\n"],
-  "mappings": "AAwBW;AAvBX,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,4BAA4B,CAAC,UAKhB;AACxB,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,MAAM,SAAS,EAAE;AAEnC,MAAI,WAAW;AACb,WAAO,oBAAC,gBAAa,cAAc,MAAM,qBAAqB,GAAG;AAAA,EACnE;AAEA,QAAM,EAAE,gBAAgB,aAAa,kBAAkB,eAAe,IACpE;AAEF,MAAI,aAAa;AACf,WAAO,kBAAkB,oBAAC,uBAAoB;AAAA,EAChD;AAEA,MAAI,gBAAgB;AAClB,WACE,kBACE,oBAAC,uBACE,eAAK,cAAc,kBAAkB,kBAAkB,GAC1D;AAAA,EAGN;AAEA,MAAI,kBAAkB;AACpB,WACE,oBAAC,uBACE,eAAK,cAAc,kBAAkB,gBAAgB,GACxD;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { useDataTable } from '../contexts/DataTableContext.js';\nimport { LoadingState } from '../features/LoadingState/LoadingState.js';\nimport { dataTableMessages } from '../messages.js';\n\n/**\n * Renders state indicators for the `DataTable`, showing either a loading state\n * or an empty state when there is no data to display.\n */\nexport const DataTableStatePlaceholder = (props: {\n  isColumnsEmpty: boolean;\n  isDataEmpty: boolean;\n  allColumnsHidden: boolean;\n  emptyStateSlot: ReturnType<typeof DataTableEmptyState>;\n  scrollOffset: number;\n}): JSX.Element | null => {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const isLoading = table.atoms.loading?.get();\n\n  if (isLoading) {\n    return (\n      <LoadingState\n        headerHeight={table.getTotalHeaderHeight()}\n        scrollOffset={props.scrollOffset}\n      />\n    );\n  }\n\n  const { isColumnsEmpty, isDataEmpty, allColumnsHidden, emptyStateSlot } =\n    props;\n\n  if (isDataEmpty) {\n    return emptyStateSlot ?? <DataTableEmptyState />;\n  }\n\n  if (isColumnsEmpty) {\n    return (\n      emptyStateSlot ?? (\n        <DataTableEmptyState>\n          {intl.formatMessage(dataTableMessages.noColumnsAvailable)}\n        </DataTableEmptyState>\n      )\n    );\n  }\n\n  if (allColumnsHidden) {\n    return (\n      <DataTableEmptyState>\n        {intl.formatMessage(dataTableMessages.noColumnsVisible)}\n      </DataTableEmptyState>\n    );\n  }\n\n  return null;\n};\n"],
+  "mappings": "AA0BM;AAzBN,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,4BAA4B,CAAC,UAMhB;AACxB,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,MAAM,MAAM,SAAS,IAAI;AAE3C,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAc,MAAM,qBAAqB;AAAA,QACzC,cAAc,MAAM;AAAA;AAAA,IACtB;AAAA,EAEJ;AAEA,QAAM,EAAE,gBAAgB,aAAa,kBAAkB,eAAe,IACpE;AAEF,MAAI,aAAa;AACf,WAAO,kBAAkB,oBAAC,uBAAoB;AAAA,EAChD;AAEA,MAAI,gBAAgB;AAClB,WACE,kBACE,oBAAC,uBACE,eAAK,cAAc,kBAAkB,kBAAkB,GAC1D;AAAA,EAGN;AAEA,MAAI,kBAAkB;AACpB,WACE,oBAAC,uBACE,eAAK,cAAc,kBAAkB,gBAAgB,GACxD;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-6-0 {
+._ytdpsw0-3-7-1 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,76 +6,80 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-6-0 {
+._ytdpsw1-3-7-1 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-6-0 {
+._ytdpsw2-3-7-1 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-6-0 {
+._ytdpsw3-3-7-1 {
   overflow: hidden;
 }
-._ytdpsw4-3-6-0 {
+._ytdpsw4-3-7-1 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._ytdpsw4-3-6-0::-webkit-scrollbar-track {
+._ytdpsw4-3-7-1::-webkit-scrollbar-track {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-6-0::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-6-0::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-7-1::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-6-0 ._ytdpsw4-3-6-0 {
+._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-6-0 ._ytdpsw4-3-6-0::-webkit-scrollbar-track {
+._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-6-0 ._ytdpsw4-3-6-0::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-6-0 ._ytdpsw4-3-6-0::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._ytdpsw5-3-6-0::-webkit-scrollbar-track:horizontal {
+._ytdpsw5-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-6-0 ._ytdpsw5-3-6-0::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-7-1 ._ytdpsw5-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswf-3-6-0::-webkit-scrollbar-track:horizontal {
+._ytdpswh-3-7-1 {
+  display: flex;
+  flex-direction: inherit;
+}
+._ytdpswi-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswf-3-6-0::-webkit-scrollbar-track:vertical {
+._ytdpswi-3-7-1::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswf-3-6-0::-webkit-scrollbar-corner {
+._ytdpswi-3-7-1::-webkit-scrollbar-corner {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-6-0 ._ytdpswf-3-6-0::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-6-0 ._ytdpswf-3-6-0::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-6-0 ._ytdpswf-3-6-0::-webkit-scrollbar-corner {
+._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-corner {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }

package/esm/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -5,8 +5,11 @@ import { debounce } from "lodash-es";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
-  useRef
+  useRef,
+  useState,
+  useSyncExternalStore
 } from "react";
 import { DataTableContent } from "./DataTableContent.js";
 import { DataTableStatePlaceholder } from "./DataTableStatePlaceholder.js";
@@ -25,9 +28,28 @@ import { isWidthExtendedConfig } from "../features/Layout/width-utils.js";
 function DataTableVirtualizationContainer(props) {
   const { table, emptyState, fullHeight } = props;
   const parentRef = useRef(null);
-  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();
+  const isLoading = table.atoms.loading?.get() ?? false;
+  const [loadingScrollOffset, setLoadingScrollOffset] = useState(0);
+  useLayoutEffect(() => {
+    if (isLoading) {
+      setLoadingScrollOffset(parentRef.current?.scrollTop ?? 0);
+    }
+  }, [isLoading]);
   const rows = table.getRowModel().rows;
+  const draggingRowInfo = table.atoms.draggingRowInfo?.get();
   const visibleLeafColumns = table.getVisibleLeafColumns();
+  useSyncExternalStore(
+    useCallback(
+      (onChange) => {
+        const subscription = table.atoms.observedHeaderHeight?.subscribe(
+          () => onChange()
+        );
+        return () => subscription?.unsubscribe();
+      },
+      [table]
+    ),
+    () => table.atoms.observedHeaderHeight?.get() ?? 0
+  );
   const totalHeaderHeight = table.getTotalHeaderHeight();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
   const getUniqueRowKey = useCallback(
@@ -122,7 +144,7 @@ function DataTableVirtualizationContainer(props) {
         return previousWidth ?? 0;
       }
       const widthConfiguration = widthConfigsById[columnId];
-      if (table.getState().columnSizing[columnId] !== void 0 || table.getState().columnSizingInfo.isResizingColumn === columnId || !widthConfiguration) {
+      if (table.atoms.columnSizing?.get()[columnId] !== void 0 || table.atoms.columnResizing?.get().isResizingColumn === columnId || !widthConfiguration) {
         table.setMeasuredColumnWidth(columnId, measuredWidth);
         return measuredWidth;
       }
@@ -152,16 +174,16 @@ function DataTableVirtualizationContainer(props) {
     measureElement: columnMeasure
   });
   const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;
-  const { headers, contained, rowSeparation } = table.getVisualVariantOptions();
   const estimatedRowHeight = table.estimateRowHeight();
+  const visualVariantConfig = table.atoms.visualVariantConfig?.get();
   const containerStyle = useMemo(() => {
     let minHeight = void 0;
     if (totalHeaderHeight === 0) {
-      minHeight = headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + getDataTableBorderWidth();
+      minHeight = visualVariantConfig?.headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + getDataTableBorderWidth();
     } else {
       minHeight = totalHeaderHeight + estimatedRowHeight;
     }
-    if (contained) {
+    if (visualVariantConfig?.contained) {
       minHeight += 2 * getDataTableBorderWidth();
     }
     const baseStyle = {
@@ -171,7 +193,13 @@ function DataTableVirtualizationContainer(props) {
       baseStyle.height = "100%";
     }
     return baseStyle;
-  }, [totalHeaderHeight, contained, headers, estimatedRowHeight, fullHeight]);
+  }, [
+    totalHeaderHeight,
+    visualVariantConfig?.contained,
+    visualVariantConfig?.headers,
+    estimatedRowHeight,
+    fullHeight
+  ]);
   const scrollRect = rowVirtualizer.scrollRect;
   const scrollElement = rowVirtualizer.scrollElement;
   const scrollWidth = scrollElement?.scrollWidth;
@@ -197,7 +225,7 @@ function DataTableVirtualizationContainer(props) {
     }
     fontUpdateQueued.current = true;
     const controller = new AbortController();
-    Promise.race([
+    void Promise.race([
       // If the animations have not stopped after a timeout period,
       // we can remeasure nevertheless.
       new Promise(
@@ -222,20 +250,28 @@ function DataTableVirtualizationContainer(props) {
       fontUpdateQueued.current = false;
     });
   });
+  const getAllLeafColumns = table.getAllLeafColumns;
+  const getMeasuredColumnWidths = table.getMeasuredColumnWidths;
+  const resetMeasuredColumnWidths = table.resetMeasuredColumnWidths;
+  const tableColumns = table.options.columns;
   useEffect(() => {
-    const currentColumnIds = new Set(
-      table.getAllLeafColumns().map((col) => col.id)
-    );
+    const currentColumnIds = new Set(getAllLeafColumns().map((col) => col.id));
     const removedIds = [];
-    for (const id of table.getMeasuredColumnWidths().keys()) {
+    for (const id of getMeasuredColumnWidths().keys()) {
       if (!currentColumnIds.has(id)) {
         removedIds.push(id);
       }
     }
     if (removedIds.length > 0) {
-      table.resetMeasuredColumnWidths(removedIds);
+      resetMeasuredColumnWidths(removedIds);
     }
-  }, [table, table.options.columns]);
+  }, [
+    getAllLeafColumns,
+    getMeasuredColumnWidths,
+    resetMeasuredColumnWidths,
+    tableColumns
+  ]);
+  const draggedHeaderColumn = table.atoms.draggedHeaderColumn?.get();
   useEffect(() => {
     const parent = parentRef.current;
     const currentOffset = rowVirtualizer.scrollOffset;
@@ -274,12 +310,13 @@ function DataTableVirtualizationContainer(props) {
       className: clsx(
         "strato-table-virtualization-container",
         styles.virtualizationContainer({
-          contained,
-          rowSeparation,
-          headers,
-          loading,
+          contained: visualVariantConfig?.contained,
+          rowSeparation: visualVariantConfig?.rowSeparation,
+          headers: visualVariantConfig?.headers,
+          loading: table.atoms.loading?.get(),
           hasVisibleColumns,
-          scrollDirection
+          scrollDirection,
+          isDataEmpty: rows.length === 0
         })
       ),
       style: containerStyle,
@@ -297,7 +334,8 @@ function DataTableVirtualizationContainer(props) {
             isColumnsEmpty: columnVirtualizer.options.count === 0,
             isDataEmpty: rowVirtualizer.options.count === 0,
             allColumnsHidden: !hasVisibleColumns,
-            emptyStateSlot: emptyState
+            emptyStateSlot: emptyState,
+            scrollOffset: loadingScrollOffset
           }
         )
       ]