@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-2-1';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-2-1';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-2-1',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-2-1',false:'_14dz1ui3-3-2-1'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-3-0';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-3-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-3-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-3-0',false:'_14dz1ui3-3-3-0'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,+BAA+B;AACnC,IAAI,gCAAgC,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css

@@ -1,4 +1,4 @@
-._13ypmcy0-3-2-1 {
+._13ypmcy0-3-3-0 {
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
@@ -7,21 +7,21 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-2-1[data-parentcolumnid] {
+._13ypmcy0-3-3-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._13ypmcy0-3-2-1:last-child, ._13ypmcy0-3-2-1:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
+._13ypmcy0-3-3-0:last-child, ._13ypmcy0-3-3-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
   border-bottom: none;
 }
-._13ypmcy0-3-2-1[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
+._13ypmcy0-3-3-0[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-2-1[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-2-1, [data-pinned-position="left"] + ._13ypmcy0-3-2-1) {
+._13ypmcy0-3-3-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-3-0, [data-pinned-position="left"] + ._13ypmcy0-3-3-0) {
   border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy1-3-2-1 {
+._13ypmcy1-3-3-0 {
   visibility: hidden;
 }
-._13ypmcy2-3-2-1 {
+._13ypmcy2-3-3-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -1,7 +1,7 @@
 import "./DataTableColumnsListItem.css";
-var columnName = "_13ypmcy2-3-2-1";
-var columnsListItem = "_13ypmcy0-3-2-1";
-var dragging = "_13ypmcy1-3-2-1";
+var columnName = "_13ypmcy2-3-3-0";
+var columnsListItem = "_13ypmcy0-3-3-0";
+var dragging = "_13ypmcy1-3-3-0";
 export {
   columnName,
   columnsListItem,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-2-1';\nexport var columnsListItem = '_13ypmcy0-3-2-1';\nexport var dragging = '_13ypmcy1-3-2-1';"],
+  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-3-0';\nexport var columnsListItem = '_13ypmcy0-3-3-0';\nexport var dragging = '_13ypmcy1-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,WAAW;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css

@@ -1,18 +1,18 @@
-._1rh6hs00-3-2-1 {
+._1rh6hs00-3-3-0 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-2-1 {
+._1rh6hs01-3-3-0 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-2-1._1rh6hs01-3-2-1 {
+._1rh6hs01-3-3-0._1rh6hs01-3-3-0 {
   min-width: unset;
 }
-._1rh6hs02-3-2-1 {
+._1rh6hs02-3-3-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-2-1 div:has(> ._1rh6hs02-3-2-1) {
+._dmotjm0-3-3-0 div:has(> ._1rh6hs02-3-3-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.js

@@ -44,7 +44,7 @@ const DataTableVisibilityFilterControls = (props) => {
   if (!showFilterControl && !showVisibilityControl) {
     return null;
   }
-  const dataDtName = showHideAllState === true ? "ColumnSettingsHideAll" : "ColumnSettingsShowAll";
+  const dataDtProperties = `state:${showHideAllState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -58,7 +58,8 @@ const DataTableVisibilityFilterControls = (props) => {
             value: showHideAllState,
             onChange: onShowHideAllChange,
             className: styles.showHideAll,
-            "data-dt-name": dataDtName,
+            "data-dt-name": "ColumnSettingsShowHideAll",
+            "data-dt-properties": dataDtProperties,
             children: intl.formatMessage(dataTableMessages.showHideAll)
           }
         ),

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.tsx"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type SetStateAction,\n  type JSX,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableVisibilityFilterControls.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { SearchInput } from '../../../../../forms/search-input/SearchInput.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/** Debounce time (ms) for search input in column settings modal. */\nconst SEARCH_DEBOUNCE_TIME_MS = 300;\n\ninterface DataTableVisibilityFilterControlsProps {\n  /** Updates the current value of the filter. */\n  setActiveFilterValue: Dispatch<SetStateAction<string>>;\n  /** Determines whether all columns are currently visible. */\n  showHideAllState: boolean | 'indeterminate';\n  /** Callback that is called when the visibility of all columns changes. */\n  onShowHideAllChange: () => void;\n  /** Determines whether to show the show/hide all columns checkbox. */\n  showVisibilityControl: boolean;\n  /** Determines whether to show the search input for filtering columns. */\n  showFilterControl: boolean;\n}\n\n/**\n * Content of the area above the columns list in the ColumnSettingsModal.\n * - a checkbox indicating whether all columns are visible and\n * - a search input for filtering the listed columns in the column settings modal. Filtering is debounced with 300ms.\n * @internal\n */\nexport const DataTableVisibilityFilterControls = (\n  props: DataTableVisibilityFilterControlsProps,\n): JSX.Element | null => {\n  const {\n    setActiveFilterValue,\n    showHideAllState,\n    onShowHideAllChange,\n    showVisibilityControl,\n    showFilterControl,\n  } = props;\n\n  const intl = useIntl();\n  const [filterValue, setFilterValue] = useState('');\n\n  const debouncedUpdateRef = useRef(\n    debounce((value: string, setter: Dispatch<SetStateAction<string>>) => {\n      setter(value);\n    }, SEARCH_DEBOUNCE_TIME_MS),\n  );\n\n  const onChange = useCallback(\n    (value: string) => {\n      setFilterValue(value);\n      debouncedUpdateRef.current(value, setActiveFilterValue);\n    },\n    [setActiveFilterValue],\n  );\n\n  useEffect(() => {\n    const debouncedUpdate = debouncedUpdateRef.current;\n    return () => {\n      debouncedUpdate.cancel();\n    };\n  }, []);\n\n  if (!showFilterControl && !showVisibilityControl) {\n    return null;\n  }\n\n  const dataDtName =\n    showHideAllState === true\n      ? 'ColumnSettingsHideAll'\n      : 'ColumnSettingsShowAll';\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={styles.filterControls}\n    >\n      {showVisibilityControl && (\n        <Checkbox\n          value={showHideAllState}\n          onChange={onShowHideAllChange}\n          className={styles.showHideAll}\n          data-dt-name={dataDtName}\n        >\n          {intl.formatMessage(dataTableMessages.showHideAll)}\n        </Checkbox>\n      )}\n      {showFilterControl && (\n        <SearchInput\n          placeholder={intl.formatMessage(\n            dataTableMessages.searchBarPlaceholder,\n          )}\n          className={styles.searchInput}\n          onChange={onChange}\n          value={filterValue}\n          data-dt-name=\"ColumnSettingsFilter\"\n        />\n      )}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAqFI,SAMI,KANJ;AArFJ,SAAS,gBAAgB;AACzB;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAGlC,MAAM,0BAA0B;AAqBzB,MAAM,oCAAoC,CAC/C,UACuB;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,qBAAqB;AAAA,IACzB,SAAS,CAAC,OAAe,WAA6C;AACpE,aAAO,KAAK;AAAA,IACd,GAAG,uBAAuB;AAAA,EAC5B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,UAAkB;AACjB,qBAAe,KAAK;AACpB,yBAAmB,QAAQ,OAAO,oBAAoB;AAAA,IACxD;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,YAAU,MAAM;AACd,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO,MAAM;AACX,sBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,qBAAqB,CAAC,uBAAuB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,aACJ,qBAAqB,OACjB,0BACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,OAAO;AAAA,MAEjB;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAW,OAAO;AAAA,YAClB,gBAAc;AAAA,YAEb,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,QACnD;AAAA,QAED,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,cAChB,kBAAkB;AAAA,YACpB;AAAA,YACA,WAAW,OAAO;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,YACP,gBAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type SetStateAction,\n  type JSX,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableVisibilityFilterControls.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { SearchInput } from '../../../../../forms/search-input/SearchInput.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/** Debounce time (ms) for search input in column settings modal. */\nconst SEARCH_DEBOUNCE_TIME_MS = 300;\n\ninterface DataTableVisibilityFilterControlsProps {\n  /** Updates the current value of the filter. */\n  setActiveFilterValue: Dispatch<SetStateAction<string>>;\n  /** Determines whether all columns are currently visible. */\n  showHideAllState: boolean | 'indeterminate';\n  /** Callback that is called when the visibility of all columns changes. */\n  onShowHideAllChange: () => void;\n  /** Determines whether to show the show/hide all columns checkbox. */\n  showVisibilityControl: boolean;\n  /** Determines whether to show the search input for filtering columns. */\n  showFilterControl: boolean;\n}\n\n/**\n * Content of the area above the columns list in the ColumnSettingsModal.\n * - a checkbox indicating whether all columns are visible and\n * - a search input for filtering the listed columns in the column settings modal. Filtering is debounced with 300ms.\n * @internal\n */\nexport const DataTableVisibilityFilterControls = (\n  props: DataTableVisibilityFilterControlsProps,\n): JSX.Element | null => {\n  const {\n    setActiveFilterValue,\n    showHideAllState,\n    onShowHideAllChange,\n    showVisibilityControl,\n    showFilterControl,\n  } = props;\n\n  const intl = useIntl();\n  const [filterValue, setFilterValue] = useState('');\n\n  const debouncedUpdateRef = useRef(\n    debounce((value: string, setter: Dispatch<SetStateAction<string>>) => {\n      setter(value);\n    }, SEARCH_DEBOUNCE_TIME_MS),\n  );\n\n  const onChange = useCallback(\n    (value: string) => {\n      setFilterValue(value);\n      debouncedUpdateRef.current(value, setActiveFilterValue);\n    },\n    [setActiveFilterValue],\n  );\n\n  useEffect(() => {\n    const debouncedUpdate = debouncedUpdateRef.current;\n    return () => {\n      debouncedUpdate.cancel();\n    };\n  }, []);\n\n  if (!showFilterControl && !showVisibilityControl) {\n    return null;\n  }\n\n  const dataDtProperties = `state:${\n    showHideAllState === true ? 'hide' : 'show'\n  }`;\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={styles.filterControls}\n    >\n      {showVisibilityControl && (\n        <Checkbox\n          value={showHideAllState}\n          onChange={onShowHideAllChange}\n          className={styles.showHideAll}\n          data-dt-name=\"ColumnSettingsShowHideAll\"\n          data-dt-properties={dataDtProperties}\n        >\n          {intl.formatMessage(dataTableMessages.showHideAll)}\n        </Checkbox>\n      )}\n      {showFilterControl && (\n        <SearchInput\n          placeholder={intl.formatMessage(\n            dataTableMessages.searchBarPlaceholder,\n          )}\n          className={styles.searchInput}\n          onChange={onChange}\n          value={filterValue}\n          data-dt-name=\"ColumnSettingsFilter\"\n        />\n      )}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAoFI,SAMI,KANJ;AApFJ,SAAS,gBAAgB;AACzB;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAGlC,MAAM,0BAA0B;AAqBzB,MAAM,oCAAoC,CAC/C,UACuB;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,qBAAqB;AAAA,IACzB,SAAS,CAAC,OAAe,WAA6C;AACpE,aAAO,KAAK;AAAA,IACd,GAAG,uBAAuB;AAAA,EAC5B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,UAAkB;AACjB,qBAAe,KAAK;AACpB,yBAAmB,QAAQ,OAAO,oBAAoB;AAAA,IACxD;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,YAAU,MAAM;AACd,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO,MAAM;AACX,sBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,qBAAqB,CAAC,uBAAuB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,SACvB,qBAAqB,OAAO,SAAS,MACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,OAAO;AAAA,MAEjB;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAW,OAAO;AAAA,YAClB,gBAAa;AAAA,YACb,sBAAoB;AAAA,YAEnB,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,QACnD;AAAA,QAED,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,cAChB,kBAAkB;AAAA,YACpB;AAAA,YACA,WAAW,OAAO;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,YACP,gBAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js

@@ -1,8 +1,8 @@
 import "../../../../../overlays/modal/Modal.css";
 import "./DataTableVisibilityFilterControls.css";
-var filterControls = "_1rh6hs02-3-2-1";
-var searchInput = "_1rh6hs01-3-2-1";
-var showHideAll = "_1rh6hs00-3-2-1";
+var filterControls = "_1rh6hs02-3-3-0";
+var searchInput = "_1rh6hs01-3-3-0";
+var showHideAll = "_1rh6hs00-3-3-0";
 export {
   filterControls,
   searchInput,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css.ts"],
-  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-2-1';\nexport var searchInput = '_1rh6hs01-3-2-1';\nexport var showHideAll = '_1rh6hs00-3-2-1';"],
+  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-3-0';\nexport var searchInput = '_1rh6hs01-3-3-0';\nexport var showHideAll = '_1rh6hs00-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/constants.js

@@ -53,9 +53,11 @@ const DATA_TABLE_NARROW_HEADER_THRESHOLDS = {
   default: 34 + 12,
   comfortable: 38 + 16
 };
-const DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN = -20;
-const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;
-const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN = DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN + DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN;
+const DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN = -22;
+const DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN = -30;
+const DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN = -22;
+const DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN = DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN + DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;
+const DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN = DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN + DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN;
 const DATA_TABLE_ROW_HEIGHT_MAP = {
   condensed: 24,
   default: 36,
@@ -149,9 +151,11 @@ export {
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
   DATA_TABLE_DOWNLOAD_CSV_FILE_NAME,
   DATA_TABLE_EMPTY_MIN_WIDTH,
-  DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN,
-  DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN,
-  DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN,
+  DATA_TABLE_HEADER_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_MULTISORT_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_MULTISORT_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_SORTED_ACTION_OFFSET_MARGIN,
+  DATA_TABLE_HEADER_SORTED_OFFSET_MARGIN,
   DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT,
   DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH,
   DATA_TABLE_INDEX_COLUMN_HEADER,

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_HOVERED_MARGIN = -20;\nexport const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;\nexport const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN =\n  DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN +\n  DATA_TABLE_HEADER_ACTION_HOVERED_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,0CAA0C;AAChD,MAAM,0CAA0C;AAChD,MAAM,iDACX,0CACA;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\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;",
   "names": []
 }

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

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-2-1 {
+._1ku1w3z0-3-3-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-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-2-1::after {
+._1ku1w3z1-3-3-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-2-1::after {
+._1ku1w3z2-3-3-0::after {
   left: 0;
 }
-._1ku1w3z3-3-2-1::after {
+._1ku1w3z3-3-3-0::after {
   right: 0;
 }
-._1ku1w3z4-3-2-1::before {
+._1ku1w3z4-3-3-0::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-2-1 {
+._1ku1w3z5-3-3-0 {
   display: none;
 }
-._1ku1w3z6-3-2-1 {
+._1ku1w3z6-3-3-0 {
   cursor: grab;
 }
-._1ku1w3z7-3-2-1 {
+._1ku1w3z7-3-3-0 {
   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-2-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-2-1", enabled: "_1ku1w3z6-3-2-1", inactive: "_1ku1w3z7-3-2-1" };
-var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-2-1", variantClassNames: { left: { true: "_1ku1w3z2-3-2-1", false: "_1ku1w3z3-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-2-1";
+var columnDndOverlay = "_1ku1w3z0-3-3-0";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-3-0", enabled: "_1ku1w3z6-3-3-0", inactive: "_1ku1w3z7-3-3-0" };
+var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-3-0", variantClassNames: { left: { true: "_1ku1w3z2-3-3-0", false: "_1ku1w3z3-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-3-0";
 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-2-1';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-2-1',enabled:'_1ku1w3z6-3-2-1',inactive:'_1ku1w3z7-3-2-1'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-2-1',variantClassNames:{left:{true:'_1ku1w3z2-3-2-1',false:'_1ku1w3z3-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-2-1';"],
+  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-3-0';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-3-0',enabled:'_1ku1w3z6-3-3-0',inactive:'_1ku1w3z7-3-3-0'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-3-0',variantClassNames:{left:{true:'_1ku1w3z2-3-3-0',false:'_1ku1w3z3-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-3-0';"],
   "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

@@ -72,6 +72,7 @@ function ColumnOrderDragAndDropContext({
       sensors,
       collisionDetection: customCollisionDetection,
       modifiers: [restrictColumnDragAndDrop],
+      accessibility: { container: table.getRowVirtualizationContainer() },
       onDragStart: ({ active }) => {
         const draggedColumn = active.data.current?.column;
         table.setDraggedHeaderColumn(draggedColumn);

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} from '@dnd-kit/core';\nimport clsx from 'clsx';\nimport {\n  type ReactNode,\n  type RefObject,\n  type JSX,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport {\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  handleDragEnd,\n  indicateInsertPosition,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport {\n  DATA_TABLE_BORDER_WIDTH,\n  DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,\n} 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 pinnedColumns = table.getState().columnPinning;\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\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  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      onDragStart={({ active }) => {\n        const draggedColumn = active.data.current?.column as Column<\n          unknown,\n          unknown\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 =\n          virtualizationContainer?.querySelector('[role=\"rowgroup\"]');\n        if (\n          headerGroupElement === null ||\n          !(headerGroupElement instanceof HTMLElement)\n        ) {\n          return;\n        }\n\n        const draggedHeaderElement = headerGroupElement.querySelector(\n          `[data-headerid=\"${CSS.escape(String(active.id))}\"]`,\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        placeholderElement.current = document.createElement('div');\n        placeholderElement.current.style.gridArea = gridArea;\n        placeholderElement.current.style.width = `${width}px`;\n        placeholderElement.current.style.height = `${height}px`;\n        if (\n          verticalDividers &&\n          !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ) {\n          const isParentColumn =\n            draggedHeaderElement.getAttribute('data-header-row') === '0';\n          const heightOffset =\n            headerGroupElement.offsetHeight - draggedHeaderElement.offsetHeight;\n\n          placeholderElement.current.classList.add(styles.verticalDividers);\n          placeholderElement.current.style.setProperty(\n            DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,\n            !isParentColumn && heightOffset !== 0\n              ? `${heightOffset}px`\n              : Spacings.Size4,\n          );\n        }\n        headerGroupElement.appendChild(placeholderElement.current);\n      }}\n      onDragOver={(event) =>\n        indicateInsertPosition(event, virtualizationContainer)\n      }\n      onDragEnd={({ active, over }) => {\n        handleDragEnd({\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      {\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  DndContext as DragAndDropContext,\n  DragOverlay,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport clsx from 'clsx';\nimport {\n  type ReactNode,\n  type RefObject,\n  type JSX,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport {\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  handleDragEnd,\n  indicateInsertPosition,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport {\n  DATA_TABLE_BORDER_WIDTH,\n  DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,\n} 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 pinnedColumns = table.getState().columnPinning;\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\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  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      accessibility={{ container: table.getRowVirtualizationContainer() }}\n      onDragStart={({ active }) => {\n        const draggedColumn = active.data.current?.column as Column<\n          unknown,\n          unknown\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 =\n          virtualizationContainer?.querySelector('[role=\"rowgroup\"]');\n        if (\n          headerGroupElement === null ||\n          !(headerGroupElement instanceof HTMLElement)\n        ) {\n          return;\n        }\n\n        const draggedHeaderElement = headerGroupElement.querySelector(\n          `[data-headerid=\"${CSS.escape(String(active.id))}\"]`,\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        placeholderElement.current = document.createElement('div');\n        placeholderElement.current.style.gridArea = gridArea;\n        placeholderElement.current.style.width = `${width}px`;\n        placeholderElement.current.style.height = `${height}px`;\n        if (\n          verticalDividers &&\n          !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ) {\n          const isParentColumn =\n            draggedHeaderElement.getAttribute('data-header-row') === '0';\n          const heightOffset =\n            headerGroupElement.offsetHeight - draggedHeaderElement.offsetHeight;\n\n          placeholderElement.current.classList.add(styles.verticalDividers);\n          placeholderElement.current.style.setProperty(\n            DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,\n            !isParentColumn && heightOffset !== 0\n              ? `${heightOffset}px`\n              : Spacings.Size4,\n          );\n        }\n        headerGroupElement.appendChild(placeholderElement.current);\n      }}\n      onDragOver={(event) =>\n        indicateInsertPosition(event, virtualizationContainer)\n      }\n      onDragEnd={({ active, over }) => {\n        handleDragEnd({\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      {\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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",
   "names": []
 }

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

@@ -1,9 +1,9 @@
-._17437gx0-3-2-1 {
+._17437gx0-3-3-0 {
   cursor: col-resize;
 }
-._17437gx0-3-2-1 > * {
+._17437gx0-3-3-0 > * {
   pointer-events: none;
 }
-._17437gx0-3-2-1 ._14sp6az0-3-2-1 * {
+._17437gx0-3-3-0 ._14sp6az0-3-3-0 * {
   pointer-events: none !important;
 }

package/esm/tables/DataTable/features/ColumnSizing/ColumnSizing.js

@@ -22,12 +22,34 @@ const getClientX = (event) => {
     return event.clientX;
   }
 };
+const getHeaderCellWidth = (resizeHandle) => resizeHandle.parentElement?.getBoundingClientRect().width;
+const clearResizerFocus = () => {
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur();
+  }
+};
 const DataTableColumnSizing = {
   createHeader(header, table) {
-    const clearResizerFocus = () => {
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
+    const clearContainerStyles = (container) => {
+      requestAnimationFrame(() => {
+        container?.style.removeProperty(
+          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR
+        );
+        document.body.classList.remove(styles.tableColumnResizing);
+        if (table.options.enableColumnPinning) {
+          container?.querySelectorAll(
+            `[style*=${DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`
+          ).forEach((elem) => {
+            if (elem instanceof HTMLElement) {
+              const style = elem.style;
+              style.removeProperty(DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);
+              style.removeProperty(
+                DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR
+              );
+            }
+          });
+        }
+      });
     };
     const addPinnedColumnsPositionsStyles = (pinnedPosition, container, colId, newPosition) => {
       const resizingPositionVariable = pinnedPosition === "left" ? DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR : DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR;
@@ -73,27 +95,6 @@ const DataTableColumnSizing = {
         });
       }
     };
-    const clearContainerStyles = (container) => {
-      requestAnimationFrame(() => {
-        container?.style.removeProperty(
-          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR
-        );
-        document.body.classList.remove(styles.tableColumnResizing);
-        if (table.options.enableColumnPinning) {
-          container?.querySelectorAll(
-            `[style*=${DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`
-          ).forEach((elem) => {
-            if (elem instanceof HTMLElement) {
-              const style = elem.style;
-              style.removeProperty(DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);
-              style.removeProperty(
-                DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR
-              );
-            }
-          });
-        }
-      });
-    };
     header.handleResize = (event) => {
       const column = table.getColumn(header.column.id);
       const canResize = column?.getCanResize();
@@ -115,17 +116,15 @@ const DataTableColumnSizing = {
       let columnIndex;
       if (pinnedPosition) {
         const pinnedState = table.getState().columnPinning;
-        const targetId = target.previousElementSibling?.getAttribute("data-headerid");
-        columnIndex = pinnedState[pinnedPosition]?.findIndex(
-          (id) => id === targetId
-        );
+        const headerId = target.parentElement?.dataset.headerid;
+        columnIndex = headerId ? pinnedState[pinnedPosition]?.indexOf(headerId) : void 0;
         if (columnIndex !== void 0 && pinnedState[pinnedPosition]?.length) {
           for (const element of pinnedState[pinnedPosition]) {
             pinnedColumnsWidths[pinnedPosition][element] = table.getColumnOrHeaderWidth(element);
           }
         }
       }
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }
@@ -309,7 +308,7 @@ const DataTableColumnSizing = {
       if (target instanceof HTMLElement === false) {
         return;
       }
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }
@@ -336,14 +335,7 @@ const DataTableColumnSizing = {
         if (!(target2 instanceof HTMLButtonElement)) {
           return;
         }
-        const targetRow = target2.dataset.headerRow;
-        const targetColumn = target2.dataset.column;
-        const parent = target2.parentElement;
-        const cell = parent?.querySelector(
-          `div[data-header-row="${CSS.escape(
-            String(targetRow)
-          )}"][data-column="${CSS.escape(String(targetColumn))}"]`
-        );
+        const cell = target2.parentElement;
         if (cell) {
           const { width } = cell.getBoundingClientRect();
           table.setColumnSizingInfo((old) => ({
@@ -378,7 +370,7 @@ const DataTableColumnSizing = {
         return;
       }
       event.persist();
-      const startSize = target.previousElementSibling?.getBoundingClientRect().width;
+      const startSize = getHeaderCellWidth(target);
       if (startSize === void 0) {
         return;
       }