@dynatrace/strato-components 3.1.1 → 3.2.0

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-1-1 {
+._ytdpsw0-3-2-0 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,50 +6,50 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-1-1 {
+._ytdpsw1-3-2-0 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-1-1 {
+._ytdpsw2-3-2-0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-1-1 {
+._ytdpsw3-3-2-0 {
   overflow: hidden;
 }
-._ytdpsw4-3-1-1 {
+._ytdpsw4-3-2-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-1-1::-webkit-scrollbar-track {
+._ytdpsw4-3-2-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-1-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-2-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-1-1::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-2-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));
 }
-._ytdpsw5-3-1-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw5-3-2-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswf-3-1-1::-webkit-scrollbar-track:horizontal {
+._ytdpswf-3-2-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-1-1::-webkit-scrollbar-track:vertical {
+._ytdpswf-3-2-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-1-1::-webkit-scrollbar-corner {
+._ytdpswf-3-2-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));
 }

package/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -46,9 +46,8 @@ 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 tableState = table.getState();
+  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();
   const rows = table.getRowModel().rows;
-  const draggingRowInfo = tableState.draggingRowInfo;
   const visibleLeafColumns = table.getVisibleLeafColumns();
   const totalHeaderHeight = table.getTotalHeaderHeight();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
@@ -168,16 +167,16 @@ function DataTableVirtualizationContainer(props) {
     measureElement: columnMeasure
   });
   const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;
-  const visualVariantOptions = table.getVisualVariantOptions();
+  const { headers, contained, rowSeparation } = table.getVisualVariantOptions();
   const estimatedRowHeight = table.estimateRowHeight();
   const containerStyle = (0, import_react.useMemo)(() => {
     let minHeight = void 0;
     if (totalHeaderHeight === 0) {
-      minHeight = visualVariantOptions.headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + import_constants.DATA_TABLE_BORDER_WIDTH;
+      minHeight = headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + import_constants.DATA_TABLE_BORDER_WIDTH;
     } else {
       minHeight = totalHeaderHeight + estimatedRowHeight;
     }
-    if (visualVariantOptions.contained) {
+    if (contained) {
       minHeight += 2 * import_constants.DATA_TABLE_BORDER_WIDTH;
     }
     const baseStyle = {
@@ -187,13 +186,7 @@ function DataTableVirtualizationContainer(props) {
       baseStyle.height = "100%";
     }
     return baseStyle;
-  }, [
-    totalHeaderHeight,
-    visualVariantOptions.contained,
-    visualVariantOptions.headers,
-    estimatedRowHeight,
-    fullHeight
-  ]);
+  }, [totalHeaderHeight, contained, headers, estimatedRowHeight, fullHeight]);
   const scrollRect = rowVirtualizer.scrollRect;
   const scrollElement = rowVirtualizer.scrollElement;
   const scrollWidth = scrollElement?.scrollWidth;
@@ -245,9 +238,19 @@ function DataTableVirtualizationContainer(props) {
     });
   });
   (0, import_react.useEffect)(() => {
-    table.resetMeasuredColumnWidths();
+    const currentColumnIds = new Set(
+      table.getAllLeafColumns().map((col) => col.id)
+    );
+    const removedIds = [];
+    for (const id of table.getMeasuredColumnWidths().keys()) {
+      if (!currentColumnIds.has(id)) {
+        removedIds.push(id);
+      }
+    }
+    if (removedIds.length > 0) {
+      table.resetMeasuredColumnWidths(removedIds);
+    }
   }, [table, table.options.columns]);
