@dynatrace/strato-components 3.12.2 → 3.13.0

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-12-2";
-var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-12-2", variantClassNames: { active: { true: "_11pvd3zm-3-12-2", false: "_11pvd3zn-3-12-2" }, last: { true: "_11pvd3zo-3-12-2", false: "_11pvd3zp-3-12-2" }, pinnedColumn: { false: "_11pvd3zq-3-12-2", left: "_11pvd3zr-3-12-2", right: "_11pvd3zs-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var customHeaderDensity = { "default": "_11pvd3z6-3-12-2", condensed: "_11pvd3z7-3-12-2", comfortable: "_11pvd3z8-3-12-2" };
-var firstColumn = "_11pvd3zd-3-12-2";
-var firstHeaderRow = "_11pvd3z9-3-12-2";
-var firstRightPinnedColumn = "_11pvd3zg-3-12-2";
-var firstUnpinnedColumn = "_11pvd3zf-3-12-2";
-var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-12-2", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-12-2", left: "_11pvd3zv-3-12-2", right: "_11pvd3zw-3-12-2" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-12-2", "default": "_11pvd3zy-3-12-2", condensed: "_11pvd3zz-3-12-2", comfortable: "_11pvd3z10-3-12-2" }, verticalDividers: { true: "_11pvd3z11-3-12-2", false: "_11pvd3z12-3-12-2" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-12-2", false: "_11pvd3z14-3-12-2" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
-var headerCellActiveInteraction = "_11pvd3z16-3-12-2";
-var headerCellEllipsis = "_11pvd3z15-3-12-2";
-var headerWidthVar = "var(--_11pvd3zj-3-12-2)";
-var hovered = "_11pvd3z0-3-12-2";
-var isMultiSortedHeader = "_11pvd3z4-3-12-2";
-var isSortedHeader = "_11pvd3z3-3-12-2";
-var lastHeaderRow = "_11pvd3za-3-12-2";
-var lastLeftPinnedColumn = "_11pvd3ze-3-12-2";
-var leftAdditionalElevationVar = "var(--_11pvd3zk-3-12-2)";
-var leftPositionVar = "var(--_11pvd3zh-3-12-2)";
-var narrow = "_11pvd3z1-3-12-2";
-var parentHeader = "_11pvd3zb-3-12-2";
-var rightPositionVar = "var(--_11pvd3zi-3-12-2)";
-var sortableHeader = "_11pvd3z2-3-12-2";
-var subRowIndicatorColumn = "_11pvd3z5-3-12-2";
+var childHeader = "_11pvd3zc-3-13-0";
+var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-13-0", variantClassNames: { active: { true: "_11pvd3zm-3-13-0", false: "_11pvd3zn-3-13-0" }, last: { true: "_11pvd3zo-3-13-0", false: "_11pvd3zp-3-13-0" }, pinnedColumn: { false: "_11pvd3zq-3-13-0", left: "_11pvd3zr-3-13-0", right: "_11pvd3zs-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var customHeaderDensity = { "default": "_11pvd3z6-3-13-0", condensed: "_11pvd3z7-3-13-0", comfortable: "_11pvd3z8-3-13-0" };
+var firstColumn = "_11pvd3zd-3-13-0";
+var firstHeaderRow = "_11pvd3z9-3-13-0";
+var firstRightPinnedColumn = "_11pvd3zg-3-13-0";
+var firstUnpinnedColumn = "_11pvd3zf-3-13-0";
+var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-13-0", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-13-0", left: "_11pvd3zv-3-13-0", right: "_11pvd3zw-3-13-0" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-13-0", "default": "_11pvd3zy-3-13-0", condensed: "_11pvd3zz-3-13-0", comfortable: "_11pvd3z10-3-13-0" }, verticalDividers: { true: "_11pvd3z11-3-13-0", false: "_11pvd3z12-3-13-0" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-13-0", false: "_11pvd3z14-3-13-0" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
+var headerCellActiveInteraction = "_11pvd3z16-3-13-0";
+var headerCellEllipsis = "_11pvd3z15-3-13-0";
+var headerWidthVar = "var(--_11pvd3zj-3-13-0)";
+var hovered = "_11pvd3z0-3-13-0";
+var isMultiSortedHeader = "_11pvd3z4-3-13-0";
+var isSortedHeader = "_11pvd3z3-3-13-0";
+var lastHeaderRow = "_11pvd3za-3-13-0";
+var lastLeftPinnedColumn = "_11pvd3ze-3-13-0";
+var leftAdditionalElevationVar = "var(--_11pvd3zk-3-13-0)";
+var leftPositionVar = "var(--_11pvd3zh-3-13-0)";
+var narrow = "_11pvd3z1-3-13-0";
+var parentHeader = "_11pvd3zb-3-13-0";
+var rightPositionVar = "var(--_11pvd3zi-3-13-0)";
+var sortableHeader = "_11pvd3z2-3-13-0";
+var subRowIndicatorColumn = "_11pvd3z5-3-13-0";

