@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -0,0 +1,9 @@
+._1gjma320-3-5-2 {
+  gap: var(--dt-spacings-size-24, 24px);
+}
+._1gjma321-3-5-2 {
+  white-space: nowrap;
+}
+._1m01arl7-3-5-2 ._1gjma321-3-5-2 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.js

@@ -1,10 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
+import * as styles from "./DataTableDownloadData.sty.js";
 import { Menu } from "../../../../../navigation/menu/Menu.js";
 import { useDataTable } from "../../../contexts/DataTableContext.js";
 import { dataTableMessages } from "../../../messages.js";
 const DataTableDownloadData = ({
   excludeColumns,
+  hasIntents,
   isDownloading,
   onDownloadStart,
   onDownloadEnd
@@ -12,55 +14,76 @@ const DataTableDownloadData = ({
   const intl = useIntl();
   const table = useDataTable();
   const selectionCount = table.getSelectionCount();
-  return /* @__PURE__ */ jsxs(Menu.Sub, { children: [
-    /* @__PURE__ */ jsx(Menu.SubTrigger, { children: intl.formatMessage(dataTableMessages.downloadTable) }),
-    /* @__PURE__ */ jsxs(Menu.SubContent, { children: [
-      /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          onSelect: () => {
-            if (isDownloading) {
-              return;
-            }
-            onDownloadStart();
-            table.downloadAllData(excludeColumns, onDownloadEnd);
-          },
-          "data-dt-name": "ToolbarDownloadAll",
-          children: intl.formatMessage(dataTableMessages.downloadAll)
-        }
-      ),
-      table.options.enablePagination && /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          onSelect: () => {
-            if (isDownloading) {
-              return;
-            }
-            onDownloadStart();
-            table.downloadPageData(excludeColumns, onDownloadEnd);
-          },
-          "data-dt-name": "ToolbarDownloadPage",
-          children: intl.formatMessage(dataTableMessages.downloadPage)
-        }
-      ),
-      table.options.enableRowSelection && /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          disabled: selectionCount === 0,
-          onSelect: () => {
-            if (isDownloading) {
-              return;
-            }
-            onDownloadStart();
-            table.downloadSelectedData(excludeColumns, onDownloadEnd);
-          },
-          "data-dt-name": "ToolbarDownloadSelected",
-          children: intl.formatMessage(dataTableMessages.downloadSelected, {
+  const menuGroupLabel = intl.formatMessage(dataTableMessages.downloadTable);
+  const downloadMenuItems = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadAllData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadAll",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadAll),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
+            noOfRows: table.getPrePaginationRowModel().flatRows.length
+          }) })
+        ]
+      }
+    ),
+    table.options.enablePagination && /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadPageData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadPage",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadPage),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
+            noOfRows: table.getPaginationRowModel().flatRows.length
+          }) })
+        ]
+      }
+    ),
+    table.options.enableRowSelection && /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        disabled: selectionCount === 0,
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadSelectedData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadSelected",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadSelected),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
             noOfRows: selectionCount
-          })
-        }
-      )
-    ] })
+          }) })
+        ]
+      }
+    )
+  ] });
+  return hasIntents ? /* @__PURE__ */ jsxs(Menu.Sub, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsx(Menu.SubTrigger, { children: menuGroupLabel }),
+    /* @__PURE__ */ jsx(Menu.SubContent, { children: downloadMenuItems })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Menu.Label, { children: menuGroupLabel }),
+    downloadMenuItems
   ] });
 };
 export {

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.tsx"],
-  "sourcesContent": ["import type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/**\n * A component providing the sub menu with the functionalities to download data.\n * @internal\n */\nexport const DataTableDownloadData = ({\n  excludeColumns,\n  isDownloading,\n  onDownloadStart,\n  onDownloadEnd,\n}: {\n  excludeColumns?: string[];\n  isDownloading: boolean;\n  onDownloadStart: () => void;\n  onDownloadEnd: () => void;\n}): JSX.Element => {\n  const intl = useIntl();\n  const table = useDataTable();\n  const selectionCount = table.getSelectionCount();\n\n  return (\n    <Menu.Sub>\n      <Menu.SubTrigger>\n        {intl.formatMessage(dataTableMessages.downloadTable)}\n      </Menu.SubTrigger>\n      <Menu.SubContent>\n        <Menu.Item\n          onSelect={() => {\n            if (isDownloading) {\n              return;\n            }\n            onDownloadStart();\n            table.downloadAllData(excludeColumns, onDownloadEnd);\n          }}\n          data-dt-name=\"ToolbarDownloadAll\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadAll)}\n        </Menu.Item>\n        {table.options.enablePagination && (\n          <Menu.Item\n            onSelect={() => {\n              if (isDownloading) {\n                return;\n              }\n              onDownloadStart();\n              table.downloadPageData(excludeColumns, onDownloadEnd);\n            }}\n            data-dt-name=\"ToolbarDownloadPage\"\n          >\n            {intl.formatMessage(dataTableMessages.downloadPage)}\n          </Menu.Item>\n        )}\n        {table.options.enableRowSelection && (\n          <Menu.Item\n            disabled={selectionCount === 0}\n            onSelect={() => {\n              if (isDownloading) {\n                return;\n              }\n              onDownloadStart();\n              table.downloadSelectedData(excludeColumns, onDownloadEnd);\n            }}\n            data-dt-name=\"ToolbarDownloadSelected\"\n          >\n            {intl.formatMessage(dataTableMessages.downloadSelected, {\n              noOfRows: selectionCount,\n            })}\n          </Menu.Item>\n        )}\n      </Menu.SubContent>\n    </Menu.Sub>\n  );\n};\n"],
-  "mappings": "AA4BM,cAGA,YAHA;AA3BN,SAAS,eAAe;AAExB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKmB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,iBAAiB,MAAM,kBAAkB;AAE/C,SACE,qBAAC,KAAK,KAAL,EACC;AAAA,wBAAC,KAAK,YAAL,EACE,eAAK,cAAc,kBAAkB,aAAa,GACrD;AAAA,IACA,qBAAC,KAAK,YAAL,EACC;AAAA;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM;AACd,gBAAI,eAAe;AACjB;AAAA,YACF;AACA,4BAAgB;AAChB,kBAAM,gBAAgB,gBAAgB,aAAa;AAAA,UACrD;AAAA,UACA,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,MACnD;AAAA,MACC,MAAM,QAAQ,oBACb;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM;AACd,gBAAI,eAAe;AACjB;AAAA,YACF;AACA,4BAAgB;AAChB,kBAAM,iBAAiB,gBAAgB,aAAa;AAAA,UACtD;AAAA,UACA,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,YAAY;AAAA;AAAA,MACpD;AAAA,MAED,MAAM,QAAQ,sBACb;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,mBAAmB;AAAA,UAC7B,UAAU,MAAM;AACd,gBAAI,eAAe;AACjB;AAAA,YACF;AACA,4BAAgB;AAChB,kBAAM,qBAAqB,gBAAgB,aAAa;AAAA,UAC1D;AAAA,UACA,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,kBAAkB;AAAA,YACtD,UAAU;AAAA,UACZ,CAAC;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableDownloadData.sty.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/**\n * A component providing the menu with the functionalities to download data.\n * @internal\n */\nexport const DataTableDownloadData = ({\n  excludeColumns,\n  hasIntents,\n  isDownloading,\n  onDownloadStart,\n  onDownloadEnd,\n}: {\n  excludeColumns?: string[];\n  hasIntents: boolean;\n  isDownloading: boolean;\n  onDownloadStart: () => void;\n  onDownloadEnd: () => void;\n}): JSX.Element => {\n  const intl = useIntl();\n  const table = useDataTable();\n  const selectionCount = table.getSelectionCount();\n  const menuGroupLabel = intl.formatMessage(dataTableMessages.downloadTable);\n\n  const downloadMenuItems = (\n    <>\n      <Menu.Item\n        onSelect={() => {\n          if (isDownloading) {\n            return;\n          }\n          onDownloadStart();\n          table.downloadAllData(excludeColumns, onDownloadEnd);\n        }}\n        className={styles.downloadMenuItem}\n        data-dt-name=\"ToolbarDownloadAll\"\n      >\n        {intl.formatMessage(dataTableMessages.downloadAll)}\n        <Menu.Suffix className={styles.downloadMenuSuffix}>\n          {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n            noOfRows: table.getPrePaginationRowModel().flatRows.length,\n          })}\n        </Menu.Suffix>\n      </Menu.Item>\n      {table.options.enablePagination && (\n        <Menu.Item\n          onSelect={() => {\n            if (isDownloading) {\n              return;\n            }\n            onDownloadStart();\n            table.downloadPageData(excludeColumns, onDownloadEnd);\n          }}\n          className={styles.downloadMenuItem}\n          data-dt-name=\"ToolbarDownloadPage\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadPage)}\n          <Menu.Suffix className={styles.downloadMenuSuffix}>\n            {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n              noOfRows: table.getPaginationRowModel().flatRows.length,\n            })}\n          </Menu.Suffix>\n        </Menu.Item>\n      )}\n      {table.options.enableRowSelection && (\n        <Menu.Item\n          disabled={selectionCount === 0}\n          onSelect={() => {\n            if (isDownloading) {\n              return;\n            }\n            onDownloadStart();\n            table.downloadSelectedData(excludeColumns, onDownloadEnd);\n          }}\n          className={styles.downloadMenuItem}\n          data-dt-name=\"ToolbarDownloadSelected\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadSelected)}\n          <Menu.Suffix className={styles.downloadMenuSuffix}>\n            {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n              noOfRows: selectionCount,\n            })}\n          </Menu.Suffix>\n        </Menu.Item>\n      )}\n    </>\n  );\n\n  return hasIntents ? (\n    <Menu.Sub defaultOpen={false}>\n      <Menu.SubTrigger>{menuGroupLabel}</Menu.SubTrigger>\n      <Menu.SubContent>{downloadMenuItems}</Menu.SubContent>\n    </Menu.Sub>\n  ) : (\n    <>\n      <Menu.Label>{menuGroupLabel}</Menu.Label>\n      {downloadMenuItems}\n    </>\n  );\n};\n"],
+  "mappings": "AA+BI,mBAaI,KAZF,YADF;AA9BJ,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMmB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,iBAAiB,MAAM,kBAAkB;AAC/C,QAAM,iBAAiB,KAAK,cAAc,kBAAkB,aAAa;AAEzE,QAAM,oBACJ,iCACE;AAAA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,gBAAgB,gBAAgB,aAAa;AAAA,QACrD;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,WAAW;AAAA,UACjD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU,MAAM,yBAAyB,EAAE,SAAS;AAAA,UACtD,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACC,MAAM,QAAQ,oBACb;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,iBAAiB,gBAAgB,aAAa;AAAA,QACtD;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,YAAY;AAAA,UAClD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU,MAAM,sBAAsB,EAAE,SAAS;AAAA,UACnD,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IAED,MAAM,QAAQ,sBACb;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,mBAAmB;AAAA,QAC7B,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,qBAAqB,gBAAgB,aAAa;AAAA,QAC1D;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,gBAAgB;AAAA,UACtD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU;AAAA,UACZ,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,KAEJ;AAGF,SAAO,aACL,qBAAC,KAAK,KAAL,EAAS,aAAa,OACrB;AAAA,wBAAC,KAAK,YAAL,EAAiB,0BAAe;AAAA,IACjC,oBAAC,KAAK,YAAL,EAAiB,6BAAkB;AAAA,KACtC,IAEA,iCACE;AAAA,wBAAC,KAAK,OAAL,EAAY,0BAAe;AAAA,IAC3B;AAAA,KACH;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js

