@dynatrace/strato-components 3.2.1 → 3.3.1

package/tables/DataTable/components/DataTableVirtualizationContainer.css

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

package/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -40,6 +40,7 @@ var import_DataTableContent = require("./DataTableContent.js");
 var import_DataTableStatePlaceholder = require("./DataTableStatePlaceholder.js");
 var styles = __toESM(require("./DataTableVirtualizationContainer.sty.js"));
 var import_useFontsUpdated = require("../../../core/hooks/useFontsUpdated.js");
+var import_logging = require("../../../core/utils/logging.js");
 var import_constants = require("../constants.js");
 var import_column_pinning_utils = require("../features/ColumnPinning/column-pinning-utils.js");
 var import_width_utils = require("../features/Layout/width-utils.js");
@@ -52,7 +53,13 @@ function DataTableVirtualizationContainer(props) {
   const totalHeaderHeight = table.getTotalHeaderHeight();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
   const getUniqueRowKey = (0, import_react.useCallback)(
-    (index) => rows[index].id,
+    (index) => {
+      if (index >= rows.length) {
+        (0, import_logging.devLog)(`[Table] Invalid row index ${index} (>= ${rows.length})`);
+        return -1;
+      }
+      return rows[index].id;
+    },
     [rows]
   );
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({

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

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

@@ -1,15 +1,15 @@
-._1rlvxpp0-3-2-1 {
+._1rlvxpp0-3-3-1 {
   padding: 0 var(--dt-spacings-size-8, 8px);
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-2-1 {
+._1rlvxpp1-3-3-1 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-2-1 {
+._1rlvxpp3-3-3-1 {
   margin-left: var(--dt-spacings-size-6, 6px);
 }
-._1rlvxpp4-3-2-1 {
+._1rlvxpp4-3-3-1 {
   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.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-2-1";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-2-1 _1rlvxpp0-3-2-1", "default": "_1rlvxpp0-3-2-1", comfortable: "_1rlvxpp3-3-2-1 _1rlvxpp0-3-2-1" };
+var selectionChip = "_1rlvxpp4-3-3-1";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-3-1 _1rlvxpp0-3-3-1", "default": "_1rlvxpp0-3-3-1", comfortable: "_1rlvxpp3-3-3-1 _1rlvxpp0-3-3-1" };

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.d.ts

@@ -15,4 +15,4 @@ export declare const ColumnOrderDragHandle: ({ columnKey, columnId, isDraggingAc
      * Whether dragging is currently active.
      */
     isDraggingActive: boolean;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.d.ts

@@ -11,4 +11,4 @@ export declare function ColumnOrderSettingsDragAndDropContext({ children, localC
     updateLocalColumnOrder: (newColumnOrder: string[]) => void;
     localColumnPinning: ColumnPinningState;
     itemVirtualizer: Virtualizer<HTMLDivElement, Element>;
-}>): import("react/jsx-runtime.js").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

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-2-1";
-var columnDndOverlay = "_11d1m5j0-3-2-1";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-2-1";
+var columnDndHandle = "_11d1m5j1-3-3-1";
+var columnDndOverlay = "_11d1m5j0-3-3-1";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-3-1";

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

@@ -37,13 +37,8 @@ var import_Checkbox = require("../../../../../forms/checkbox/Checkbox.js");
 var import_get_column_label = require("../../../../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 = (0, import_get_column_label.getColumnLabel)(column);
+  const dataDtProperties = `state:${currentState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Checkbox.Checkbox,
     {
@@ -55,7 +50,8 @@ const ColumnVisibilityCheckbox = (props) => {
         }
       },
       className: styles.columnName,
-      "data-dt-name": dataDtName,
+      "data-dt-name": "ColumnSettingsShowHideColumn",
+      "data-dt-properties": dataDtProperties,
       children: columnName
     }
   );

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

@@ -1,19 +1,19 @@
-._14dz1ui0-3-2-1 {
+._14dz1ui0-3-3-1 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-2-1 {
+._14dz1ui1-3-3-1 {
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-2-1 {
+._14dz1ui2-3-3-1 {
   max-height: calc(96vh - 200px - 56px);
 }
-._14dz1ui3-3-2-1 {
+._14dz1ui3-3-3-1 {
   max-height: calc(96vh - 200px);
 }
-._14dz1ui4-3-2-1 {
+._14dz1ui4-3-3-1 {
   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-2-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-2-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-2-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-2-1", false: "_14dz1ui3-3-2-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-3-1";
+var virtualizationInnerContainer = "_14dz1ui4-3-3-1";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-3-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-3-1", false: "_14dz1ui3-3-3-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });

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

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

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

@@ -59,5 +59,5 @@ interface DataTableColumnsListItemProps {
      */
     measureElement: (element: Element | null) => void;
 }
-export declare const DataTableColumnsListItem: import("react").MemoExoticComponent<(props: DataTableColumnsListItemProps) => import("react/jsx-runtime.js").JSX.Element>;
+export declare const DataTableColumnsListItem: import("react").MemoExoticComponent<(props: DataTableColumnsListItemProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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-2-1";
-var columnsListItem = "_13ypmcy0-3-2-1";
-var dragging = "_13ypmcy1-3-2-1";
+var columnName = "_13ypmcy2-3-3-1";
+var columnsListItem = "_13ypmcy0-3-3-1";
+var dragging = "_13ypmcy1-3-3-1";

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

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

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

@@ -72,7 +72,7 @@ const DataTableVisibilityFilterControls = (props) => {
   if (!showFilterControl && !showVisibilityControl) {
     return null;
   }
-  const dataDtName = showHideAllState === true ? "ColumnSettingsHideAll" : "ColumnSettingsShowAll";
+  const dataDtProperties = `state:${showHideAllState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -86,7 +86,8 @@ const DataTableVisibilityFilterControls = (props) => {
             value: showHideAllState,
             onChange: onShowHideAllChange,
             className: styles.showHideAll,
-            "data-dt-name": dataDtName,
+            "data-dt-name": "ColumnSettingsShowHideAll",
+            "data-dt-properties": dataDtProperties,
             children: intl.formatMessage(import_messages.dataTableMessages.showHideAll)
           }
         ),

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-2-1";
-var searchInput = "_1rh6hs01-3-2-1";
-var showHideAll = "_1rh6hs00-3-2-1";
+var filterControls = "_1rh6hs02-3-3-1";
+var searchInput = "_1rh6hs01-3-3-1";
+var showHideAll = "_1rh6hs00-3-3-1";

package/tables/DataTable/constants.d.ts

@@ -46,9 +46,11 @@ export declare const DATA_TABLE_ACTION_BUTTON_WIDTH = 24;
  * if the column width is below this threshold, no extra padding is added.
  */
 export declare const DATA_TABLE_NARROW_HEADER_THRESHOLDS: Record<RowDensity, number>;
-export declare const DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN = -20;
-export declare const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;
-export declare const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN: number;
+export declare const DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN = -22;
+export declare const DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN = -30;
+export declare const DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN = -22;
+export declare const DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN: number;
+export declare const DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN: number;
 /** Default row heights for different densities (px). */
 export declare const DATA_TABLE_ROW_HEIGHT_MAP: Record<RowDensity, number>;
 /** Default top/bottom padding values for different row densities (px). */

package/tables/DataTable/constants.js

@@ -42,9 +42,11 @@ __export(constants_exports, {
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR: () => DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
   DATA_TABLE_DOWNLOAD_CSV_FILE_NAME: () => DATA_TABLE_DOWNLOAD_CSV_FILE_NAME,
   DATA_TABLE_EMPTY_MIN_WIDTH: () => DATA_TABLE_EMPTY_MIN_WIDTH,
-  DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN: () => DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN,
-  DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN: () => DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN,
-  DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN: () => DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN,
+  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN: () => DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN: () => DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN: () => DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN: () => DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN: () => DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN,
   DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT: () => DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT,
   DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH: () => DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH,
   DATA_TABLE_INDEX_COLUMN_HEADER: () => DATA_TABLE_INDEX_COLUMN_HEADER,
@@ -129,9 +131,11 @@ const DATA_TABLE_NARROW_HEADER_THRESHOLDS = {
   default: 34 + 12,
   comfortable: 38 + 16
 };
-const DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN = -20;
-const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;
-const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN = DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN + DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN;
+const DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN = -22;
+const DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN = -30;
+const DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN = -22;
+const DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN = DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN + DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;
+const DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN = DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN + DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;
 const DATA_TABLE_ROW_HEIGHT_MAP = {
   condensed: 24,
   default: 36,

package/tables/DataTable/contexts/DataTableContext.d.ts

@@ -4,7 +4,7 @@ import type { DataTableColumnSettingsConfig } from '../public.api.js';
 /** @internal */
 export declare function DataTableContextProvider<T>(props: PropsWithChildren<{
     value: Table<T>;
-}>): import("react/jsx-runtime.js").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 /** @internal */
 export declare function useDataTable<T>(): Table<T>;
 /** @internal */

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

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-2-1 {
+._1ku1w3z0-3-3-1 {
   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-2-1::after {
+._1ku1w3z1-3-3-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-2-1::after {
+._1ku1w3z2-3-3-1::after {
   left: 0;
 }
-._1ku1w3z3-3-2-1::after {
+._1ku1w3z3-3-3-1::after {
   right: 0;
 }
-._1ku1w3z4-3-2-1::before {
+._1ku1w3z4-3-3-1::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-2-1 {
+._1ku1w3z5-3-3-1 {
   display: none;
 }
-._1ku1w3z6-3-2-1 {
+._1ku1w3z6-3-3-1 {
   cursor: grab;
 }
-._1ku1w3z7-3-2-1 {
+._1ku1w3z7-3-3-1 {
   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-2-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-2-1", enabled: "_1ku1w3z6-3-2-1", inactive: "_1ku1w3z7-3-2-1" };
-var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-2-1", variantClassNames: { left: { true: "_1ku1w3z2-3-2-1", false: "_1ku1w3z3-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-2-1";
+var columnDndOverlay = "_1ku1w3z0-3-3-1";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-3-1", enabled: "_1ku1w3z6-3-3-1", inactive: "_1ku1w3z7-3-3-1" };
+var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-3-1", variantClassNames: { left: { true: "_1ku1w3z2-3-3-1", false: "_1ku1w3z3-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-3-1";

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

@@ -86,6 +86,7 @@ function ColumnOrderDragAndDropContext({
       sensors,
       collisionDetection: import_column_order_dnd_utils.customCollisionDetection,
       modifiers: [restrictColumnDragAndDrop],
+      accessibility: { container: table.getRowVirtualizationContainer() },
       onDragStart: ({ active }) => {
         const draggedColumn = active.data.current?.column;
         table.setDraggedHeaderColumn(draggedColumn);

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

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

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

@@ -51,12 +51,34 @@ const getClientX = (event) => {
     return event.clientX;
   }
 };
+const getHeaderCellWidth = (resizeHandle) => resizeHandle.parentElement?.getBoundingClientRect().width;
+const clearResizerFocus = () => {
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur();
+  }
+};
 const DataTableColumnSizing = {
   createHeader(header, table) {
-    const clearResizerFocus = () => {
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
+    const clearContainerStyles = (container) => {
+      requestAnimationFrame(() => {
+        container?.style.removeProperty(
+          import_constants.DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR
+        );
+        document.body.classList.remove(styles.tableColumnResizing);
+        if (table.options.enableColumnPinning) {
+          container?.querySelectorAll(
+            `[style*=${import_constants.DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${import_constants.DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`
+          ).forEach((elem) => {
+            if (elem instanceof HTMLElement) {
+              const style = elem.style;
+              style.removeProperty(import_constants.DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);
+              style.removeProperty(
+                import_constants.DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR
+              );
+            }
+          });
+        }
+      });
     };
     const addPinnedColumnsPositionsStyles = (pinnedPosition, container, colId, newPosition) => {
       const resizingPositionVariable = pinnedPosition === "left" ? import_constants.DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR : import_constants.DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR;
@@ -102,27 +124,6 @@ const DataTableColumnSizing = {
         });
       }
     };
-    const clearContainerStyles = (container) => {
-      requestAnimationFrame(() => {
-        container?.style.removeProperty(
-          import_constants.DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR
-        );
-        document.body.classList.remove(styles.tableColumnResizing);
-        if (table.options.enableColumnPinning) {
-          container?.querySelectorAll(
-            `[style*=${import_constants.DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${import_constants.DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`
-          ).forEach((elem) => {
-            if (elem instanceof HTMLElement) {
-              const style = elem.style;
-              style.removeProperty(import_constants.DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);
-              style.removeProperty(
-                import_constants.DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR
-              );
-            }
-          });
-        }
-      });
-    };
     header.handleResize = (event) => {
       const column = table.getColumn(header.column.id);
       const canResize = column?.getCanResize();
@@ -144,17 +145,15 @@ const DataTableColumnSizing = {
       let columnIndex;
       if (pinnedPosition) {
         const pinnedState = table.getState().columnPinning;
-        const targetId = target.previousElementSibling?.getAttribute("data-headerid");
-        columnIndex = pinnedState[pinnedPosition]?.findIndex(
-          (id) => id === targetId
-        );
+        const headerId = target.parentElement?.dataset.headerid;
+        columnIndex = headerId ? pinnedState[pinnedPosition]?.indexOf(headerId) : void 0;
         if (columnIndex !== void 0 && pinnedState[pinnedPosition]?.length) {
           for (const element of pinnedState[pinnedPosition]) {
             pinnedColumnsWidths[pinnedPosition][element] = table.getColumnOrHeaderWidth(element);
           }
         }
       }
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }
@@ -338,7 +337,7 @@ const DataTableColumnSizing = {
       if (target instanceof HTMLElement === false) {
         return;
       }
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }
@@ -365,14 +364,7 @@ const DataTableColumnSizing = {
         if (!(target2 instanceof HTMLButtonElement)) {
           return;
         }
-        const targetRow = target2.dataset.headerRow;
-        const targetColumn = target2.dataset.column;
-        const parent = target2.parentElement;
-        const cell = parent?.querySelector(
-          `div[data-header-row="${CSS.escape(
-            String(targetRow)
-          )}"][data-column="${CSS.escape(String(targetColumn))}"]`
-        );
+        const cell = target2.parentElement;
         if (cell) {
           const { width } = cell.getBoundingClientRect();
           table.setColumnSizingInfo((old) => ({
@@ -407,7 +399,7 @@ const DataTableColumnSizing = {
         return;
       }
       event.persist();
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }