@dynatrace/strato-components 3.6.0 → 3.7.0

package/tables/DataTable/components/DataTableDefaultCell.sty.d.ts

@@ -1,17 +1,10 @@
+declare const thresholdFirstStandardColumn: string;
+declare const thresholdFirstPrefixColumn: string;
+declare const prefixColumnSelector: string;
 export declare const defaultCell: import("@vanilla-extract/recipes").RuntimeFn<{
     lineWrap: {
-        true: {
-            whiteSpace: "normal";
-            textOverflow: "initial";
-            wordBreak: "normal";
-            overflowWrap: "anywhere";
-        };
-        false: {
-            overflow: "hidden";
-            whiteSpace: "nowrap";
-            textOverflow: "ellipsis";
-            maxWidth: "100%";
-        };
+        true: import("@vanilla-extract/css").StyleRule;
+        false: import("@vanilla-extract/css").StyleRule;
     };
     rowDensity: {
         default: {
@@ -20,10 +13,13 @@ export declare const defaultCell: import("@vanilla-extract/recipes").RuntimeFn<{
             paddingBottom: string;
             paddingLeft: string;
             selectors: {
-                [x: string]: {
+                [thresholdFirstStandardColumn]: {
+                    paddingLeft: string;
+                };
+                [thresholdFirstPrefixColumn]: {
                     paddingLeft: string;
-                    paddingRight?: undefined;
-                } | {
+                };
+                [prefixColumnSelector]: {
                     paddingRight: string;
                     paddingLeft: string;
                 };
@@ -35,10 +31,13 @@ export declare const defaultCell: import("@vanilla-extract/recipes").RuntimeFn<{
             paddingBottom: string;
             paddingLeft: string;
             selectors: {
-                [x: string]: {
+                [thresholdFirstStandardColumn]: {
                     paddingLeft: string;
-                    paddingRight?: undefined;
-                } | {
+                };
+                [thresholdFirstPrefixColumn]: {
+                    paddingLeft: string;
+                };
+                [prefixColumnSelector]: {
                     paddingRight: string;
                     paddingLeft: string;
                 };
@@ -50,10 +49,13 @@ export declare const defaultCell: import("@vanilla-extract/recipes").RuntimeFn<{
             paddingBottom: string;
             paddingLeft: string;
             selectors: {
-                [x: string]: {
+                [thresholdFirstStandardColumn]: {
                     paddingLeft: string;
-                    paddingRight?: undefined;
-                } | {
+                };
+                [thresholdFirstPrefixColumn]: {
+                    paddingLeft: string;
+                };
+                [prefixColumnSelector]: {
                     paddingRight: string;
                     paddingLeft: string;
                 };
@@ -61,3 +63,4 @@ export declare const defaultCell: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
+export {};

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

@@ -28,10 +28,11 @@ var import_RowOrder_css_ts_vanilla = require("../features/RowOrder/RowOrder.css"
 var import_RowDetails_css_ts_vanilla = require("../features/RowDetails/RowDetails.css");
 var import_RowInteractivity_css_ts_vanilla = require("../features/RowInteractivity/RowInteractivity.css");
 var import_DataTableRow_css_ts_vanilla = require("./DataTableRow.css");
+var import_ColumnSizing_css_ts_vanilla = require("../features/ColumnSizing/ColumnSizing.css");
 var import_Thresholds_css_ts_vanilla = require("../features/Thresholds/Thresholds.css");
 var import_DataTableCell_css_ts_vanilla = require("./DataTableCell.css");
 var import_ColumnOrder_css_ts_vanilla = require("../features/ColumnOrder/ColumnOrder.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("./DataTableHeaderCell.css");
 var import_DataTableDefaultCell_css_ts_vanilla = require("./DataTableDefaultCell.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var defaultCell = (0, import_createRuntimeFn.createRuntimeFn)({ 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: [] });
+var defaultCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14k72810-3-7-0", variantClassNames: { lineWrap: { true: "_14k72811-3-7-0", false: "_14k72812-3-7-0" }, rowDensity: { "default": "_14k72813-3-7-0", condensed: "_14k72814-3-7-0", comfortable: "_14k72815-3-7-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });

package/tables/DataTable/components/DataTableEmptyState.css

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

package/tables/DataTable/components/DataTableEmptyState.js

@@ -57,7 +57,7 @@ const DataTableEmptyState = /* @__PURE__ */ (0, import_react.forwardRef)(
         "div",
         {
           ref: forwardedRef,
-          className: consumerClassName,
+          className: (0, import_clsx.default)(styles.stickyContainer, consumerClassName),
           style: consumerStyle,
           "data-testid": dataTestId,
           ...remainingProps,
@@ -67,13 +67,15 @@ const DataTableEmptyState = /* @__PURE__ */ (0, import_react.forwardRef)(
     }
     const isColumnsEmpty = table.getVisibleLeafColumnsWithoutBuiltin().length === 0;
     const isDataEmpty = table.getRowModel().rows.length === 0;
+    const rowDensity = table.atoms.visualVariantConfig?.get().rowDensity;
     const fallbackMessage = isDataEmpty ? intl.formatMessage(import_messages.dataTableMessages.noDataAvailable) : intl.formatMessage(import_messages.dataTableMessages.noColumnsAvailable);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Text.Text,
       {
         ref: forwardedRef,
         className: (0, import_clsx.default)([
-          styles.emptyState({ minWidth: isColumnsEmpty }),
+          styles.stickyContainer,
+          styles.emptyState({ minWidth: isColumnsEmpty, rowDensity }),
           consumerClassName
         ]),
         style: consumerStyle,

package/tables/DataTable/components/DataTableEmptyState.sty.d.ts

@@ -1,7 +1,22 @@
+export declare const stickyContainer: string;
 export declare const emptyState: import("@vanilla-extract/recipes").RuntimeFn<{
     minWidth: {
         true: {
             minWidth: number;
         };
     };
+    rowDensity: {
+        default: {
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        condensed: {
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        comfortable: {
+            paddingTop: string;
+            paddingBottom: string;
+        };
+    };
 }>;

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

@@ -17,9 +17,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DataTableEmptyState_css_exports = {};
 __export(DataTableEmptyState_css_exports, {
-  emptyState: () => emptyState
+  emptyState: () => emptyState,
+  stickyContainer: () => stickyContainer
 });
 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: "_lvf8p50-3-6-0", variantClassNames: { minWidth: { true: "_lvf8p51-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var emptyState = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvf8p51-3-7-0", variantClassNames: { minWidth: { true: "_lvf8p52-3-7-0" }, rowDensity: { "default": "_lvf8p53-3-7-0", condensed: "_lvf8p54-3-7-0", comfortable: "_lvf8p55-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var stickyContainer = "_lvf8p50-3-7-0";

package/tables/DataTable/components/DataTableHeader.css

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

package/tables/DataTable/components/DataTableHeader.js

@@ -71,7 +71,7 @@ function DataTableHeader() {
     });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "row", className: headerStyles.headerRow, children: headerCells }, headerGroup.id);
   });
-  const headerContent = table.options.enableColumnOrdering ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColumnOrderDragAndDropContext.ColumnOrderDragAndDropContext, { children: headerRows }) : (
+  const headerContent = table.optionsStore.state.enableColumnOrdering ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColumnOrderDragAndDropContext.ColumnOrderDragAndDropContext, { children: headerRows }) : (
     // If column ordering is not enabled, don't use the ColumnOrderDragAndDropContext
     // eslint-disable-next-line react/jsx-no-useless-fragment
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: headerRows })

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-6-0";
-var headerRow = "_1kpe8zs1-3-6-0";
+var header = "_1kpe8zs0-3-7-0";
+var headerRow = "_1kpe8zs1-3-7-0";

package/tables/DataTable/components/DataTableHeaderCell.css

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

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

@@ -1,16 +1,16 @@
-import { type SortDirection } from '@tanstack/react-table';
+import { type Header, type RowData, type SortDirection } from '@tanstack/react-table';
 import { type JSX, type PropsWithChildren } from 'react';
 import { type IntlShape } from 'react-intl';
-import type { Header } from '../hooks/useTable/types.js';
-interface DataTableHeaderCellProps extends PropsWithChildren {
+import type { TDataTableFeatures } from '../features/types/features.types.js';
+interface DataTableHeaderCellProps<TData extends RowData> extends PropsWithChildren {
     /**
      * Header to be rendered with this header cell.
      */
-    header: Header<unknown, unknown>;
+    header: Header<TDataTableFeatures, TData>;
     /**
      * All headers in the same group (row).
      */
-    headers: Header<unknown, unknown>[];
+    headers: Header<TDataTableFeatures, TData>[];
     /**
      * Header group id from the TanStack/table header object.
      */
@@ -45,7 +45,7 @@ export declare function getHeaderAriaLabel({ intl, columnLabel, nextSortingOrder
     isCustomHeader: boolean;
     role: 'columnheader' | 'presentation';
 }): string | undefined;
-export declare function DataTableHeaderCell(props: Readonly<DataTableHeaderCellProps>): JSX.Element | null;
+export declare function DataTableHeaderCell<TData extends RowData>(props: Readonly<DataTableHeaderCellProps<TData>>): JSX.Element | null;
 export declare namespace DataTableHeaderCell {
     var displayName: string;
 }