package/tables/DataTable/components/DataTableRow.css

@@ -1,34 +1,34 @@
-._1y5fzv0-3-12-2 {
+._1y5fzv0-3-13-0 {
   display: grid;
   grid-template-columns: subgrid;
   position: relative;
   grid-template-rows: inherit;
 }
-._or8s40-3-12-2:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-12-2 {
+._or8s40-3-13-0:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-13-0 {
   border-bottom-width: 0;
 }
-._1y5fzv2-3-12-2 {
+._1y5fzv2-3-13-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-12-2 ._14sp6az6-3-12-2._1y5fzv2-3-12-2,
-          ._ytdpswc-3-12-2 ._14sp6az6-3-12-2._1y5fzv2-3-12-2,
-          ._ytdpswe-3-12-2 ._14sp6az6-3-12-2._1y5fzv2-3-12-2,
-          ._2twyod0-3-12-2._1y5fzv2-3-12-2 {
+._ytdpsw0-3-13-0 ._14sp6az6-3-13-0._1y5fzv2-3-13-0,
+          ._ytdpswc-3-13-0 ._14sp6az6-3-13-0._1y5fzv2-3-13-0,
+          ._ytdpswe-3-13-0 ._14sp6az6-3-13-0._1y5fzv2-3-13-0,
+          ._2twyod0-3-13-0._1y5fzv2-3-13-0 {
   border-bottom-width: 0;
 }
-._1y5fzv3-3-12-2 {
+._1y5fzv3-3-13-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-12-2 ._14sp6az6-3-12-2._1y5fzv3-3-12-2,
-          ._2twyod0-3-12-2._1y5fzv3-3-12-2 {
+._ytdpsw0-3-13-0 ._14sp6az6-3-13-0._1y5fzv3-3-13-0,
+          ._2twyod0-3-13-0._1y5fzv3-3-13-0 {
   border-bottom-width: 0;
 }
-._1y5fzv6-3-12-2 {
+._1y5fzv6-3-13-0 {
   visibility: hidden;
 }
-._1y5fzv8-3-12-2:not(._15silbj3-3-12-2, ._15silbj4-3-12-2, ._15silbj0-3-12-2:hover) {
+._1y5fzv8-3-13-0:not(._15silbj3-3-13-0, ._15silbj4-3-13-0, ._15silbj0-3-13-0:hover) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1y5fzv9-3-12-2:not(._15silbj3-3-12-2, ._15silbj4-3-12-2, ._15silbj0-3-12-2:hover) {
+._1y5fzv9-3-13-0:not(._15silbj3-3-13-0, ._15silbj4-3-13-0, ._15silbj0-3-13-0:hover) {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

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

@@ -1,12 +1,13 @@
-import type { Row, RowData, TableFeatures } from '@tanstack/react-table';
+import type { Row, RowData } from '@tanstack/react-table';
 import type { ScrollToOptions, VirtualItem } from '@tanstack/react-virtual';
 import { type JSX } from 'react';
 import { StylingProps } from '../../../core/types/styling-props.js';
+import type { TDataTableFeatures } from '../features/types/features.types.js';
 interface DataTableRowProps extends StylingProps {
     /**
      * DataTable row object.
      */
-    row: Row<TableFeatures, RowData>;
+    row: Row<TDataTableFeatures, RowData>;
     /**
      * The virtual item in the row virtualizer.
      */

package/tables/DataTable/components/DataTableRow.js

@@ -106,10 +106,10 @@ function DataTableRow(props) {
     });
     rowLinkRef.current?.dispatchEvent(newEvent);
   };
-  const leftPinnedColumns = table.getLeftVisibleLeafColumns();
+  const leftPinnedColumns = table.getStartVisibleLeafColumns();
   const lastLeftPinnedColumn = leftPinnedColumns.at(-1);
   const lastLeftPinnedVirtualColumnIndex = leftPinnedColumns.length - 1;
-  const rightPinnedColumns = table.getRightVisibleLeafColumns();
+  const rightPinnedColumns = table.getEndVisibleLeafColumns();
   const firstRightPinnedColumn = rightPinnedColumns.at(0);
   const firstRightPinnedVirtualColumnIndex = virtualColumns[virtualColumns.length - rightPinnedColumns.length]?.index;
   const gridRowPosition = props.row.getGridRowPosition(virtualItemIndex);
@@ -199,7 +199,7 @@ function DataTableRow(props) {
           }) }),
           rowLink && // this link element solely holds the link for interactive rows and is not visible to the user
           // it's not directly clickable; instead, the link is opened by interactions with the row (click, enter)
-          // eslint-disable-next-line jsx-a11y/anchor-has-content
+          // oxlint-disable-next-line jsx-a11y/anchor-has-content
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "a",
             {

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

@@ -28,4 +28,4 @@ var import_RowDetails_css_ts_vanilla = require("../features/RowDetails/RowDetail
 var import_RowInteractivity_css_ts_vanilla = require("../features/RowInteractivity/RowInteractivity.css");
 var import_DataTableRow_css_ts_vanilla = require("./DataTableRow.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var row = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1y5fzv0-3-12-2", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-12-2", horizontalDividers: "_1y5fzv2-3-12-2", zebraStripes: "_1y5fzv3-3-12-2" }, rowParity: { even: "_1y5fzv4-3-12-2", odd: "_1y5fzv5-3-12-2" }, isDraggedRow: { true: "_1y5fzv6-3-12-2", false: "_1y5fzv7-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-12-2"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-12-2"]] });
+var row = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1y5fzv0-3-13-0", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-13-0", horizontalDividers: "_1y5fzv2-3-13-0", zebraStripes: "_1y5fzv3-3-13-0" }, rowParity: { even: "_1y5fzv4-3-13-0", odd: "_1y5fzv5-3-13-0" }, isDraggedRow: { true: "_1y5fzv6-3-13-0", false: "_1y5fzv7-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-13-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-13-0"]] });

package/tables/DataTable/components/DataTableScrollShadow.css

@@ -1,8 +1,8 @@
-._1al677r0-3-12-2 {
+._1al677r0-3-13-0 {
   position: sticky;
   pointer-events: none;
 }
-._1al677r0-3-12-2::after {
+._1al677r0-3-13-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -10,19 +10,19 @@
   width: 50px;
   pointer-events: none;
 }
-[data-theme="light"] ._1al677r1-3-12-2::after {
+[data-theme="light"] ._1al677r1-3-13-0::after {
   box-shadow: inset 12px 0px 12px -32px var(--dt-colors-box-shadow-default, #2d2e4e), inset 18px 0px 18px -32px var(--dt-colors-box-shadow-default, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r1-3-12-2::after {
+[data-theme="dark"] ._1al677r1-3-13-0::after {
   box-shadow: inset 12px 0px 12px -16px var(--dt-colors-box-shadow-default, #2d2e4e), inset 16px 0px 16px -16px var(--dt-colors-box-shadow-default, #2d2e4e);
 }
-[data-theme="light"] ._1al677r2-3-12-2::after {
+[data-theme="light"] ._1al677r2-3-13-0::after {
   box-shadow: inset -12px 0px 12px -32px var(--dt-colors-box-shadow-default, #2d2e4e), inset -18px 0px 18px -32px var(--dt-colors-box-shadow-default, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r2-3-12-2::after {
+[data-theme="dark"] ._1al677r2-3-13-0::after {
   box-shadow: inset -12px 0px 12px -16px var(--dt-colors-box-shadow-default, #2d2e4e), inset -16px 0px 16px -16px var(--dt-colors-box-shadow-default, #2d2e4e);
 }
-._1al677r3-3-12-2 {
+._1al677r3-3-13-0 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -33,10 +33,10 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r3-3-12-2::after {
+._1al677r3-3-13-0::after {
   left: 0;
 }
-._1al677r4-3-12-2 {
+._1al677r4-3-13-0 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -46,6 +46,6 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r4-3-12-2::after {
+._1al677r4-3-13-0::after {
   right: 0;
 }

package/tables/DataTable/components/DataTableScrollShadow.js

@@ -36,8 +36,8 @@ var import_DataTableContext = require("../contexts/DataTableContext.js");
 const DataTableScrollShadow = (props) => {
   const table = (0, import_DataTableContext.useDataTable)();
   const { hasOverflowLeft, hasOverflowRight } = props;
-  const leftPinnedColumns = table.getLeftVisibleLeafColumns();
-  const rightPinnedColumns = table.getRightVisibleLeafColumns();
+  const leftPinnedColumns = table.getStartVisibleLeafColumns();
+  const rightPinnedColumns = table.getEndVisibleLeafColumns();
   const leftScrollShadow = hasOverflowLeft && leftPinnedColumns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "presentation", className: styles.tableEdgeShadow.left }) : null;
   const rightScrollShadow = hasOverflowRight && rightPinnedColumns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "presentation", className: styles.tableEdgeShadow.right }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

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

@@ -22,5 +22,5 @@ __export(DataTableScrollShadow_css_exports, {
 });
 module.exports = __toCommonJS(DataTableScrollShadow_css_exports);
 var import_DataTableScrollShadow_css_ts_vanilla = require("./DataTableScrollShadow.css");
-var scrollShadow = { left: "_1al677r1-3-12-2 _1al677r0-3-12-2", right: "_1al677r2-3-12-2 _1al677r0-3-12-2" };
-var tableEdgeShadow = { left: "_1al677r3-3-12-2 _1al677r1-3-12-2 _1al677r0-3-12-2", right: "_1al677r4-3-12-2 _1al677r2-3-12-2 _1al677r0-3-12-2" };
+var scrollShadow = { left: "_1al677r1-3-13-0 _1al677r0-3-13-0", right: "_1al677r2-3-13-0 _1al677r0-3-13-0" };
+var tableEdgeShadow = { left: "_1al677r3-3-13-0 _1al677r1-3-13-0 _1al677r0-3-13-0", right: "_1al677r4-3-13-0 _1al677r2-3-13-0 _1al677r0-3-13-0" };

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-12-2 {
+._ytdpsw0-3-13-0 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,80 +6,80 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-12-2 {
+._ytdpsw1-3-13-0 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-12-2 {
+._ytdpsw2-3-13-0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-12-2 {
+._ytdpsw3-3-13-0 {
   overflow: hidden;
 }
-._ytdpsw4-3-12-2 {
+._ytdpsw4-3-13-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._ytdpsw4-3-12-2::-webkit-scrollbar-track {
+._ytdpsw4-3-13-0::-webkit-scrollbar-track {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-12-2::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-12-2::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-13-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-12-2 ._ytdpsw4-3-12-2 {
+._1jgl8s50-3-13-0 ._ytdpsw4-3-13-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-12-2 ._ytdpsw4-3-12-2::-webkit-scrollbar-track {
+._1jgl8s50-3-13-0 ._ytdpsw4-3-13-0::-webkit-scrollbar-track {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-12-2 ._ytdpsw4-3-12-2::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-13-0 ._ytdpsw4-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-12-2 ._ytdpsw4-3-12-2::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-13-0 ._ytdpsw4-3-13-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._ytdpsw5-3-12-2::-webkit-scrollbar-track:horizontal {
+._ytdpsw5-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-12-2 ._ytdpsw5-3-12-2::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-13-0 ._ytdpsw5-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswh-3-12-2 {
+._ytdpswh-3-13-0 {
   display: flex;
   flex-direction: inherit;
 }
-._ytdpswi-3-12-2::-webkit-scrollbar-track:horizontal {
+._ytdpswi-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswi-3-12-2::-webkit-scrollbar-track:vertical {
+._ytdpswi-3-13-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswi-3-12-2::-webkit-scrollbar-corner {
+._ytdpswi-3-13-0::-webkit-scrollbar-corner {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-12-2 ._ytdpswi-3-12-2::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-13-0 ._ytdpswi-3-13-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-12-2 ._ytdpswi-3-12-2::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-13-0 ._ytdpswi-3-13-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-12-2 ._ytdpswi-3-12-2::-webkit-scrollbar-corner {
+._1jgl8s50-3-13-0 ._ytdpswi-3-13-0::-webkit-scrollbar-corner {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }

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

@@ -1,9 +1,9 @@
-import type { ReactTable, RowData } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { type JSX } from 'react';
 import { DataTableEmptyState } from './DataTableEmptyState.js';
-import type { TDataTableFeatures } from '../features/types/features.types.js';
+import type { DataTableInstance } from '../features/types/table.types.js';
 export declare function DataTableVirtualizationContainer(props: Readonly<{
-    table: ReactTable<TDataTableFeatures, RowData>;
+    table: DataTableInstance<RowData>;
     emptyState: ReturnType<typeof DataTableEmptyState>;
     fullHeight: boolean;
 }>): JSX.Element;

package/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -95,8 +95,8 @@ function DataTableVirtualizationContainer(props) {
     // APPDEV-15467
     enabled: rows.length > 0
   });
-  const pinnedLeftColumns = table.getLeftVisibleLeafColumns();
-  const pinnedRightColumns = table.getRightVisibleLeafColumns();
+  const pinnedLeftColumns = table.getStartVisibleLeafColumns();
+  const pinnedRightColumns = table.getEndVisibleLeafColumns();
   const pinnedLeftIndexes = (0, import_react.useMemo)(
     () => Array.from({ length: pinnedLeftColumns.length }, (_, i) => i),
     [pinnedLeftColumns.length]

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

@@ -23,4 +23,4 @@ module.exports = __toCommonJS(DataTableVirtualizationContainer_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("./DataTableVirtualizationContainer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-12-2", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-12-2", false: "_ytdpsw2-3-12-2" }, loading: { true: "_ytdpsw3-3-12-2" }, contained: { true: "_ytdpsw4-3-12-2", false: "_ytdpsw5-3-12-2" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-12-2", zebraStripes: "_ytdpsw7-3-12-2", none: "_ytdpsw8-3-12-2" }, headers: { hidden: "_ytdpsw9-3-12-2", "default": "_ytdpswa-3-12-2" }, scrollDirection: { false: "_ytdpswb-3-12-2", x: "_ytdpswc-3-12-2", y: "_ytdpswd-3-12-2", xy: "_ytdpswe-3-12-2" }, isDataEmpty: { true: "_ytdpswf-3-12-2", false: "_ytdpswg-3-12-2" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-12-2"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-12-2"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-13-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-13-0", false: "_ytdpsw2-3-13-0" }, loading: { true: "_ytdpsw3-3-13-0" }, contained: { true: "_ytdpsw4-3-13-0", false: "_ytdpsw5-3-13-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-13-0", zebraStripes: "_ytdpsw7-3-13-0", none: "_ytdpsw8-3-13-0" }, headers: { hidden: "_ytdpsw9-3-13-0", "default": "_ytdpswa-3-13-0" }, scrollDirection: { false: "_ytdpswb-3-13-0", x: "_ytdpswc-3-13-0", y: "_ytdpswd-3-13-0", xy: "_ytdpswe-3-13-0" }, isDataEmpty: { true: "_ytdpswf-3-13-0", false: "_ytdpswg-3-13-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-13-0"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-13-0"]] });

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.css

@@ -1,10 +1,10 @@
-._dmotjm0-3-12-2 div:has(> .strato-table-settings-virtualization-container) {
+._dmotjm0-3-13-0 div:has(> .strato-table-settings-virtualization-container) {
   padding-bottom: var(--dt-spacings-size-0, 0);
 }
-._dmotjm9-3-12-2:has(._115i8c21-3-12-2) {
+._dmotjm9-3-13-0:has(._115i8c21-3-13-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }
-._dmotjm0-3-12-2:has(._115i8c20-3-12-2) > ._dmotjm7-3-12-2 {
+._dmotjm0-3-13-0:has(._115i8c20-3-13-0) > ._dmotjm7-3-13-0 {
   flex: 1;
   display: flex;
   flex-direction: column;

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.sty.js

@@ -23,5 +23,5 @@ __export(DataTableSettingsModal_css_exports, {
 module.exports = __toCommonJS(DataTableSettingsModal_css_exports);
 var import_Modal_css_ts_vanilla = require("../../../../overlays/modal/Modal.css");
 var import_DataTableSettingsModal_css_ts_vanilla = require("./DataTableSettingsModal.css");
-var footer = "_115i8c20-3-12-2";
-var footerWithMessage = "_115i8c21-3-12-2";
+var footer = "_115i8c20-3-13-0";
+var footerWithMessage = "_115i8c21-3-13-0";

package/tables/DataTable/components/TableActions/DataTableSelectionChip.css

@@ -1,17 +1,17 @@
-._1rlvxpp0-3-12-2 {
+._1rlvxpp0-3-13-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-12-2 {
+._1rlvxpp1-3-13-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp2-3-12-2 {
+._1rlvxpp2-3-13-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
 }
-._1rlvxpp3-3-12-2 {
+._1rlvxpp3-3-13-0 {
   padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-12-2 {
+._1rlvxpp4-3-13-0 {
   height: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-12, 12px);
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-4, 4px);

package/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -22,5 +22,5 @@ __export(DataTableSelectionChip_css_exports, {
 });
 module.exports = __toCommonJS(DataTableSelectionChip_css_exports);
 var import_DataTableSelectionChip_css_ts_vanilla = require("./DataTableSelectionChip.css");
-var selectionChip = "_1rlvxpp4-3-12-2";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-12-2 _1rlvxpp0-3-12-2", "default": "_1rlvxpp2-3-12-2 _1rlvxpp0-3-12-2", comfortable: "_1rlvxpp3-3-12-2 _1rlvxpp0-3-12-2" };
+var selectionChip = "_1rlvxpp4-3-13-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-13-0 _1rlvxpp0-3-13-0", "default": "_1rlvxpp2-3-13-0 _1rlvxpp0-3-13-0", comfortable: "_1rlvxpp3-3-13-0 _1rlvxpp0-3-13-0" };

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css

@@ -1,29 +1,29 @@
-._11d1m5j0-3-12-2 {
+._11d1m5j0-3-13-0 {
   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;
 }
-._11d1m5j0-3-12-2:last-child {
+._11d1m5j0-3-13-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-12-2 {
+._11d1m5j1-3-13-0 {
   align-self: center;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
   transition: none;
 }
-._11d1m5j1-3-12-2:active {
+._11d1m5j1-3-13-0:active {
   background: transparent;
 }
-._11d1m5j1-3-12-2:hover {
+._11d1m5j1-3-13-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-12-2 ._11d1m5j1-3-12-2 {
+._11d1m5j0-3-13-0 ._11d1m5j1-3-13-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-12-2 {
+._11d1m5j2-3-13-0 {
   opacity: 0.2;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.d.ts

@@ -1,11 +1,11 @@
-import type { ColumnPinningState, RowData, TableFeatures } from '@tanstack/react-table';
+import type { ColumnPinningState, RowData } from '@tanstack/react-table';
 import { type Virtualizer } from '@tanstack/react-virtual';
 import { type ReactNode } from 'react';
 /**
  * Drag and drop context for ordering in the column settings modal.
  * @internal
  */
-export declare function ColumnOrderSettingsDragAndDropContext<TFeatures extends TableFeatures, TData extends RowData>({ children, localColumnOrder, updateLocalColumnOrder, localColumnPinning, itemVirtualizer, }: Readonly<{
+export declare function ColumnOrderSettingsDragAndDropContext<TData extends RowData>({ children, localColumnOrder, updateLocalColumnOrder, localColumnPinning, itemVirtualizer, }: Readonly<{
     children: ReactNode;
     localColumnOrder: string[];
     updateLocalColumnOrder: (newColumnOrder: string[]) => void;

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -23,6 +23,6 @@ __export(ColumnOrderSettingsDragAndDrop_css_exports, {
 });
 module.exports = __toCommonJS(ColumnOrderSettingsDragAndDrop_css_exports);
 var import_ColumnOrderSettingsDragAndDrop_css_ts_vanilla = require("./ColumnOrderSettingsDragAndDrop.css");
-var columnDndHandle = "_11d1m5j1-3-12-2";
-var columnDndOverlay = "_11d1m5j0-3-12-2";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-12-2";
+var columnDndHandle = "_11d1m5j1-3-13-0";
+var columnDndOverlay = "_11d1m5j0-3-13-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-13-0";

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/column-order-settings-dnd-utils.d.ts

@@ -1,5 +1,6 @@
 import { type CollisionDetection, type DragOverEvent, type Modifier } from '@dnd-kit/core';
-import type { ColumnPinningState, Column, RowData, TableFeatures, CellData } from '@tanstack/react-table';
+import type { ColumnPinningState, Column, RowData, CellData } from '@tanstack/react-table';
+import type { TDataTableFeatures } from '../../../../features/types/features.types.js';
 export declare const COLUMNS_LIST_ITEM_BORDER_HEIGHT = 1;
 export declare const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT: number;
 /**
@@ -12,7 +13,7 @@ export declare const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT: number;
  * @param activeColumn - the column which is currently being dragged.
  * @internal
  */
-export declare function transformColumnsOnDragOver<TFeatures extends TableFeatures, TData extends RowData>(columnsList: HTMLElement | null, event: DragOverEvent, localColumnOrder: string[], transformValue: number, activeColumn: Column<TFeatures, TData> | undefined): void;
+export declare function transformColumnsOnDragOver<TData extends RowData>(columnsList: HTMLElement | null, event: DragOverEvent, localColumnOrder: string[], transformValue: number, activeColumn: Column<TDataTableFeatures, TData> | undefined): void;
 /**
  * Gets the rendered element of an unpinned column in the settings modal with a given column id.
  *
@@ -84,15 +85,15 @@ export declare function getDragIndexes(localColumnOrder: string[], activeId: str
  * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.
  * @internal
  */
-export declare function getLeafColumnsForColumn<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column<TFeatures, TData, TValue>, localColumnOrder: string[]): string[];
+export declare function getLeafColumnsForColumn<TData extends RowData, TValue extends CellData = CellData>(column: Column<TDataTableFeatures, TData, TValue>, localColumnOrder: string[]): string[];
 /**
  * Information about the currently dragged column.
  * @internal
  */
-export type DraggingColumnInfo<TFeatures extends TableFeatures, TData extends RowData> = {
+export type DraggingColumnInfo<TData extends RowData> = {
     id: string;
     index: number;
-    column: Column<TFeatures, TData>;
+    column: Column<TDataTableFeatures, TData>;
 };
 /**
  * Custom collision detection for column ordering in the column settings modal.
@@ -105,7 +106,7 @@ export type DraggingColumnInfo<TFeatures extends TableFeatures, TData extends Ro
  * @returns dnd-kit CollisionDetection
  * @internal
  */
-export declare function createColumnOrderSettingsCollisionDetection<TFeatures extends TableFeatures, TData extends RowData>(localColumnOrder: string[], localColumnPinning: ColumnPinningState, draggingColumnInfo: DraggingColumnInfo<TFeatures, TData> | null): CollisionDetection;
+export declare function createColumnOrderSettingsCollisionDetection<TData extends RowData>(localColumnOrder: string[], localColumnPinning: ColumnPinningState, draggingColumnInfo: DraggingColumnInfo<TData> | null): CollisionDetection;
 /**
  * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.
  *

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.d.ts

@@ -1,18 +1,19 @@
-import type { ColumnPinningState, RowData, TableFeatures } from '@tanstack/react-table';
+import type { ColumnPinningState, RowData } from '@tanstack/react-table';
 import { JSX } from 'react';
 import type { ColumnListItem } from './column-settings-types.js';
-interface ColumnPinningMenuProps<TFeatures extends TableFeatures, TData extends RowData> {
+import type { TDataTableFeatures } from '../../../features/types/features.types.js';
+interface ColumnPinningMenuProps<TData extends RowData> {
     /**
      * The column to render the pinning menu for.
      */
-    column: ColumnListItem<TFeatures, TData>;
+    column: ColumnListItem<TDataTableFeatures, TData>;
     /**
      * The ordered flat columns, grouped by pinning position.
      */
     orderedFlatColumns: {
-        left: ColumnListItem<TFeatures, TData>[];
-        center: ColumnListItem<TFeatures, TData>[];
-        right: ColumnListItem<TFeatures, TData>[];
+        left: ColumnListItem<TDataTableFeatures, TData>[];
+        center: ColumnListItem<TDataTableFeatures, TData>[];
+        right: ColumnListItem<TDataTableFeatures, TData>[];
     };
     /**
      * The column pinning state in the settings modal.
@@ -27,6 +28,6 @@ interface ColumnPinningMenuProps<TFeatures extends TableFeatures, TData extends
  * Menu component for pinning/unpinning columns in the DataTable column settings.
  * @internal
  */
-export declare function ColumnPinningMenu<TFeatures extends TableFeatures, TData extends RowData>(props: Readonly<ColumnPinningMenuProps<TFeatures, TData>>): JSX.Element;
+export declare function ColumnPinningMenu<TData extends RowData>(props: Readonly<ColumnPinningMenuProps<TData>>): JSX.Element;
 export {};
 //# sourceMappingURL=ColumnPinningMenu.d.ts.map

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.js

@@ -42,7 +42,7 @@ function ColumnPinningMenu(props) {
     isUnpinned: pinnedPosition === false
   });
   function getColumnsInSamePinningRegion() {
-    const position = pinnedPosition === false ? "center" : pinnedPosition;
+    const position = (0, import_column_pinning_utils.toPhysicalPinnedPosition)(pinnedPosition) || "center";
     return orderedFlatColumns[position];
   }
   function getIdsToPin() {
@@ -73,18 +73,18 @@ function ColumnPinningMenu(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: pinningLabel, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { size: "condensed", "aria-label": pinningLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: pinnedPosition === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.UnpinIcon, {}) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
-      pinnedPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      pinnedPosition !== "start" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Menu.Menu.Item,
         {
-          onSelect: () => pin("left"),
+          onSelect: () => pin("start"),
           "data-dt-children-name": "ColumnSettingsPinLeft",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnLeftLabel })
         }
       ),
-      pinnedPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      pinnedPosition !== "end" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Menu.Menu.Item,
         {
-          onSelect: () => pin("right"),
+          onSelect: () => pin("end"),
           "data-dt-children-name": "ColumnSettingsPinRight",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnRightLabel })
         }