@elliemae/ds-data-table 3.53.1-rc.0 → 3.54.0-beta.2

package/dist/esm/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/addons/Editables/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { TextEditableCell } from "./TextEditableCell/TextEditableCell.js";
 import { ComboboxEditableCell } from "./ComboboxEditableCell/ComboboxEditableCell.js";
+import { TextEditableCell } from "./TextEditableCell/TextEditableCell.js";
 const outOfTheBoxEditables = {
   "ds-edit-text": { EditableComponent: TextEditableCell },
   "ds-edit-combobox": {

package/dist/esm/addons/Editables/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Editables/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\nimport type { DSDataTableT } from 'react-desc-prop-types.js';\n\nexport const outOfTheBoxEditables: Record<\n  string,\n  { EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> }\n> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAG9B,MAAM,uBAGT;AAAA,EACF,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSDataTableT } from 'react-desc-prop-types.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\n\nexport const outOfTheBoxEditables: Record<\n  string,\n  { EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> }\n> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAE1B,MAAM,uBAGT;AAAA,EACF,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { BaseSelectFilter } from "./BaseSelectFilter.js";
 import { uid } from "uid";
-import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { BaseSelectFilter } from "./BaseSelectFilter.js";
 const SingleSelectFilter = ({
   column,
   patchHeaderFilterButtonAndMenu,

package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAnBF,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,qBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAlBF,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AAI1B,MAAM,qBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/esm/configs/useAutocalculated/index.js

@@ -10,14 +10,15 @@ import { useTableResizeCb } from "../useTableResizeCb.js";
 const estimateSize = () => 36;
 const useAutoCalculated = (propsWithDefaults) => {
   const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;
-  const visibleRangeRef = useRef({ start: 0, end: 0 });
   const virtualListRef = useRef(null);
+  const [bodyClientWidth, setBodyClientWidth] = React2.useState("100%");
   const columnHeaderRef = useRef(null);
   const lastSelected = useRef(-1);
   const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);
   const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);
   const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);
   const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);
+  const visibleRangeRef = useRef({ start: 0, end: 0, overscan: 15, size: dataLength });
   const virtualListHelpers = useVirtual({
     size: dataLength,
     parentRef: virtualListRef,
@@ -70,7 +71,9 @@ const useAutoCalculated = (propsWithDefaults) => {
     firstFocuseableColumnHeaderId,
     virtualListRef,
     columnHeaderRef,
-    lastSelected
+    lastSelected,
+    bodyClientWidth,
+    setBodyClientWidth
   };
 };
 export {

package/dist/esm/configs/useAutocalculated/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useAutocalculated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKvB,OAAOA,UAAS,WAAW,SAAS,cAAc;AAClD,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgBA,OAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const [bodyClientWidth, setBodyClientWidth] = React.useState<number | string>('100%');\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // when rangeExtractor is invoked this will be filled with the current range\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0, overscan: 15, size: dataLength });\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n    bodyClientWidth,\n    setBodyClientWidth,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,OAAOA,UAAS,WAAW,SAAS,cAAc;AAClD,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAA0B,MAAM;AACpF,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAGxG,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,IAAI,MAAM,WAAW,CAAC;AAG1F,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgBA,OAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { useEffect } from "react";
+function useFreezeVirtualScrollOnDrag(containerRef, isDragging) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !isDragging) return;
+    let lastScrollTop = container.scrollTop;
+    const lockVerticalScroll = () => {
+      if (container.scrollTop !== lastScrollTop) {
+        container.scrollTop = lastScrollTop;
+      } else {
+        lastScrollTop = container.scrollTop;
+      }
+    };
+    container.addEventListener("scroll", lockVerticalScroll);
+    return () => {
+      container.removeEventListener("scroll", lockVerticalScroll);
+    };
+  }, [isDragging, containerRef]);
+}
+export {
+  useFreezeVirtualScrollOnDrag
+};
+//# sourceMappingURL=useFreezeVirtualScrollOnDrag.js.map

