@dynatrace/strato-components 3.6.0 → 3.7.0

package/tables/DataTable/components/DataTableRow.js

@@ -41,12 +41,11 @@ var import_DataTablePinningShadowCells = require("./ColumnPinning/DataTablePinni
 var import_DataTableCell = require("./DataTableCell.js");
 var styles = __toESM(require("./DataTableRow.sty.js"));
 var import_RowDetails_css = require("../features/RowDetails/RowDetails.sty.js");
-var import_RowInteractivity = require("../features/RowInteractivity/RowInteractivity.js");
-var import_SubRowCellContext = require("../features/SubRows/SubRowCellContext.js");
+var import_useRowInteractivityProps = require("../features/RowInteractivity/hooks/useRowInteractivityProps.js");
+var import_SubRowCellContext = require("../features/SubRows/components/SubRowCellContext.js");
 const ROW_LONG_PRESS_TIMEOUT_DURATION = 500;
 function DataTableRow(props) {
   const {
-    row,
     virtualRow,
     rowCount,
     virtualColumns,
@@ -62,19 +61,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 } = (0, import_RowInteractivity.useRowInteractivityProps)(row, scrollToIndex);
-  const rowLink = row.getLinkForRow();
+  const { rowInteractivityClassName, rowInteractivityProps } = (0, import_useRowInteractivityProps.useRowInteractivityProps)(props.row, scrollToIndex);
+  const rowLink = props.row.getLinkForRow();
   const rowLinkRef = (0, import_react.useRef)(null);
   const { setNodeRef } = (0, import_sortable.useSortable)({
-    id: row.id,
+    id: props.row.id,
     data: {
-      row,
+      row: props.row,
       rowIndex: virtualRowIndex,
       virtualRow
     }
@@ -95,8 +94,8 @@ function DataTableRow(props) {
     if (isLongPress.current || !(target instanceof HTMLElement) && !(target instanceof SVGElement)) {
       return;
     }
-    const row2 = target.closest('[role="row"]');
-    if (row2 === null || (0, import_is_target_interactive.isTargetInteractive)(row2, target)) {
+    const row = target.closest('[role="row"]');
+    if (row === null || (0, import_is_target_interactive.isTargetInteractive)(row, target)) {
       return;
     }
     const nativeEvent = event.nativeEvent;
@@ -116,8 +115,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 = {
@@ -131,18 +130,18 @@ function DataTableRow(props) {
       {
         role: "row",
         ref: rowMeasure,
-        "data-rowid": row.id,
+        "data-rowid": props.row.id,
         "data-row": virtualRowIndex,
         className: (0, import_clsx.default)(
           styles.row({
-            rowSeparation: table.getVisualVariantOptions().rowSeparation,
+            rowSeparation: table.atoms.visualVariantConfig?.get().rowSeparation,
             rowParity,
             isDraggedRow
           }),
           {
             [tableStyles.firstBodyRow]: virtualRowIndex === 0,
             [tableStyles.lastBodyRow]: virtualRowIndex === rowCount - 1,
-            [`${import_RowDetails_css.rowDetailsExpandedRowCell}`]: row.getIsDetailsOpen(),
+            [`${import_RowDetails_css.rowDetailsExpandedRowCell}`]: props.row.getIsDetailsOpen(),
             [rowInteractivityClassName]: !isInDragOverlay
           }
         ),
@@ -165,11 +164,11 @@ function DataTableRow(props) {
           ...linkHandlingEvents
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableRowContextProvider, { value: row, children: virtualColumns.map((virtualCell) => {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.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__ */ (0, import_jsx_runtime.jsx)(
               import_SubRowCellContext.SubRowCellContextProvider,
               {
@@ -187,7 +186,7 @@ function DataTableRow(props) {
                     dragAndDropRef: setNodeRef,
                     subRowDepth,
                     thresholdPill,
-                    rowData: row.original,
+                    rowData: props.row.original,
                     cellDeps: column.columnDef?.meta?.cellDeps?.(cell).toString()
                   }
                 )
@@ -222,7 +221,7 @@ function DataTableRow(props) {
           index: firstRightPinnedVirtualColumnIndex
         },
         gridRowPosition,
-        rowId: row.id
+        rowId: props.row.id
       }
     )
   ] });

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

@@ -28,4 +28,4 @@ var import_RowDetails_css_ts_vanilla = require("../features/RowDetails/RowDetail
 var import_RowInteractivity_css_ts_vanilla = require("../features/RowInteractivity/RowInteractivity.css");
 var import_DataTableRow_css_ts_vanilla = require("./DataTableRow.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var row = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1y5fzv0-3-7-0", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-7-0", horizontalDividers: "_1y5fzv2-3-7-0", zebraStripes: "_1y5fzv3-3-7-0" }, rowParity: { even: "_1y5fzv4-3-7-0", odd: "_1y5fzv5-3-7-0" }, isDraggedRow: { true: "_1y5fzv6-3-7-0", false: "_1y5fzv7-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-7-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-7-0"]] });

package/tables/DataTable/components/DataTableScrollShadow.css

@@ -1,8 +1,8 @@
-._1al677r0-3-6-0 {
+._1al677r0-3-7-0 {
   position: sticky;
   pointer-events: none;
 }
-._1al677r0-3-6-0::after {
+._1al677r0-3-7-0::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-0::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-0::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-0::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-0::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-0 {
   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-0::after {
   left: 0;
 }
-._1al677r4-3-6-0 {
+._1al677r4-3-7-0 {
   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-0::after {
   right: 0;
 }

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

@@ -22,5 +22,5 @@ __export(DataTableScrollShadow_css_exports, {
 });
 module.exports = __toCommonJS(DataTableScrollShadow_css_exports);
 var import_DataTableScrollShadow_css_ts_vanilla = require("./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-0 _1al677r0-3-7-0", right: "_1al677r2-3-7-0 _1al677r0-3-7-0" };
+var tableEdgeShadow = { left: "_1al677r3-3-7-0 _1al677r1-3-7-0 _1al677r0-3-7-0", right: "_1al677r4-3-7-0 _1al677r2-3-7-0 _1al677r0-3-7-0" };

package/tables/DataTable/components/DataTableStatePlaceholder.d.ts

@@ -9,4 +9,5 @@ export declare const DataTableStatePlaceholder: (props: {
     isDataEmpty: boolean;
     allColumnsHidden: boolean;
     emptyStateSlot: ReturnType<typeof DataTableEmptyState>;
+    scrollOffset: number;
 }) => JSX.Element | null;

package/tables/DataTable/components/DataTableStatePlaceholder.js

@@ -29,9 +29,15 @@ var import_messages = require("../messages.js");
 const DataTableStatePlaceholder = (props) => {
   const table = (0, import_DataTableContext.useDataTable)();
   const intl = (0, import_react_intl.useIntl)();
-  const isLoading = table.getState().loading;
+  const isLoading = table.atoms.loading?.get();
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingState.LoadingState, { headerHeight: table.getTotalHeaderHeight() });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_LoadingState.LoadingState,
+      {
+        headerHeight: table.getTotalHeaderHeight(),
+        scrollOffset: props.scrollOffset
+      }
+    );
   }
   const { isColumnsEmpty, isDataEmpty, allColumnsHidden, emptyStateSlot } = props;
   if (isDataEmpty) {

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-6-0 {
+._ytdpsw0-3-7-0 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,76 +6,80 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-6-0 {
+._ytdpsw1-3-7-0 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-6-0 {
+._ytdpsw2-3-7-0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-6-0 {
+._ytdpsw3-3-7-0 {
   overflow: hidden;
 }
-._ytdpsw4-3-6-0 {
+._ytdpsw4-3-7-0 {
   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-0::-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-0::-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-0::-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-0 ._ytdpsw4-3-7-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-6-0 ._ytdpsw4-3-6-0::-webkit-scrollbar-track {
+._1jgl8s50-3-7-0 ._ytdpsw4-3-7-0::-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-0 ._ytdpsw4-3-7-0::-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-0 ._ytdpsw4-3-7-0::-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-0::-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-0 ._ytdpsw5-3-7-0::-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-0 {
+  display: flex;
+  flex-direction: inherit;
+}
+._ytdpswi-3-7-0::-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-0::-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-0::-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-0 ._ytdpswi-3-7-0::-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-0 ._ytdpswi-3-7-0::-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-0 ._ytdpswi-3-7-0::-webkit-scrollbar-corner {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }

package/tables/DataTable/components/DataTableVirtualizationContainer.d.ts

@@ -1,8 +1,9 @@
+import type { ReactTable, RowData } from '@tanstack/react-table';
 import { type JSX } from 'react';
 import { DataTableEmptyState } from './DataTableEmptyState.js';
-import { type Table } from '../hooks/useTable/types.js';
-export declare function DataTableVirtualizationContainer<T>(props: Readonly<{
-    table: Table<T>;
+import type { TDataTableFeatures } from '../features/types/features.types.js';
+export declare function DataTableVirtualizationContainer(props: Readonly<{
+    table: ReactTable<TDataTableFeatures, RowData>;
     emptyState: ReturnType<typeof DataTableEmptyState>;
     fullHeight: boolean;
 }>): JSX.Element;

package/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -47,8 +47,15 @@ var import_width_utils = require("../features/Layout/width-utils.js");
 function DataTableVirtualizationContainer(props) {
   const { table, emptyState, fullHeight } = props;
   const parentRef = (0, import_react.useRef)(null);
-  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();
+  const isLoading = table.atoms.loading?.get() ?? false;
+  const [loadingScrollOffset, setLoadingScrollOffset] = (0, import_react.useState)(0);
+  (0, import_react.useLayoutEffect)(() => {
+    if (isLoading) {
+      setLoadingScrollOffset(parentRef.current?.scrollTop ?? 0);
+    }
+  }, [isLoading]);
   const rows = table.getRowModel().rows;
+  const draggingRowInfo = table.atoms.draggingRowInfo?.get();
   const visibleLeafColumns = table.getVisibleLeafColumns();
   const totalHeaderHeight = table.getTotalHeaderHeight();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
@@ -144,7 +151,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;
       }
@@ -174,16 +181,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 = (0, import_react.useMemo)(() => {
     let minHeight = void 0;
     if (totalHeaderHeight === 0) {
-      minHeight = headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + (0, import_data_table_border_width.getDataTableBorderWidth)();
+      minHeight = visualVariantConfig?.headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + (0, import_data_table_border_width.getDataTableBorderWidth)();
     } else {
       minHeight = totalHeaderHeight + estimatedRowHeight;
     }
-    if (contained) {
+    if (visualVariantConfig?.contained) {
       minHeight += 2 * (0, import_data_table_border_width.getDataTableBorderWidth)();
     }
     const baseStyle = {
@@ -193,7 +200,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;
@@ -219,7 +232,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(
@@ -244,20 +257,28 @@ function DataTableVirtualizationContainer(props) {
       fontUpdateQueued.current = false;
     });
   });
+  const getAllLeafColumns = table.getAllLeafColumns;
+  const getMeasuredColumnWidths = table.getMeasuredColumnWidths;
+  const resetMeasuredColumnWidths = table.resetMeasuredColumnWidths;
+  const tableColumns = table.options.columns;
   (0, import_react.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();
   (0, import_react.useEffect)(() => {
     const parent = parentRef.current;
     const currentOffset = rowVirtualizer.scrollOffset;
@@ -296,12 +317,13 @@ function DataTableVirtualizationContainer(props) {
       className: (0, import_clsx.default)(
         "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,
@@ -319,7 +341,8 @@ function DataTableVirtualizationContainer(props) {
             isColumnsEmpty: columnVirtualizer.options.count === 0,
             isDataEmpty: rowVirtualizer.options.count === 0,
             allColumnsHidden: !hasVisibleColumns,
-            emptyStateSlot: emptyState
+            emptyStateSlot: emptyState,
+            scrollOffset: loadingScrollOffset
           }
         )
       ]

package/tables/DataTable/components/DataTableVirtualizationContainer.sty.d.ts

@@ -105,4 +105,8 @@ export declare const virtualizationContainer: import("@vanilla-extract/recipes")
         y: {};
         xy: {};
     };
+    isDataEmpty: {
+        true: {};
+        false: {};
+    };
 }>;

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

@@ -23,4 +23,4 @@ module.exports = __toCommonJS(DataTableVirtualizationContainer_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("./DataTableVirtualizationContainer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-6-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-6-0", false: "_ytdpsw2-3-6-0" }, loading: { true: "_ytdpsw3-3-6-0" }, contained: { true: "_ytdpsw4-3-6-0", false: "_ytdpsw5-3-6-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-6-0", zebraStripes: "_ytdpsw7-3-6-0", none: "_ytdpsw8-3-6-0" }, headers: { hidden: "_ytdpsw9-3-6-0", "default": "_ytdpswa-3-6-0" }, scrollDirection: { false: "_ytdpswb-3-6-0", x: "_ytdpswc-3-6-0", y: "_ytdpswd-3-6-0", xy: "_ytdpswe-3-6-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-6-0"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-7-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-7-0", false: "_ytdpsw2-3-7-0" }, loading: { true: "_ytdpsw3-3-7-0" }, contained: { true: "_ytdpsw4-3-7-0", false: "_ytdpsw5-3-7-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-7-0", zebraStripes: "_ytdpsw7-3-7-0", none: "_ytdpsw8-3-7-0" }, headers: { hidden: "_ytdpsw9-3-7-0", "default": "_ytdpswa-3-7-0" }, scrollDirection: { false: "_ytdpswb-3-7-0", x: "_ytdpswc-3-7-0", y: "_ytdpswd-3-7-0", xy: "_ytdpswe-3-7-0" }, isDataEmpty: { true: "_ytdpswf-3-7-0", false: "_ytdpswg-3-7-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-7-0"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-7-0"]] });

package/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';

package/tables/DataTable/components/TableActions/DataTableSelectionChip.css

@@ -1,17 +1,17 @@
-._1rlvxpp0-3-6-0 {
+._1rlvxpp0-3-7-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-6-0 {
+._1rlvxpp1-3-7-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp2-3-6-0 {
+._1rlvxpp2-3-7-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
 }
-._1rlvxpp3-3-6-0 {
+._1rlvxpp3-3-7-0 {
   padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-6-0 {
+._1rlvxpp4-3-7-0 {
   height: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-12, 12px);
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-4, 4px);

package/tables/DataTable/components/TableActions/DataTableSelectionChip.d.ts

@@ -1,13 +1,14 @@
-import { type ReactElement } from 'react';
 import { DataTestId } from '../../../../core/types/data-props.js';
 import { StylingProps } from '../../../../core/types/styling-props.js';
 import { WithChildren } from '../../../../core/types/with-children.js';
 /**
+ * Props for the `DataTableSelectionChip` component.
  * @public
  */
 export type DataTableSelectionChipProps = WithChildren & StylingProps & DataTestId;
 /**
- *
+ * A component that displays the number of selected rows in a chip.
+ * It can be used in the `DataTable.SelectedRowsActions` component to show how many rows are currently selected.
  * @public
  */
 export declare const DataTableSelectionChip: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/tables/DataTable/components/TableActions/DataTableSelectionChip.js

@@ -41,39 +41,41 @@ var import_Text = require("../../../../typography/text/Text.js");
 var import_data_table_border_width = require("../../../utils/data-table-border-width.js");
 var import_DataTableContext = require("../../contexts/DataTableContext.js");
 var import_messages = require("../../messages.js");
+function DataTableSelectionChipInternal(props, forwardedRef) {
+  const {
+    children,
+    "data-testid": dataTestId,
+    className: consumerClassName,
+    style: consumerStyle,
+    ...remainingProps
+  } = props;
+  const table = (0, import_DataTableContext.useDataTable)();
+  const rowsCount = table.getSelectionCount();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_Flex.Flex,
+    {
+      ref: forwardedRef,
+      className: styles.selectionChipWrapper[table.atoms.visualVariantConfig?.get()?.rowDensity],
+      style: {
+        marginLeft: table.atoms.visualVariantConfig?.get()?.contained ? (0, import_data_table_border_width.getDataTableBorderWidth)() : 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Flex.Flex,
+          {
+            "data-testid": dataTestId,
+            className: (0, import_clsx.default)([styles.selectionChip, consumerClassName]),
+            style: consumerStyle,
+            ...remainingProps,
+            children: rowsCount
+          }
+        ),
+        !(0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { as: "p", textStyle: "base", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.selectedTotalRows }) })
+      ]
+    }
+  );
+}
 const DataTableSelectionChip = (0, import_react.forwardRef)(
-  (props, forwardedRef) => {
-    const {
-      children,
-      "data-testid": dataTestId,
-      className: consumerClassName,
-      style: consumerStyle,
-      ...remainingProps
-    } = props;
-    const table = (0, import_DataTableContext.useDataTable)();
-    const rowsCount = table.getSelectionCount();
-    const { rowDensity, contained } = table.getVisualVariantOptions();
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_Flex.Flex,
-      {
-        ref: forwardedRef,
-        className: styles.selectionChipWrapper[rowDensity],
-        style: { marginLeft: contained ? (0, import_data_table_border_width.getDataTableBorderWidth)() : 0 },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Flex.Flex,
-            {
-              "data-testid": dataTestId,
-              className: (0, import_clsx.default)([styles.selectionChip, consumerClassName]),
-              style: consumerStyle,
-              ...remainingProps,
-              children: rowsCount
-            }
-          ),
-          !(0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { as: "p", textStyle: "base", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.selectedTotalRows }) })
-        ]
-      }
-    );
-  }
+  DataTableSelectionChipInternal
 );
 DataTableSelectionChip.displayName = "DataTable.SelectionChip";

package/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -22,5 +22,5 @@ __export(DataTableSelectionChip_css_exports, {
 });
 module.exports = __toCommonJS(DataTableSelectionChip_css_exports);
 var import_DataTableSelectionChip_css_ts_vanilla = require("./DataTableSelectionChip.css");
-var selectionChip = "_1rlvxpp4-3-6-0";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-6-0 _1rlvxpp0-3-6-0", "default": "_1rlvxpp2-3-6-0 _1rlvxpp0-3-6-0", comfortable: "_1rlvxpp3-3-6-0 _1rlvxpp0-3-6-0" };
+var selectionChip = "_1rlvxpp4-3-7-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-7-0 _1rlvxpp0-3-7-0", "default": "_1rlvxpp2-3-7-0 _1rlvxpp0-3-7-0", comfortable: "_1rlvxpp3-3-7-0 _1rlvxpp0-3-7-0" };