@@ -0,0 +1,9 @@
+import "../../../../../navigation/menu/Menu.css";
+import "./DataTableDownloadData.css";
+var downloadMenuItem = "_1gjma320-3-5-2";
+var downloadMenuSuffix = "_1gjma321-3-5-2";
+export {
+  downloadMenuItem,
+  downloadMenuSuffix
+};
+//# sourceMappingURL=DataTableDownloadData.sty.js.map

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css.ts"],
+  "sourcesContent": ["import '../../../../../navigation/menu/Menu.css';\nimport './DataTableDownloadData.css';\nexport var downloadMenuItem = '_1gjma320-3-5-2';\nexport var downloadMenuSuffix = '_1gjma321-3-5-2';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,qBAAqB;",
+  "names": []
+}

package/esm/tables/DataTable/constants.js

@@ -40,6 +40,7 @@ const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION = DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS
 const DATA_TABLE_MIN_WIDTH = 120;
 const DATA_TABLE_EMPTY_MIN_WIDTH = 200;
 const DATA_TABLE_BORDER_WIDTH = 2;
+const DATA_TABLE_BORDER_WIDTH_VISUAL_REFRESH = 1;
 const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;
 const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;
 const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;
@@ -130,6 +131,7 @@ export {
   DATA_TABLE_ACTION_BUTTON_WIDTH,
   DATA_TABLE_ACTION_FOR_ALL_COLUMNS,
   DATA_TABLE_BORDER_WIDTH,
+  DATA_TABLE_BORDER_WIDTH_VISUAL_REFRESH,
   DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
   DATA_TABLE_BUILT_IN_COLUMN_IDS,
   DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP,

package/esm/tables/DataTable/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/DataTable/constants.ts"],
-  "sourcesContent": ["import { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js';\nimport type { DataTableConfig } from './public.api.js';\n\ntype RowDensity = 'default' | 'condensed' | 'comfortable';\n\n// DataTable config props\nexport const DEFAULT_DATATABLE_CONFIG: DataTableConfig = {\n  fullWidth: false,\n  fullHeight: false,\n  lineWrap: false,\n  selectableRows: undefined,\n  resizable: false,\n  sortable: false,\n  pagination: {},\n  variant: {\n    contained: true,\n    fontStyle: 'text',\n    headers: 'default',\n    rowDensity: 'default',\n    rowSeparation: 'horizontalDividers',\n    verticalDividers: false,\n  },\n  columnVisibility: {},\n  rowThresholds: [],\n};\n\n// Visual variant defaults\nexport const DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT = {\n  rowSeparation: 'horizontalDividers',\n  verticalDividers: false,\n  contained: true,\n  rowDensity: 'default',\n  fontStyle: 'text',\n  headers: 'default',\n  verticalAlignment: 'top',\n} as const;\n\n// Pagination\n// ----------\n/** Default page index if pagination is defined, but no page index is set. */\nexport const DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX = 0;\n/** Default page size options for pagination. */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS = [\n  10, 20, 50, 100, 250, 500, 1000,\n] as const;\n/** Default page size option (100). */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION =\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS[3];\n\n// Table sizing\n// -------------------------\n/** Minimum allowed width of a DataTable column (px). */\nexport const DATA_TABLE_MIN_WIDTH = 120;\n/** Minimum width for empty state (px). */\nexport const DATA_TABLE_EMPTY_MIN_WIDTH = 200;\n/** Border width for DataTable (px). */\nexport const DATA_TABLE_BORDER_WIDTH = 2;\n\n// Column sizing and resizing\n// -------------------------\n/** Default minimum width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;\n/** Default width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;\n/** Width of the column resize handle (px). */\nexport const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;\n/** Minimum width for built-in columns (px). */\nexport const DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH = 24;\n/** Spacer width for sub-rows (px). */\nexport const DATA_TABLE_SUB_ROW_SPACER = 16;\n/** Indentation per sub-row level (px). */\nexport const DATA_TABLE_SUB_ROW_INDENT_GRID = DATA_TABLE_SUB_ROW_SPACER;\n/** Pill size for threshold indicators (px). */\nexport const DATA_TABLE_THRESHOLD_PILL_SIZE = 4;\n/** Width of the cell and column action button (px). */\nexport const DATA_TABLE_ACTION_BUTTON_WIDTH = 24;\n/**\n * When hovering over a header cell, extra CSS padding is applied to make room for the action menu trigger.\n * However, if the column is too narrow, this extra padding causes layout issues.\n * To prevent this, we enforce a minimum width threshold:\n * if the column width is below this threshold, no extra padding is added.\n */\nexport const DATA_TABLE_NARROW_HEADER_THRESHOLDS: Record<RowDensity, number> = {\n  condensed: 28 + 6,\n  default: 34 + 12,\n  comfortable: 38 + 16,\n};\nexport const DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN = -22; // 20px icon + 2px spacing\nexport const DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN = -30; // 28px bubble + 2px spacing\nexport const DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN = -22;\nexport const DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN =\n  DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN +\n  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;\nexport const DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN =\n  DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN +\n  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;\n\n// Row sizing and padding\n// ---------------------\n/** Default row heights for different densities (px). */\nexport const DATA_TABLE_ROW_HEIGHT_MAP: Record<RowDensity, number> = {\n  condensed: 24,\n  default: 36,\n  comfortable: 44,\n};\n/** Default top/bottom padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_VERTICAL_PADDING_MAP: Record<RowDensity, number> =\n  {\n    condensed: 2,\n    default: 8,\n    comfortable: 12,\n  };\n/** Paddings for the sub-row indicator column (px). */\nexport const DATA_TABLE_SUB_ROW_DENSITY_PADDING_MAP =\n  DATA_TABLE_CELL_VERTICAL_PADDING_MAP;\n/** Default left/right padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP: Record<\n  RowDensity,\n  number\n> = {\n  condensed: 6,\n  default: 12,\n  comfortable: 16,\n};\n/** Border width for rows when row separation is set to 'horizontalDividers' (px). */\nexport const DATA_TABLE_ROW_BORDER = 1;\n/** Height of horizontal divider (px). */\nexport const DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT = 1;\n/** Default min row height (px). */\nexport const DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT =\n  DATA_TABLE_ROW_HEIGHT_MAP.condensed;\n\n/** Width of the horizontal scroll shadow (px). */\nexport const DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH = 50;\n\n// Z-index and layering\n// --------------------\n/** Z-index values used for DataTable layering. */\nexport const DATA_TABLE_ZINDEX_CONFIG = {\n  DEFAULT: 1,\n  STICKY_LEFT: 2,\n  STICKY_RIGHT: 3, // must be higher than left pinned columns to ensure deterministic overlap\n  PINNED_RESIZE_HANDLE: 3,\n  OVERLAY: 4,\n  HEADER: 5,\n  STICKY_SCROLL_SHADOW: 6,\n} as const;\n\n// Built-in column IDs\n// -------------------\nexport const DATA_TABLE_ROW_DRAG_COLUMN_ID = 'DataTableRowDragColumn';\nexport const DATA_TABLE_ROW_SELECTION_COLUMN_ID = 'DataTableRowSelectionColumn';\nexport const DATA_TABLE_ROW_DETAILS_COLUMN_ID = 'DataTableRowDetailsColumn';\nexport const DATA_TABLE_ROW_ACTIONS_COLUMN_ID = 'DataTableRowActions';\nexport const DATA_TABLE_SPACER_COLUMN_ID = 'DataTableSpacerColumn';\nexport const DATA_TABLE_BUILT_IN_COLUMN_IDS = new Set([\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_SELECTION_COLUMN_ID,\n  DATA_TABLE_ROW_DETAILS_COLUMN_ID,\n  DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  DATA_TABLE_SPACER_COLUMN_ID,\n]);\n\n// Row identifiers and suffixes\n// ---------------------------\n/** Symbol used to identify a row as a details row. */\nexport const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(\n  'DETAILS_ROW_IDENTIFIER',\n);\n/** Appended to row id of cloned expanded row. */\nexport const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = '-expanded';\n/** Appended to row id of a pinning shadow cell. */\nexport const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = '-shadow-cell';\n/** Symbol used to identify a rows' parity. */\nexport const DATA_TABLE_DETAILS_ROW_PARITY = Symbol('DETAILS_ROW_PARITY');\n/** Symbol used to indicate that an action applies to all columns. */\nexport const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(\n  'Action applies to all columns',\n);\n\n// CSV/Download\n// ------------\n/** Default name of the downloaded CSV file. */\nexport const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = 'table-data.csv';\n/** Column header prepended to CSV file if table has sub-rows. */\nexport const DATA_TABLE_INDEX_COLUMN_HEADER = 'index';\n\n// CSS variables\n// ---------------------------------\n/** CSS variable for left position during column resizing. */\nexport const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR =\n  '--resizing-leftPosition';\n/** CSS variable for right position during column resizing. */\nexport const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR =\n  '--resizing-rightPosition';\n/** CSS variable for resizing size. */\nexport const DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR = '--strato-resizing-size';\n/** CSS variable for drag-and-drop placeholder divider top offset. */\nexport const DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR =\n  '--column-dnd-placeholder-divider-top';\n\n// CSS styles\n/** Opacity value for non-target elements during drag-and-drop. */\nexport const DATA_TABLE_DND_NON_TARGET_OPACITY = 0.2;\n\n// Virtualization\n// --------------\n/** Overscan row count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN = 20;\n/** Overscan column count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN = 5;\n/** Default scrollTo options for virtualizer. */\nexport const DATA_TABLE_DEFAULT_SCROLL_OPTIONS: {\n  align: 'start' | 'center' | 'end';\n  behavior: 'auto' | 'smooth';\n} = {\n  align: 'start',\n  behavior: 'auto',\n};\n\n// Miscellaneous\n// -------------\n/** Default icon size (px). */\nexport const DATA_TABLE_DEFAULT_ICON_SIZE = 20;\n/** Default icon padding (px). */\nexport const DATA_TABLE_DEFAULT_ICON_PADDING = 2;\n/** Icon size for sub-row expander (px). */\nexport const DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE =\n  DATA_TABLE_DEFAULT_ICON_SIZE;\n/** Default horizontal alignment for columns if not specified. */\nexport const DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT: Required<DataTableAlignmentColumnDef>['alignment'] =\n  'left';\n"],
-  "mappings": "AAMO,MAAM,2BAA4C;AAAA,EACvD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb,SAAS;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,kBAAkB;AAAA,EACpB;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,eAAe,CAAC;AAClB;AAGO,MAAM,2CAA2C;AAAA,EACtD,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AACrB;AAKO,MAAM,2CAA2C;AAEjD,MAAM,uCAAuC;AAAA,EAClD;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAC7B;AAEO,MAAM,sCACX,qCAAqC,CAAC;AAKjC,MAAM,uBAAuB;AAE7B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAKhC,MAAM,sCAAsC;AAE5C,MAAM,kCAAkC;AAExC,MAAM,wCAAwC;AAE9C,MAAM,sCAAsC;AAE5C,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAOvC,MAAM,sCAAkE;AAAA,EAC7E,WAAW,KAAK;AAAA,EAChB,SAAS,KAAK;AAAA,EACd,aAAa,KAAK;AACpB;AACO,MAAM,yCAAyC;AAC/C,MAAM,4CAA4C;AAClD,MAAM,yCAAyC;AAC/C,MAAM,gDACX,yCACA;AACK,MAAM,mDACX,4CACA;AAKK,MAAM,4BAAwD;AAAA,EACnE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,uCACX;AAAA,EACE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEK,MAAM,yCACX;AAEK,MAAM,yCAGT;AAAA,EACF,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,wBAAwB;AAE9B,MAAM,uCAAuC;AAE7C,MAAM,oCACX,0BAA0B;AAGrB,MAAM,4CAA4C;AAKlD,MAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA;AAAA,EACd,sBAAsB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,sBAAsB;AACxB;AAIO,MAAM,gCAAgC;AACtC,MAAM,qCAAqC;AAC3C,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,8BAA8B;AACpC,MAAM,iCAAiC,oBAAI,IAAI;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAKM,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAEO,MAAM,oCAAoC;AAE1C,MAAM,+CAA+C;AAErD,MAAM,gCAAgC,uBAAO,oBAAoB;AAEjE,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAKO,MAAM,oCAAoC;AAE1C,MAAM,iCAAiC;AAKvC,MAAM,4CACX;AAEK,MAAM,6CACX;AAEK,MAAM,0CAA0C;AAEhD,MAAM,6CACX;AAIK,MAAM,oCAAoC;AAK1C,MAAM,sCAAsC;AAE5C,MAAM,yCAAyC;AAE/C,MAAM,oCAGT;AAAA,EACF,OAAO;AAAA,EACP,UAAU;AACZ;AAKO,MAAM,+BAA+B;AAErC,MAAM,kCAAkC;AAExC,MAAM,wCACX;AAEK,MAAM,0CACX;",
+  "sourcesContent": ["import { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js';\nimport type { DataTableConfig } from './public.api.js';\n\ntype RowDensity = 'default' | 'condensed' | 'comfortable';\n\n// DataTable config props\nexport const DEFAULT_DATATABLE_CONFIG: DataTableConfig = {\n  fullWidth: false,\n  fullHeight: false,\n  lineWrap: false,\n  selectableRows: undefined,\n  resizable: false,\n  sortable: false,\n  pagination: {},\n  variant: {\n    contained: true,\n    fontStyle: 'text',\n    headers: 'default',\n    rowDensity: 'default',\n    rowSeparation: 'horizontalDividers',\n    verticalDividers: false,\n  },\n  columnVisibility: {},\n  rowThresholds: [],\n};\n\n// Visual variant defaults\nexport const DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT = {\n  rowSeparation: 'horizontalDividers',\n  verticalDividers: false,\n  contained: true,\n  rowDensity: 'default',\n  fontStyle: 'text',\n  headers: 'default',\n  verticalAlignment: 'top',\n} as const;\n\n// Pagination\n// ----------\n/** Default page index if pagination is defined, but no page index is set. */\nexport const DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX = 0;\n/** Default page size options for pagination. */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS = [\n  10, 20, 50, 100, 250, 500, 1000,\n] as const;\n/** Default page size option (100). */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION =\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS[3];\n\n// Table sizing\n// -------------------------\n/** Minimum allowed width of a DataTable column (px). */\nexport const DATA_TABLE_MIN_WIDTH = 120;\n/** Minimum width for empty state (px). */\nexport const DATA_TABLE_EMPTY_MIN_WIDTH = 200;\n/** Border width for DataTable (px). */\nexport const DATA_TABLE_BORDER_WIDTH = 2;\n/** Border width for DataTable when visual refresh is enabled (px). */\nexport const DATA_TABLE_BORDER_WIDTH_VISUAL_REFRESH = 1;\n\n// Column sizing and resizing\n// -------------------------\n/** Default minimum width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;\n/** Default width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;\n/** Width of the column resize handle (px). */\nexport const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;\n/** Minimum width for built-in columns (px). */\nexport const DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH = 24;\n/** Spacer width for sub-rows (px). */\nexport const DATA_TABLE_SUB_ROW_SPACER = 16;\n/** Indentation per sub-row level (px). */\nexport const DATA_TABLE_SUB_ROW_INDENT_GRID = DATA_TABLE_SUB_ROW_SPACER;\n/** Pill size for threshold indicators (px). */\nexport const DATA_TABLE_THRESHOLD_PILL_SIZE = 4;\n/** Width of the cell and column action button (px). */\nexport const DATA_TABLE_ACTION_BUTTON_WIDTH = 24;\n/**\n * When hovering over a header cell, extra CSS padding is applied to make room for the action menu trigger.\n * However, if the column is too narrow, this extra padding causes layout issues.\n * To prevent this, we enforce a minimum width threshold:\n * if the column width is below this threshold, no extra padding is added.\n */\nexport const DATA_TABLE_NARROW_HEADER_THRESHOLDS: Record<RowDensity, number> = {\n  condensed: 28 + 6,\n  default: 34 + 12,\n  comfortable: 38 + 16,\n};\nexport const DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN = -22; // 20px icon + 2px spacing\nexport const DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN = -30; // 28px bubble + 2px spacing\nexport const DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN = -22;\nexport const DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN =\n  DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN +\n  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;\nexport const DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN =\n  DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN +\n  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;\n\n// Row sizing and padding\n// ---------------------\n/** Default row heights for different densities (px). */\nexport const DATA_TABLE_ROW_HEIGHT_MAP: Record<RowDensity, number> = {\n  condensed: 24,\n  default: 36,\n  comfortable: 44,\n};\n/** Default top/bottom padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_VERTICAL_PADDING_MAP: Record<RowDensity, number> =\n  {\n    condensed: 2,\n    default: 8,\n    comfortable: 12,\n  };\n/** Paddings for the sub-row indicator column (px). */\nexport const DATA_TABLE_SUB_ROW_DENSITY_PADDING_MAP =\n  DATA_TABLE_CELL_VERTICAL_PADDING_MAP;\n/** Default left/right padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP: Record<\n  RowDensity,\n  number\n> = {\n  condensed: 6,\n  default: 12,\n  comfortable: 16,\n};\n/** Border width for rows when row separation is set to 'horizontalDividers' (px). */\nexport const DATA_TABLE_ROW_BORDER = 1;\n/** Height of horizontal divider (px). */\nexport const DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT = 1;\n/** Default min row height (px). */\nexport const DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT =\n  DATA_TABLE_ROW_HEIGHT_MAP.condensed;\n\n/** Width of the horizontal scroll shadow (px). */\nexport const DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH = 50;\n\n// Z-index and layering\n// --------------------\n/** Z-index values used for DataTable layering. */\nexport const DATA_TABLE_ZINDEX_CONFIG = {\n  DEFAULT: 1,\n  STICKY_LEFT: 2,\n  STICKY_RIGHT: 3, // must be higher than left pinned columns to ensure deterministic overlap\n  PINNED_RESIZE_HANDLE: 3,\n  OVERLAY: 4,\n  HEADER: 5,\n  STICKY_SCROLL_SHADOW: 6,\n} as const;\n\n// Built-in column IDs\n// -------------------\nexport const DATA_TABLE_ROW_DRAG_COLUMN_ID = 'DataTableRowDragColumn';\nexport const DATA_TABLE_ROW_SELECTION_COLUMN_ID = 'DataTableRowSelectionColumn';\nexport const DATA_TABLE_ROW_DETAILS_COLUMN_ID = 'DataTableRowDetailsColumn';\nexport const DATA_TABLE_ROW_ACTIONS_COLUMN_ID = 'DataTableRowActions';\nexport const DATA_TABLE_SPACER_COLUMN_ID = 'DataTableSpacerColumn';\nexport const DATA_TABLE_BUILT_IN_COLUMN_IDS = new Set([\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_SELECTION_COLUMN_ID,\n  DATA_TABLE_ROW_DETAILS_COLUMN_ID,\n  DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  DATA_TABLE_SPACER_COLUMN_ID,\n]);\n\n// Row identifiers and suffixes\n// ---------------------------\n/** Symbol used to identify a row as a details row. */\nexport const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(\n  'DETAILS_ROW_IDENTIFIER',\n);\n/** Appended to row id of cloned expanded row. */\nexport const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = '-expanded';\n/** Appended to row id of a pinning shadow cell. */\nexport const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = '-shadow-cell';\n/** Symbol used to identify a rows' parity. */\nexport const DATA_TABLE_DETAILS_ROW_PARITY = Symbol('DETAILS_ROW_PARITY');\n/** Symbol used to indicate that an action applies to all columns. */\nexport const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(\n  'Action applies to all columns',\n);\n\n// CSV/Download\n// ------------\n/** Default name of the downloaded CSV file. */\nexport const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = 'table-data.csv';\n/** Column header prepended to CSV file if table has sub-rows. */\nexport const DATA_TABLE_INDEX_COLUMN_HEADER = 'index';\n\n// CSS variables\n// ---------------------------------\n/** CSS variable for left position during column resizing. */\nexport const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR =\n  '--resizing-leftPosition';\n/** CSS variable for right position during column resizing. */\nexport const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR =\n  '--resizing-rightPosition';\n/** CSS variable for resizing size. */\nexport const DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR = '--strato-resizing-size';\n/** CSS variable for drag-and-drop placeholder divider top offset. */\nexport const DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR =\n  '--column-dnd-placeholder-divider-top';\n\n// CSS styles\n/** Opacity value for non-target elements during drag-and-drop. */\nexport const DATA_TABLE_DND_NON_TARGET_OPACITY = 0.2;\n\n// Virtualization\n// --------------\n/** Overscan row count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN = 20;\n/** Overscan column count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN = 5;\n/** Default scrollTo options for virtualizer. */\nexport const DATA_TABLE_DEFAULT_SCROLL_OPTIONS = {\n  align: 'start',\n  behavior: 'auto',\n} as const;\n\n// Miscellaneous\n// -------------\n/** Default icon size (px). */\nexport const DATA_TABLE_DEFAULT_ICON_SIZE = 20;\n/** Default icon padding (px). */\nexport const DATA_TABLE_DEFAULT_ICON_PADDING = 2;\n/** Icon size for sub-row expander (px). */\nexport const DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE =\n  DATA_TABLE_DEFAULT_ICON_SIZE;\n/** Default horizontal alignment for columns if not specified. */\nexport const DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT: Required<DataTableAlignmentColumnDef>['alignment'] =\n  'left';\n"],
+  "mappings": "AAMO,MAAM,2BAA4C;AAAA,EACvD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb,SAAS;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,kBAAkB;AAAA,EACpB;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,eAAe,CAAC;AAClB;AAGO,MAAM,2CAA2C;AAAA,EACtD,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AACrB;AAKO,MAAM,2CAA2C;AAEjD,MAAM,uCAAuC;AAAA,EAClD;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAC7B;AAEO,MAAM,sCACX,qCAAqC,CAAC;AAKjC,MAAM,uBAAuB;AAE7B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAEhC,MAAM,yCAAyC;AAK/C,MAAM,sCAAsC;AAE5C,MAAM,kCAAkC;AAExC,MAAM,wCAAwC;AAE9C,MAAM,sCAAsC;AAE5C,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAOvC,MAAM,sCAAkE;AAAA,EAC7E,WAAW,KAAK;AAAA,EAChB,SAAS,KAAK;AAAA,EACd,aAAa,KAAK;AACpB;AACO,MAAM,yCAAyC;AAC/C,MAAM,4CAA4C;AAClD,MAAM,yCAAyC;AAC/C,MAAM,gDACX,yCACA;AACK,MAAM,mDACX,4CACA;AAKK,MAAM,4BAAwD;AAAA,EACnE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,uCACX;AAAA,EACE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEK,MAAM,yCACX;AAEK,MAAM,yCAGT;AAAA,EACF,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,wBAAwB;AAE9B,MAAM,uCAAuC;AAE7C,MAAM,oCACX,0BAA0B;AAGrB,MAAM,4CAA4C;AAKlD,MAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA;AAAA,EACd,sBAAsB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,sBAAsB;AACxB;AAIO,MAAM,gCAAgC;AACtC,MAAM,qCAAqC;AAC3C,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,8BAA8B;AACpC,MAAM,iCAAiC,oBAAI,IAAI;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAKM,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAEO,MAAM,oCAAoC;AAE1C,MAAM,+CAA+C;AAErD,MAAM,gCAAgC,uBAAO,oBAAoB;AAEjE,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAKO,MAAM,oCAAoC;AAE1C,MAAM,iCAAiC;AAKvC,MAAM,4CACX;AAEK,MAAM,6CACX;AAEK,MAAM,0CAA0C;AAEhD,MAAM,6CACX;AAIK,MAAM,oCAAoC;AAK1C,MAAM,sCAAsC;AAE5C,MAAM,yCAAyC;AAE/C,MAAM,oCAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,UAAU;AACZ;AAKO,MAAM,+BAA+B;AAErC,MAAM,kCAAkC;AAExC,MAAM,wCACX;AAEK,MAAM,0CACX;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.css

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-4-1 {
+._1ku1w3z0-3-5-2 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-4-1::after {
+._1ku1w3z1-3-5-2::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-4-1::after {
+._1ku1w3z2-3-5-2::after {
   left: 0;
 }
-._1ku1w3z3-3-4-1::after {
+._1ku1w3z3-3-5-2::after {
   right: 0;
 }
-._1ku1w3z4-3-4-1::before {
+._1ku1w3z4-3-5-2::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-4-1 {
+._1ku1w3z5-3-5-2 {
   display: none;
 }
-._1ku1w3z6-3-4-1 {
+._1ku1w3z6-3-5-2 {
   cursor: grab;
 }
-._1ku1w3z7-3-4-1 {
+._1ku1w3z7-3-5-2 {
   pointer-events: none;
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js

@@ -1,9 +1,9 @@
 import "./ColumnOrder.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var columnDndOverlay = "_1ku1w3z0-3-4-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-4-1", enabled: "_1ku1w3z6-3-4-1", inactive: "_1ku1w3z7-3-4-1" };
-var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-4-1", variantClassNames: { left: { true: "_1ku1w3z2-3-4-1", false: "_1ku1w3z3-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-4-1";
+var columnDndOverlay = "_1ku1w3z0-3-5-2";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-5-2", enabled: "_1ku1w3z6-3-5-2", inactive: "_1ku1w3z7-3-5-2" };
+var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-5-2", variantClassNames: { left: { true: "_1ku1w3z2-3-5-2", false: "_1ku1w3z3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-5-2";
 export {
   columnDndOverlay,
   headerDragAndDrop,

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrder.css.ts"],
-  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-4-1';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-4-1',enabled:'_1ku1w3z6-3-4-1',inactive:'_1ku1w3z7-3-4-1'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-4-1',variantClassNames:{left:{true:'_1ku1w3z2-3-4-1',false:'_1ku1w3z3-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-4-1';"],
+  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-5-2';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-5-2',enabled:'_1ku1w3z6-3-5-2',inactive:'_1ku1w3z7-3-5-2'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-5-2',variantClassNames:{left:{true:'_1ku1w3z2-3-5-2',false:'_1ku1w3z3-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB;AACvB,IAAI,oBAAoB,EAAC,UAAS,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB;AACxG,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,mBAAmB;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.js

@@ -9,27 +9,27 @@ import {
 } from "@dnd-kit/core";
 import clsx from "clsx";
 import {
+  useCallback,
   useEffect,
   useMemo,
   useRef,
-  useState,
-  useCallback
+  useState
 } from "react";
 import { createPortal } from "react-dom";
 import {
+  createHeaderPlaceholder,
   createRestrictColumnDragAndDrop,
   customCollisionDetection,
+  getCustomScrollSpeed,
   getDraggableAreaBounds,
   getDraggedHeaderElement,
-  updateColumnOrderOnDragEnd,
   indicateInsertPosition,
-  getCustomScrollSpeed,
   SCROLL_PROXIMITY_ZONE,
-  createHeaderPlaceholder,
-  unpinnedHeaderFilter
+  unpinnedHeaderFilter,
+  updateColumnOrderOnDragEnd
 } from "./column-order-dnd-utils.js";
 import * as styles from "./ColumnOrder.sty.js";
-import { DATA_TABLE_BORDER_WIDTH } from "../../constants.js";
+import { getDataTableBorderWidth } from "../../../utils/data-table-border-width.js";
 import { useDataTable } from "../../contexts/DataTableContext.js";
 const DRAGGED_HEADER_DEFAULT_WIDTH = 100;
 const DRAGGED_HEADER_DEFAULT_HEIGHT = 37;
@@ -236,7 +236,7 @@ function ColumnOrderDragAndDropContext({
               className: clsx(styles.columnDndOverlay),
               style: {
                 // the observed header size includes a border which we don't want in the overlay
-                height: draggedHeaderSize.height - DATA_TABLE_BORDER_WIDTH,
+                height: draggedHeaderSize.height - getDataTableBorderWidth(),
                 width: draggedHeaderSize.width
               },
               children: /* @__PURE__ */ jsx("div", { ref: dragOverlayContent })

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.tsx"],
-  "sourcesContent": ["import {\n  DndContext as DragAndDropContext,\n  DragOverlay,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type Active,\n  type DragOverEvent,\n  type Over,\n} from '@dnd-kit/core';\nimport clsx from 'clsx';\nimport {\n  type ReactNode,\n  type RefObject,\n  type JSX,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  getDraggableAreaBounds,\n  getDraggedHeaderElement,\n  updateColumnOrderOnDragEnd,\n  indicateInsertPosition,\n  getCustomScrollSpeed,\n  SCROLL_PROXIMITY_ZONE,\n  createHeaderPlaceholder,\n  unpinnedHeaderFilter,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport { DATA_TABLE_BORDER_WIDTH } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { Column } from '../../hooks/useTable/types.js';\n\nconst DRAGGED_HEADER_DEFAULT_WIDTH = 100;\nconst DRAGGED_HEADER_DEFAULT_HEIGHT = 37;\n\nexport function ColumnOrderDragAndDropContext({\n  children,\n}: Readonly<{\n  children: ReactNode;\n}>): JSX.Element {\n  const table = useDataTable();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n  const visualVariantOptions = table.getVisualVariantOptions();\n  const containedVariant = visualVariantOptions.contained;\n  const hasSubHeaders = table.getHeaderGroups().length > 1;\n  const verticalDividers =\n    visualVariantOptions.verticalDividers || hasSubHeaders;\n  const isColumnPinningEnabled = table.options.enableColumnPinning;\n  const pinnedColumns = table.getState().columnPinning;\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\n  // relevant only if column pinning is enabled\n  const pinnedDraggableAreaBoundsRef = useRef<\n    ReturnType<typeof getDraggableAreaBounds>\n  >({ left: undefined, right: undefined });\n  const [draggedHeaderSize, setDraggedHeaderSize] = useState<{\n    width: number;\n    height: number;\n  }>({\n    width: DRAGGED_HEADER_DEFAULT_WIDTH,\n    height: DRAGGED_HEADER_DEFAULT_HEIGHT,\n  });\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n  );\n\n  const restrictColumnDragAndDrop = useMemo(\n    () =>\n      createRestrictColumnDragAndDrop(\n        totalHeaderHeight,\n        containedVariant,\n        pinnedColumns,\n        hasSubHeaders,\n        virtualizationContainer,\n      ),\n    [\n      totalHeaderHeight,\n      virtualizationContainer,\n      containedVariant,\n      pinnedColumns,\n      hasSubHeaders,\n    ],\n  );\n\n  const placeholderElement = useRef<HTMLElement | null>(null);\n\n  // Since we disable autoScroll when column pinning is enabled, we drive scrolling from\n  // a continuous RAF(requestAnimationFrame) loop. Using a ref prevents scroll updates from causing re-renders.\n  const scrollFrameRef = useRef<number | null>(null);\n\n  // Track raw pointer position to determine scroll direction.\n  // Using a pointermove listener (rather than dnd-kit's `delta`) is necessary\n  // because dnd-kit adds scroll compensation to `delta.x` as the container\n  // scrolls, which would cause the right-scroll zone to never exit.\n  // relevant only if column pinning is enabled\n  const pointerXRef = useRef<number>(0);\n  const trackPointerXRef = useRef<((e: PointerEvent) => void) | null>(null);\n  // hold the parent header DOM element when dragging a child column so the scroll loop\n  // can check whether the parent is already fully visible and there's no need for scrolling\n  const parentHeaderElementRef = useRef<HTMLElement | null>(null);\n\n  const stopScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      cancelAnimationFrame(scrollFrameRef.current);\n      scrollFrameRef.current = null;\n    }\n  }, []);\n\n  const startScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      return;\n    }\n\n    const loop = () => {\n      if (!virtualizationContainer) {\n        scrollFrameRef.current = null;\n        return;\n      }\n\n      // Read pointer position fresh every frame. RAF callbacks always run after\n      // all pending input events (including pointermove) have been processed,\n      // so pointerXRef.current is guaranteed to hold the latest position here.\n      const mouseX = pointerXRef.current;\n      const containerRect = virtualizationContainer.getBoundingClientRect();\n      const rightBound =\n        pinnedDraggableAreaBoundsRef.current.right ?? containerRect.right;\n      const leftBound =\n        pinnedDraggableAreaBoundsRef.current.left ?? containerRect.left;\n\n      // Positive penetration means the cursor has entered the proximity zone.\n      // Zero or negative means it is safely away from that boundary.\n      const rightPenetration = mouseX - (rightBound - SCROLL_PROXIMITY_ZONE);\n      const leftPenetration = leftBound + SCROLL_PROXIMITY_ZONE - mouseX;\n\n      const { scrollLeft, scrollWidth, clientWidth } = virtualizationContainer;\n\n      // When a child column is being dragged, scrolling should be capped only until the parent header becomes fully visible.\n      // if the parent is already fully visible, skip scrolling entirely.\n      let maxScrollRight = Infinity;\n      let maxScrollLeft = Infinity;\n\n      const parentEl = parentHeaderElementRef.current;\n      if (parentEl) {\n        const parentRect = parentEl.getBoundingClientRect();\n\n        // many pixels the parent overflows past the right / left bound.\n        maxScrollRight = Math.max(0, parentRect.right - rightBound);\n        maxScrollLeft = Math.max(0, leftBound - parentRect.left);\n      }\n\n      if (rightPenetration > 0 && leftPenetration <= 0) {\n        // Scale speed linearly from MIN at zone entry to MAX at the boundary.\n        const scrollSpeed = getCustomScrollSpeed(rightPenetration);\n\n        const canScrollRight = scrollLeft < scrollWidth - clientWidth;\n        if (canScrollRight && maxScrollRight > 0) {\n          // the RAF loop keeps scheduling the next frame as long as maxScrollRight > speed. Same for right scroll.\n          virtualizationContainer.scrollLeft += Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollRight),\n          );\n        }\n      } else if (leftPenetration > 0 && rightPenetration <= 0) {\n        const scrollSpeed = getCustomScrollSpeed(leftPenetration);\n\n        const canScrollLeft = scrollLeft > 0;\n        if (canScrollLeft && maxScrollLeft > 0) {\n          virtualizationContainer.scrollLeft -= Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollLeft),\n          );\n        }\n      }\n\n      scrollFrameRef.current = requestAnimationFrame(loop);\n    };\n\n    scrollFrameRef.current = requestAnimationFrame(loop);\n  }, [virtualizationContainer]);\n\n  const cleanupDragState = useCallback(() => {\n    stopScrollLoop();\n    parentHeaderElementRef.current = null;\n    if (trackPointerXRef.current) {\n      window.removeEventListener('pointermove', trackPointerXRef.current);\n      trackPointerXRef.current = null;\n    }\n  }, [stopScrollLoop]);\n\n  const handleDragStart = ({ active }: { active: Active }) => {\n    const draggedColumn = active.data.current?.column as Column<\n      unknown,\n      unknown\n    >;\n\n    // Read bounds fresh from the DOM on every drag start event so they always reflect\n    // the current scroll position and are never stale from an earlier render.\n    if (isColumnPinningEnabled) {\n      pinnedDraggableAreaBoundsRef.current = getDraggableAreaBounds(\n        pinnedColumns,\n        virtualizationContainer,\n        hasSubHeaders ? 1 : 0,\n      );\n\n      // Start tracking raw pointer position for scroll zone detection.\n      trackPointerXRef.current = (e: PointerEvent) => {\n        pointerXRef.current = e.clientX;\n      };\n      window.addEventListener('pointermove', trackPointerXRef.current, {\n        passive: true,\n      });\n      // If the dragged column is a child, store its parent header element so\n      // the scroll loop can cap scrolling to keep the parent fully visible.\n      if (draggedColumn.parent) {\n        const parentId = draggedColumn.parent.id;\n        parentHeaderElementRef.current =\n          virtualizationContainer?.querySelector<HTMLElement>(\n            `[role=\"columnheader\"][data-header-row=\"0\"][data-columnid=${CSS.escape(\n              parentId,\n            )}]${unpinnedHeaderFilter}`,\n          ) ?? null;\n      }\n\n      // Start the RAF loop immediately so proximity-zone entry is detected on\n      // every frame regardless of when onDragMove fires relative to pointermove.\n      startScrollLoop();\n    }\n\n    table.setDraggedHeaderColumn(draggedColumn);\n    setDraggedHeaderSize(table.getHeaderSize(active.id as string));\n    setDragOverlayContent(active.data.current?.portalRef);\n\n    // In order to make sure the header size does not change when the header\n    // is portalled out, we create a placeholder element in the header in order\n    // to preserve the grid layout\n    const { headerGroupElement, draggedHeaderElement } =\n      getDraggedHeaderElement(String(active.id), virtualizationContainer);\n\n    if (\n      headerGroupElement === null ||\n      !(headerGroupElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    if (\n      draggedHeaderElement === null ||\n      !(draggedHeaderElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    // Extract the position of the dragged element and its size in order\n    // to position the placeholder.\n    const { gridArea } = draggedHeaderElement.style;\n    const { width, height } = draggedHeaderElement.getBoundingClientRect();\n    if (!gridArea) {\n      return;\n    }\n\n    const verticalDividerOptions =\n      verticalDividers && !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ? {\n            isParentColumn:\n              draggedHeaderElement.getAttribute('data-header-row') === '0',\n            heightOffset:\n              headerGroupElement.offsetHeight -\n              draggedHeaderElement.offsetHeight,\n          }\n        : undefined;\n\n    placeholderElement.current = createHeaderPlaceholder(\n      gridArea,\n      width,\n      height,\n      verticalDividerOptions,\n    );\n    headerGroupElement.appendChild(placeholderElement.current);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    indicateInsertPosition(event, virtualizationContainer);\n  };\n\n  const handleDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }) => {\n    setDragOverlayContent(null);\n    cleanupDragState();\n    updateColumnOrderOnDragEnd({\n      active,\n      over,\n      table,\n      virtualizationContainer,\n    });\n    // with nested headers, removing the placeholder element too early could lead to wrong header measurements\n    // therefore, the placeholder is removed just before the next repaint\n    requestAnimationFrame(() => {\n      placeholderElement.current?.remove();\n    });\n  };\n\n  // Clean up the RAF scroll loop and the global pointermove listener if\n  // the component unmounts during an active drag (e.g. the table is removed\n  // from the DOM), since handleDragEnd would never fire in that case.\n  useEffect(() => {\n    return () => {\n      cleanupDragState();\n      placeholderElement.current?.remove();\n    };\n  }, [stopScrollLoop, cleanupDragState]);\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      autoScroll={!isColumnPinningEnabled}\n      accessibility={{ container: table.getRowVirtualizationContainer() }}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            data-drag-overlay\n            dropAnimation={null}\n            className={clsx(styles.columnDndOverlay)}\n            style={{\n              // the observed header size includes a border which we don't want in the overlay\n              height: draggedHeaderSize.height - DATA_TABLE_BORDER_WIDTH,\n              width: draggedHeaderSize.width,\n            }}\n          >\n            <div ref={dragOverlayContent} />\n          </DragOverlay>,\n          document.body,\n        )\n      }\n      {children}\n    </DragAndDropContext>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Active,\n  DndContext as DragAndDropContext,\n  type DragOverEvent,\n  DragOverlay,\n  MouseSensor,\n  type Over,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  createHeaderPlaceholder,\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  getCustomScrollSpeed,\n  getDraggableAreaBounds,\n  getDraggedHeaderElement,\n  indicateInsertPosition,\n  SCROLL_PROXIMITY_ZONE,\n  unpinnedHeaderFilter,\n  updateColumnOrderOnDragEnd,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { Column } from '../../hooks/useTable/types.js';\n\nconst DRAGGED_HEADER_DEFAULT_WIDTH = 100;\nconst DRAGGED_HEADER_DEFAULT_HEIGHT = 37;\n\nexport function ColumnOrderDragAndDropContext({\n  children,\n}: Readonly<{\n  children: ReactNode;\n}>): JSX.Element {\n  const table = useDataTable();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n  const visualVariantOptions = table.getVisualVariantOptions();\n  const containedVariant = visualVariantOptions.contained;\n  const hasSubHeaders = table.getHeaderGroups().length > 1;\n  const verticalDividers =\n    visualVariantOptions.verticalDividers || hasSubHeaders;\n  const isColumnPinningEnabled = table.options.enableColumnPinning;\n  const pinnedColumns = table.getState().columnPinning;\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\n  // relevant only if column pinning is enabled\n  const pinnedDraggableAreaBoundsRef = useRef<\n    ReturnType<typeof getDraggableAreaBounds>\n  >({ left: undefined, right: undefined });\n  const [draggedHeaderSize, setDraggedHeaderSize] = useState<{\n    width: number;\n    height: number;\n  }>({\n    width: DRAGGED_HEADER_DEFAULT_WIDTH,\n    height: DRAGGED_HEADER_DEFAULT_HEIGHT,\n  });\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n  );\n\n  const restrictColumnDragAndDrop = useMemo(\n    () =>\n      createRestrictColumnDragAndDrop(\n        totalHeaderHeight,\n        containedVariant,\n        pinnedColumns,\n        hasSubHeaders,\n        virtualizationContainer,\n      ),\n    [\n      totalHeaderHeight,\n      virtualizationContainer,\n      containedVariant,\n      pinnedColumns,\n      hasSubHeaders,\n    ],\n  );\n\n  const placeholderElement = useRef<HTMLElement | null>(null);\n\n  // Since we disable autoScroll when column pinning is enabled, we drive scrolling from\n  // a continuous RAF(requestAnimationFrame) loop. Using a ref prevents scroll updates from causing re-renders.\n  const scrollFrameRef = useRef<number | null>(null);\n\n  // Track raw pointer position to determine scroll direction.\n  // Using a pointermove listener (rather than dnd-kit's `delta`) is necessary\n  // because dnd-kit adds scroll compensation to `delta.x` as the container\n  // scrolls, which would cause the right-scroll zone to never exit.\n  // relevant only if column pinning is enabled\n  const pointerXRef = useRef<number>(0);\n  const trackPointerXRef = useRef<((e: PointerEvent) => void) | null>(null);\n  // hold the parent header DOM element when dragging a child column so the scroll loop\n  // can check whether the parent is already fully visible and there's no need for scrolling\n  const parentHeaderElementRef = useRef<HTMLElement | null>(null);\n\n  const stopScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      cancelAnimationFrame(scrollFrameRef.current);\n      scrollFrameRef.current = null;\n    }\n  }, []);\n\n  const startScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      return;\n    }\n\n    const loop = () => {\n      if (!virtualizationContainer) {\n        scrollFrameRef.current = null;\n        return;\n      }\n\n      // Read pointer position fresh every frame. RAF callbacks always run after\n      // all pending input events (including pointermove) have been processed,\n      // so pointerXRef.current is guaranteed to hold the latest position here.\n      const mouseX = pointerXRef.current;\n      const containerRect = virtualizationContainer.getBoundingClientRect();\n      const rightBound =\n        pinnedDraggableAreaBoundsRef.current.right ?? containerRect.right;\n      const leftBound =\n        pinnedDraggableAreaBoundsRef.current.left ?? containerRect.left;\n\n      // Positive penetration means the cursor has entered the proximity zone.\n      // Zero or negative means it is safely away from that boundary.\n      const rightPenetration = mouseX - (rightBound - SCROLL_PROXIMITY_ZONE);\n      const leftPenetration = leftBound + SCROLL_PROXIMITY_ZONE - mouseX;\n\n      const { scrollLeft, scrollWidth, clientWidth } = virtualizationContainer;\n\n      // When a child column is being dragged, scrolling should be capped only until the parent header becomes fully visible.\n      // if the parent is already fully visible, skip scrolling entirely.\n      let maxScrollRight = Infinity;\n      let maxScrollLeft = Infinity;\n\n      const parentEl = parentHeaderElementRef.current;\n      if (parentEl) {\n        const parentRect = parentEl.getBoundingClientRect();\n\n        // many pixels the parent overflows past the right / left bound.\n        maxScrollRight = Math.max(0, parentRect.right - rightBound);\n        maxScrollLeft = Math.max(0, leftBound - parentRect.left);\n      }\n\n      if (rightPenetration > 0 && leftPenetration <= 0) {\n        // Scale speed linearly from MIN at zone entry to MAX at the boundary.\n        const scrollSpeed = getCustomScrollSpeed(rightPenetration);\n\n        const canScrollRight = scrollLeft < scrollWidth - clientWidth;\n        if (canScrollRight && maxScrollRight > 0) {\n          // the RAF loop keeps scheduling the next frame as long as maxScrollRight > speed. Same for right scroll.\n          virtualizationContainer.scrollLeft += Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollRight),\n          );\n        }\n      } else if (leftPenetration > 0 && rightPenetration <= 0) {\n        const scrollSpeed = getCustomScrollSpeed(leftPenetration);\n\n        const canScrollLeft = scrollLeft > 0;\n        if (canScrollLeft && maxScrollLeft > 0) {\n          virtualizationContainer.scrollLeft -= Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollLeft),\n          );\n        }\n      }\n\n      scrollFrameRef.current = requestAnimationFrame(loop);\n    };\n\n    scrollFrameRef.current = requestAnimationFrame(loop);\n  }, [virtualizationContainer]);\n\n  const cleanupDragState = useCallback(() => {\n    stopScrollLoop();\n    parentHeaderElementRef.current = null;\n    if (trackPointerXRef.current) {\n      window.removeEventListener('pointermove', trackPointerXRef.current);\n      trackPointerXRef.current = null;\n    }\n  }, [stopScrollLoop]);\n\n  const handleDragStart = ({ active }: { active: Active }) => {\n    const draggedColumn = active.data.current?.column as Column<\n      unknown,\n      unknown\n    >;\n\n    // Read bounds fresh from the DOM on every drag start event so they always reflect\n    // the current scroll position and are never stale from an earlier render.\n    if (isColumnPinningEnabled) {\n      pinnedDraggableAreaBoundsRef.current = getDraggableAreaBounds(\n        pinnedColumns,\n        virtualizationContainer,\n        hasSubHeaders ? 1 : 0,\n      );\n\n      // Start tracking raw pointer position for scroll zone detection.\n      trackPointerXRef.current = (e: PointerEvent) => {\n        pointerXRef.current = e.clientX;\n      };\n      window.addEventListener('pointermove', trackPointerXRef.current, {\n        passive: true,\n      });\n      // If the dragged column is a child, store its parent header element so\n      // the scroll loop can cap scrolling to keep the parent fully visible.\n      if (draggedColumn.parent) {\n        const parentId = draggedColumn.parent.id;\n        parentHeaderElementRef.current =\n          virtualizationContainer?.querySelector<HTMLElement>(\n            `[role=\"columnheader\"][data-header-row=\"0\"][data-columnid=${CSS.escape(\n              parentId,\n            )}]${unpinnedHeaderFilter}`,\n          ) ?? null;\n      }\n\n      // Start the RAF loop immediately so proximity-zone entry is detected on\n      // every frame regardless of when onDragMove fires relative to pointermove.\n      startScrollLoop();\n    }\n\n    table.setDraggedHeaderColumn(draggedColumn);\n    setDraggedHeaderSize(table.getHeaderSize(active.id as string));\n    setDragOverlayContent(active.data.current?.portalRef);\n\n    // In order to make sure the header size does not change when the header\n    // is portalled out, we create a placeholder element in the header in order\n    // to preserve the grid layout\n    const { headerGroupElement, draggedHeaderElement } =\n      getDraggedHeaderElement(String(active.id), virtualizationContainer);\n\n    if (\n      headerGroupElement === null ||\n      !(headerGroupElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    if (\n      draggedHeaderElement === null ||\n      !(draggedHeaderElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    // Extract the position of the dragged element and its size in order\n    // to position the placeholder.\n    const { gridArea } = draggedHeaderElement.style;\n    const { width, height } = draggedHeaderElement.getBoundingClientRect();\n    if (!gridArea) {\n      return;\n    }\n\n    const verticalDividerOptions =\n      verticalDividers && !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ? {\n            isParentColumn:\n              draggedHeaderElement.getAttribute('data-header-row') === '0',\n            heightOffset:\n              headerGroupElement.offsetHeight -\n              draggedHeaderElement.offsetHeight,\n          }\n        : undefined;\n\n    placeholderElement.current = createHeaderPlaceholder(\n      gridArea,\n      width,\n      height,\n      verticalDividerOptions,\n    );\n    headerGroupElement.appendChild(placeholderElement.current);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    indicateInsertPosition(event, virtualizationContainer);\n  };\n\n  const handleDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }) => {\n    setDragOverlayContent(null);\n    cleanupDragState();\n    updateColumnOrderOnDragEnd({\n      active,\n      over,\n      table,\n      virtualizationContainer,\n    });\n    // with nested headers, removing the placeholder element too early could lead to wrong header measurements\n    // therefore, the placeholder is removed just before the next repaint\n    requestAnimationFrame(() => {\n      placeholderElement.current?.remove();\n    });\n  };\n\n  // Clean up the RAF scroll loop and the global pointermove listener if\n  // the component unmounts during an active drag (e.g. the table is removed\n  // from the DOM), since handleDragEnd would never fire in that case.\n  useEffect(() => {\n    return () => {\n      cleanupDragState();\n      placeholderElement.current?.remove();\n    };\n  }, [stopScrollLoop, cleanupDragState]);\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      autoScroll={!isColumnPinningEnabled}\n      accessibility={{ container: table.getRowVirtualizationContainer() }}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            data-drag-overlay\n            dropAnimation={null}\n            className={clsx(styles.columnDndOverlay)}\n            style={{\n              // the observed header size includes a border which we don't want in the overlay\n              height: draggedHeaderSize.height - getDataTableBorderWidth(),\n              width: draggedHeaderSize.width,\n            }}\n          >\n            <div ref={dragOverlayContent} />\n          </DragOverlay>,\n          document.body,\n        )\n      }\n      {children}\n    </DragAndDropContext>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/column-order-dnd-utils.js

@@ -1,7 +1,7 @@
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
 import * as styles from "./ColumnOrder.sty.js";
+import { getDataTableBorderWidth } from "../../../utils/data-table-border-width.js";
 import {
-  DATA_TABLE_BORDER_WIDTH,
   DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
   DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT
@@ -276,9 +276,9 @@ function getHeaderBounds(columnId, virtualizationContainer, rowIndex = 0, center
 const getTableBounds = (containedVariant, virtualizationContainer, totalHeaderHeight) => {
   const parentRect = virtualizationContainer.getBoundingClientRect();
   return {
-    left: containedVariant ? parentRect.left + DATA_TABLE_BORDER_WIDTH : parentRect.left,
-    right: containedVariant ? parentRect.right - DATA_TABLE_BORDER_WIDTH : parentRect.right,
-    top: containedVariant ? parentRect.top + DATA_TABLE_BORDER_WIDTH : parentRect.top,
+    left: containedVariant ? parentRect.left + getDataTableBorderWidth() : parentRect.left,
+    right: containedVariant ? parentRect.right - getDataTableBorderWidth() : parentRect.right,
+    top: containedVariant ? parentRect.top + getDataTableBorderWidth() : parentRect.top,
     bottom: parentRect.bottom - totalHeaderHeight
   };
 };