package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useFreezeVirtualScrollOnDrag.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport type React from 'react';\nimport { useEffect } from 'react';\nexport function useFreezeVirtualScrollOnDrag(containerRef: React.RefObject<HTMLElement>, isDragging: boolean) {\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !isDragging) return;\n\n    let lastScrollTop = container.scrollTop;\n\n    const lockVerticalScroll = () => {\n      if (container.scrollTop !== lastScrollTop) {\n        container.scrollTop = lastScrollTop;\n      } else {\n        lastScrollTop = container.scrollTop;\n      }\n    };\n\n    container.addEventListener('scroll', lockVerticalScroll);\n\n    return () => {\n      container.removeEventListener('scroll', lockVerticalScroll);\n    };\n  }, [isDragging, containerRef]);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AACnB,SAAS,6BAA6B,cAA4C,YAAqB;AAC5G,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,CAAC,WAAY;AAE/B,QAAI,gBAAgB,UAAU;AAE9B,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU,cAAc,eAAe;AACzC,kBAAU,YAAY;AAAA,MACxB,OAAO;AACL,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,iBAAiB,UAAU,kBAAkB;AAEvD,WAAO,MAAM;AACX,gBAAU,oBAAoB,UAAU,kBAAkB;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,YAAY,YAAY,CAAC;AAC/B;",
+  "names": []
+}