-  const draggedHeaderColumn = tableState.draggedHeaderColumn;
   (0, import_react.useEffect)(() => {
     const parent = parentRef.current;
     const currentOffset = rowVirtualizer.scrollOffset;
@@ -286,10 +289,10 @@ function DataTableVirtualizationContainer(props) {
       className: (0, import_clsx.default)(
         "strato-table-virtualization-container",
         styles.virtualizationContainer({
-          contained: visualVariantOptions.contained,
-          rowSeparation: visualVariantOptions.rowSeparation,
-          headers: visualVariantOptions.headers,
-          loading: tableState.loading,
+          contained,
+          rowSeparation,
+          headers,
+          loading,
           hasVisibleColumns,
           scrollDirection
         })

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

@@ -23,4 +23,4 @@ __export(DataTableVirtualizationContainer_css_exports, {
 module.exports = __toCommonJS(DataTableVirtualizationContainer_css_exports);
 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-1-1", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-1-1", false: "_ytdpsw2-3-1-1" }, loading: { true: "_ytdpsw3-3-1-1" }, contained: { true: "_ytdpsw4-3-1-1", false: "_ytdpsw5-3-1-1" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-1-1", zebraStripes: "_ytdpsw7-3-1-1", none: "_ytdpsw8-3-1-1" }, headers: { hidden: "_ytdpsw9-3-1-1", "default": "_ytdpswa-3-1-1" }, scrollDirection: { false: "_ytdpswb-3-1-1", x: "_ytdpswc-3-1-1", y: "_ytdpswd-3-1-1", xy: "_ytdpswe-3-1-1" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-1-1"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-2-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-2-0", false: "_ytdpsw2-3-2-0" }, loading: { true: "_ytdpsw3-3-2-0" }, contained: { true: "_ytdpsw4-3-2-0", false: "_ytdpsw5-3-2-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-2-0", zebraStripes: "_ytdpsw7-3-2-0", none: "_ytdpsw8-3-2-0" }, headers: { hidden: "_ytdpsw9-3-2-0", "default": "_ytdpswa-3-2-0" }, scrollDirection: { false: "_ytdpswb-3-2-0", x: "_ytdpswc-3-2-0", y: "_ytdpswd-3-2-0", xy: "_ytdpswe-3-2-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-2-0"]] });

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.d.ts

@@ -28,4 +28,4 @@ export interface DataTableSettingsModalProps extends Omit<ModalProps, 'footer' |
  * Modal that allows to apply, reset or cancel changes on the given settings.
  * @internal
  */
-export declare const DataTableSettingsModal: (props: DataTableSettingsModalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableSettingsModal: (props: DataTableSettingsModalProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

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

@@ -26,4 +26,4 @@ export declare function _isDataTableSelectedRowsActions<TData extends DataTableR
  * @returns DataTableSelectedRowsActions containing children.
  * @public
  */
-export declare const DataTableSelectedRowsActions: <TData extends DataTableRowData>(props: DataTableSelectedRowsActionsProps<TData> & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableSelectedRowsActions: <TData extends DataTableRowData>(props: DataTableSelectedRowsActionsProps<TData> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

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

@@ -1,15 +1,15 @@
-._1rlvxpp0-3-1-1 {
+._1rlvxpp0-3-2-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-1-1 {
+._1rlvxpp1-3-2-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-1-1 {
+._1rlvxpp3-3-2-0 {
   margin-left: var(--dt-spacings-size-6, 6px);
 }
-._1rlvxpp4-3-1-1 {
+._1rlvxpp4-3-2-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,3 +1,4 @@
+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';
@@ -9,4 +10,4 @@ export type DataTableSelectionChipProps = WithChildren & StylingProps & DataTest
  *
  * @public
  */
-export declare const DataTableSelectionChip: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableSelectionChip: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

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

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

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

@@ -16,4 +16,4 @@ export declare function _isTableActions(child: ReactElement | null): child is Re
  * TableActions slot component for general actions that affect the entire table. Positoned above the header.
  * @public
  */
-export declare const DataTableTableActions: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableTableActions: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css

@@ -1,29 +1,29 @@
-._11d1m5j0-3-1-1 {
+._11d1m5j0-3-2-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._11d1m5j0-3-1-1:last-child {
+._11d1m5j0-3-2-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-1-1 {
+._11d1m5j1-3-2-0 {
   align-self: center;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
   transition: none;
 }
-._11d1m5j1-3-1-1:active {
+._11d1m5j1-3-2-0:active {
   background: transparent;
 }
-._11d1m5j1-3-1-1:hover {
+._11d1m5j1-3-2-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-1-1 ._11d1m5j1-3-1-1 {
+._11d1m5j0-3-2-0 ._11d1m5j1-3-2-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-1-1 {
+._11d1m5j2-3-2-0 {
   opacity: 0.2;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -24,6 +24,6 @@ __export(ColumnOrderSettingsDragAndDrop_css_exports, {
 });
 module.exports = __toCommonJS(ColumnOrderSettingsDragAndDrop_css_exports);
 var import_ColumnOrderSettingsDragAndDrop_css_ts_vanilla = require("./ColumnOrderSettingsDragAndDrop.css");
-var columnDndHandle = "_11d1m5j1-3-1-1";
-var columnDndOverlay = "_11d1m5j0-3-1-1";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-1-1";
+var columnDndHandle = "_11d1m5j1-3-2-0";
+var columnDndOverlay = "_11d1m5j0-3-2-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-2-0";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.d.ts

@@ -30,5 +30,5 @@ interface DataTableColumnSettingsModalProps {
 /**
  * @internal
  */
-export declare const DataTableColumnSettingsModal: (props: DataTableColumnSettingsModalProps & import("react").RefAttributes<DataTableColumnSettingsModalRef>) => React.ReactElement | null;
+export declare const DataTableColumnSettingsModal: (props: DataTableColumnSettingsModalProps & import("react").RefAttributes<DataTableColumnSettingsModalRef>) => import("react").ReactElement | null;
 export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css

@@ -1,19 +1,19 @@
-._14dz1ui0-3-1-1 {
+._14dz1ui0-3-2-0 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-1-1 {
+._14dz1ui1-3-2-0 {
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-1-1 {
+._14dz1ui2-3-2-0 {
   max-height: calc(96vh - 200px - 56px);
 }
-._14dz1ui3-3-1-1 {
+._14dz1ui3-3-2-0 {
   max-height: calc(96vh - 200px);
 }
-._14dz1ui4-3-1-1 {
+._14dz1ui4-3-2-0 {
   width: 100%;
   position: relative;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js

@@ -25,6 +25,6 @@ __export(DataTableColumnsList_css_exports, {
 module.exports = __toCommonJS(DataTableColumnsList_css_exports);
 var import_DataTableColumnsList_css_ts_vanilla = require("./DataTableColumnsList.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var noItemsFound = "_14dz1ui0-3-1-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-1-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-1-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-1-1", false: "_14dz1ui3-3-1-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-2-0";
+var virtualizationInnerContainer = "_14dz1ui4-3-2-0";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-2-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-2-0", false: "_14dz1ui3-3-2-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css

@@ -1,4 +1,4 @@
-._13ypmcy0-3-1-1 {
+._13ypmcy0-3-2-0 {
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
@@ -7,21 +7,21 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-1-1[data-parentcolumnid] {
+._13ypmcy0-3-2-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._13ypmcy0-3-1-1:last-child, ._13ypmcy0-3-1-1:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
+._13ypmcy0-3-2-0:last-child, ._13ypmcy0-3-2-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
   border-bottom: none;
 }
-._13ypmcy0-3-1-1[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
+._13ypmcy0-3-2-0[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-1-1[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-1-1, [data-pinned-position="left"] + ._13ypmcy0-3-1-1) {
+._13ypmcy0-3-2-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-2-0, [data-pinned-position="left"] + ._13ypmcy0-3-2-0) {
   border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy1-3-1-1 {
+._13ypmcy1-3-2-0 {
   visibility: hidden;
 }
-._13ypmcy2-3-1-1 {
+._13ypmcy2-3-2-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -24,6 +24,6 @@ __export(DataTableColumnsListItem_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy2-3-1-1";
-var columnsListItem = "_13ypmcy0-3-1-1";
-var dragging = "_13ypmcy1-3-1-1";
+var columnName = "_13ypmcy2-3-2-0";
+var columnsListItem = "_13ypmcy0-3-2-0";
+var dragging = "_13ypmcy1-3-2-0";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css

@@ -1,18 +1,18 @@
-._1rh6hs00-3-1-1 {
+._1rh6hs00-3-2-0 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-1-1 {
+._1rh6hs01-3-2-0 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-1-1._1rh6hs01-3-1-1 {
+._1rh6hs01-3-2-0._1rh6hs01-3-2-0 {
   min-width: unset;
 }
-._1rh6hs02-3-1-1 {
+._1rh6hs02-3-2-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-1-1 div:has(> ._1rh6hs02-3-1-1) {
+._dmotjm0-3-2-0 div:has(> ._1rh6hs02-3-2-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js

@@ -25,6 +25,6 @@ __export(DataTableVisibilityFilterControls_css_exports, {
 module.exports = __toCommonJS(DataTableVisibilityFilterControls_css_exports);
 var import_Modal_css_ts_vanilla = require("../../../../../overlays/modal/Modal.css");
 var import_DataTableVisibilityFilterControls_css_ts_vanilla = require("./DataTableVisibilityFilterControls.css");
-var filterControls = "_1rh6hs02-3-1-1";
-var searchInput = "_1rh6hs01-3-1-1";
-var showHideAll = "_1rh6hs00-3-1-1";
+var filterControls = "_1rh6hs02-3-2-0";
+var searchInput = "_1rh6hs01-3-2-0";
+var showHideAll = "_1rh6hs00-3-2-0";

package/tables/DataTable/components/Toolbar/DataTableToolbar.d.ts

@@ -72,4 +72,4 @@ export declare function getToolbarConfig(children: ReactNode): {
  * Toolbar slot component for general actions that affect the entire table. Positioned above the header.
  * @public
  */
-export declare const DataTableToolbar: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableToolbar: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/tables/DataTable/features/ColumnOrder/ColumnOrder.css

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-1-1 {
+._1ku1w3z0-3-2-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-1-1::after {
+._1ku1w3z1-3-2-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-1-1::after {
+._1ku1w3z2-3-2-0::after {
   left: 0;
 }
-._1ku1w3z3-3-1-1::after {
+._1ku1w3z3-3-2-0::after {
   right: 0;
 }
-._1ku1w3z4-3-1-1::before {
+._1ku1w3z4-3-2-0::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-1-1 {
+._1ku1w3z5-3-2-0 {
   display: none;
 }
-._1ku1w3z6-3-1-1 {
+._1ku1w3z6-3-2-0 {
   cursor: grab;
 }
-._1ku1w3z7-3-1-1 {
+._1ku1w3z7-3-2-0 {
   pointer-events: none;
 }

package/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js

@@ -26,7 +26,7 @@ __export(ColumnOrder_css_exports, {
 module.exports = __toCommonJS(ColumnOrder_css_exports);
 var import_ColumnOrder_css_ts_vanilla = require("./ColumnOrder.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var columnDndOverlay = "_1ku1w3z0-3-1-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-1-1", enabled: "_1ku1w3z6-3-1-1", inactive: "_1ku1w3z7-3-1-1" };
-var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-1-1", variantClassNames: { left: { true: "_1ku1w3z2-3-1-1", false: "_1ku1w3z3-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-1-1";
+var columnDndOverlay = "_1ku1w3z0-3-2-0";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-2-0", enabled: "_1ku1w3z6-3-2-0", inactive: "_1ku1w3z7-3-2-0" };
+var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-2-0", variantClassNames: { left: { true: "_1ku1w3z2-3-2-0", false: "_1ku1w3z3-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-2-0";

package/tables/DataTable/features/ColumnSizing/ColumnSizing.css

@@ -1,9 +1,9 @@
-._17437gx0-3-1-1 {
+._17437gx0-3-2-0 {
   cursor: col-resize;
 }
-._17437gx0-3-1-1 > * {
+._17437gx0-3-2-0 > * {
   pointer-events: none;
 }
-._17437gx0-3-1-1 ._14sp6az0-3-1-1 * {
+._17437gx0-3-2-0 ._14sp6az0-3-2-0 * {
   pointer-events: none !important;
 }

package/tables/DataTable/features/ColumnSizing/ColumnSizing.sty.js

@@ -23,4 +23,4 @@ __export(ColumnSizing_css_exports, {
 module.exports = __toCommonJS(ColumnSizing_css_exports);
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
 var import_ColumnSizing_css_ts_vanilla = require("./ColumnSizing.css");
-var tableColumnResizing = "_17437gx0-3-1-1";
+var tableColumnResizing = "_17437gx0-3-2-0";

package/tables/DataTable/features/ColumnTypes/ColumnTypes.css

@@ -1,4 +1,4 @@
-._19nyr521-3-1-1 {
+._19nyr521-3-2-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }

package/tables/DataTable/features/ColumnTypes/ColumnTypes.sty.js

@@ -23,4 +23,4 @@ __export(ColumnTypes_css_exports, {
 module.exports = __toCommonJS(ColumnTypes_css_exports);
 var import_ColumnTypes_css_ts_vanilla = require("./ColumnTypes.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-1-1", variantClassNames: { linewrap: { false: "_19nyr521-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-2-0", variantClassNames: { linewrap: { false: "_19nyr521-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.css

@@ -1,11 +1,11 @@
-._5jn5tp0-3-1-1 {
+._5jn5tp0-3-2-0 {
   height: 100%;
   width: 100%;
 }
-._5jn5tp1-3-1-1 {
+._5jn5tp1-3-2-0 {
   padding-right: 0;
   pointer-events: auto;
 }
-._5jn5tp1-3-1-1:not(:has(._1udh2jz2-3-1-1)) {
+._5jn5tp1-3-2-0:not(:has(._1udh2jz2-3-2-0)) {
   padding-left: 0;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.sty.js

@@ -37,5 +37,5 @@ var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTa
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_SubRows_css_ts_vanilla = require("../SubRows/SubRows.css");
 var import_DataTableGanttChartCell_css_ts_vanilla = require("./DataTableGanttChartCell.css");
-var ganttChartCell = "_5jn5tp0-3-1-1";
-var ganttChartDefaultCell = "_5jn5tp1-3-1-1";
+var ganttChartCell = "_5jn5tp0-3-2-0";
+var ganttChartDefaultCell = "_5jn5tp1-3-2-0";

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.css

@@ -1,4 +1,4 @@
-._evozey0-3-1-1 {
+._evozey0-3-2-0 {
   position: absolute;
   inset: 0;
   margin-left: auto;

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.sty.js

@@ -22,4 +22,4 @@ __export(DataTableGanttChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(DataTableGanttChartGrid_css_exports);
 var import_DataTableGanttChartGrid_css_ts_vanilla = require("./DataTableGanttChartGrid.css");
-var ganttChartGrid = "_evozey0-3-1-1";
+var ganttChartGrid = "_evozey0-3-2-0";

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.css

@@ -1,14 +1,14 @@
-._10y95u40-3-1-1 {
+._10y95u40-3-2-0 {
   padding-right: 0;
   align-items: center;
 }
-._11pvd3zj-3-1-1:not(._11pvd3z8-3-1-1) ._10y95u40-3-1-1 {
+._11pvd3zj-3-2-0:not(._11pvd3z8-3-2-0) ._10y95u40-3-2-0 {
   width: 100%;
   padding-left: 0;
 }
-._11pvd3z8-3-1-1 ._10y95u40-3-1-1 {
+._11pvd3z8-3-2-0 ._10y95u40-3-2-0 {
   width: 100%;
 }
-._10y95u40-3-1-1 span {
+._10y95u40-3-2-0 span {
   margin-top: 0 !important;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.sty.js

@@ -27,4 +27,4 @@ var import_ColumnOrder_css_ts_vanilla = require("../ColumnOrder/ColumnOrder.css"
 var import_Thresholds_css_ts_vanilla = require("../Thresholds/Thresholds.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTableHeaderCell.css");
 var import_DataTableGanttChartHeader_css_ts_vanilla = require("./DataTableGanttChartHeader.css");
-var ganttChartHeader = "_10y95u40-3-1-1";
+var ganttChartHeader = "_10y95u40-3-2-0";

package/tables/DataTable/features/Layout/Layout.js

@@ -204,24 +204,24 @@ const Layout = {
     };
     table.getGridTemplateRows = (0, import_src.memo)(
       () => {
-        const { measurementsCache, range } = table.getRowVirtualizer() ?? {};
+        const { getVirtualItems, range } = table.getRowVirtualizer() ?? {};
         return [
-          measurementsCache,
+          getVirtualItems?.(),
           range?.startIndex,
           range?.endIndex,
           table.getVisibleHeaderGroupsCount(),
           table.options.data.length
         ];
       },
-      (measurementsCache) => {
-        const virtualItems = table.getRowVirtualizer()?.getVirtualItems();
+      (virtualItems) => {
+        const measurementsCache = table.getRowVirtualizer()?.measurementsCache;
         const headerRows = table.getHeaderGridTemplateRows();
         if (!measurementsCache || !virtualItems?.length) {
           return headerRows;
         }
-        const bodyRows = virtualItems.map(({ index }) => {
-          const size = measurementsCache.at(index)?.size ?? table.estimateRowHeight({ index });
-          return `minmax(min-content, ${size}px)`;
+        const bodyRows = virtualItems.map((virtualItem) => {
+          const rowHeight = virtualItem.size ?? table.estimateRowHeight({ index: virtualItem.index });
+          return `minmax(min-content, ${rowHeight}px)`;
         }).join(" ");
         const firstVirtualItem = virtualItems[0];
         let spacerRowHeight = 0;

package/tables/DataTable/features/LineWrap/LineWrap.js

@@ -110,11 +110,12 @@ function DataTableGlobalLineWrapToolbarAction() {
   const lineWrapState = table.getState().columnLineWrap;
   const Icon = lineWrapState === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.WrapTextOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.WrapTextIcon, {});
   const lineWrapLabel = lineWrapState === true ? intl.formatMessage(import_messages.dataTableMessages.disableLineWrapLabel) : intl.formatMessage(import_messages.dataTableMessages.enableLineWrapLabel);
+  const lineWrapDtName = lineWrapState === true ? "ToolbarDisableLineWrap" : "ToolbarEnableLineWrap";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: lineWrapLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Button.Button,
     {
       "aria-label": lineWrapLabel,
-      "data-dt-name": "ToolbarLineWrap",
+      "data-dt-name": lineWrapDtName,
       onClick: () => table.setColumnLineWrap((oldLineWrap) => {
         if (oldLineWrap === true) {
           return {};