@dynatrace/strato-components 3.10.4 → 3.11.0

package/tables/DataTable/components/DataTableDragScrollLock.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTableDragScrollLock_exports = {};
+__export(DataTableDragScrollLock_exports, {
+  DataTableDragScrollLock: () => DataTableDragScrollLock
+});
+module.exports = __toCommonJS(DataTableDragScrollLock_exports);
+var import_react_store = require("@tanstack/react-store");
+var import_react = require("react");
+function DataTableDragScrollLock({
+  table,
+  parentRef
+}) {
+  const isRowDragging = (0, import_react_store.useSelector)(
+    table.atoms.draggingRowInfo,
+    (draggingRowInfo) => draggingRowInfo !== null
+  );
+  const isColumnDragging = (0, import_react_store.useSelector)(
+    table.atoms.draggedHeaderColumn,
+    (draggedHeaderColumn) => draggedHeaderColumn !== null
+  );
+  const rowVirtualizer = table.getRowVirtualizer();
+  const columnVirtualizer = table.getColumnVirtualizer();
+  (0, import_react.useEffect)(() => {
+    const parent = parentRef.current;
+    const currentOffset = rowVirtualizer?.scrollOffset;
+    const abort = new AbortController();
+    if (isColumnDragging) {
+      parent?.addEventListener(
+        "scroll",
+        () => rowVirtualizer?.scrollToOffset(currentOffset ?? 0),
+        { signal: abort.signal }
+      );
+    }
+    return () => abort.abort();
+  }, [isColumnDragging, parentRef, rowVirtualizer]);
+  (0, import_react.useEffect)(() => {
+    const parent = parentRef.current;
+    const currentOffset = columnVirtualizer?.scrollOffset;
+    const abort = new AbortController();
+    if (isRowDragging) {
+      parent?.addEventListener(
+        "scroll",
+        () => columnVirtualizer?.scrollToOffset(currentOffset ?? 0),
+        { signal: abort.signal }
+      );
+    }
+    return () => abort.abort();
+  }, [columnVirtualizer, isRowDragging, parentRef]);
+  return null;
+}

package/tables/DataTable/components/DataTableEmptyState.css

@@ -1,4 +1,4 @@
-._lvf8p50-3-10-4 {
+._lvf8p50-3-11-0 {
   position: sticky;
   left: 0;
   top: 0;
@@ -6,25 +6,25 @@
   height: 100%;
   box-sizing: border-box;
 }
-._lvf8p51-3-10-4 {
+._lvf8p51-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-12, 12px);
 }
-._lvf8p52-3-10-4 {
+._lvf8p52-3-11-0 {
   min-width: 200px;
 }
-._lvf8p53-3-10-4 {
+._lvf8p53-3-11-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._lvf8p54-3-10-4 {
+._lvf8p54-3-11-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._lvf8p55-3-10-4 {
+._lvf8p55-3-11-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }

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

@@ -23,5 +23,5 @@ __export(DataTableEmptyState_css_exports, {
 module.exports = __toCommonJS(DataTableEmptyState_css_exports);
 var import_DataTableEmptyState_css_ts_vanilla = require("./DataTableEmptyState.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var emptyState = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvf8p51-3-10-4", variantClassNames: { minWidth: { true: "_lvf8p52-3-10-4" }, rowDensity: { "default": "_lvf8p53-3-10-4", condensed: "_lvf8p54-3-10-4", comfortable: "_lvf8p55-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var stickyContainer = "_lvf8p50-3-10-4";
+var emptyState = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvf8p51-3-11-0", variantClassNames: { minWidth: { true: "_lvf8p52-3-11-0" }, rowDensity: { "default": "_lvf8p53-3-11-0", condensed: "_lvf8p54-3-11-0", comfortable: "_lvf8p55-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var stickyContainer = "_lvf8p50-3-11-0";

package/tables/DataTable/components/DataTableHeader.css

@@ -1,4 +1,4 @@
-._1kpe8zs0-3-10-4 {
+._1kpe8zs0-3-11-0 {
   display: grid;
   grid-template-rows: subgrid;
   grid-template-columns: subgrid;
@@ -12,6 +12,6 @@
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   box-shadow: inset 0 -2px 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1kpe8zs1-3-10-4 {
+._1kpe8zs1-3-11-0 {
   display: contents;
 }

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

@@ -22,5 +22,5 @@ __export(DataTableHeader_css_exports, {
 });
 module.exports = __toCommonJS(DataTableHeader_css_exports);
 var import_DataTableHeader_css_ts_vanilla = require("./DataTableHeader.css");
-var header = "_1kpe8zs0-3-10-4";
-var headerRow = "_1kpe8zs1-3-10-4";
+var header = "_1kpe8zs0-3-11-0";
+var headerRow = "_1kpe8zs1-3-11-0";

package/tables/DataTable/components/DataTableHeaderCell.css

@@ -1,4 +1,4 @@
-._11pvd3zl-3-10-4 {
+._11pvd3zl-3-11-0 {
   all: unset;
   position: absolute;
   bottom: 0;
@@ -14,7 +14,7 @@
   z-index: 1;
   will-change: transform;
 }
-._11pvd3zl-3-10-4::after {
+._11pvd3zl-3-11-0::after {
   content: "";
   box-sizing: border-box;
   display: block;
@@ -24,36 +24,36 @@
   top: var(--dt-spacings-size-4, 4px);
   bottom: var(--dt-spacings-size-4, 4px);
 }
-._11pvd3zl-3-10-4:hover::after, ._11pvd3zl-3-10-4:focus::after {
+._11pvd3zl-3-11-0:hover::after, ._11pvd3zl-3-11-0:focus::after {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
   width: 3px;
 }
-._11pvd3zm-3-10-4::after {
+._11pvd3zm-3-11-0::after {
   cursor: col-resize;
   background-color: var(--dt-colors-border-primary-accent, #464cce);
   width: 3px;
 }
-._11pvd3zo-3-10-4 {
+._11pvd3zo-3-11-0 {
   width: var(--dt-spacings-size-8, 8px);
   transform: translateX(0);
 }
-._11pvd3zo-3-10-4::after {
+._11pvd3zo-3-11-0::after {
   left: auto;
   right: -1px;
 }
-._11pvd3zs-3-10-4 {
+._11pvd3zs-3-11-0 {
   left: 0;
   transform: translateX(-50%);
 }
-._11pvd3zs-3-10-4._11pvd3zg-3-10-4 {
+._11pvd3zs-3-11-0._11pvd3zg-3-11-0 {
   left: 0;
   width: var(--dt-spacings-size-8, 8px);
   transform: none;
 }
-._11pvd3zs-3-10-4._11pvd3zg-3-10-4::after {
+._11pvd3zs-3-11-0._11pvd3zg-3-11-0::after {
   left: 25%;
 }
-._11pvd3zt-3-10-4 {
+._11pvd3zt-3-11-0 {
   position: relative;
   display: flex;
   width: 100%;
@@ -70,51 +70,51 @@
   grid-area: header;
   overflow: visible;
 }
-._11pvd3zt-3-10-4:is(:focus, :focus-visible) {
+._11pvd3zt-3-11-0:is(:focus, :focus-visible) {
   outline: none;
 }
-._11pvd3zt-3-10-4._11pvd3z3-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zt-3-11-0._11pvd3z3-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   margin-right: -22px;
 }
-._11pvd3zt-3-10-4._11pvd3z4-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zt-3-11-0._11pvd3z4-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   margin-right: -30px;
 }
-._11pvd3zt-3-10-4._11pvd3z0-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zt-3-11-0._11pvd3z0-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   margin-right: -22px;
 }
-._11pvd3zt-3-10-4._11pvd3z0-3-10-4._11pvd3z2-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zt-3-11-0._11pvd3z0-3-11-0._11pvd3z2-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   margin-right: -44px;
 }
-._11pvd3zt-3-10-4._11pvd3z0-3-10-4._11pvd3z4-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zt-3-11-0._11pvd3z0-3-11-0._11pvd3z4-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   margin-right: -52px;
 }
-._14sp6az2-3-10-4 span[data-header-tooltip="true"]:hover + ._11pvd3zt-3-10-4 {
+._14sp6az2-3-11-0 span[data-header-tooltip="true"]:hover + ._11pvd3zt-3-11-0 {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3za-3-10-4._11pvd3zt-3-10-4 {
+._11pvd3za-3-11-0._11pvd3zt-3-11-0 {
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-10-4 ._11pvd3za-3-10-4._11pvd3zt-3-10-4 {
+._1jgl8s50-3-11-0 ._11pvd3za-3-11-0._11pvd3zt-3-11-0 {
   border-bottom-width: var(--dt-borders-width-default, 1px);
 }
-._1ku1w3z0-3-10-4 ._11pvd3za-3-10-4._11pvd3zt-3-10-4 {
+._1ku1w3z0-3-11-0 ._11pvd3za-3-11-0._11pvd3zt-3-11-0 {
   border-bottom: none;
 }
-._11pvd3zt-3-10-4[role="presentation"] {
+._11pvd3zt-3-11-0[role="presentation"] {
   padding: 0;
   overflow: hidden;
 }
-._11pvd3zt-3-10-4:not(._1ku1w3z0-3-10-4 ._11pvd3zt-3-10-4):has([data-sorticon]):hover {
+._11pvd3zt-3-11-0:not(._1ku1w3z0-3-11-0 ._11pvd3zt-3-11-0):has([data-sorticon]):hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3zt-3-10-4:has([data-trigger="useraction"]:hover) {
+._11pvd3zt-3-11-0:has([data-trigger="useraction"]:hover) {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._11pvd3zt-3-10-4:not(._11pvd3zd-3-10-4)[data-columntype="gantt"]::before, [data-columntype="gantt"] + ._11pvd3zt-3-10-4:not(._11pvd3zd-3-10-4)::before, [data-columntype="gantt"] + span > ._11pvd3zt-3-10-4:not(._11pvd3zd-3-10-4)::before {
+._11pvd3zt-3-11-0:not(._11pvd3zd-3-11-0)[data-columntype="gantt"]::before, [data-columntype="gantt"] + ._11pvd3zt-3-11-0:not(._11pvd3zd-3-11-0)::before, [data-columntype="gantt"] + span > ._11pvd3zt-3-11-0:not(._11pvd3zd-3-11-0)::before {
   content: "";
   display: block;
   position: absolute;
@@ -124,16 +124,16 @@
   bottom: var(--dt-spacings-size-0, 0);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-span:has(._11pvd3zo-3-10-4:is(:hover, :focus, ._11pvd3zm-3-10-4)) ~ ._11pvd3zt-3-10-4[role="presentation"]::before,
-     div:has(._11pvd3zo-3-10-4:is(:hover, :focus, ._11pvd3zm-3-10-4)) ~ ._11pvd3zt-3-10-4[role="presentation"]::before {
+span:has(._11pvd3zo-3-11-0:is(:hover, :focus, ._11pvd3zm-3-11-0)) ~ ._11pvd3zt-3-11-0[role="presentation"]::before,
+     div:has(._11pvd3zo-3-11-0:is(:hover, :focus, ._11pvd3zm-3-11-0)) ~ ._11pvd3zt-3-11-0[role="presentation"]::before {
   display: none;
 }
-._11pvd3zv-3-10-4 {
+._11pvd3zv-3-11-0 {
   position: sticky;
-  z-index: calc(2 + var(--_11pvd3zk-3-10-4));
-  left: var(--resizing-leftPosition, var(--_11pvd3zh-3-10-4));
+  z-index: calc(2 + var(--_11pvd3zk-3-11-0));
+  left: var(--resizing-leftPosition, var(--_11pvd3zh-3-11-0));
 }
-._11pvd3ze-3-10-4._11pvd3zv-3-10-4::after {
+._11pvd3ze-3-11-0._11pvd3zv-3-11-0::after {
   content: "";
   display: block;
   position: absolute;
@@ -144,12 +144,12 @@ span:has(._11pvd3zo-3-10-4:is(:hover, :focus, ._11pvd3zm-3-10-4)) ~ ._11pvd3zt-3
   max-width: 100%;
   right: 0;
 }
-._11pvd3zw-3-10-4 {
+._11pvd3zw-3-11-0 {
   position: sticky;
   z-index: 3;
-  right: var(--resizing-rightPosition, var(--_11pvd3zi-3-10-4));
+  right: var(--resizing-rightPosition, var(--_11pvd3zi-3-11-0));
 }
-._11pvd3zg-3-10-4._11pvd3zw-3-10-4::before {
+._11pvd3zg-3-11-0._11pvd3zw-3-11-0::before {
   content: "";
   display: block;
   position: absolute;
@@ -160,76 +160,76 @@ span:has(._11pvd3zo-3-10-4:is(:hover, :focus, ._11pvd3zm-3-10-4)) ~ ._11pvd3zt-3
   max-width: 100%;
   left: 0;
 }
-._11pvd3zx-3-10-4 {
+._11pvd3zx-3-11-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._11pvd3zx-3-10-4._11pvd3z6-3-10-4._11pvd3z0-3-10-4:not(._yj6voi0-3-10-4, ._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z6-3-11-0._11pvd3z0-3-11-0:not(._yj6voi0-3-11-0, ._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(12px + 22px);
 }
-._11pvd3zx-3-10-4._11pvd3z6-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z6-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(12px + 22px);
 }
-._11pvd3zx-3-10-4._11pvd3z7-3-10-4._11pvd3z0-3-10-4:not(._yj6voi0-3-10-4, ._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z7-3-11-0._11pvd3z0-3-11-0:not(._yj6voi0-3-11-0, ._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(6px + 22px);
 }
-._11pvd3zx-3-10-4._11pvd3z7-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z7-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(6px + 22px);
 }
-._11pvd3zx-3-10-4._11pvd3z8-3-10-4._11pvd3z0-3-10-4:not(._yj6voi0-3-10-4, ._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z8-3-11-0._11pvd3z0-3-11-0:not(._yj6voi0-3-11-0, ._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(16px + 22px);
 }
-._11pvd3zx-3-10-4._11pvd3z8-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zx-3-11-0._11pvd3z8-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(16px + 22px);
 }
-._11pvd3zy-3-10-4 {
+._11pvd3zy-3-11-0 {
   padding-top: 8px;
   padding-right: 12px;
   padding-bottom: 8px;
   padding-left: 12px;
 }
-._1jrjqrd1-3-10-4 ._11pvd3zd-3-10-4._11pvd3zy-3-10-4 {
+._1jrjqrd1-3-11-0 ._11pvd3zd-3-11-0._11pvd3zy-3-11-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._11pvd3zy-3-10-4._11pvd3z0-3-10-4:where(._yj6voi1-3-10-4, ._yj6voi2-3-10-4):not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zy-3-11-0._11pvd3z0-3-11-0:where(._yj6voi1-3-11-0, ._yj6voi2-3-11-0):not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(12px + 22px);
 }
-._11pvd3zy-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4, ._11pvd3z5-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zy-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0, ._11pvd3z5-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(12px + 22px);
 }
-._11pvd3zz-3-10-4 {
+._11pvd3zz-3-11-0 {
   padding-top: 2px;
   padding-right: 6px;
   padding-bottom: 2px;
   padding-left: 6px;
 }
-._1jrjqrd1-3-10-4 ._11pvd3zd-3-10-4._11pvd3zz-3-10-4 {
+._1jrjqrd1-3-11-0 ._11pvd3zd-3-11-0._11pvd3zz-3-11-0 {
   padding-left: calc(var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-4, 4px));
 }
-._11pvd3zz-3-10-4._11pvd3z0-3-10-4:where(._yj6voi1-3-10-4, ._yj6voi2-3-10-4):not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zz-3-11-0._11pvd3z0-3-11-0:where(._yj6voi1-3-11-0, ._yj6voi2-3-11-0):not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(6px + 22px);
 }
-._11pvd3zz-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4, ._11pvd3z5-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3zz-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0, ._11pvd3z5-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(6px + 22px);
 }
-._11pvd3z10-3-10-4 {
+._11pvd3z10-3-11-0 {
   padding-top: 12px;
   padding-right: 16px;
   padding-bottom: 12px;
   padding-left: 16px;
 }
-._1jrjqrd1-3-10-4 ._11pvd3zd-3-10-4._11pvd3z10-3-10-4 {
+._1jrjqrd1-3-11-0 ._11pvd3zd-3-11-0._11pvd3z10-3-11-0 {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._11pvd3z10-3-10-4._11pvd3z0-3-10-4:where(._yj6voi1-3-10-4, ._yj6voi2-3-10-4):not(._11pvd3z1-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3z10-3-11-0._11pvd3z0-3-11-0:where(._yj6voi1-3-11-0, ._yj6voi2-3-11-0):not(._11pvd3z1-3-11-0):has([data-trigger="useraction"]) {
   padding-right: calc(16px + 22px);
 }
-._11pvd3z10-3-10-4._11pvd3z0-3-10-4._yj6voi0-3-10-4:not(._11pvd3z1-3-10-4, ._11pvd3z5-3-10-4):has([data-trigger="useraction"]) {
+._11pvd3z10-3-11-0._11pvd3z0-3-11-0._yj6voi0-3-11-0:not(._11pvd3z1-3-11-0, ._11pvd3z5-3-11-0):has([data-trigger="useraction"]) {
   padding-left: calc(16px + 22px);
 }
-._11pvd3z11-3-10-4:not(._11pvd3zd-3-10-4, ._14sp6az3-3-10-4, ._11pvd3zg-3-10-4, ._11pvd3zf-3-10-4)::before {
+._11pvd3z11-3-11-0:not(._11pvd3zd-3-11-0, ._14sp6az3-3-11-0, ._11pvd3zg-3-11-0, ._11pvd3zf-3-11-0)::before {
   content: "";
   display: block;
   position: absolute;
@@ -239,40 +239,40 @@ span:has(._11pvd3zo-3-10-4:is(:hover, :focus, ._11pvd3zm-3-10-4)) ~ ._11pvd3zt-3
   bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._11pvd3z11-3-10-4._11pvd3zb-3-10-4::before {
+._11pvd3z11-3-11-0._11pvd3zb-3-11-0::before {
   bottom: 0;
 }
-._11pvd3z11-3-10-4._11pvd3zc-3-10-4::before {
+._11pvd3z11-3-11-0._11pvd3zc-3-11-0::before {
   top: 0;
 }
-._11pvd3z11-3-10-4:not(._11pvd3za-3-10-4) {
+._11pvd3z11-3-11-0:not(._11pvd3za-3-11-0) {
   border-bottom-width: var(--dt-borders-width-default, 1px);
   border-bottom-style: var(--dt-borders-style-default, solid);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z0-3-10-4 ._11pvd3z11-3-10-4::before {
+._1ku1w3z0-3-11-0 ._11pvd3z11-3-11-0::before {
   display: none;
 }
-._14sp6az2-3-10-4 span[data-header-tooltip="true"]:hover + ._11pvd3z14-3-10-4 {
+._14sp6az2-3-11-0 span[data-header-tooltip="true"]:hover + ._11pvd3z14-3-11-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._14sp6az2-3-10-4:not(._1ku1w3z0-3-10-4 ._11pvd3z14-3-10-4) span[data-header-tooltip="true"]:has([data-trigger="useraction"]):hover + ._11pvd3z14-3-10-4 {
+._14sp6az2-3-11-0:not(._1ku1w3z0-3-11-0 ._11pvd3z14-3-11-0) span[data-header-tooltip="true"]:has([data-trigger="useraction"]):hover + ._11pvd3z14-3-11-0 {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3z15-3-10-4 {
+._11pvd3z15-3-11-0 {
   width: fit-content;
   max-width: 100%;
 }
-._11pvd3zt-3-10-4._11pvd3z5-3-10-4._yj6voi0-3-10-4 ._11pvd3z15-3-10-4 {
+._11pvd3zt-3-11-0._11pvd3z5-3-11-0._yj6voi0-3-11-0 ._11pvd3z15-3-11-0 {
   order: 2;
 }
-._11pvd3z16-3-10-4 {
+._11pvd3z16-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3zt-3-10-4 button, ._11pvd3zt-3-10-4 a, ._11pvd3zt-3-10-4 [tabindex="0"], ._11pvd3zt-3-10-4 input, ._11pvd3zt-3-10-4 label {
+._11pvd3zt-3-11-0 button, ._11pvd3zt-3-11-0 a, ._11pvd3zt-3-11-0 [tabindex="0"], ._11pvd3zt-3-11-0 input, ._11pvd3zt-3-11-0 label {
   pointer-events: auto;
 }
-._11pvd3z13-3-10-4 > *, ._11pvd3z13-3-10-4 ._11pvd3z15-3-10-4 {
+._11pvd3z13-3-11-0 > *, ._11pvd3z13-3-11-0 ._11pvd3z15-3-11-0 {
   opacity: 0.2;
 }

package/tables/DataTable/components/DataTableHeaderCell.d.ts

@@ -36,7 +36,7 @@ interface DataTableHeaderCellProps<TData extends RowData> extends PropsWithChild
  * @returns the aria label for the header cell.
  * @internal
  */
-export declare function getHeaderAriaLabel({ intl, columnLabel, nextSortingOrder, canSort, columnDragAndDropMode, isCustomHeader, role, }: {
+export declare function getHeaderAriaLabel({ intl, columnLabel, nextSortingOrder, canSort, columnDragAndDropMode, isCustomHeader, role, isBuiltinColumn, }: {
     intl: IntlShape;
     columnLabel: string;
     nextSortingOrder: false | SortDirection | undefined;
@@ -44,6 +44,7 @@ export declare function getHeaderAriaLabel({ intl, columnLabel, nextSortingOrder
     columnDragAndDropMode: 'none' | 'enabled' | 'only';
     isCustomHeader: boolean;
     role: 'columnheader' | 'presentation';
+    isBuiltinColumn?: boolean;
 }): string | undefined;
 export declare function DataTableHeaderCell<TData extends RowData>(props: Readonly<DataTableHeaderCellProps<TData>>): JSX.Element | null;
 export declare namespace DataTableHeaderCell {

package/tables/DataTable/components/DataTableHeaderCell.js

@@ -33,6 +33,7 @@ __export(DataTableHeaderCell_exports, {
 module.exports = __toCommonJS(DataTableHeaderCell_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_store = require("@tanstack/react-store");
 var import_dynamic = require("@vanilla-extract/dynamic");
 var import_clsx = __toESM(require("clsx"));
 var import_react2 = require("react");
@@ -80,9 +81,10 @@ function getHeaderAriaLabel({
   canSort,
   columnDragAndDropMode,
   isCustomHeader,
-  role
+  role,
+  isBuiltinColumn
 }) {
-  if (role === "presentation") {
+  if (role === "presentation" || isBuiltinColumn) {
     return void 0;
   }
   if (canSort && columnDragAndDropMode === "none") {
@@ -186,8 +188,14 @@ function DataTableHeaderCell(props) {
   });
   const divRef = (0, import_react2.useRef)(null);
   const mergedRef = (0, import_useMergeRefs.useMergeRefs)([setNodeRef, divRef]);
-  const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();
-  const isActiveFloatingMenu = floatingMenuInfo?.rowId === null && floatingMenuInfo?.headerId === props.header.id;
+  const isActiveFloatingMenu = (0, import_react_store.useSelector)(
+    table.atoms.floatingMenuInfo,
+    (floatingMenuInfo) => floatingMenuInfo?.rowId === null && floatingMenuInfo?.headerId === props.header.id
+  );
+  const isColumnDragActive = (0, import_react_store.useSelector)(
+    table.atoms.draggedHeaderColumn,
+    (draggedHeaderColumn) => draggedHeaderColumn !== null
+  );
   const visualVariantConfig = table.atoms.visualVariantConfig?.get();
   const {
     handleCellMouseEnter,
@@ -219,8 +227,6 @@ function DataTableHeaderCell(props) {
     (sort) => sort.id === column.id
   );
   const multiSortPriority = sortedColumnsCount > 1 && columnSortIndex >= 0 ? columnSortIndex + 1 : void 0;
-  const draggedHeaderColumn = table.atoms.draggedHeaderColumn?.get() ?? null;
-  const isColumnDragActive = draggedHeaderColumn !== null;
   const isRightAligned = columnDef.alignment === "right";
   const renderVerticalDividers = visualVariantConfig?.verticalDividers || table.getHeaderGroups().length > 1 || table.options.enableColumnResizing && (canResize || // when resizing is enabled we need to render the vertical dividers for the spacer column as well
   column.id === import_constants.DATA_TABLE_SPACER_COLUMN_ID);
@@ -253,7 +259,8 @@ function DataTableHeaderCell(props) {
     canSort,
     columnDragAndDropMode,
     isCustomHeader: !hasDefaultHeaderRenderer,
-    role
+    role,
+    isBuiltinColumn: columnDef.meta?.builtin === true
   });
   const ariaSortDescription = getHeaderAriaSortDescription({
     intl,
@@ -352,7 +359,7 @@ function DataTableHeaderCell(props) {
           [headerCellStyles.subRowIndicatorColumn]: isSubRowIndicatorColumn,
           // add grab cursor styling only if column drag and drop is enabled but sorting is not
           [columnOrderStyles.headerDragAndDrop.enabled]: !isDragging && columnDragAndDropMode !== "none" && !props.header.getCanSortByHeaderClick(),
-          [columnOrderStyles.headerDragAndDrop.inactive]: draggedHeaderColumn !== null
+          [columnOrderStyles.headerDragAndDrop.inactive]: isColumnDragActive
         }
       ),
       "aria-sort": props.header.getAriaSortAttribute(),
@@ -393,7 +400,12 @@ function DataTableHeaderCell(props) {
             headerGroupOrRowId: headerGroupId,
             columnId,
             type: "header",
-            "aria-label": intl.formatMessage(import_messages.dataTableMessages.columnActionLabel),
+            "aria-label": intl.formatMessage(
+              import_messages.dataTableMessages.columnActionLabel,
+              {
+                column: columnLabel
+              }
+            ),
             "data-header-row": rowIndex,
             "data-column": columnIndex,
             onClose: handleCellActionsClose

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

@@ -49,26 +49,26 @@ var import_ColumnOrder_css_ts_vanilla = require("../features/ColumnOrder/ColumnO
 var import_Thresholds_css_ts_vanilla = require("../features/Thresholds/Thresholds.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("./DataTableHeaderCell.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var childHeader = "_11pvd3zc-3-10-4";
-var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-10-4", variantClassNames: { active: { true: "_11pvd3zm-3-10-4", false: "_11pvd3zn-3-10-4" }, last: { true: "_11pvd3zo-3-10-4", false: "_11pvd3zp-3-10-4" }, pinnedColumn: { false: "_11pvd3zq-3-10-4", left: "_11pvd3zr-3-10-4", right: "_11pvd3zs-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var customHeaderDensity = { "default": "_11pvd3z6-3-10-4", condensed: "_11pvd3z7-3-10-4", comfortable: "_11pvd3z8-3-10-4" };
-var firstColumn = "_11pvd3zd-3-10-4";
-var firstHeaderRow = "_11pvd3z9-3-10-4";
-var firstRightPinnedColumn = "_11pvd3zg-3-10-4";
-var firstUnpinnedColumn = "_11pvd3zf-3-10-4";
-var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-10-4", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-10-4", left: "_11pvd3zv-3-10-4", right: "_11pvd3zw-3-10-4" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-10-4", "default": "_11pvd3zy-3-10-4", condensed: "_11pvd3zz-3-10-4", comfortable: "_11pvd3z10-3-10-4" }, verticalDividers: { true: "_11pvd3z11-3-10-4", false: "_11pvd3z12-3-10-4" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-10-4", false: "_11pvd3z14-3-10-4" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
-var headerCellActiveInteraction = "_11pvd3z16-3-10-4";
-var headerCellEllipsis = "_11pvd3z15-3-10-4";
-var headerWidthVar = "var(--_11pvd3zj-3-10-4)";
-var hovered = "_11pvd3z0-3-10-4";
-var isMultiSortedHeader = "_11pvd3z4-3-10-4";
-var isSortedHeader = "_11pvd3z3-3-10-4";
-var lastHeaderRow = "_11pvd3za-3-10-4";
-var lastLeftPinnedColumn = "_11pvd3ze-3-10-4";
-var leftAdditionalElevationVar = "var(--_11pvd3zk-3-10-4)";
-var leftPositionVar = "var(--_11pvd3zh-3-10-4)";
-var narrow = "_11pvd3z1-3-10-4";
-var parentHeader = "_11pvd3zb-3-10-4";
-var rightPositionVar = "var(--_11pvd3zi-3-10-4)";
-var sortableHeader = "_11pvd3z2-3-10-4";
-var subRowIndicatorColumn = "_11pvd3z5-3-10-4";
+var childHeader = "_11pvd3zc-3-11-0";
+var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-11-0", variantClassNames: { active: { true: "_11pvd3zm-3-11-0", false: "_11pvd3zn-3-11-0" }, last: { true: "_11pvd3zo-3-11-0", false: "_11pvd3zp-3-11-0" }, pinnedColumn: { false: "_11pvd3zq-3-11-0", left: "_11pvd3zr-3-11-0", right: "_11pvd3zs-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var customHeaderDensity = { "default": "_11pvd3z6-3-11-0", condensed: "_11pvd3z7-3-11-0", comfortable: "_11pvd3z8-3-11-0" };
+var firstColumn = "_11pvd3zd-3-11-0";
+var firstHeaderRow = "_11pvd3z9-3-11-0";
+var firstRightPinnedColumn = "_11pvd3zg-3-11-0";
+var firstUnpinnedColumn = "_11pvd3zf-3-11-0";
+var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-11-0", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-11-0", left: "_11pvd3zv-3-11-0", right: "_11pvd3zw-3-11-0" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-11-0", "default": "_11pvd3zy-3-11-0", condensed: "_11pvd3zz-3-11-0", comfortable: "_11pvd3z10-3-11-0" }, verticalDividers: { true: "_11pvd3z11-3-11-0", false: "_11pvd3z12-3-11-0" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-11-0", false: "_11pvd3z14-3-11-0" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
+var headerCellActiveInteraction = "_11pvd3z16-3-11-0";
+var headerCellEllipsis = "_11pvd3z15-3-11-0";
+var headerWidthVar = "var(--_11pvd3zj-3-11-0)";
+var hovered = "_11pvd3z0-3-11-0";
+var isMultiSortedHeader = "_11pvd3z4-3-11-0";
+var isSortedHeader = "_11pvd3z3-3-11-0";
+var lastHeaderRow = "_11pvd3za-3-11-0";
+var lastLeftPinnedColumn = "_11pvd3ze-3-11-0";
+var leftAdditionalElevationVar = "var(--_11pvd3zk-3-11-0)";
+var leftPositionVar = "var(--_11pvd3zh-3-11-0)";
+var narrow = "_11pvd3z1-3-11-0";
+var parentHeader = "_11pvd3zb-3-11-0";
+var rightPositionVar = "var(--_11pvd3zi-3-11-0)";
+var sortableHeader = "_11pvd3z2-3-11-0";
+var subRowIndicatorColumn = "_11pvd3z5-3-11-0";