package/dist/esm/configs/useInternalStateConfig.js

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react";
 const useInternalStateConfig = () => {
   const [drilldownRowId, setDrilldownRowId] = useState(null);
   const [focusedRowId, setFocusedRowId] = useState(null);
+  const [isHeaderCellDragging, setIsHeaderCellDragging] = useState(false);
   const [reduxHeaders, setReduxHeaders] = useState({});
   const patchHeader = useCallback((headerId, newHeader) => {
     setReduxHeaders((prevReduxHeaders) => {
@@ -26,7 +27,9 @@ const useInternalStateConfig = () => {
       setFocusedRowId,
       reduxHeaders,
       patchHeader,
-      patchHeaderFilterButtonAndMenu
+      patchHeaderFilterButtonAndMenu,
+      isHeaderCellDragging,
+      setIsHeaderCellDragging
     }),
     [
       drilldownRowId,
@@ -35,7 +38,9 @@ const useInternalStateConfig = () => {
       setFocusedRowId,
       reduxHeaders,
       patchHeader,
-      patchHeaderFilterButtonAndMenu
+      patchHeaderFilterButtonAndMenu,
+      isHeaderCellDragging,
+      setIsHeaderCellDragging
     ]
   );
 };

package/dist/esm/configs/useInternalStateConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useInternalStateConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n  const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n  const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n\n  // TODO: @uluduena partition this state better\n  const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n  const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n    setReduxHeaders((prevReduxHeaders) => {\n      const nextReduxHeaders = { ...prevReduxHeaders };\n      nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n      return nextReduxHeaders;\n    });\n  }, []);\n\n  const patchHeaderFilterButtonAndMenu = useCallback(\n    (headerId: string, value: boolean) => {\n      const newState = { hideFilterMenu: value, hideFilterButton: value };\n      patchHeader(headerId, newState);\n    },\n    [patchHeader],\n  );\n\n  return useMemo(\n    () => ({\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    }),\n    [\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAGpE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmD,CAAC,CAAC;AAE7F,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n  const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n  const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n  const [isHeaderCellDragging, setIsHeaderCellDragging] = useState<boolean>(false);\n  // TODO: @uluduena partition this state better\n  const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n  const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n    setReduxHeaders((prevReduxHeaders) => {\n      const nextReduxHeaders = { ...prevReduxHeaders };\n      nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n      return nextReduxHeaders;\n    });\n  }, []);\n\n  const patchHeaderFilterButtonAndMenu = useCallback(\n    (headerId: string, value: boolean) => {\n      const newState = { hideFilterMenu: value, hideFilterButton: value };\n      patchHeader(headerId, newState);\n    },\n    [patchHeader],\n  );\n\n  return useMemo(\n    () => ({\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n      isHeaderCellDragging,\n      setIsHeaderCellDragging,\n    }),\n    [\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n      isHeaderCellDragging,\n      setIsHeaderCellDragging,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAkB,KAAK;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmD,CAAC,CAAC;AAE7F,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/configs/useNativeResizeObserver.js

@@ -4,7 +4,7 @@ const useNativeResizeObserver = (el, callback) => {
   const resizeObserver = useMemo(
     () => new ResizeObserver((entries) => {
       const entry = entries[0];
-      const contentRect = entry.contentRect;
+      const { contentRect } = entry;
       const target = entry.target;
       callback({ contentRect, target });
     }),

package/dist/esm/configs/useNativeResizeObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useNativeResizeObserver.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo } from 'react';\n\n// Custom hook to use the resize observer api,\n// to observe changes in the size of an **UNIQUE** element\n// Will trigger the callback with the contentRect,\n// which contains width, height, top, bottom, etc of the element,\n// and the html element itself, so you can query for offsetWidth, etc\nexport const useNativeResizeObserver = <T extends HTMLElement>(\n  el: T | null,\n  callback: (entry: { contentRect: DOMRectReadOnly; target: T }) => void,\n) => {\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0]; // We will only observe one element\n\n        const contentRect = entry.contentRect;\n\n        const target = entry.target as T;\n\n        callback({ contentRect, target });\n      }),\n    [callback],\n  );\n\n  useEffect(() => {\n    if (el) resizeObserver.observe(el);\n    return () => resizeObserver.disconnect();\n  }, [el, resizeObserver]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,eAAe;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAM,cAAc,MAAM;AAE1B,YAAM,SAAS,MAAM;AAErB,eAAS,EAAE,aAAa,OAAO,CAAC;AAAA,IAClC,CAAC;AAAA,IACH,CAAC,QAAQ;AAAA,EACX;AAEA,YAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo } from 'react';\n\n// Custom hook to use the resize observer api,\n// to observe changes in the size of an **UNIQUE** element\n// Will trigger the callback with the contentRect,\n// which contains width, height, top, bottom, etc of the element,\n// and the html element itself, so you can query for offsetWidth, etc\nexport const useNativeResizeObserver = <T extends HTMLElement>(\n  el: T | null,\n  callback: (entry: { contentRect: DOMRectReadOnly; target: T }) => void,\n) => {\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0]; // We will only observe one element\n\n        const { contentRect } = entry;\n\n        const target = entry.target as T;\n\n        callback({ contentRect, target });\n      }),\n    [callback],\n  );\n\n  useEffect(() => {\n    if (el) resizeObserver.observe(el);\n    return () => resizeObserver.disconnect();\n  }, [el, resizeObserver]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,eAAe;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAM,EAAE,YAAY,IAAI;AAExB,YAAM,SAAS,MAAM;AAErB,eAAS,EAAE,aAAa,OAAO,CAAC;AAAA,IAClC,CAAC;AAAA,IACH,CAAC,QAAQ;AAAA,EACX;AAEA,YAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
   "names": []
 }

package/dist/esm/configs/useStore/useStore.js

@@ -6,7 +6,8 @@ const internalAtomDefaultValues = {
   drilldownRowId: null,
   focusedRowId: null,
   isShiftPressed: false,
-  reduxHeaders: {}
+  reduxHeaders: {},
+  isHeaderCellDragging: false
 };
 const selectors = () => ({});
 const reducers = (get, set) => ({

package/dist/esm/configs/useStore/useStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useStore/useStore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n  drilldownRowId: null,\n  focusedRowId: null,\n  isShiftPressed: false,\n  reduxHeaders: {},\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n  patchHeader: (headerId, newHeader) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n      },\n    }));\n  },\n  patchHeaderFilterButtonAndMenu: (headerId, value) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n      },\n    }));\n  },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n  const {\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...tableProps\n  } = usePropsStore((state) => state);\n\n  const internalStore = useInternalStore((state) => state);\n  return {\n    tableProps,\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...internalStore,\n  };\n};\n\nexport const config = {\n  defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AACjB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,CAAC,UAAU,KAAK;AAElC,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n  drilldownRowId: null,\n  focusedRowId: null,\n  isShiftPressed: false,\n  reduxHeaders: {},\n  isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n  patchHeader: (headerId, newHeader) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n      },\n    }));\n  },\n  patchHeaderFilterButtonAndMenu: (headerId, value) => {\n    set((state) => ({\n      reduxHeaders: {\n        ...state.reduxHeaders,\n        [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n      },\n    }));\n  },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n  const {\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...tableProps\n  } = usePropsStore((state) => state);\n\n  const internalStore = useInternalStore((state) => state);\n  return {\n    tableProps,\n    columnHeaderRef,\n    virtualListRef,\n    flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    visibleColumns,\n    virtualListHelpers,\n    layoutHelpers,\n    paginationHelpers,\n    lastSelected,\n    ...internalStore,\n  };\n};\n\nexport const config = {\n  defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n  internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,CAAC,UAAU,KAAK;AAElC,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist/esm/package.json

@@ -3,5 +3,8 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/esm/parts/EmptyContent.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";
@@ -7,12 +7,6 @@ import { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from "@elliemae/ds-system"
 import React2 from "react";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
-const EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`
-  position: sticky;
-  height: fit-content;
-  top: 0;
-  left: 0;
-`;
 const Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`
   fill: ${(props) => props.theme.colors.neutral[300]};
   color: ${(props) => props.theme.colors.neutral[300]};
@@ -37,6 +31,23 @@ const Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlot
   justify-self: center;
   width: fit-content;
 `;
+const EmptyStateContent = () => {
+  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);
+  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);
+  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);
+  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);
+  const isSkeleton = usePropsStore((state) => state.isSkeleton);
+  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  if (isSkeleton) return null;
+  if (React2.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { size: "xxl" }),
+    /* @__PURE__ */ jsx(PrimaryMessage, { getOwnerProps, children: noResultsMessage }),
+    noResultsSecondaryMessage ? /* @__PURE__ */ jsx(SecondaryMessage, { getOwnerProps, children: noResultsSecondaryMessage }) : null,
+    noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ jsx(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, children: noResultsButtonLabel }) : null
+  ] });
+};
 const CenterContentFlexWrapper = styled("div", {
   name: DSDataTableName,
   slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER
@@ -46,40 +57,24 @@ const CenterContentFlexWrapper = styled("div", {
   display: flex;
   align-items: center;
 `;
+const EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`
+  position: sticky;
+  height: fit-content;
+  top: 0;
+  left: 0;
+`;
 const EmptyContent = () => {
-  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);
-  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);
-  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);
-  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);
-  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);
-  const virtualListRef = usePropsStore((state) => state.virtualListRef);
   const getOwnerProps = usePropsStore((store) => store.get);
-  if (React2.isValidElement(noResultsPlaceholder))
-    return /* @__PURE__ */ jsx(CenterContentFlexWrapper, { width: "100%", role: "row", getOwnerProps, children: /* @__PURE__ */ jsx(
-      EmptyStateWrapper,
-      {
-        width: virtualListRef.current?.clientWidth,
-        justifyContent: "center",
-        role: "cell",
-        "aria-live": "assertive",
-        getOwnerProps,
-        children: noResultsPlaceholder
-      }
-    ) });
-  return /* @__PURE__ */ jsx(CenterContentFlexWrapper, { width: "100%", role: "row", getOwnerProps, children: /* @__PURE__ */ jsxs(
+  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);
+  return /* @__PURE__ */ jsx(CenterContentFlexWrapper, { width: "100%", role: "row", getOwnerProps, children: /* @__PURE__ */ jsx(
     EmptyStateWrapper,
     {
-      width: virtualListRef.current?.clientWidth,
+      width: bodyClientWidth,
       justifyContent: "center",
       role: "cell",
       "aria-live": "assertive",
       getOwnerProps,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { size: "xxl" }),
-        /* @__PURE__ */ jsx(PrimaryMessage, { getOwnerProps, children: noResultsMessage }),
-        noResultsSecondaryMessage ? /* @__PURE__ */ jsx(SecondaryMessage, { getOwnerProps, children: noResultsSecondaryMessage }) : null,
-        noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ jsx(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, children: noResultsButtonLabel }) : null
-      ]
+      children: /* @__PURE__ */ jsx(EmptyStateContent, {})
     }
   ) });
 };

package/dist/esm/parts/EmptyContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return (\n      <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n        <EmptyStateWrapper\n          width={virtualListRef.current?.clientWidth}\n          justifyContent=\"center\"\n          role=\"cell\"\n          aria-live=\"assertive\"\n          getOwnerProps={getOwnerProps}\n        >\n          {noResultsPlaceholder}\n        </EmptyStateWrapper>\n      </CenterContentFlexWrapper>\n    );\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={virtualListRef.current?.clientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <Icon size=\"xxl\" />\n        <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? (\n          <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n        ) : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n            {noResultsButtonLabel}\n          </Button>\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\n\nconst EmptyStateContent = () => {\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\n    <>\n      <Icon size=\"xxl\" />\n      <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n      {noResultsSecondaryMessage ? (\n        <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n      ) : null}\n      {noResultsButtonLabel && onNoResultsButtonClick ? (\n        <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n          {noResultsButtonLabel}\n        </Button>\n      ) : null}\n    </>\n  );\n};\n\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Headers/HeaderCellTitle.js

@@ -1,15 +1,11 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { RequiredDot } from "./RequiredDot.js";
 import { DATA_TESTID } from "../../configs/constants.js";
-const StringTitle = ({ column, textWrap }) => (column.textWrap || textWrap) === "truncate" ? (
-  // TODO @carusox: remove this cast when we have proper TS for SimpleTruncatedTooltipText
-  // TODO or even better, remove this component in favor of the future approved one
-  /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: column.Header })
-) : /* @__PURE__ */ jsx(Fragment, { children: column.Header });
+const StringTitle = ({ text, textWrap }) => textWrap === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: text }) : text;
 const HeaderCellTitle = ({ column, draggableProps, textWrap }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE, children: [
-  typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, { column, textWrap }) : /* @__PURE__ */ jsx(column.Header, { column, draggableProps }),
+  typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, { text: column.Header, textWrap: column.textWrap || textWrap }) : /* @__PURE__ */ jsx(column.Header, { column, draggableProps }),
   column.required && /* @__PURE__ */ jsx(RequiredDot, {})
 ] });
 export {

package/dist/esm/parts/Headers/HeaderCellTitle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellTitle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ column, textWrap }: Pick<HeaderCellTitleProps, 'column' | 'textWrap'>) =>\n  (column.textWrap || textWrap) === 'truncate' ? (\n    // TODO @carusox: remove this cast when we have proper TS for SimpleTruncatedTooltipText\n    // TODO or even better, remove this component in favor of the future approved one\n    <SimpleTruncatedTooltipText value={column.Header as string} />\n  ) : (\n    <>{column.Header}</>\n  );\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle column={column} textWrap={textWrap} />\n    ) : (\n      <column.Header column={column} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAEA,UAFA,KAMF,YANE;AAhBJ,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,OACrC,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA,EAGhC,oBAAC,8BAA2B,OAAO,OAAO,QAAkB;AAAA,IAE5D,gCAAG,iBAAO,QAAO;AAGd,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,QAAgB,UAAoB,IAEjD,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ text, textWrap }: { textWrap: HeaderCellTitleProps['textWrap']; text: string }) =>\n  textWrap === 'truncate' ? <SimpleTruncatedTooltipText value={text} /> : text;\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle text={column.Header} textWrap={column.textWrap || textWrap} />\n    ) : (\n      <column.Header column={column} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcK,cAG1B,YAH0B;AAb5B,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,oBAAC,8BAA2B,OAAO,MAAM,IAAK;AAEnE,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY,UAAU,IAEzE,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
   "names": []
 }

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -64,10 +64,14 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
   );
   const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);
   if (dragAndDropColumns)
-    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ jsx(DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
-      /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
-    ] });
+    return (
+      // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user
+      // drags the column header to the left or right
+      /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { threshold: { y: 0, x: 0.2 } }, children: [
+        /* @__PURE__ */ jsx(DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
+        /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
+      ] })
+    );
   return /* @__PURE__ */ jsx(Component, { ...props });
 };
 export {

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyFf,SAEI,KAFJ;AAtFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user\n        // drags the column header to the left or right\n        <DndContext {...dndContextProps} autoScroll={{ threshold: { y: 0, x: 0.2 } }}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Ff,SAEI,KAFJ;AAxFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF;AAAA;AAAA;AAAA,MAGE,qBAAC,cAAY,GAAG,iBAAiB,YAAY,EAAE,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,EAAE,GACzE;AAAA,4BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,QACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,SACF;AAAA;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js

@@ -84,7 +84,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     [active, flattenedData]
   );
   if (dragAndDropRows)
-    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
+    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { layoutShiftCompensation: false }, children: [
       /* @__PURE__ */ jsx(SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) }) }),
       createPortal(
         /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, modifiers: [restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ jsx(Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),