@dynatrace/strato-components 3.4.1 → 3.5.2

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

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

@@ -59,6 +59,29 @@ function removeHoverStyles(virtualizationContainer) {
 function addHoverStyles(row) {
   row.classList.add(styles.interactiveRow.classNames.variants.hovered.true);
 }
+function applyHoverStylesByRowId(virtualizationContainer, rowId) {
+  if (!virtualizationContainer) {
+    return;
+  }
+  const rowElement = virtualizationContainer.querySelector(
+    `[data-rowid="${CSS.escape(rowId)}"]`
+  );
+  if (rowElement) {
+    addHoverStyles(rowElement);
+  }
+}
+function maintainOpenMenuRowHover(table, virtualizationContainer) {
+  const openMenuRowId = table.getOpenMenuRowId();
+  if (openMenuRowId === null) {
+    return false;
+  }
+  if (table.getHoveredRow() !== openMenuRowId) {
+    table.setHoveredRow(openMenuRowId);
+    removeHoverStyles(virtualizationContainer);
+    applyHoverStylesByRowId(virtualizationContainer, openMenuRowId);
+  }
+  return true;
+}
 function useRowInteractivityProps(row, scrollToIndex) {
   const table = (0, import_DataTableContext.useDataTable)();
   const intl = (0, import_react_intl.useIntl)();
@@ -253,6 +276,9 @@ const DataTableRowInteractivity = {
         if (target instanceof HTMLElement && target.dataset.trigger === "context-action") {
           return;
         }
+        if (maintainOpenMenuRowHover(table, virtualizationContainer)) {
+          return;
+        }
         table.setHoveredRow(null);
         removeHoverStyles(virtualizationContainer);
         return;
@@ -267,8 +293,12 @@ const DataTableRowInteractivity = {
       if (table.options.enableRowInteractivity !== true) {
         return;
       }
+      const virtualizationContainer = table.getRowVirtualizationContainer();
+      if (maintainOpenMenuRowHover(table, virtualizationContainer)) {
+        return;
+      }
       table.setHoveredRow(null);
-      removeHoverStyles(table.getRowVirtualizationContainer());
+      removeHoverStyles(virtualizationContainer);
     };
     table.handleInteractiveRowClick = (event) => {
       if (table.options.enableRowInteractivity !== true) {

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

@@ -20,8 +20,9 @@ __export(RowInteractivity_css_exports, {
   interactiveRow: () => interactiveRow
 });
 module.exports = __toCommonJS(RowInteractivity_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("../../components/DataTableVirtualizationContainer.css");
 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-4-1", variantClassNames: { active: { true: "_15silbj1-3-4-1", false: "_15silbj2-3-4-1" }, focus: { true: "_15silbj3-3-4-1" }, hovered: { true: "_15silbj4-3-4-1" }, contained: { true: "_15silbj5-3-4-1", false: "_15silbj6-3-4-1" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-4-1"]] });
+var interactiveRow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_15silbj0-3-5-2", variantClassNames: { active: { true: "_15silbj1-3-5-2", false: "_15silbj2-3-5-2" }, focus: { true: "_15silbj3-3-5-2" }, hovered: { true: "_15silbj4-3-5-2" }, contained: { true: "_15silbj5-3-5-2", false: "_15silbj6-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-5-2"]] });

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

@@ -1,11 +1,11 @@
-._or8s40-3-4-1 {
+._or8s40-3-5-2 {
   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-4-1 {
+._or8s41-3-5-2 {
   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-4-1:active {
+._or8s41-3-5-2:active {
   background: transparent;
 }
-._or8s41-3-4-1:hover {
+._or8s41-3-5-2:hover {
   background: transparent;
 }
-._or8s40-3-4-1 ._or8s41-3-4-1 {
+._or8s40-3-5-2 ._or8s41-3-5-2 {
   cursor: grabbing;
 }
-._or8s42-3-4-1 {
+._or8s42-3-5-2 {
   cursor: not-allowed;
 }
-._or8s43-3-4-1 {
+._or8s43-3-5-2 {
   cursor: grab;
 }
-._or8s44-3-4-1 {
+._or8s44-3-5-2 {
   opacity: 0.2;
 }

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

@@ -47,7 +47,7 @@ var import_row_order_utils = require("./row-order-utils.js");
 var styles = __toESM(require("./RowOrder.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
 var import_useControllableState = require("../../../../core/hooks/useControllableState.js");
-var import_useFocusContext = require("../../../../core/hooks/useFocusContext.js");
+var import_useModality = require("../../../../core/hooks/useModality.js");
 var import_focusRingStatic_css = require("../../../../core/styles/focusRingStatic.sty.js");
 var import_get_inert_value = require("../../../../core/utils/get-inert-value.js");
 var import_logging = require("../../../../core/utils/logging.js");
@@ -106,7 +106,7 @@ const RowDragHandleCell = ({
   isDraggingActive
 }) => {
   const intl = (0, import_react_intl.useIntl)();
-  const { modality } = (0, import_useFocusContext.useFocusContext)();
+  const modality = (0, import_useModality.useModality)();
   const { attributes, listeners } = (0, import_sortable.useSortable)({
     id: rowId
   });
@@ -128,11 +128,12 @@ const RowDragHandleCell = ({
         styles.dndHandle({
           disabled
         }),
-        // also add the focus ring to the dragged row if the original drag handle is currently keyboard focused
+        // Apply the focus ring unconditionally (when: 'always')
+        // to the dragged row's handle during keyboard dragging.
         isKeyboardDragging && (0, import_focusRingStatic_css.focusRingStatic)({
           minimal: false,
           color: "neutral",
-          when: "focus-visible"
+          when: "always"
         })
       ),
       "data-dt-name": "RowOrderDragAndDrop",
@@ -158,8 +159,8 @@ const ROW_DRAG_COLUMN = {
     hasCustomCellRenderer: true,
     hasCustomHeaderRenderer: true,
     builtinPlacement: "prefix",
-    cellDeps: () => {
-      return [];
+    cellDeps: (cell) => {
+      return [cell.row.getCanDrag()];
     }
   },
   cell: ({ row, table }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -222,6 +223,7 @@ function RowOrderingDragAndDropContext({
   rowSeparation
 }) {
   const table = (0, import_DataTableContext.useDataTable)();
+  const modality = (0, import_useModality.useModality)();
   const tableHeaderHeight = table.getTotalHeaderHeight();
   const sensors = (0, import_core.useSensors)(
     (0, import_core.useSensor)(import_core.MouseSensor, {}),
@@ -353,9 +355,12 @@ function RowOrderingDragAndDropContext({
     resetDragging();
     virtualizationContainer?.scrollBy({ top: 1, behavior: "smooth" });
     virtualizationContainer?.scrollBy({ top: -1, behavior: "smooth" });
-    requestAnimationFrame(
-      () => (0, import_row_order_utils.getDragHandleForRow)(tableGridElement, toIndex)?.focus()
-    );
+    requestAnimationFrame(() => {
+      const dragHandle = (0, import_row_order_utils.getDragHandleForRow)(tableGridElement, toIndex);
+      dragHandle?.focus(
+        modality !== "keyboard" ? { focusVisible: false } : void 0
+      );
+    });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_core.DndContext,

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

@@ -24,6 +24,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-4-1";
-var dndHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_or8s41-3-4-1", variantClassNames: { disabled: { true: "_or8s42-3-4-1", false: "_or8s43-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-4-1";
+var disabledNonTargetRow = "_or8s44-3-5-2";
+var dndHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_or8s41-3-5-2", variantClassNames: { disabled: { true: "_or8s42-3-5-2", false: "_or8s43-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-5-2";

package/tables/DataTable/features/RowOrder/row-order-utils.js

@@ -43,6 +43,7 @@ __export(row_order_utils_exports, {
 module.exports = __toCommonJS(row_order_utils_exports);
 var import_animations = __toESM(require("@dynatrace/strato-design-tokens/animations"));
 var import_RowOrder_css = require("./RowOrder.sty.js");
+var import_data_table_border_width = require("../../../utils/data-table-border-width.js");
 var import_constants = require("../../constants.js");
 let lastAffectedRows = /* @__PURE__ */ new Set();
 function transformRowOnDragOver(table, event, rowOrder, rowSeparationNone, activeRow) {
@@ -298,8 +299,8 @@ function createRestrictToTableRowAreaModifier(tableHeaderHeight, containedVarian
     transform.x = 0;
     const parentRect = virtualizationContainer.getBoundingClientRect();
     const verticalBounds = {
-      top: containedVariant ? parentRect?.top + tableHeaderHeight + import_constants.DATA_TABLE_BORDER_WIDTH : parentRect?.top + tableHeaderHeight,
-      bottom: containedVariant ? parentRect?.bottom - import_constants.DATA_TABLE_BORDER_WIDTH : parentRect?.bottom
+      top: containedVariant ? parentRect?.top + tableHeaderHeight + (0, import_data_table_border_width.getDataTableBorderWidth)() : parentRect?.top + tableHeaderHeight,
+      bottom: containedVariant ? parentRect?.bottom - (0, import_data_table_border_width.getDataTableBorderWidth)() : parentRect?.bottom
     };
     return restrictToVerticalBounds(
       transform,

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

@@ -1,4 +1,4 @@
-._cu1al70-3-4-1 {
+._cu1al70-3-5-2 {
   display: inline-flex;
   align-items: center;
   flex-direction: row;
@@ -10,120 +10,120 @@
   overflow: hidden;
   transform: translateY(2px);
 }
-._yj6voi4-3-4-1 ._cu1al70-3-4-1 {
+._yj6voi4-3-5-2 ._cu1al70-3-5-2 {
   transform: translateY(0);
 }
-._yj6voi5-3-4-1 ._cu1al70-3-4-1 {
+._yj6voi5-3-5-2 ._cu1al70-3-5-2 {
   transform: translateY(-2px);
 }
-._yj6voi1-3-4-1 ._cu1al70-3-4-1, ._yj6voi2-3-4-1 ._cu1al70-3-4-1 {
+._yj6voi1-3-5-2 ._cu1al70-3-5-2, ._yj6voi2-3-5-2 ._cu1al70-3-5-2 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._yj6voi0-3-4-1 ._cu1al70-3-4-1 {
+._yj6voi0-3-5-2 ._cu1al70-3-5-2 {
   order: -1;
   flex-direction: row-reverse;
   margin-right: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3za-3-4-1 ._14k72810-3-4-1 ~ ._cu1al70-3-4-1 {
+._11pvd3za-3-5-2 ._14k72810-3-5-2 ~ ._cu1al70-3-5-2 {
   margin-top: var(--dt-spacings-size-8, 8px);
   margin-bottom: var(--dt-spacings-size-8, 8px);
 }
-._11pvd3za-3-4-1:not(._yj6voi0-3-4-1, ._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3za-3-5-2:not(._yj6voi0-3-5-2, ._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-right: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3za-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3za-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-left: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zb-3-4-1 ._14k72810-3-4-1 ~ ._cu1al70-3-4-1 {
+._11pvd3zb-3-5-2 ._14k72810-3-5-2 ~ ._cu1al70-3-5-2 {
   margin-top: var(--dt-spacings-size-2, 2px);
   margin-bottom: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3zb-3-4-1:not(._yj6voi0-3-4-1, ._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3zb-3-5-2:not(._yj6voi0-3-5-2, ._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-right: var(--dt-spacings-size-6, 6px);
 }
-._11pvd3zb-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3zb-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-left: var(--dt-spacings-size-6, 6px);
 }
-._11pvd3zc-3-4-1 ._14k72810-3-4-1 ~ ._cu1al70-3-4-1 {
+._11pvd3zc-3-5-2 ._14k72810-3-5-2 ~ ._cu1al70-3-5-2 {
   margin-top: var(--dt-spacings-size-12, 12px);
   margin-bottom: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zc-3-4-1:not(._yj6voi0-3-4-1, ._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3zc-3-5-2:not(._yj6voi0-3-5-2, ._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-right: var(--dt-spacings-size-16, 16px);
 }
-._11pvd3zc-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) ._cu1al70-3-4-1 {
+._11pvd3zc-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) ._cu1al70-3-5-2 {
   margin-left: var(--dt-spacings-size-16, 16px);
 }
-._11pvd3z9-3-4-1._yj6voi0-3-4-1:not(._11pvd3zx-3-4-1) ._cu1al70-3-4-1 {
+._11pvd3z9-3-5-2._yj6voi0-3-5-2:not(._11pvd3zx-3-5-2) ._cu1al70-3-5-2 {
   order: 1;
 }
-._cu1al71-3-4-1 {
+._cu1al71-3-5-2 {
   transform: translateX(-4px);
 }
-._yj6voi0-3-4-1 ._cu1al71-3-4-1 {
+._yj6voi0-3-5-2 ._cu1al71-3-5-2 {
   transform: translateX(4px);
 }
-._cu1al72-3-4-1 {
+._cu1al72-3-5-2 {
   fill: currentColor;
   transition: transform 250ms ease-out;
   transform-origin: center;
   flex-shrink: 0;
   display: none;
 }
-._11pvd3z4-3-4-1 ._cu1al72-3-4-1 {
+._11pvd3z4-3-5-2 ._cu1al72-3-5-2 {
   display: inline;
 }
-:where(._yj6voi1-3-4-1,._yj6voi2-3-4-1) > ._cu1al72-3-4-1 {
+:where(._yj6voi1-3-5-2,._yj6voi2-3-5-2) > ._cu1al72-3-5-2 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._yj6voi0-3-4-1 ._cu1al72-3-4-1 {
+._yj6voi0-3-5-2 ._cu1al72-3-5-2 {
   order: -1;
 }
-._yj6voi0-3-4-1 > ._cu1al72-3-4-1 {
+._yj6voi0-3-5-2 > ._cu1al72-3-5-2 {
   margin-right: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3z9-3-4-1._yj6voi0-3-4-1:not(._11pvd3zx-3-4-1) ._cu1al72-3-4-1 {
+._11pvd3z9-3-5-2._yj6voi0-3-5-2:not(._11pvd3zx-3-5-2) ._cu1al72-3-5-2 {
   order: 1;
 }
-._11pvd3z9-3-4-1._yj6voi0-3-4-1:not(._11pvd3zx-3-4-1) ._cu1al70-3-4-1 ._cu1al72-3-4-1 {
+._11pvd3z9-3-5-2._yj6voi0-3-5-2:not(._11pvd3zx-3-5-2) ._cu1al70-3-5-2 ._cu1al72-3-5-2 {
   order: -1;
 }
-._cu1al73-3-4-1 {
+._cu1al73-3-5-2 {
   transform: rotate(-180deg);
 }
-._11pvd3zx-3-4-1 ._14k72810-3-4-1 ~ ._cu1al74-3-4-1 {
+._11pvd3zx-3-5-2 ._14k72810-3-5-2 ~ ._cu1al74-3-5-2 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._11pvd3zx-3-4-1:where(._yj6voi1-3-4-1, ._yj6voi2-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al74-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al74-3-5-2 {
   padding-right: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% - 6px) center;
 }
-._11pvd3zx-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al74-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al74-3-5-2 {
   padding-left: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% + 6px) center;
 }
-._11pvd3zx-3-4-1 ._14k72810-3-4-1 ~ ._cu1al75-3-4-1 {
+._11pvd3zx-3-5-2 ._14k72810-3-5-2 ~ ._cu1al75-3-5-2 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3zx-3-4-1:where(._yj6voi1-3-4-1, ._yj6voi2-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al75-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al75-3-5-2 {
   padding-right: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% - 3px) center;
 }
-._11pvd3zx-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al75-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al75-3-5-2 {
   padding-left: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% + 3px) center;
 }
-._11pvd3zx-3-4-1 ._14k72810-3-4-1 ~ ._cu1al76-3-4-1 {
+._11pvd3zx-3-5-2 ._14k72810-3-5-2 ~ ._cu1al76-3-5-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zx-3-4-1:where(._yj6voi1-3-4-1, ._yj6voi2-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al76-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al76-3-5-2 {
   padding-right: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% - 8px) center;
 }
-._11pvd3zx-3-4-1:where(._yj6voi0-3-4-1):not(._11pvd3z4-3-4-1:has([data-trigger="useraction"])) > ._cu1al76-3-4-1 {
+._11pvd3zx-3-5-2:where(._yj6voi0-3-5-2):not(._11pvd3z4-3-5-2:has([data-trigger="useraction"])) > ._cu1al76-3-5-2 {
   padding-left: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% + 8px) center;
 }

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

@@ -24,6 +24,7 @@ __export(Sorting_css_exports, {
 module.exports = __toCommonJS(Sorting_css_exports);
 var import_Alignment_css_ts_vanilla = require("../../components/Alignment.css");
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
+var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("../../components/DataTableVirtualizationContainer.css");
 var import_RowOrder_css_ts_vanilla = require("../RowOrder/RowOrder.css");
 var import_RowDetails_css_ts_vanilla = require("../RowDetails/RowDetails.css");
@@ -36,6 +37,6 @@ 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 multiSortIndicatorBubble = "_cu1al70-3-4-1";
-var sortOrderIndicator = "_cu1al71-3-4-1";
-var sortingArrow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_cu1al72-3-4-1", variantClassNames: { arrowUp: { true: "_cu1al73-3-4-1" }, rowDensity: { "default": "_cu1al74-3-4-1", condensed: "_cu1al75-3-4-1", comfortable: "_cu1al76-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var multiSortIndicatorBubble = "_cu1al70-3-5-2";
+var sortOrderIndicator = "_cu1al71-3-5-2";
+var sortingArrow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_cu1al72-3-5-2", variantClassNames: { arrowUp: { true: "_cu1al73-3-5-2" }, rowDensity: { "default": "_cu1al74-3-5-2", condensed: "_cu1al75-3-5-2", comfortable: "_cu1al76-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -1,4 +1,4 @@
-._1udh2jz0-3-4-1 {
+._1udh2jz0-3-5-2 {
   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-4-1 ._1udh2jz0-3-4-1 {
+._yj6voi3-3-5-2 ._1udh2jz0-3-5-2 {
   align-items: start;
 }
-._yj6voi5-3-4-1 ._1udh2jz0-3-4-1 {
+._yj6voi5-3-5-2 ._1udh2jz0-3-5-2 {
   align-items: end;
 }
-._11pvd3zy-3-4-1 ._1udh2jz1-3-4-1, ._14k72813-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3zy-3-5-2 ._1udh2jz1-3-5-2, ._14k72813-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zz-3-4-1 ._1udh2jz1-3-4-1, ._14k72814-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3zz-3-5-2 ._1udh2jz1-3-5-2, ._14k72814-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3z10-3-4-1 ._1udh2jz1-3-4-1, ._14k72815-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3z10-3-5-2 ._1udh2jz1-3-5-2, ._14k72815-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qua-3-4-1 ._1udh2jz2-3-4-1, ._14k72813-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7qua-3-5-2 ._1udh2jz2-3-5-2, ._14k72813-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qub-3-4-1 ._1udh2jz2-3-4-1, ._14k72814-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7qub-3-5-2 ._1udh2jz2-3-5-2, ._14k72814-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7quc-3-4-1 ._1udh2jz2-3-4-1, ._14k72815-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7quc-3-5-2 ._1udh2jz2-3-5-2, ._14k72815-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-[data-columntype='sparkline'] ._1udh2jz2-3-4-1 {
+[data-columntype='sparkline'] ._1udh2jz2-3-5-2 {
   align-items: center;
 }
-._1udh2jz3-3-4-1 {
+._1udh2jz3-3-5-2 {
   position: absolute;
   left: 0;
   overflow: hidden;
   stroke: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qua-3-4-1 ._1udh2jz3-3-4-1, ._14k72813-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7qua-3-5-2 ._1udh2jz3-3-5-2, ._14k72813-3-5-2 ._1udh2jz3-3-5-2 {
   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-4-1 ._1udh2jz3-3-4-1, ._14k72814-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7qub-3-5-2 ._1udh2jz3-3-5-2, ._14k72814-3-5-2 ._1udh2jz3-3-5-2 {
   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-4-1 ._1udh2jz3-3-4-1, ._14k72815-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7quc-3-5-2 ._1udh2jz3-3-5-2, ._14k72815-3-5-2 ._1udh2jz3-3-5-2 {
   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-4-1 {
+._1udh2jz4-3-5-2 {
   right: var(--dt-spacings-size-16, 16px);
 }
-._1udh2jz5-3-4-1 {
+._1udh2jz5-3-5-2 {
   right: calc(20 + var(--dt-spacings-size-16, 16px));
 }
-._1udh2jz6-3-4-1 {
+._1udh2jz6-3-5-2 {
   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-4-1:not([disabled]):hover {
+._1udh2jz6-3-5-2:not([disabled]):hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1udh2jz6-3-4-1[disabled] {
+._1udh2jz6-3-5-2[disabled] {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }

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

@@ -27,6 +27,7 @@ module.exports = __toCommonJS(SubRows_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("../../../../core/styles/focusRingStatic.css");
 var import_Alignment_css_ts_vanilla = require("../../components/Alignment.css");
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
+var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("../../components/DataTableVirtualizationContainer.css");
 var import_RowOrder_css_ts_vanilla = require("../RowOrder/RowOrder.css");
 var import_RowDetails_css_ts_vanilla = require("../RowDetails/RowDetails.css");
@@ -39,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-4-1 _1udh2jz0-3-4-1";
-var expandButtonHeaderCellWrapper = "_1udh2jz1-3-4-1 _1udh2jz0-3-4-1";
-var expandIndentSvg = "_1udh2jz3-3-4-1";
-var expandIndentSvgSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1udh2jz4-3-4-1", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var expanderButton = "_1udh2jz6-3-4-1 _z0fq9b4-3-4-1 _z0fq9bc-3-4-1 _z0fq9b6-3-4-1 _z0fq9b8-3-4-1";
+var expandButtonCellWrapper = "_1udh2jz2-3-5-2 _1udh2jz0-3-5-2";
+var expandButtonHeaderCellWrapper = "_1udh2jz1-3-5-2 _1udh2jz0-3-5-2";
+var expandIndentSvg = "_1udh2jz3-3-5-2";
+var expandIndentSvgSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1udh2jz4-3-5-2", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var expanderButton = "_1udh2jz6-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9b9-3-5-2";

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

@@ -1,4 +1,4 @@
-._1jrjqrd1-3-4-1 ._1jrjqrd2-3-4-1::before {
+._1jrjqrd1-3-5-2 ._1jrjqrd2-3-5-2::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-4-1);
+  background-color: var(--_1jrjqrd0-3-5-2);
 }

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

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

package/tables/DataTable/features/UserActions/FloatingMenu.js

@@ -88,6 +88,7 @@ function CellActionFloatingMenu() {
                 x: 0,
                 y: 0
               };
+              newState.openMenuRowId = null;
               return newState;
             });
           }