@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -1,34 +1,34 @@
-._1y5fzv0-3-2-0 {
+._1y5fzv0-3-3-0 {
   display: grid;
   grid-template-columns: subgrid;
   position: relative;
   grid-template-rows: inherit;
 }
-._or8s40-3-2-0:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-2-0 {
+._or8s40-3-3-0:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-3-0 {
   border-bottom-width: 0;
 }
-._1y5fzv2-3-2-0 {
+._1y5fzv2-3-3-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-2-0 ._14sp6az6-3-2-0._1y5fzv2-3-2-0,
-          ._ytdpswc-3-2-0 ._14sp6az6-3-2-0._1y5fzv2-3-2-0,
-          ._ytdpswe-3-2-0 ._14sp6az6-3-2-0._1y5fzv2-3-2-0,
-          ._2twyod0-3-2-0._1y5fzv2-3-2-0 {
+._ytdpsw0-3-3-0 ._14sp6az6-3-3-0._1y5fzv2-3-3-0,
+          ._ytdpswc-3-3-0 ._14sp6az6-3-3-0._1y5fzv2-3-3-0,
+          ._ytdpswe-3-3-0 ._14sp6az6-3-3-0._1y5fzv2-3-3-0,
+          ._2twyod0-3-3-0._1y5fzv2-3-3-0 {
   border-bottom-width: 0;
 }
-._1y5fzv3-3-2-0 {
+._1y5fzv3-3-3-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-2-0 ._14sp6az6-3-2-0._1y5fzv3-3-2-0,
-          ._2twyod0-3-2-0._1y5fzv3-3-2-0 {
+._ytdpsw0-3-3-0 ._14sp6az6-3-3-0._1y5fzv3-3-3-0,
+          ._2twyod0-3-3-0._1y5fzv3-3-3-0 {
   border-bottom-width: 0;
 }
-._1y5fzv6-3-2-0 {
+._1y5fzv6-3-3-0 {
   visibility: hidden;
 }
-._1y5fzv8-3-2-0:not(._15silbj3-3-2-0, ._15silbj4-3-2-0, ._15silbj0-3-2-0:hover) {
+._1y5fzv8-3-3-0:not(._15silbj3-3-3-0, ._15silbj4-3-3-0, ._15silbj0-3-3-0:hover) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1y5fzv9-3-2-0:not(._15silbj3-3-2-0, ._15silbj4-3-2-0, ._15silbj0-3-2-0:hover) {
+._1y5fzv9-3-3-0:not(._15silbj3-3-3-0, ._15silbj4-3-3-0, ._15silbj0-3-3-0:hover) {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

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

@@ -5,7 +5,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-2-0", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-2-0", horizontalDividers: "_1y5fzv2-3-2-0", zebraStripes: "_1y5fzv3-3-2-0" }, rowParity: { even: "_1y5fzv4-3-2-0", odd: "_1y5fzv5-3-2-0" }, isDraggedRow: { true: "_1y5fzv6-3-2-0", false: "_1y5fzv7-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-2-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-2-0"]] });
+var row = _7a468({ defaultClassName: "_1y5fzv0-3-3-0", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-3-0", horizontalDividers: "_1y5fzv2-3-3-0", zebraStripes: "_1y5fzv3-3-3-0" }, rowParity: { even: "_1y5fzv4-3-3-0", odd: "_1y5fzv5-3-3-0" }, isDraggedRow: { true: "_1y5fzv6-3-3-0", false: "_1y5fzv7-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-3-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-3-0"]] });
 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 './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-2-0',variantClassNames:{rowSeparation:{none:'_1y5fzv1-3-2-0',horizontalDividers:'_1y5fzv2-3-2-0',zebraStripes:'_1y5fzv3-3-2-0'},rowParity:{even:'_1y5fzv4-3-2-0',odd:'_1y5fzv5-3-2-0'},isDraggedRow:{true:'_1y5fzv6-3-2-0',false:'_1y5fzv7-3-2-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_1y5fzv8-3-2-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_1y5fzv9-3-2-0']]});"],
+  "sourcesContent": ["import './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-3-0',variantClassNames:{rowSeparation:{none:'_1y5fzv1-3-3-0',horizontalDividers:'_1y5fzv2-3-3-0',zebraStripes:'_1y5fzv3-3-3-0'},rowParity:{even:'_1y5fzv4-3-3-0',odd:'_1y5fzv5-3-3-0'},isDraggedRow:{true:'_1y5fzv6-3-3-0',false:'_1y5fzv7-3-3-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_1y5fzv8-3-3-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_1y5fzv9-3-3-0']]});"],
   "mappings": "AAAA,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-2-0 {
+._1al677r0-3-3-0 {
   position: sticky;
   pointer-events: none;
 }
-._1al677r0-3-2-0::after {
+._1al677r0-3-3-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -10,19 +10,19 @@
   width: 50px;
   pointer-events: none;
 }
-[data-theme="light"] ._1al677r1-3-2-0::after {
+[data-theme="light"] ._1al677r1-3-3-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-2-0::after {
+[data-theme="dark"] ._1al677r1-3-3-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-2-0::after {
+[data-theme="light"] ._1al677r2-3-3-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-2-0::after {
+[data-theme="dark"] ._1al677r2-3-3-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-2-0 {
+._1al677r3-3-3-0 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -33,10 +33,10 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r3-3-2-0::after {
+._1al677r3-3-3-0::after {
   left: 0;
 }
-._1al677r4-3-2-0 {
+._1al677r4-3-3-0 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -46,6 +46,6 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r4-3-2-0::after {
+._1al677r4-3-3-0::after {
   right: 0;
 }

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

@@ -1,6 +1,6 @@
 import "./DataTableScrollShadow.css";
-var scrollShadow = { left: "_1al677r1-3-2-0 _1al677r0-3-2-0", right: "_1al677r2-3-2-0 _1al677r0-3-2-0" };
-var tableEdgeShadow = { left: "_1al677r3-3-2-0 _1al677r1-3-2-0 _1al677r0-3-2-0", right: "_1al677r4-3-2-0 _1al677r2-3-2-0 _1al677r0-3-2-0" };
+var scrollShadow = { left: "_1al677r1-3-3-0 _1al677r0-3-3-0", right: "_1al677r2-3-3-0 _1al677r0-3-3-0" };
+var tableEdgeShadow = { left: "_1al677r3-3-3-0 _1al677r1-3-3-0 _1al677r0-3-3-0", right: "_1al677r4-3-3-0 _1al677r2-3-3-0 _1al677r0-3-3-0" };
 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-2-0 _1al677r0-3-2-0',right:'_1al677r2-3-2-0 _1al677r0-3-2-0'};\nexport var tableEdgeShadow = {left:'_1al677r3-3-2-0 _1al677r1-3-2-0 _1al677r0-3-2-0',right:'_1al677r4-3-2-0 _1al677r2-3-2-0 _1al677r0-3-2-0'};"],
+  "sourcesContent": ["import './DataTableScrollShadow.css';\nexport var scrollShadow = {left:'_1al677r1-3-3-0 _1al677r0-3-3-0',right:'_1al677r2-3-3-0 _1al677r0-3-3-0'};\nexport var tableEdgeShadow = {left:'_1al677r3-3-3-0 _1al677r1-3-3-0 _1al677r0-3-3-0',right:'_1al677r4-3-3-0 _1al677r2-3-3-0 _1al677r0-3-3-0'};"],
   "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/DataTableVirtualizationContainer.css

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

@@ -12,6 +12,7 @@ import { DataTableContent } from "./DataTableContent.js";
 import { DataTableStatePlaceholder } from "./DataTableStatePlaceholder.js";
 import * as styles from "./DataTableVirtualizationContainer.sty.js";
 import { useFontsUpdated } from "../../../core/hooks/useFontsUpdated.js";
+import { devLog } from "../../../core/utils/logging.js";
 import {
   DATA_TABLE_BORDER_WIDTH,
   DATA_TABLE_DEFAULT_COLUMN_WIDTH,
@@ -30,7 +31,13 @@ function DataTableVirtualizationContainer(props) {
   const totalHeaderHeight = table.getTotalHeaderHeight();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
   const getUniqueRowKey = useCallback(
-    (index) => rows[index].id,
+    (index) => {
+      if (index >= rows.length) {
+        devLog(`[Table] Invalid row index ${index} (>= ${rows.length})`);
+        return -1;
+      }
+      return rows[index].id;
+    },
     [rows]
   );
   const rowVirtualizer = useVirtualizer({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.tsx"],
-  "sourcesContent": ["import { useVirtualizer, type Range } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { debounce } from 'lodash-es';\nimport {\n  type CSSProperties,\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { DataTableContent } from './DataTableContent.js';\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { DataTableStatePlaceholder } from './DataTableStatePlaceholder.js';\nimport * as styles from './DataTableVirtualizationContainer.sty.js';\nimport { useFontsUpdated } from '../../../core/hooks/useFontsUpdated.js';\nimport {\n  DATA_TABLE_BORDER_WIDTH,\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n  DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n} from '../constants.js';\nimport { addPinnedColumnsToVisibleRange } from '../features/ColumnPinning/column-pinning-utils.js';\nimport { isWidthExtendedConfig } from '../features/Layout/width-utils.js';\nimport { type Table } from '../hooks/useTable/types.js';\n\ntype WidthConfigsById = Record<\n  string,\n  {\n    minWidth: number;\n    maxWidth: number | undefined;\n    isContentOrAutoWidth: boolean;\n  }\n>;\n\nexport function DataTableVirtualizationContainer<T>(\n  props: Readonly<{\n    table: Table<T>;\n    emptyState: ReturnType<typeof DataTableEmptyState>;\n    fullHeight: boolean;\n  }>,\n): JSX.Element {\n  const { table, emptyState, fullHeight } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();\n  const rows = table.getRowModel().rows;\n  const visibleLeafColumns = table.getVisibleLeafColumns();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n\n  const getUniqueRowKey = useCallback(\n    (index: number) => rows[index].id,\n    [rows],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: rows?.length ?? 0,\n    getScrollElement: () => parentRef.current,\n    // Overscan of 5 was very ambitious. A single mouse scroll tick is usually\n    // more than 5 condensed rows, so this is increased. In the future there could\n    // be a possibility to make this dependent on the row density.\n    overscan: DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n    indexAttribute: 'data-row',\n    // reserves space for the sticky header in the scrollable area, so the first rows are not hidden behind the header when scrolled to the top\n    paddingStart: totalHeaderHeight,\n    // ensures that scrollToIndex scrolls the item to the correct position, taking into account the reserved space for the header\n    scrollPaddingStart: totalHeaderHeight,\n    estimateSize: (index) => table.estimateRowHeight({ index }),\n    measureElement: (element) => element.getBoundingClientRect().height,\n    // Default wait until the scrollEnd is triggered and it starts updating.\n    // https://tanstack.com/virtual/latest/docs/api/virtualizer#isscrollingresetdelay\n    // Reducing it from the default 150ms seems to improve perceived scroll performance\n    isScrollingResetDelay: 20,\n    getItemKey: getUniqueRowKey,\n    // reset scrollElement observers when the data in the table is changed\n    // fixes the issue with Firefox browser not resetting the scrollTop position of the virtualizer when the table is scrolled and the data is changed\n    // APPDEV-15467\n    enabled: rows.length > 0,\n  });\n\n  const pinnedLeftColumns = table.getLeftVisibleLeafColumns();\n  const pinnedRightColumns = table.getRightVisibleLeafColumns();\n\n  // create left array indexes\n  const pinnedLeftIndexes = useMemo(\n    () => Array.from({ length: pinnedLeftColumns.length }, (_, i) => i),\n    [pinnedLeftColumns.length],\n  );\n\n  // create right array indexes\n  const pinnedRightIndexes = useMemo(() => {\n    const pinnedRightStartIndex =\n      visibleLeafColumns.length - pinnedRightColumns.length;\n\n    return Array.from(\n      { length: pinnedRightColumns.length },\n      (_, i) => pinnedRightStartIndex + i,\n    );\n  }, [visibleLeafColumns.length, pinnedRightColumns.length]); // Only recreate when counts change\n\n  const columnRangeExtractor = useCallback(\n    (range: Range) =>\n      addPinnedColumnsToVisibleRange(\n        range,\n        pinnedLeftIndexes,\n        pinnedRightIndexes,\n      ),\n    [pinnedLeftIndexes, pinnedRightIndexes],\n  );\n\n  const orderedVisibleLeafColumns = table.getOrderedVisibleLeafColumns();\n  const getUniqueColumnKey = useCallback(\n    (index: number) => orderedVisibleLeafColumns[index].id,\n    [orderedVisibleLeafColumns],\n  );\n\n  const widthConfigsById = useMemo<WidthConfigsById>(() => {\n    return visibleLeafColumnsWithoutBuiltin.reduce<WidthConfigsById>(\n      (acc, column) => {\n        const { id, columnDef } = column;\n        const {\n          width,\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth,\n        } = columnDef;\n\n        const isExtendedConfig = isWidthExtendedConfig(width);\n        const isContentOrAutoWidth =\n          isExtendedConfig || width === 'content' || width === 'auto';\n        const maxAutoWidth = isExtendedConfig ? width.maxWidth : undefined;\n\n        // Take the smallest of the maxWidths if both are defined\n        // if columnSize is defined (the user resized a column), it takes precedence over maxWidth and maxAutoWidth\n        const finalMaxWidth =\n          maxWidth !== undefined && maxAutoWidth !== undefined\n            ? Math.min(maxWidth, maxAutoWidth)\n            : maxWidth ?? maxAutoWidth;\n\n        acc[id] = {\n          minWidth,\n          maxWidth: finalMaxWidth,\n          isContentOrAutoWidth,\n        };\n        return acc;\n      },\n      {},\n    );\n  }, [visibleLeafColumnsWithoutBuiltin]);\n\n  const columnMeasure = useCallback(\n    (element: Element) => {\n      const measuredWidth = element.getBoundingClientRect().width;\n\n      const columnId =\n        element instanceof HTMLElement ? element.dataset.columnid : undefined;\n\n      const previousWidth = columnId\n        ? table.getMeasuredColumnWidth(columnId)\n        : undefined;\n      // Return the previous width if the element is hidden\n      if (measuredWidth === 0 || !columnId) {\n        return previousWidth ?? 0;\n      }\n\n      const widthConfiguration = widthConfigsById[columnId];\n\n      // If no width configuration is found, the column is currently resized,\n      // or an explicit column size is defined, return the measured width directly.\n      // Column sizing already considers min/max widths correctly.\n      if (\n        table.getState().columnSizing[columnId] !== undefined ||\n        table.getState().columnSizingInfo.isResizingColumn === columnId ||\n        !widthConfiguration\n      ) {\n        table.setMeasuredColumnWidth(columnId, measuredWidth);\n        return measuredWidth;\n      }\n\n      const { minWidth, maxWidth, isContentOrAutoWidth } = widthConfiguration;\n\n      // For content/auto width columns we need to round up slightly,\n      // to avoid an unnecessary ellipsis showing due to subpixel rendering issues.\n      const roundedWidth = isContentOrAutoWidth\n        ? Math.ceil(measuredWidth * 10) / 10\n        : measuredWidth;\n\n      const clampedWidth = Math.max(\n        minWidth ?? 0,\n        Math.min(maxWidth ?? Infinity, roundedWidth),\n      );\n\n      // Only update the measured width if it has changed beyond a small threshold (> 0.1px)\n      // to prevent infinite loops (ever-growing columns) caused by subpixel rendering differences\n      // at specific browser zoom and display scale combinations (e.g. 150% zoom + 125% scale).\n      if (\n        previousWidth !== undefined &&\n        Math.abs(clampedWidth - previousWidth) <= 0.1\n      ) {\n        // Return the previous width to prevent the virtualizer from detecting\n        // insignificant changes that would trigger re-renders.\n        return previousWidth;\n      }\n\n      table.setMeasuredColumnWidth(columnId, clampedWidth);\n      return clampedWidth;\n    },\n    [table, widthConfigsById],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: visibleLeafColumns.length,\n    getScrollElement: () => parentRef.current,\n    indexAttribute: 'data-column',\n    estimateSize: () => DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n    rangeExtractor: columnRangeExtractor,\n    overscan: DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n    horizontal: true,\n    getItemKey: getUniqueColumnKey,\n    measureElement: columnMeasure,\n  });\n\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n  const { headers, contained, rowSeparation } = table.getVisualVariantOptions();\n  const estimatedRowHeight = table.estimateRowHeight();\n\n  const containerStyle = useMemo(() => {\n    let minHeight: CSSProperties['minHeight'] = undefined;\n\n    if (totalHeaderHeight === 0) {\n      // if headers are hidden, be at least one row tall, otherwise be at least two rows tall\n      // to account for the border between header and first row we need to add 2px border\n      minHeight =\n        headers === 'hidden'\n          ? estimatedRowHeight\n          : estimatedRowHeight * 2 + DATA_TABLE_BORDER_WIDTH;\n    } else {\n      // or header size + 1 additional row\n      minHeight = totalHeaderHeight + estimatedRowHeight;\n    }\n\n    if (contained) {\n      // Add a borderTop and border bottom for the borders around the containment.\n      minHeight += 2 * DATA_TABLE_BORDER_WIDTH;\n    }\n    const baseStyle: CSSProperties = {\n      minHeight,\n    };\n\n    if (fullHeight) {\n      baseStyle.height = '100%';\n    }\n    return baseStyle;\n  }, [totalHeaderHeight, contained, headers, estimatedRowHeight, fullHeight]);\n\n  const scrollRect = rowVirtualizer.scrollRect;\n  const scrollElement = rowVirtualizer.scrollElement;\n  const scrollWidth = scrollElement?.scrollWidth;\n  const scrollHeight = scrollElement?.scrollHeight;\n\n  const scrollDirection = useMemo(() => {\n    if (\n      scrollRect?.width &&\n      scrollRect?.height &&\n      scrollWidth !== undefined &&\n      scrollHeight !== undefined\n    ) {\n      // Determine whether the scrollbars are visible to apply the according styles for the scrollbars\n      const hasScrollbarX = scrollRect.width < scrollWidth;\n      const hasScrollbarY = scrollRect.height < scrollHeight;\n\n      if (hasScrollbarX && hasScrollbarY) {\n        return 'xy';\n      } else if (hasScrollbarX) {\n        return 'x';\n      } else if (hasScrollbarY) {\n        return 'y';\n      }\n    }\n    return false;\n  }, [scrollRect?.width, scrollRect?.height, scrollWidth, scrollHeight]);\n\n  const fontUpdateQueued = useRef(false);\n  useFontsUpdated(() => {\n    if (fontUpdateQueued.current) {\n      return;\n    }\n    fontUpdateQueued.current = true;\n    const controller = new AbortController();\n    Promise.race([\n      // If the animations have not stopped after a timeout period,\n      // we can remeasure nevertheless.\n      new Promise<void>((resolve) =>\n        setTimeout(() => {\n          resolve();\n        }, 1_000),\n      ),\n      // If the animations subside within a reasonable interval, we\n      // can also remeasure.\n      new Promise<void>((resolve) => {\n        document.addEventListener(\n          'animationend',\n          debounce(() => {\n            resolve();\n          }, 200),\n          { signal: controller.signal },\n        );\n      }),\n    ]).then(() => {\n      table.remeasureAllColumns();\n      controller.abort();\n      fontUpdateQueued.current = false;\n    });\n  });\n\n  // If the column definition changes, make sure that the measurements set is cleared\n  // of columns that no longer exist. This keeps the `measuredColumnWidths` cache in\n  // sync with the virtualizer's `itemSizeCache`.\n  useEffect(() => {\n    const currentColumnIds = new Set(\n      table.getAllLeafColumns().map((col) => col.id),\n    );\n\n    const removedIds: string[] = [];\n    for (const id of table.getMeasuredColumnWidths().keys()) {\n      // We compare the columns by their ids, since the virtualizer internally relies\n      // on the ids (as defined by our getItemKey).\n      if (!currentColumnIds.has(id)) {\n        removedIds.push(id);\n      }\n    }\n    if (removedIds.length > 0) {\n      table.resetMeasuredColumnWidths(removedIds);\n    }\n  }, [table, table.options.columns]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering columns via drag and drop, dragging automatically scrolls the content.\n    // This effect ensures that vertical scrolling is prevented while a column is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = rowVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggedHeaderColumn) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => rowVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [draggedHeaderColumn, rowVirtualizer]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering rows via drag and drop, dragging automatically scrolls the content horizontally.\n    // This effect ensures that horizontal scrolling is prevented while a row is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = columnVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggingRowInfo) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => columnVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [columnVirtualizer, draggingRowInfo]);\n\n  table.registerVirtualizers(rowVirtualizer, columnVirtualizer);\n\n  return (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-virtualization-container',\n        styles.virtualizationContainer({\n          contained,\n          rowSeparation,\n          headers,\n          loading,\n          hasVisibleColumns,\n          scrollDirection,\n        }),\n      )}\n      style={containerStyle}\n    >\n      <DataTableContent\n        rowVirtualizer={rowVirtualizer}\n        columnVirtualizer={columnVirtualizer}\n      />\n      <DataTableStatePlaceholder\n        isColumnsEmpty={columnVirtualizer.options.count === 0}\n        isDataEmpty={rowVirtualizer.options.count === 0}\n        allColumnsHidden={!hasVisibleColumns}\n        emptyStateSlot={emptyState}\n      />\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useVirtualizer, type Range } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { debounce } from 'lodash-es';\nimport {\n  type CSSProperties,\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { DataTableContent } from './DataTableContent.js';\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { DataTableStatePlaceholder } from './DataTableStatePlaceholder.js';\nimport * as styles from './DataTableVirtualizationContainer.sty.js';\nimport { useFontsUpdated } from '../../../core/hooks/useFontsUpdated.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport {\n  DATA_TABLE_BORDER_WIDTH,\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n  DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n} from '../constants.js';\nimport { addPinnedColumnsToVisibleRange } from '../features/ColumnPinning/column-pinning-utils.js';\nimport { isWidthExtendedConfig } from '../features/Layout/width-utils.js';\nimport { type Table } from '../hooks/useTable/types.js';\n\ntype WidthConfigsById = Record<\n  string,\n  {\n    minWidth: number;\n    maxWidth: number | undefined;\n    isContentOrAutoWidth: boolean;\n  }\n>;\n\nexport function DataTableVirtualizationContainer<T>(\n  props: Readonly<{\n    table: Table<T>;\n    emptyState: ReturnType<typeof DataTableEmptyState>;\n    fullHeight: boolean;\n  }>,\n): JSX.Element {\n  const { table, emptyState, fullHeight } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();\n  const rows = table.getRowModel().rows;\n  const visibleLeafColumns = table.getVisibleLeafColumns();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n\n  const getUniqueRowKey = useCallback(\n    (index: number) => {\n      if (index >= rows.length) {\n        devLog(`[Table] Invalid row index ${index} (>= ${rows.length})`);\n        // should not happen, but to avoid crashing an app, do this\n        return -1;\n      }\n      return rows[index].id;\n    },\n    [rows],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: rows?.length ?? 0,\n    getScrollElement: () => parentRef.current,\n    // Overscan of 5 was very ambitious. A single mouse scroll tick is usually\n    // more than 5 condensed rows, so this is increased. In the future there could\n    // be a possibility to make this dependent on the row density.\n    overscan: DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n    indexAttribute: 'data-row',\n    // reserves space for the sticky header in the scrollable area, so the first rows are not hidden behind the header when scrolled to the top\n    paddingStart: totalHeaderHeight,\n    // ensures that scrollToIndex scrolls the item to the correct position, taking into account the reserved space for the header\n    scrollPaddingStart: totalHeaderHeight,\n    estimateSize: (index) => table.estimateRowHeight({ index }),\n    measureElement: (element) => element.getBoundingClientRect().height,\n    // Default wait until the scrollEnd is triggered and it starts updating.\n    // https://tanstack.com/virtual/latest/docs/api/virtualizer#isscrollingresetdelay\n    // Reducing it from the default 150ms seems to improve perceived scroll performance\n    isScrollingResetDelay: 20,\n    getItemKey: getUniqueRowKey,\n    // reset scrollElement observers when the data in the table is changed\n    // fixes the issue with Firefox browser not resetting the scrollTop position of the virtualizer when the table is scrolled and the data is changed\n    // APPDEV-15467\n    enabled: rows.length > 0,\n  });\n\n  const pinnedLeftColumns = table.getLeftVisibleLeafColumns();\n  const pinnedRightColumns = table.getRightVisibleLeafColumns();\n\n  // create left array indexes\n  const pinnedLeftIndexes = useMemo(\n    () => Array.from({ length: pinnedLeftColumns.length }, (_, i) => i),\n    [pinnedLeftColumns.length],\n  );\n\n  // create right array indexes\n  const pinnedRightIndexes = useMemo(() => {\n    const pinnedRightStartIndex =\n      visibleLeafColumns.length - pinnedRightColumns.length;\n\n    return Array.from(\n      { length: pinnedRightColumns.length },\n      (_, i) => pinnedRightStartIndex + i,\n    );\n  }, [visibleLeafColumns.length, pinnedRightColumns.length]); // Only recreate when counts change\n\n  const columnRangeExtractor = useCallback(\n    (range: Range) =>\n      addPinnedColumnsToVisibleRange(\n        range,\n        pinnedLeftIndexes,\n        pinnedRightIndexes,\n      ),\n    [pinnedLeftIndexes, pinnedRightIndexes],\n  );\n\n  const orderedVisibleLeafColumns = table.getOrderedVisibleLeafColumns();\n  const getUniqueColumnKey = useCallback(\n    (index: number) => orderedVisibleLeafColumns[index].id,\n    [orderedVisibleLeafColumns],\n  );\n\n  const widthConfigsById = useMemo<WidthConfigsById>(() => {\n    return visibleLeafColumnsWithoutBuiltin.reduce<WidthConfigsById>(\n      (acc, column) => {\n        const { id, columnDef } = column;\n        const {\n          width,\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth,\n        } = columnDef;\n\n        const isExtendedConfig = isWidthExtendedConfig(width);\n        const isContentOrAutoWidth =\n          isExtendedConfig || width === 'content' || width === 'auto';\n        const maxAutoWidth = isExtendedConfig ? width.maxWidth : undefined;\n\n        // Take the smallest of the maxWidths if both are defined\n        // if columnSize is defined (the user resized a column), it takes precedence over maxWidth and maxAutoWidth\n        const finalMaxWidth =\n          maxWidth !== undefined && maxAutoWidth !== undefined\n            ? Math.min(maxWidth, maxAutoWidth)\n            : maxWidth ?? maxAutoWidth;\n\n        acc[id] = {\n          minWidth,\n          maxWidth: finalMaxWidth,\n          isContentOrAutoWidth,\n        };\n        return acc;\n      },\n      {},\n    );\n  }, [visibleLeafColumnsWithoutBuiltin]);\n\n  const columnMeasure = useCallback(\n    (element: Element) => {\n      const measuredWidth = element.getBoundingClientRect().width;\n\n      const columnId =\n        element instanceof HTMLElement ? element.dataset.columnid : undefined;\n\n      const previousWidth = columnId\n        ? table.getMeasuredColumnWidth(columnId)\n        : undefined;\n      // Return the previous width if the element is hidden\n      if (measuredWidth === 0 || !columnId) {\n        return previousWidth ?? 0;\n      }\n\n      const widthConfiguration = widthConfigsById[columnId];\n\n      // If no width configuration is found, the column is currently resized,\n      // or an explicit column size is defined, return the measured width directly.\n      // Column sizing already considers min/max widths correctly.\n      if (\n        table.getState().columnSizing[columnId] !== undefined ||\n        table.getState().columnSizingInfo.isResizingColumn === columnId ||\n        !widthConfiguration\n      ) {\n        table.setMeasuredColumnWidth(columnId, measuredWidth);\n        return measuredWidth;\n      }\n\n      const { minWidth, maxWidth, isContentOrAutoWidth } = widthConfiguration;\n\n      // For content/auto width columns we need to round up slightly,\n      // to avoid an unnecessary ellipsis showing due to subpixel rendering issues.\n      const roundedWidth = isContentOrAutoWidth\n        ? Math.ceil(measuredWidth * 10) / 10\n        : measuredWidth;\n\n      const clampedWidth = Math.max(\n        minWidth ?? 0,\n        Math.min(maxWidth ?? Infinity, roundedWidth),\n      );\n\n      // Only update the measured width if it has changed beyond a small threshold (> 0.1px)\n      // to prevent infinite loops (ever-growing columns) caused by subpixel rendering differences\n      // at specific browser zoom and display scale combinations (e.g. 150% zoom + 125% scale).\n      if (\n        previousWidth !== undefined &&\n        Math.abs(clampedWidth - previousWidth) <= 0.1\n      ) {\n        // Return the previous width to prevent the virtualizer from detecting\n        // insignificant changes that would trigger re-renders.\n        return previousWidth;\n      }\n\n      table.setMeasuredColumnWidth(columnId, clampedWidth);\n      return clampedWidth;\n    },\n    [table, widthConfigsById],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: visibleLeafColumns.length,\n    getScrollElement: () => parentRef.current,\n    indexAttribute: 'data-column',\n    estimateSize: () => DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n    rangeExtractor: columnRangeExtractor,\n    overscan: DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n    horizontal: true,\n    getItemKey: getUniqueColumnKey,\n    measureElement: columnMeasure,\n  });\n\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n  const { headers, contained, rowSeparation } = table.getVisualVariantOptions();\n  const estimatedRowHeight = table.estimateRowHeight();\n\n  const containerStyle = useMemo(() => {\n    let minHeight: CSSProperties['minHeight'] = undefined;\n\n    if (totalHeaderHeight === 0) {\n      // if headers are hidden, be at least one row tall, otherwise be at least two rows tall\n      // to account for the border between header and first row we need to add 2px border\n      minHeight =\n        headers === 'hidden'\n          ? estimatedRowHeight\n          : estimatedRowHeight * 2 + DATA_TABLE_BORDER_WIDTH;\n    } else {\n      // or header size + 1 additional row\n      minHeight = totalHeaderHeight + estimatedRowHeight;\n    }\n\n    if (contained) {\n      // Add a borderTop and border bottom for the borders around the containment.\n      minHeight += 2 * DATA_TABLE_BORDER_WIDTH;\n    }\n    const baseStyle: CSSProperties = {\n      minHeight,\n    };\n\n    if (fullHeight) {\n      baseStyle.height = '100%';\n    }\n    return baseStyle;\n  }, [totalHeaderHeight, contained, headers, estimatedRowHeight, fullHeight]);\n\n  const scrollRect = rowVirtualizer.scrollRect;\n  const scrollElement = rowVirtualizer.scrollElement;\n  const scrollWidth = scrollElement?.scrollWidth;\n  const scrollHeight = scrollElement?.scrollHeight;\n\n  const scrollDirection = useMemo(() => {\n    if (\n      scrollRect?.width &&\n      scrollRect?.height &&\n      scrollWidth !== undefined &&\n      scrollHeight !== undefined\n    ) {\n      // Determine whether the scrollbars are visible to apply the according styles for the scrollbars\n      const hasScrollbarX = scrollRect.width < scrollWidth;\n      const hasScrollbarY = scrollRect.height < scrollHeight;\n\n      if (hasScrollbarX && hasScrollbarY) {\n        return 'xy';\n      } else if (hasScrollbarX) {\n        return 'x';\n      } else if (hasScrollbarY) {\n        return 'y';\n      }\n    }\n    return false;\n  }, [scrollRect?.width, scrollRect?.height, scrollWidth, scrollHeight]);\n\n  const fontUpdateQueued = useRef(false);\n  useFontsUpdated(() => {\n    if (fontUpdateQueued.current) {\n      return;\n    }\n    fontUpdateQueued.current = true;\n    const controller = new AbortController();\n    Promise.race([\n      // If the animations have not stopped after a timeout period,\n      // we can remeasure nevertheless.\n      new Promise<void>((resolve) =>\n        setTimeout(() => {\n          resolve();\n        }, 1_000),\n      ),\n      // If the animations subside within a reasonable interval, we\n      // can also remeasure.\n      new Promise<void>((resolve) => {\n        document.addEventListener(\n          'animationend',\n          debounce(() => {\n            resolve();\n          }, 200),\n          { signal: controller.signal },\n        );\n      }),\n    ]).then(() => {\n      table.remeasureAllColumns();\n      controller.abort();\n      fontUpdateQueued.current = false;\n    });\n  });\n\n  // If the column definition changes, make sure that the measurements set is cleared\n  // of columns that no longer exist. This keeps the `measuredColumnWidths` cache in\n  // sync with the virtualizer's `itemSizeCache`.\n  useEffect(() => {\n    const currentColumnIds = new Set(\n      table.getAllLeafColumns().map((col) => col.id),\n    );\n\n    const removedIds: string[] = [];\n    for (const id of table.getMeasuredColumnWidths().keys()) {\n      // We compare the columns by their ids, since the virtualizer internally relies\n      // on the ids (as defined by our getItemKey).\n      if (!currentColumnIds.has(id)) {\n        removedIds.push(id);\n      }\n    }\n    if (removedIds.length > 0) {\n      table.resetMeasuredColumnWidths(removedIds);\n    }\n  }, [table, table.options.columns]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering columns via drag and drop, dragging automatically scrolls the content.\n    // This effect ensures that vertical scrolling is prevented while a column is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = rowVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggedHeaderColumn) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => rowVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [draggedHeaderColumn, rowVirtualizer]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering rows via drag and drop, dragging automatically scrolls the content horizontally.\n    // This effect ensures that horizontal scrolling is prevented while a row is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = columnVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggingRowInfo) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => columnVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [columnVirtualizer, draggingRowInfo]);\n\n  table.registerVirtualizers(rowVirtualizer, columnVirtualizer);\n\n  return (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-virtualization-container',\n        styles.virtualizationContainer({\n          contained,\n          rowSeparation,\n          headers,\n          loading,\n          hasVisibleColumns,\n          scrollDirection,\n        }),\n      )}\n      style={containerStyle}\n    >\n      <DataTableContent\n        rowVirtualizer={rowVirtualizer}\n        columnVirtualizer={columnVirtualizer}\n      />\n      <DataTableStatePlaceholder\n        isColumnsEmpty={columnVirtualizer.options.count === 0}\n        isDataEmpty={rowVirtualizer.options.count === 0}\n        allColumnsHidden={!hasVisibleColumns}\n        emptyStateSlot={emptyState}\n      />\n    </div>\n  );\n}\n"],
+  "mappings": "AAsYI,SAeE,KAfF;AAtYJ,SAAS,sBAAkC;AAC3C,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AAEjC,SAAS,iCAAiC;AAC1C,YAAY,YAAY;AACxB,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sCAAsC;AAC/C,SAAS,6BAA6B;AAY/B,SAAS,iCACd,OAKa;AACb,QAAM,EAAE,OAAO,YAAY,WAAW,IAAI;AAE1C,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,EAAE,iBAAiB,qBAAqB,QAAQ,IAAI,MAAM,SAAS;AACzE,QAAM,OAAO,MAAM,YAAY,EAAE;AACjC,QAAM,qBAAqB,MAAM,sBAAsB;AACvD,QAAM,oBAAoB,MAAM,qBAAqB;AAErD,QAAM,mCACJ,MAAM,oCAAoC;AAE5C,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAAkB;AACjB,UAAI,SAAS,KAAK,QAAQ;AACxB,eAAO,6BAA6B,KAAK,QAAQ,KAAK,MAAM,GAAG;AAE/D,eAAO;AAAA,MACT;AACA,aAAO,KAAK,KAAK,EAAE;AAAA,IACrB;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,iBAAiB,eAAe;AAAA,IACpC,OAAO,MAAM,UAAU;AAAA,IACvB,kBAAkB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA,IAIlC,UAAU;AAAA,IACV,gBAAgB;AAAA;AAAA,IAEhB,cAAc;AAAA;AAAA,IAEd,oBAAoB;AAAA,IACpB,cAAc,CAAC,UAAU,MAAM,kBAAkB,EAAE,MAAM,CAAC;AAAA,IAC1D,gBAAgB,CAAC,YAAY,QAAQ,sBAAsB,EAAE;AAAA;AAAA;AAAA;AAAA,IAI7D,uBAAuB;AAAA,IACvB,YAAY;AAAA;AAAA;AAAA;AAAA,IAIZ,SAAS,KAAK,SAAS;AAAA,EACzB,CAAC;AAED,QAAM,oBAAoB,MAAM,0BAA0B;AAC1D,QAAM,qBAAqB,MAAM,2BAA2B;AAG5D,QAAM,oBAAoB;AAAA,IACxB,MAAM,MAAM,KAAK,EAAE,QAAQ,kBAAkB,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC;AAAA,IAClE,CAAC,kBAAkB,MAAM;AAAA,EAC3B;AAGA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,wBACJ,mBAAmB,SAAS,mBAAmB;AAEjD,WAAO,MAAM;AAAA,MACX,EAAE,QAAQ,mBAAmB,OAAO;AAAA,MACpC,CAAC,GAAG,MAAM,wBAAwB;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,mBAAmB,QAAQ,mBAAmB,MAAM,CAAC;AAEzD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UACC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACF,CAAC,mBAAmB,kBAAkB;AAAA,EACxC;AAEA,QAAM,4BAA4B,MAAM,6BAA6B;AACrE,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkB,0BAA0B,KAAK,EAAE;AAAA,IACpD,CAAC,yBAAyB;AAAA,EAC5B;AAEA,QAAM,mBAAmB,QAA0B,MAAM;AACvD,WAAO,iCAAiC;AAAA,MACtC,CAAC,KAAK,WAAW;AACf,cAAM,EAAE,IAAI,UAAU,IAAI;AAC1B,cAAM;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF,IAAI;AAEJ,cAAM,mBAAmB,sBAAsB,KAAK;AACpD,cAAM,uBACJ,oBAAoB,UAAU,aAAa,UAAU;AACvD,cAAM,eAAe,mBAAmB,MAAM,WAAW;AAIzD,cAAM,gBACJ,aAAa,UAAa,iBAAiB,SACvC,KAAK,IAAI,UAAU,YAAY,IAC/B,YAAY;AAElB,YAAI,EAAE,IAAI;AAAA,UACR;AAAA,UACA,UAAU;AAAA,UACV;AAAA,QACF;AACA,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,gCAAgC,CAAC;AAErC,QAAM,gBAAgB;AAAA,IACpB,CAAC,YAAqB;AACpB,YAAM,gBAAgB,QAAQ,sBAAsB,EAAE;AAEtD,YAAM,WACJ,mBAAmB,cAAc,QAAQ,QAAQ,WAAW;AAE9D,YAAM,gBAAgB,WAClB,MAAM,uBAAuB,QAAQ,IACrC;AAEJ,UAAI,kBAAkB,KAAK,CAAC,UAAU;AACpC,eAAO,iBAAiB;AAAA,MAC1B;AAEA,YAAM,qBAAqB,iBAAiB,QAAQ;AAKpD,UACE,MAAM,SAAS,EAAE,aAAa,QAAQ,MAAM,UAC5C,MAAM,SAAS,EAAE,iBAAiB,qBAAqB,YACvD,CAAC,oBACD;AACA,cAAM,uBAAuB,UAAU,aAAa;AACpD,eAAO;AAAA,MACT;AAEA,YAAM,EAAE,UAAU,UAAU,qBAAqB,IAAI;AAIrD,YAAM,eAAe,uBACjB,KAAK,KAAK,gBAAgB,EAAE,IAAI,KAChC;AAEJ,YAAM,eAAe,KAAK;AAAA,QACxB,YAAY;AAAA,QACZ,KAAK,IAAI,YAAY,UAAU,YAAY;AAAA,MAC7C;AAKA,UACE,kBAAkB,UAClB,KAAK,IAAI,eAAe,aAAa,KAAK,KAC1C;AAGA,eAAO;AAAA,MACT;AAEA,YAAM,uBAAuB,UAAU,YAAY;AACnD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,OAAO,gBAAgB;AAAA,EAC1B;AAEA,QAAM,oBAAoB,eAAe;AAAA,IACvC,OAAO,mBAAmB;AAAA,IAC1B,kBAAkB,MAAM,UAAU;AAAA,IAClC,gBAAgB;AAAA,IAChB,cAAc,MAAM;AAAA,IACpB,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,oBAAoB,iCAAiC,SAAS;AACpE,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,MAAM,wBAAwB;AAC5E,QAAM,qBAAqB,MAAM,kBAAkB;AAEnD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,YAAwC;AAE5C,QAAI,sBAAsB,GAAG;AAG3B,kBACE,YAAY,WACR,qBACA,qBAAqB,IAAI;AAAA,IACjC,OAAO;AAEL,kBAAY,oBAAoB;AAAA,IAClC;AAEA,QAAI,WAAW;AAEb,mBAAa,IAAI;AAAA,IACnB;AACA,UAAM,YAA2B;AAAA,MAC/B;AAAA,IACF;AAEA,QAAI,YAAY;AACd,gBAAU,SAAS;AAAA,IACrB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,WAAW,SAAS,oBAAoB,UAAU,CAAC;AAE1E,QAAM,aAAa,eAAe;AAClC,QAAM,gBAAgB,eAAe;AACrC,QAAM,cAAc,eAAe;AACnC,QAAM,eAAe,eAAe;AAEpC,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QACE,YAAY,SACZ,YAAY,UACZ,gBAAgB,UAChB,iBAAiB,QACjB;AAEA,YAAM,gBAAgB,WAAW,QAAQ;AACzC,YAAM,gBAAgB,WAAW,SAAS;AAE1C,UAAI,iBAAiB,eAAe;AAClC,eAAO;AAAA,MACT,WAAW,eAAe;AACxB,eAAO;AAAA,MACT,WAAW,eAAe;AACxB,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,OAAO,YAAY,QAAQ,aAAa,YAAY,CAAC;AAErE,QAAM,mBAAmB,OAAO,KAAK;AACrC,kBAAgB,MAAM;AACpB,QAAI,iBAAiB,SAAS;AAC5B;AAAA,IACF;AACA,qBAAiB,UAAU;AAC3B,UAAM,aAAa,IAAI,gBAAgB;AACvC,YAAQ,KAAK;AAAA;AAAA;AAAA,MAGX,IAAI;AAAA,QAAc,CAAC,YACjB,WAAW,MAAM;AACf,kBAAQ;AAAA,QACV,GAAG,GAAK;AAAA,MACV;AAAA;AAAA;AAAA,MAGA,IAAI,QAAc,CAAC,YAAY;AAC7B,iBAAS;AAAA,UACP;AAAA,UACA,SAAS,MAAM;AACb,oBAAQ;AAAA,UACV,GAAG,GAAG;AAAA,UACN,EAAE,QAAQ,WAAW,OAAO;AAAA,QAC9B;AAAA,MACF,CAAC;AAAA,IACH,CAAC,EAAE,KAAK,MAAM;AACZ,YAAM,oBAAoB;AAC1B,iBAAW,MAAM;AACjB,uBAAiB,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAKD,YAAU,MAAM;AACd,UAAM,mBAAmB,IAAI;AAAA,MAC3B,MAAM,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;AAAA,IAC/C;AAEA,UAAM,aAAuB,CAAC;AAC9B,eAAW,MAAM,MAAM,wBAAwB,EAAE,KAAK,GAAG;AAGvD,UAAI,CAAC,iBAAiB,IAAI,EAAE,GAAG;AAC7B,mBAAW,KAAK,EAAE;AAAA,MACpB;AAAA,IACF;AACA,QAAI,WAAW,SAAS,GAAG;AACzB,YAAM,0BAA0B,UAAU;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,QAAQ,OAAO,CAAC;AAEjC,YAAU,MAAM;AAGd,UAAM,SAAS,UAAU;AACzB,UAAM,gBAAgB,eAAe;AACrC,UAAM,QAAQ,IAAI,gBAAgB;AAClC,QAAI,qBAAqB;AAEvB,cAAQ;AAAA,QACN;AAAA,QACA,MAAM,eAAe,eAAe,iBAAiB,CAAC;AAAA,QACtD,EAAE,QAAQ,MAAM,OAAO;AAAA,MACzB;AAAA,IACF;AACA,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,GAAG,CAAC,qBAAqB,cAAc,CAAC;AAExC,YAAU,MAAM;AAGd,UAAM,SAAS,UAAU;AACzB,UAAM,gBAAgB,kBAAkB;AACxC,UAAM,QAAQ,IAAI,gBAAgB;AAClC,QAAI,iBAAiB;AAEnB,cAAQ;AAAA,QACN;AAAA,QACA,MAAM,kBAAkB,eAAe,iBAAiB,CAAC;AAAA,QACzD,EAAE,QAAQ,MAAM,OAAO;AAAA,MACzB;AAAA,IACF;AACA,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,GAAG,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QAAM,qBAAqB,gBAAgB,iBAAiB;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,OAAO,wBAAwB;AAAA,UAC7B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,OAAO;AAAA,MAEP;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAgB,kBAAkB,QAAQ,UAAU;AAAA,YACpD,aAAa,eAAe,QAAQ,UAAU;AAAA,YAC9C,kBAAkB,CAAC;AAAA,YACnB,gBAAgB;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./DataTableVirtualizationContainer.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var virtualizationContainer = _7a468({ 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"]] });
+var virtualizationContainer = _7a468({ defaultClassName: "_ytdpsw0-3-3-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-3-0", false: "_ytdpsw2-3-3-0" }, loading: { true: "_ytdpsw3-3-3-0" }, contained: { true: "_ytdpsw4-3-3-0", false: "_ytdpsw5-3-3-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-3-0", zebraStripes: "_ytdpsw7-3-3-0", none: "_ytdpsw8-3-3-0" }, headers: { hidden: "_ytdpsw9-3-3-0", "default": "_ytdpswa-3-3-0" }, scrollDirection: { false: "_ytdpswb-3-3-0", x: "_ytdpswc-3-3-0", y: "_ytdpswd-3-3-0", xy: "_ytdpswe-3-3-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-3-0"]] });
 export {
   virtualizationContainer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.css.ts"],
-  "sourcesContent": ["import './DataTableVirtualizationContainer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationContainer = _7a468({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']]});"],
+  "sourcesContent": ["import './DataTableVirtualizationContainer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationContainer = _7a468({defaultClassName:'_ytdpsw0-3-3-0',variantClassNames:{hasVisibleColumns:{true:'_ytdpsw1-3-3-0',false:'_ytdpsw2-3-3-0'},loading:{true:'_ytdpsw3-3-3-0'},contained:{true:'_ytdpsw4-3-3-0',false:'_ytdpsw5-3-3-0'},rowSeparation:{horizontalDividers:'_ytdpsw6-3-3-0',zebraStripes:'_ytdpsw7-3-3-0',none:'_ytdpsw8-3-3-0'},headers:{hidden:'_ytdpsw9-3-3-0','default':'_ytdpswa-3-3-0'},scrollDirection:{false:'_ytdpswb-3-3-0',x:'_ytdpswc-3-3-0',y:'_ytdpswd-3-3-0',xy:'_ytdpswe-3-3-0'}},defaultVariants:{contained:true,rowSeparation:'horizontalDividers',headers:'default'},compoundVariants:[[{contained:true,scrollDirection:'xy'},'_ytdpswf-3-3-0']]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,eAAc,EAAC,oBAAmB,kBAAiB,cAAa,kBAAiB,MAAK,iBAAgB,GAAE,SAAQ,EAAC,QAAO,kBAAiB,WAAU,iBAAgB,GAAE,iBAAgB,EAAC,OAAM,kBAAiB,GAAE,kBAAiB,GAAE,kBAAiB,IAAG,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,eAAc,sBAAqB,SAAQ,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,iBAAgB,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,15 +1,15 @@
-._1rlvxpp0-3-2-0 {
+._1rlvxpp0-3-3-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-2-0 {
+._1rlvxpp1-3-3-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-2-0 {
+._1rlvxpp3-3-3-0 {
   margin-left: var(--dt-spacings-size-6, 6px);
 }
-._1rlvxpp4-3-2-0 {
+._1rlvxpp4-3-3-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/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -1,6 +1,6 @@
 import "./DataTableSelectionChip.css";
-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" };
+var selectionChip = "_1rlvxpp4-3-3-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-3-0 _1rlvxpp0-3-3-0", "default": "_1rlvxpp0-3-3-0", comfortable: "_1rlvxpp3-3-3-0 _1rlvxpp0-3-3-0" };
 export {
   selectionChip,
   selectionChipWrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectionChip.css.ts"],
-  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-2-0';\nexport 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'};"],
+  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-3-0';\nexport var selectionChipWrapper = {condensed:'_1rlvxpp1-3-3-0 _1rlvxpp0-3-3-0','default':'_1rlvxpp0-3-3-0',comfortable:'_1rlvxpp3-3-3-0 _1rlvxpp0-3-3-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,uBAAuB,EAAC,WAAU,mCAAkC,WAAU,mBAAkB,aAAY,kCAAiC;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.js

@@ -33,7 +33,7 @@ const ColumnOrderDragHandle = ({
         styles.columnDndHandle,
         isKeyboardDragging && focusRingCSS({ minimal: false, color: "neutral" })
       ),
-      "data-dt-name": "ColumnSettingsDragAndDropHandle",
+      "data-dt-name": "ColumnSettingsDragAndDrop",
       children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DragAllDirectionIcon, {}) })
     }
   );

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useFocusContext as _useFocusContext } from '../../../../../../core/hooks/useFocusContext.js';\nimport { focusRingCSS } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging &&\n          focusRingCSS({ minimal: false, color: 'neutral' }),\n      )}\n      data-dt-name=\"ColumnSettingsDragAndDropHandle\"\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useFocusContext as _useFocusContext } from '../../../../../../core/hooks/useFocusContext.js';\nimport { focusRingCSS } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging &&\n          focusRingCSS({ minimal: false, color: 'neutral' }),\n      )}\n      data-dt-name=\"ColumnSettingsDragAndDrop\"\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
   "mappings": "AA2DQ;AA3DR,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAaM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,iBAAiB;AACtC,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/D,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,6BAA6B,KAAK;AAAA,IACtC,kBAAkB;AAAA,IAClB,EAAE,SAAmB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,sBACE,aAAa,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACrD;AAAA,MACA,gBAAa;AAAA,MAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,29 +1,29 @@
-._11d1m5j0-3-2-0 {
+._11d1m5j0-3-3-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-2-0:last-child {
+._11d1m5j0-3-3-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-2-0 {
+._11d1m5j1-3-3-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-2-0:active {
+._11d1m5j1-3-3-0:active {
   background: transparent;
 }
-._11d1m5j1-3-2-0:hover {
+._11d1m5j1-3-3-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-2-0 ._11d1m5j1-3-2-0 {
+._11d1m5j0-3-3-0 ._11d1m5j1-3-3-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-2-0 {
+._11d1m5j2-3-3-0 {
   opacity: 0.2;
 }

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

@@ -1,7 +1,7 @@
 import "./ColumnOrderSettingsDragAndDrop.css";
-var columnDndHandle = "_11d1m5j1-3-2-0";
-var columnDndOverlay = "_11d1m5j0-3-2-0";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-2-0";
+var columnDndHandle = "_11d1m5j1-3-3-0";
+var columnDndOverlay = "_11d1m5j0-3-3-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-3-0";
 export {
   columnDndHandle,
   columnDndOverlay,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css.ts"],
-  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-2-0';\nexport var columnDndOverlay = '_11d1m5j0-3-2-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-2-0';"],
+  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-3-0';\nexport var columnDndOverlay = '_11d1m5j0-3-3-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,mBAAmB;AACvB,IAAI,+BAA+B;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.js

@@ -4,13 +4,8 @@ import { Checkbox } from "../../../../../forms/checkbox/Checkbox.js";
 import { getColumnLabel } from "../../../../utils/get-column-label.js";
 const ColumnVisibilityCheckbox = (props) => {
   const { column, enableCheckbox, currentState, onVisibilityChange } = props;
-  let dataDtName = "ColumnVisibilityShowColumn";
-  if (currentState === true) {
-    dataDtName = "ColumnVisibilityHideColumn";
-  } else if (currentState === "indeterminate") {
-    dataDtName = "ColumnVisibilityShowColumns";
-  }
   const columnName = getColumnLabel(column);
+  const dataDtProperties = `state:${currentState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ jsx(
     Checkbox,
     {
@@ -22,7 +17,8 @@ const ColumnVisibilityCheckbox = (props) => {
         }
       },
       className: styles.columnName,
-      "data-dt-name": dataDtName,
+      "data-dt-name": "ColumnSettingsShowHideColumn",
+      "data-dt-properties": dataDtProperties,
       children: columnName
     }
   );

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.tsx"],
-  "sourcesContent": ["import { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\n\ninterface ColumnVisibilityCheckboxProps {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<unknown, unknown>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport const ColumnVisibilityCheckbox = (\n  props: ColumnVisibilityCheckboxProps,\n): JSX.Element => {\n  const { column, enableCheckbox, currentState, onVisibilityChange } = props;\n\n  let dataDtName = 'ColumnVisibilityShowColumn';\n  if (currentState === true) {\n    dataDtName = 'ColumnVisibilityHideColumn';\n  } else if (currentState === 'indeterminate') {\n    dataDtName = 'ColumnVisibilityShowColumns';\n  }\n\n  const columnName = getColumnLabel(column);\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(column, currentState);\n        }\n      }}\n      className={styles.columnName}\n      data-dt-name={dataDtName}\n    >\n      {columnName}\n    </Checkbox>\n  );\n};\n"],
-  "mappings": "AA+CI;AA7CJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA6BxB,MAAM,2BAA2B,CACtC,UACgB;AAChB,QAAM,EAAE,QAAQ,gBAAgB,cAAc,mBAAmB,IAAI;AAErE,MAAI,aAAa;AACjB,MAAI,iBAAiB,MAAM;AACzB,iBAAa;AAAA,EACf,WAAW,iBAAiB,iBAAiB;AAC3C,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,eAAe,MAAM;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\n\ninterface ColumnVisibilityCheckboxProps {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<unknown, unknown>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport const ColumnVisibilityCheckbox = (\n  props: ColumnVisibilityCheckboxProps,\n): JSX.Element => {\n  const { column, enableCheckbox, currentState, onVisibilityChange } = props;\n\n  const columnName = getColumnLabel(column);\n  const dataDtProperties = `state:${currentState === true ? 'hide' : 'show'}`;\n\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(column, currentState);\n        }\n      }}\n      className={styles.columnName}\n      data-dt-name=\"ColumnSettingsShowHideColumn\"\n      data-dt-properties={dataDtProperties}\n    >\n      {columnName}\n    </Checkbox>\n  );\n};\n"],
+  "mappings": "AA0CI;AAxCJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA6BxB,MAAM,2BAA2B,CACtC,UACgB;AAChB,QAAM,EAAE,QAAQ,gBAAgB,cAAc,mBAAmB,IAAI;AAErE,QAAM,aAAa,eAAe,MAAM;AACxC,QAAM,mBAAmB,SAAS,iBAAiB,OAAO,SAAS,MAAM;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,sBAAoB;AAAA,MAEnB;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

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

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

@@ -1,8 +1,8 @@
 import "./DataTableColumnsList.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var noItemsFound = "_14dz1ui0-3-2-0";
-var virtualizationInnerContainer = "_14dz1ui4-3-2-0";
-var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-2-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-2-0", false: "_14dz1ui3-3-2-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-3-0";
+var virtualizationInnerContainer = "_14dz1ui4-3-3-0";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-3-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-3-0", false: "_14dz1ui3-3-3-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
 export {
   noItemsFound,
   virtualizationInnerContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-2-0';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-2-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-2-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-2-0',false:'_14dz1ui3-3-2-0'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-3-0';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-3-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-3-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-3-0',false:'_14dz1ui3-3-3-0'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,+BAA+B;AACnC,IAAI,gCAAgC,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }