@dynatrace/strato-components 3.5.2 → 3.6.0

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

@@ -1,4 +1,4 @@
-._14k72810-3-5-2 {
+._14k72810-3-6-0 {
   height: 100%;
   width: 100%;
   max-width: 100%;
@@ -8,81 +8,81 @@
   align-items: inherit;
   overflow: hidden;
 }
-._11pvd3zt-3-5-2 ._14k72810-3-5-2 {
+._11pvd3zt-3-6-0 ._14k72810-3-6-0 {
   width: fit-content;
 }
-._14sp6az3-3-5-2+._14sp6az3-3-5-2 ._14k72810-3-5-2 {
+._14sp6az3-3-6-0+._14sp6az3-3-6-0 ._14k72810-3-6-0 {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._11pvd3z4-3-5-2._11pvd3z6-3-5-2 ._14k72810-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2), ._11pvd3z4-3-5-2 ._14k72810-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2):has(+ [data-trigger="useraction"]) {
+._11pvd3z4-3-6-0._11pvd3z6-3-6-0 ._14k72810-3-6-0:where(._yj6voi1-3-6-0, ._yj6voi2-3-6-0), ._11pvd3z4-3-6-0 ._14k72810-3-6-0:where(._yj6voi1-3-6-0, ._yj6voi2-3-6-0):has(+ [data-trigger="useraction"]) {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._11pvd3z4-3-5-2._11pvd3z6-3-5-2 ._14k72810-3-5-2._yj6voi0-3-5-2, ._11pvd3z4-3-5-2 ._14k72810-3-5-2._yj6voi0-3-5-2:has(+ [data-trigger="useraction"]) {
+._11pvd3z4-3-6-0._11pvd3z6-3-6-0 ._14k72810-3-6-0._yj6voi0-3-6-0, ._11pvd3z4-3-6-0 ._14k72810-3-6-0._yj6voi0-3-6-0:has(+ [data-trigger="useraction"]) {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-:where(._11pvd3zx-3-5-2):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-5-2:not(._yj6voi0-3-5-2) {
+:where(._11pvd3zx-3-6-0):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-6-0:not(._yj6voi0-3-6-0) {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-:where(._11pvd3zx-3-5-2):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-5-2._yj6voi0-3-5-2 {
+:where(._11pvd3zx-3-6-0):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-6-0._yj6voi0-3-6-0 {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._14k72811-3-5-2 {
+._14k72811-3-6-0 {
   white-space: normal;
   text-overflow: initial;
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._14k72812-3-5-2 {
+._14k72812-3-6-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
 }
-._14k72813-3-5-2 {
+._14k72813-3-6-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child:not(._14sp6az3-3-5-2) ._14k72813-3-5-2 {
+._1jrjqrd1-3-6-0 ._1ons7qu2-3-6-0:first-child:not(._14sp6az3-3-6-0) ._14k72813-3-6-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72813-3-5-2 {
+._1jrjqrd1-3-6-0 ._14sp6az3-3-6-0:first-child ._14k72813-3-6-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._14sp6az3-3-5-2 ._14k72813-3-5-2 {
+._14sp6az3-3-6-0 ._14k72813-3-6-0 {
   padding-right: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._14k72814-3-5-2 {
+._14k72814-3-6-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child:not(._14sp6az3-3-5-2) ._14k72814-3-5-2 {
+._1jrjqrd1-3-6-0 ._1ons7qu2-3-6-0:first-child:not(._14sp6az3-3-6-0) ._14k72814-3-6-0 {
   padding-left: calc(var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-4, 4px));
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72814-3-5-2 {
+._1jrjqrd1-3-6-0 ._14sp6az3-3-6-0:first-child ._14k72814-3-6-0 {
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._14sp6az3-3-5-2 ._14k72814-3-5-2 {
+._14sp6az3-3-6-0 ._14k72814-3-6-0 {
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-5-2 {
+._14k72815-3-6-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child::not(._14sp6az3-3-5-2) ._14k72815-3-5-2 {
+._1jrjqrd1-3-6-0 ._1ons7qu2-3-6-0:first-child::not(._14sp6az3-3-6-0) ._14k72815-3-6-0 {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72815-3-5-2 {
+._1jrjqrd1-3-6-0 ._14sp6az3-3-6-0:first-child ._14k72815-3-6-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._14sp6az3-3-5-2 ._14k72815-3-5-2 {
+._14sp6az3-3-6-0 ._14k72815-3-6-0 {
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }

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

@@ -12,7 +12,7 @@ import "../features/ColumnOrder/ColumnOrder.css";
 import "./DataTableHeaderCell.css";
 import "./DataTableDefaultCell.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var defaultCell = _7a468({ defaultClassName: "_14k72810-3-5-2", variantClassNames: { lineWrap: { true: "_14k72811-3-5-2", false: "_14k72812-3-5-2" }, rowDensity: { "default": "_14k72813-3-5-2", condensed: "_14k72814-3-5-2", comfortable: "_14k72815-3-5-2" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
+var defaultCell = _7a468({ defaultClassName: "_14k72810-3-6-0", variantClassNames: { lineWrap: { true: "_14k72811-3-6-0", false: "_14k72812-3-6-0" }, rowDensity: { "default": "_14k72813-3-6-0", condensed: "_14k72814-3-6-0", comfortable: "_14k72815-3-6-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
 export {
   defaultCell
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableDefaultCell.css.ts"],
-  "sourcesContent": ["import './Alignment.css';\nimport '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport '../features/ColumnOrder/ColumnOrder.css';\nimport './DataTableHeaderCell.css';\nimport './DataTableDefaultCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var defaultCell = _7a468({defaultClassName:'_14k72810-3-5-2',variantClassNames:{lineWrap:{true:'_14k72811-3-5-2',false:'_14k72812-3-5-2'},rowDensity:{'default':'_14k72813-3-5-2',condensed:'_14k72814-3-5-2',comfortable:'_14k72815-3-5-2'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
+  "sourcesContent": ["import './Alignment.css';\nimport '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport '../features/ColumnOrder/ColumnOrder.css';\nimport './DataTableHeaderCell.css';\nimport './DataTableDefaultCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var defaultCell = _7a468({defaultClassName:'_14k72810-3-6-0',variantClassNames:{lineWrap:{true:'_14k72811-3-6-0',false:'_14k72812-3-6-0'},rowDensity:{'default':'_14k72813-3-6-0',condensed:'_14k72814-3-6-0',comfortable:'_14k72815-3-6-0'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,WAAU,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._lvf8p50-3-5-2 {
+._lvf8p50-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   display: flex;
   align-items: center;
@@ -6,6 +6,6 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-12, 12px);
 }
-._lvf8p51-3-5-2 {
+._lvf8p51-3-6-0 {
   min-width: 200px;
 }

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

@@ -1,6 +1,6 @@
 import "./DataTableEmptyState.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var emptyState = _7a468({ defaultClassName: "_lvf8p50-3-5-2", variantClassNames: { minWidth: { true: "_lvf8p51-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var emptyState = _7a468({ defaultClassName: "_lvf8p50-3-6-0", variantClassNames: { minWidth: { true: "_lvf8p51-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   emptyState
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableEmptyState.css.ts"],
-  "sourcesContent": ["import './DataTableEmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emptyState = _7a468({defaultClassName:'_lvf8p50-3-5-2',variantClassNames:{minWidth:{true:'_lvf8p51-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './DataTableEmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emptyState = _7a468({defaultClassName:'_lvf8p50-3-6-0',variantClassNames:{minWidth:{true:'_lvf8p51-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1kpe8zs0-3-5-2 {
+._1kpe8zs0-3-6-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-5-2 {
+._1kpe8zs1-3-6-0 {
   display: contents;
 }

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

@@ -1,6 +1,6 @@
 import "./DataTableHeader.css";
-var header = "_1kpe8zs0-3-5-2";
-var headerRow = "_1kpe8zs1-3-5-2";
+var header = "_1kpe8zs0-3-6-0";
+var headerRow = "_1kpe8zs1-3-6-0";
 export {
   header,
   headerRow

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableHeader.css.ts"],
-  "sourcesContent": ["import './DataTableHeader.css';\nexport var header = '_1kpe8zs0-3-5-2';\nexport var headerRow = '_1kpe8zs1-3-5-2';"],
+  "sourcesContent": ["import './DataTableHeader.css';\nexport var header = '_1kpe8zs0-3-6-0';\nexport var headerRow = '_1kpe8zs1-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;",
   "names": []
 }

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

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

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

@@ -166,6 +166,8 @@ function DataTableHeaderCell(props) {
   });
   const divRef = useRef(null);
   const mergedRef = useMergeRefs([setNodeRef, divRef]);
+  const tableState = table.getState();
+  const isActiveFloatingMenu = tableState.floatingMenuInfo?.rowId === null && tableState.floatingMenuInfo?.headerId === header.id;
   const {
     handleCellMouseEnter,
     handleCellMouseLeave,
@@ -175,6 +177,7 @@ function DataTableHeaderCell(props) {
     headerCell: divRef.current,
     canSort,
     canColumnActions,
+    isActiveFloatingMenu,
     rowDensity,
     getToggleSortingHandler: column.getToggleSortingHandler
   });
@@ -182,7 +185,6 @@ function DataTableHeaderCell(props) {
     return null;
   }
   const headerGroupsLength = table.getHeaderGroups().length;
-  const tableState = table.getState();
   const activeSortEntries = tableState.sorting?.filter((sort) => {
     const col = table.getColumn(sort.id);
     return col?.getCanSort() ?? false;
@@ -200,7 +202,6 @@ function DataTableHeaderCell(props) {
   const isRightAligned = columnDef.alignment === "right";
   const renderVerticalDividers = 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 === DATA_TABLE_SPACER_COLUMN_ID);
-  const floatingMenuHeaderColumnId = tableState.floatingMenuInfo?.rowId === null && tableState.floatingMenuInfo?.headerId || void 0;
   const hasCustomHeaderRenderer = columnDef.meta?.hasCustomHeaderRenderer;
   const children = hasCustomHeaderRenderer ? /* @__PURE__ */ jsx(DataTableColumnContextProvider, { value: header.column, children: flexRender(columnDef.header, header.getContext()) }) : flexRender(columnDef.header, header.getContext());
   const isStringHeader = typeof children === "string";
@@ -308,7 +309,7 @@ function DataTableHeaderCell(props) {
           [headerCellStyles.isSortedHeader]: isSorted,
           [headerCellStyles.isMultiSortedHeader]: multiSortPriority !== void 0,
           [tableStyles.prefixColumn]: columnDef.meta?.builtinPlacement === "prefix",
-          [headerCellStyles.headerCellActiveInteraction]: floatingMenuHeaderColumnId === header.id,
+          [headerCellStyles.headerCellActiveInteraction]: isActiveFloatingMenu,
           [headerCellStyles.customHeaderDensity[rowDensity]]: hasCustomHeaderRenderer,
           [headerCellStyles.subRowIndicatorColumn]: isSubRowIndicatorColumn,
           // add grab cursor styling only if column drag and drop is enabled but sorting is not