@dynatrace/strato-components 3.0.1 → 3.1.1

package/tables/DataTable/features/RowInteractivity/RowInteractivity.css

@@ -1,4 +1,4 @@
-._15silbj0-3-0-1 {
+._15silbj0-3-1-1 {
   box-sizing: border-box;
   appearance: none;
   outline: 0;
@@ -7,7 +7,7 @@
   position: relative;
   cursor: pointer;
 }
-._15silbj0-3-0-1::after {
+._15silbj0-3-1-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -20,44 +20,44 @@
   pointer-events: none;
   z-index: 4;
 }
-._15silbj1-3-0-1::after {
+._15silbj1-3-1-1::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-0-1:hover {
+._15silbj1-3-1-1:hover {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-0-1:hover::after {
+._15silbj1-3-1-1:hover::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj3-3-0-1 {
+._15silbj3-3-1-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-0-1::after {
+._15silbj3-3-1-1::after {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-width: 0;
 }
-._15silbj4-3-0-1 {
+._15silbj4-3-1-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj4-3-0-1::after {
+._15silbj4-3-1-1::after {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._ytdpswb-3-0-1 ._14sp6az6-3-0-1._15silbj5-3-0-1::after {
+._ytdpswb-3-1-1 ._14sp6az6-3-1-1._15silbj5-3-1-1::after {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpswd-3-0-1 ._14sp6az6-3-0-1._15silbj5-3-0-1::after {
+._ytdpswd-3-1-1 ._14sp6az6-3-1-1._15silbj5-3-1-1::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._15silbj6-3-0-1 {
+._15silbj6-3-1-1 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-._15silbj7-3-0-1 {
+._15silbj7-3-1-1 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj7-3-0-1::after {
+._15silbj7-3-1-1::after {
   border-width: 0;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-primary-accent, #464cce), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }

package/tables/DataTable/features/RowInteractivity/RowInteractivity.js

@@ -106,12 +106,15 @@ function useRowInteractivityProps(row, scrollToIndex) {
       if (isRowDragging) {
         return;
       }
-      const { key } = event;
-      if (key === "Enter" && !isAutoActivationEnabled) {
-        event.preventDefault();
-        event.stopPropagation();
-        row.toggleActivated(event);
-        return;
+      const { key, target } = event;
+      if (key === "Enter" && !isAutoActivationEnabled && (target instanceof HTMLElement || target instanceof SVGElement)) {
+        const rowElement = target.closest('[role="row"]');
+        if (rowElement && !(0, import_is_target_interactive.isTargetInteractive)(rowElement, target)) {
+          event.preventDefault();
+          event.stopPropagation();
+          row.toggleActivated(event);
+          return;
+        }
       }
       let offset = null;
       switch (key) {

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

@@ -25,4 +25,4 @@ var import_DataTableVirtualizationContainer_css_ts_vanilla = require("../../comp
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
 var import_RowInteractivity_css_ts_vanilla = require("./RowInteractivity.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var interactiveRow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_15silbj0-3-0-1", variantClassNames: { active: { true: "_15silbj1-3-0-1", false: "_15silbj2-3-0-1" }, focus: { true: "_15silbj3-3-0-1" }, hovered: { true: "_15silbj4-3-0-1" }, contained: { true: "_15silbj5-3-0-1", false: "_15silbj6-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-0-1"]] });
+var interactiveRow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_15silbj0-3-1-1", variantClassNames: { active: { true: "_15silbj1-3-1-1", false: "_15silbj2-3-1-1" }, focus: { true: "_15silbj3-3-1-1" }, hovered: { true: "_15silbj4-3-1-1" }, contained: { true: "_15silbj5-3-1-1", false: "_15silbj6-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-1-1"]] });

package/tables/DataTable/features/RowOrder/RowOrder.css

@@ -1,11 +1,11 @@
-._or8s40-3-0-1 {
+._or8s40-3-1-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;
 }
-._or8s41-3-0-1 {
+._or8s41-3-1-1 {
   vertical-align: middle;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   padding-left: var(--dt-spacings-size-2, 2px);
@@ -14,21 +14,21 @@
   padding-bottom: 0;
   transition: none;
 }
-._or8s41-3-0-1:active {
+._or8s41-3-1-1:active {
   background: transparent;
 }
-._or8s41-3-0-1:hover {
+._or8s41-3-1-1:hover {
   background: transparent;
 }
-._or8s40-3-0-1 ._or8s41-3-0-1 {
+._or8s40-3-1-1 ._or8s41-3-1-1 {
   cursor: grabbing;
 }
-._or8s42-3-0-1 {
+._or8s42-3-1-1 {
   cursor: not-allowed;
 }
-._or8s43-3-0-1 {
+._or8s43-3-1-1 {
   cursor: grab;
 }
-._or8s44-3-0-1 {
+._or8s44-3-1-1 {
   opacity: 0.2;
 }

package/tables/DataTable/features/RowOrder/RowOrder.js

@@ -136,6 +136,7 @@ const RowDragHandleCell = ({
           when: "focus-visible"
         })
       ),
+      "data-dt-name": "RowOrderDragAndDropHandle",
       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/features/RowOrder/RowOrder.sty.js

@@ -25,6 +25,6 @@ __export(RowOrder_css_exports, {
 module.exports = __toCommonJS(RowOrder_css_exports);
 var import_RowOrder_css_ts_vanilla = require("./RowOrder.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var disabledNonTargetRow = "_or8s44-3-0-1";
-var dndHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_or8s41-3-0-1", variantClassNames: { disabled: { true: "_or8s42-3-0-1", false: "_or8s43-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-0-1";
+var disabledNonTargetRow = "_or8s44-3-1-1";
+var dndHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_or8s41-3-1-1", variantClassNames: { disabled: { true: "_or8s42-3-1-1", false: "_or8s43-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-1-1";

package/tables/DataTable/features/RowSelection/RowSelection.js

@@ -38,13 +38,7 @@ const ROW_SELECTION_COLUMN = {
   id: import_constants.DATA_TABLE_ROW_SELECTION_COLUMN_ID,
   alignment: "left",
   accessorFn: () => "",
-  header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_RowSelectionCells.RowSelectionHeader,
-    {
-      table,
-      resetBatchSelection
-    }
-  ),
+  header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RowSelectionCells.RowSelectionHeader, { table }),
   width: "content",
   minWidth: import_constants.DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
   enableSorting: false,
@@ -68,14 +62,6 @@ const ROW_SELECTION_COLUMN = {
   },
   cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RowSelectionCells.RowSelectionCell, { row })
 };
-let batchSelectionRowId = void 0;
-let previousSelectionRange = void 0;
-const resetBatchSelection = (event) => {
-  if ((batchSelectionRowId || previousSelectionRange) && !event.target.closest("[data-row-selection-checkbox]")) {
-    batchSelectionRowId = void 0;
-    previousSelectionRange = void 0;
-  }
-};
 const mutateRowIsSelected = (selectedRowIds, id, value, includeChildren, table) => {
   const row = table.getRow(id, true);
   if (!row.getShouldDisableRowSelection()) {
@@ -101,6 +87,25 @@ const mutateRowIsSelected = (selectedRowIds, id, value, includeChildren, table)
 };
 const DataTableRowSelection = {
   createTable(table) {
+    let _batchSelectionRowId = void 0;
+    let _previousSelectionRange = void 0;
+    table.resetBatchSelection = (event) => {
+      if (!(_batchSelectionRowId || _previousSelectionRange)) {
+        return;
+      }
+      const checkboxElement = event.target.closest(
+        "[data-row-selection-checkbox]"
+      );
+      if (checkboxElement === null) {
+        _batchSelectionRowId = void 0;
+        _previousSelectionRange = void 0;
+        return;
+      }
+      if (table.getRowVirtualizationContainer()?.contains(checkboxElement) === false) {
+        _batchSelectionRowId = void 0;
+        _previousSelectionRange = void 0;
+      }
+    };
     table.getToggleAllLimitedRowsSelectedHandler = () => {
       return (e) => {
         table.toggleAllLimitedRowsSelected(
@@ -298,28 +303,38 @@ const DataTableRowSelection = {
        * The batch selection reference is reset, once the user clicks anywhere in the table outside the checkboxes.
        */
       batchSelect(value, shiftKey) {
-        if (batchSelectionRowId === void 0 || !shiftKey) {
+        const selectSingleRow = () => {
           this.toggleSelected(value);
-          batchSelectionRowId = this.id;
-          previousSelectionRange = void 0;
+          _batchSelectionRowId = this.id;
+          _previousSelectionRange = void 0;
+        };
+        if (_batchSelectionRowId === void 0 || !shiftKey) {
+          selectSingleRow();
           return;
         }
         const flatRows = table.getRowOrderRowModel().flatRows;
         const firstSelectedIndex = flatRows.findIndex(
-          (flatRow) => batchSelectionRowId && flatRow.id === batchSelectionRowId
+          (flatRow) => _batchSelectionRowId && flatRow.id === _batchSelectionRowId
         );
         const currentSelectedIndex = flatRows.findIndex(
           (flatRow) => flatRow.id === this.id
         );
+        if (firstSelectedIndex === -1) {
+          selectSingleRow();
+          return;
+        }
         const startIndex = Math.min(firstSelectedIndex, currentSelectedIndex);
         const endIndex = Math.max(firstSelectedIndex, currentSelectedIndex);
         const shouldUpdateChildren = (idx) => endIndex === idx;
         table.setRowSelection((old) => {
           const rowSelection = { ...old };
           const firstSelectedCheckedValue = flatRows[firstSelectedIndex].getIsSelected();
-          if (previousSelectionRange) {
-            const start = previousSelectionRange.start;
-            const end = previousSelectionRange.end;
+          if (_previousSelectionRange) {
+            const start = _previousSelectionRange.start;
+            const end = Math.min(
+              _previousSelectionRange.end,
+              flatRows.length - 1
+            );
             for (let i = start; i <= end; i++) {
               mutateRowIsSelected(
                 rowSelection,
@@ -339,7 +354,7 @@ const DataTableRowSelection = {
               table
             );
           }
-          previousSelectionRange = firstSelectedCheckedValue ? { start: startIndex, end: endIndex } : void 0;
+          _previousSelectionRange = firstSelectedCheckedValue ? { start: startIndex, end: endIndex } : void 0;
           return rowSelection;
         });
       }

package/tables/DataTable/features/RowSelection/RowSelectionCells.d.ts

@@ -6,7 +6,6 @@ import { type Row, Table } from '../../hooks/useTable/types.js';
  */
 export declare function RowSelectionHeader(props: Readonly<{
     table: Table<unknown>;
-    resetBatchSelection: (ev: MouseEvent) => void;
 }>): import("react/jsx-runtime.js").JSX.Element;
 /**
  * DataTable row selection cell.

package/tables/DataTable/features/RowSelection/RowSelectionCells.js

@@ -30,7 +30,8 @@ var import_Tooltip = require("../../../../overlays/tooltip/Tooltip.js");
 var import_DataTableDefaultCell = require("../../components/DataTableDefaultCell.js");
 var import_messages = require("../../messages.js");
 function RowSelectionHeader(props) {
-  const { table, resetBatchSelection } = props;
+  const { table } = props;
+  const resetBatchSelection = table.resetBatchSelection;
   const value = getCheckboxValue(table);
   const isDisabled = isSelectAllDisabled(table);
   const intl = (0, import_react_intl.useIntl)();
@@ -66,13 +67,15 @@ function RowSelectionHeader(props) {
       }
     }
   }
+  const selectAllDtName = value === true ? "RowDeselectAll" : "RowSelectAll";
   const checkbox = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Checkbox.Checkbox,
     {
       value: isDisabled ? false : value,
       "aria-disabled": isDisabled,
       "aria-label": checkboxMessage,
-      onChange: (_, event) => toggleSelectAll(event)
+      onChange: (_, event) => toggleSelectAll(event),
+      "data-dt-name": selectAllDtName
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableDefaultCell.DataTableDefaultCell, { children: isDisabled ? checkbox : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: checkboxMessage, children: checkbox }) });
@@ -127,6 +130,7 @@ function RowSelectionCell(props) {
   const { row } = props;
   const intl = (0, import_react_intl.useIntl)();
   const isDisabled = row.getShouldDisableRowSelection();
+  const rowDtName = resolveCheckboxValue(row) === true ? "RowDeselect" : "RowSelect";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DataTableDefaultCell.DataTableDefaultCell,
     {
@@ -149,7 +153,8 @@ function RowSelectionCell(props) {
             }
             row.batchSelect(value, (event?.nativeEvent).shiftKey);
           },
-          "data-row-selection-checkbox": true
+          "data-row-selection-checkbox": true,
+          "data-dt-name": rowDtName
         }
       )
     }

package/tables/DataTable/features/RowSelection/row-selection-types.d.ts

@@ -159,6 +159,10 @@ export interface DataTableRowSelectionInstance {
      * Returns whether any rows in the table are selected.
      */
     getIsSomeRowsSelected: () => boolean;
+    /**
+     * Resets the batch selection state when clicking outside the checkboxes.
+     */
+    resetBatchSelection: (event: MouseEvent) => void;
 }
 /**
  * Extension interface to extend the types of the `Row` from the tanstack table.

package/tables/DataTable/features/Sorting/Sorting.css

@@ -1,55 +1,55 @@
-._cu1al70-3-0-1 {
+._cu1al70-3-1-1 {
   fill: currentColor;
   transition: transform 250ms ease-out;
   transform-origin: center;
   flex-shrink: 0;
   display: none;
 }
-._11pvd3z4-3-0-1 ._cu1al70-3-0-1 {
+._11pvd3z4-3-1-1 ._cu1al70-3-1-1 {
   display: inline;
 }
-._yj6voi0-3-0-1 ._cu1al70-3-0-1 {
+._yj6voi0-3-1-1 ._cu1al70-3-1-1 {
   order: -1;
 }
-._11pvd3z8-3-0-1._yj6voi0-3-0-1:not(._11pvd3zn-3-0-1) ._cu1al70-3-0-1 {
+._11pvd3z8-3-1-1._yj6voi0-3-1-1:not(._11pvd3zn-3-1-1) ._cu1al70-3-1-1 {
   order: 1;
 }
-._cu1al71-3-0-1 {
+._cu1al71-3-1-1 {
   transform: rotate(-180deg);
 }
-._11pvd3zn-3-0-1 ._14k72810-3-0-1 ~ ._cu1al72-3-0-1 {
+._11pvd3zn-3-1-1 ._14k72810-3-1-1 ~ ._cu1al72-3-1-1 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._11pvd3zn-3-0-1:not(._yj6voi0-3-0-1) ._cu1al72-3-0-1:last-child {
+._11pvd3zn-3-1-1:not(._yj6voi0-3-1-1) ._cu1al72-3-1-1:last-child {
   padding-right: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% - 6px) center;
 }
-._11pvd3zn-3-0-1:where(._yj6voi0-3-0-1) ._cu1al72-3-0-1:last-child {
+._11pvd3zn-3-1-1:where(._yj6voi0-3-1-1) ._cu1al72-3-1-1:last-child {
   padding-left: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% + 6px) center;
 }
-._11pvd3zn-3-0-1 ._14k72810-3-0-1 ~ ._cu1al73-3-0-1 {
+._11pvd3zn-3-1-1 ._14k72810-3-1-1 ~ ._cu1al73-3-1-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3zn-3-0-1:not(._yj6voi0-3-0-1) ._cu1al73-3-0-1:last-child {
+._11pvd3zn-3-1-1:not(._yj6voi0-3-1-1) ._cu1al73-3-1-1:last-child {
   padding-right: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% - 3px) center;
 }
-._11pvd3zn-3-0-1:where(._yj6voi0-3-0-1) ._cu1al73-3-0-1:last-child {
+._11pvd3zn-3-1-1:where(._yj6voi0-3-1-1) ._cu1al73-3-1-1:last-child {
   padding-left: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% + 3px) center;
 }
-._11pvd3zn-3-0-1 ._14k72810-3-0-1 ~ ._cu1al74-3-0-1 {
+._11pvd3zn-3-1-1 ._14k72810-3-1-1 ~ ._cu1al74-3-1-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zn-3-0-1:not(._yj6voi0-3-0-1) ._cu1al74-3-0-1:last-child {
+._11pvd3zn-3-1-1:not(._yj6voi0-3-1-1) ._cu1al74-3-1-1:last-child {
   padding-right: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% - 8px) center;
 }
-._11pvd3zn-3-0-1:where(._yj6voi0-3-0-1) ._cu1al74-3-0-1:last-child {
+._11pvd3zn-3-1-1:where(._yj6voi0-3-1-1) ._cu1al74-3-1-1:last-child {
   padding-left: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% + 8px) center;
 }

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

@@ -35,4 +35,4 @@ var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTa
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_Sorting_css_ts_vanilla = require("./Sorting.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var sortingArrow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_cu1al70-3-0-1", variantClassNames: { arrowUp: { true: "_cu1al71-3-0-1" }, rowDensity: { "default": "_cu1al72-3-0-1", condensed: "_cu1al73-3-0-1", comfortable: "_cu1al74-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var sortingArrow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_cu1al70-3-1-1", variantClassNames: { arrowUp: { true: "_cu1al71-3-1-1" }, rowDensity: { "default": "_cu1al72-3-1-1", condensed: "_cu1al73-3-1-1", comfortable: "_cu1al74-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });

package/tables/DataTable/features/Sorting/SortingHeaderButton.d.ts

@@ -6,5 +6,6 @@ import type { SortDirection } from '../../tanstack-table-core-override/src/index
  */
 export declare const SortingArrowIndicators: (props: PropsWithChildren<{
     isSorted?: false | SortDirection;
+    nextSortingOrder: false | SortDirection | undefined;
     rowDensity: "default" | "condensed" | "comfortable";
 }>) => JSX.Element;

package/tables/DataTable/features/Sorting/SortingHeaderButton.js

@@ -38,13 +38,20 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var styles = __toESM(require("./Sorting.sty.js"));
 var import_messages = require("../../messages.js");
 const SortingArrowIndicators = (props) => {
-  const { isSorted, rowDensity } = props;
+  const { isSorted, nextSortingOrder, rowDensity } = props;
   const intl = (0, import_react_intl.useIntl)();
+  let dataDtName = "ColumnHeaderSortIconUnsort";
+  if (nextSortingOrder === "asc") {
+    dataDtName = "ColumnHeaderSortIconAscending";
+  } else if (nextSortingOrder === "desc") {
+    dataDtName = "ColumnHeaderSortIconDescending";
+  }
   if (isSorted !== false) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_strato_icons.ArrowSmallDownIcon,
       {
         "data-sorticon": true,
+        "data-dt-name": dataDtName,
         style: { display: "inline" },
         className: (0, import_clsx.default)(
           styles.sortingArrow({ arrowUp: isSorted === "asc", rowDensity })
@@ -57,7 +64,8 @@ const SortingArrowIndicators = (props) => {
     {
       "data-sorticon": true,
       "aria-label": intl.formatMessage(import_messages.dataTableMessages.sortableColumnIcon),
-      className: styles.sortingArrow({ rowDensity })
+      className: styles.sortingArrow({ rowDensity }),
+      "data-dt-name": dataDtName
     }
   );
 };

package/tables/DataTable/features/Sorting/sort-types.js

@@ -44,7 +44,9 @@ function getSortType(columnType) {
     case "long":
     case "meterbar":
       return "number";
+    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
     case "date":
+    case "datetime":
       return "datetime";
     default:
       return "text";

package/tables/DataTable/features/SubRows/SubRowExpanders.js

@@ -74,6 +74,7 @@ function SubRowsHeaderExpander(props) {
       style: {
         color: import_colors.default.Text.Neutral.Subdued
       },
+      "data-dt-name": isAllRowsExpanded ? "SubRowCollapseAll" : "SubRowExpandAll",
       children: isAllRowsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PlusIcon, {})
     }
   );
@@ -137,6 +138,7 @@ function SubRowsCellExpander({
               row.toggleExpanded(!isExpanded);
               remeasureSubRowIndicatorColumn(table);
             },
+            "data-dt-name": isExpanded ? "SubRowCollapse" : "SubRowExpand",
             children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.MinusIcon, { size: import_constants.DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PlusIcon, { size: import_constants.DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE })
           }
         ) : null,

package/tables/DataTable/features/SubRows/SubRows.css

@@ -1,4 +1,4 @@
-._1udh2jz0-3-0-1 {
+._1udh2jz0-3-1-1 {
   position: relative;
   padding-left: 0;
   padding-right: var(--dt-spacings-size-8, 8px);
@@ -9,67 +9,67 @@
   flex-shrink: 0;
   align-items: center;
 }
-._yj6voi3-3-0-1 ._1udh2jz0-3-0-1 {
+._yj6voi3-3-1-1 ._1udh2jz0-3-1-1 {
   align-items: start;
 }
-._yj6voi5-3-0-1 ._1udh2jz0-3-0-1 {
+._yj6voi5-3-1-1 ._1udh2jz0-3-1-1 {
   align-items: end;
 }
-._11pvd3zo-3-0-1 ._1udh2jz1-3-0-1, ._14k72813-3-0-1 ._1udh2jz1-3-0-1 {
+._11pvd3zo-3-1-1 ._1udh2jz1-3-1-1, ._14k72813-3-1-1 ._1udh2jz1-3-1-1 {
   margin-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zp-3-0-1 ._1udh2jz1-3-0-1, ._14k72814-3-0-1 ._1udh2jz1-3-0-1 {
+._11pvd3zp-3-1-1 ._1udh2jz1-3-1-1, ._14k72814-3-1-1 ._1udh2jz1-3-1-1 {
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zq-3-0-1 ._1udh2jz1-3-0-1, ._14k72815-3-0-1 ._1udh2jz1-3-0-1 {
+._11pvd3zq-3-1-1 ._1udh2jz1-3-1-1, ._14k72815-3-1-1 ._1udh2jz1-3-1-1 {
   margin-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qua-3-0-1 ._1udh2jz2-3-0-1, ._14k72813-3-0-1 ._1udh2jz2-3-0-1 {
+._1ons7qua-3-1-1 ._1udh2jz2-3-1-1, ._14k72813-3-1-1 ._1udh2jz2-3-1-1 {
   padding-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qub-3-0-1 ._1udh2jz2-3-0-1, ._14k72814-3-0-1 ._1udh2jz2-3-0-1 {
+._1ons7qub-3-1-1 ._1udh2jz2-3-1-1, ._14k72814-3-1-1 ._1udh2jz2-3-1-1 {
   padding-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7quc-3-0-1 ._1udh2jz2-3-0-1, ._14k72815-3-0-1 ._1udh2jz2-3-0-1 {
+._1ons7quc-3-1-1 ._1udh2jz2-3-1-1, ._14k72815-3-1-1 ._1udh2jz2-3-1-1 {
   padding-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-[data-columntype='sparkline'] ._1udh2jz2-3-0-1 {
+[data-columntype='sparkline'] ._1udh2jz2-3-1-1 {
   align-items: center;
 }
-._1udh2jz3-3-0-1 {
+._1udh2jz3-3-1-1 {
   position: absolute;
   left: 0;
   overflow: hidden;
   stroke: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qua-3-0-1 ._1udh2jz3-3-0-1, ._14k72813-3-0-1 ._1udh2jz3-3-0-1 {
+._1ons7qua-3-1-1 ._1udh2jz3-3-1-1, ._14k72813-3-1-1 ._1udh2jz3-3-1-1 {
   top: calc(var(--dt-spacings-size-8, 8px) * -1);
   bottom: calc(var(--dt-spacings-size-8, 8px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-8, 8px)));
 }
-._1ons7qub-3-0-1 ._1udh2jz3-3-0-1, ._14k72814-3-0-1 ._1udh2jz3-3-0-1 {
+._1ons7qub-3-1-1 ._1udh2jz3-3-1-1, ._14k72814-3-1-1 ._1udh2jz3-3-1-1 {
   top: calc(var(--dt-spacings-size-2, 2px) * -1);
   bottom: calc(var(--dt-spacings-size-2, 2px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-2, 2px)));
 }
-._1ons7quc-3-0-1 ._1udh2jz3-3-0-1, ._14k72815-3-0-1 ._1udh2jz3-3-0-1 {
+._1ons7quc-3-1-1 ._1udh2jz3-3-1-1, ._14k72815-3-1-1 ._1udh2jz3-3-1-1 {
   top: calc(var(--dt-spacings-size-12, 12px) * -1);
   bottom: calc(var(--dt-spacings-size-12, 12px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-12, 12px)));
 }
-._1udh2jz4-3-0-1 {
+._1udh2jz4-3-1-1 {
   right: var(--dt-spacings-size-16, 16px);
 }
-._1udh2jz5-3-0-1 {
+._1udh2jz5-3-1-1 {
   right: calc(20 + var(--dt-spacings-size-16, 16px));
 }
-._1udh2jz6-3-0-1 {
+._1udh2jz6-3-1-1 {
   appearance: none;
   border: 0;
   line-height: 0;
@@ -84,10 +84,10 @@
   height: max-content;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1udh2jz6-3-0-1:not([disabled]):hover {
+._1udh2jz6-3-1-1:not([disabled]):hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1udh2jz6-3-0-1[disabled] {
+._1udh2jz6-3-1-1[disabled] {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }

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

@@ -40,8 +40,8 @@ var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTa
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_SubRows_css_ts_vanilla = require("./SubRows.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var expandButtonCellWrapper = "_1udh2jz2-3-0-1 _1udh2jz0-3-0-1";
-var expandButtonHeaderCellWrapper = "_1udh2jz1-3-0-1 _1udh2jz0-3-0-1";
-var expandIndentSvg = "_1udh2jz3-3-0-1";
-var expandIndentSvgSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1udh2jz4-3-0-1", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var expanderButton = "_1udh2jz6-3-0-1 _z0fq9b4-3-0-1 _z0fq9bc-3-0-1 _z0fq9b6-3-0-1 _z0fq9b8-3-0-1";
+var expandButtonCellWrapper = "_1udh2jz2-3-1-1 _1udh2jz0-3-1-1";
+var expandButtonHeaderCellWrapper = "_1udh2jz1-3-1-1 _1udh2jz0-3-1-1";
+var expandIndentSvg = "_1udh2jz3-3-1-1";
+var expandIndentSvgSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1udh2jz4-3-1-1", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var expanderButton = "_1udh2jz6-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9b8-3-1-1";

package/tables/DataTable/features/Thresholds/Thresholds.css

@@ -1,4 +1,4 @@
-._1jrjqrd1-3-0-1 ._1jrjqrd2-3-0-1::before {
+._1jrjqrd1-3-1-1 ._1jrjqrd2-3-1-1::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -8,5 +8,5 @@
   width: var(--dt-spacings-size-4, 4px);
   left: var(--dt-spacings-size-0, 0);
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
-  background-color: var(--_1jrjqrd0-3-0-1);
+  background-color: var(--_1jrjqrd0-3-1-1);
 }

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

@@ -24,6 +24,6 @@ __export(Thresholds_css_exports, {
 });
 module.exports = __toCommonJS(Thresholds_css_exports);
 var import_Thresholds_css_ts_vanilla = require("./Thresholds.css");
-var hasPillThresholds = "_1jrjqrd1-3-0-1";
-var thresholdPill = "_1jrjqrd2-3-0-1";
-var thresholdPillColor = "var(--_1jrjqrd0-3-0-1)";
+var hasPillThresholds = "_1jrjqrd1-3-1-1";
+var thresholdPill = "_1jrjqrd2-3-1-1";
+var thresholdPillColor = "var(--_1jrjqrd0-3-1-1)";