@elliemae/ds-data-table 2.0.0-rc.1 → 2.0.0-rc.13

package/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -37,6 +37,8 @@ import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
+import '../../../../redux/reducers/headersReducers/headersReducers.js';
+import { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 var _SearchXsmall;
 
@@ -85,13 +87,27 @@ const NumberRangeFilter = props => {
     onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
 
+  const {
+    patchHeader
+  } = useDispatchHeadersActions(); // workaround to close menu with esc key since DSInputMask has stoppropagation on key down
+
+  const closePopover = e => {
+    if (e.code === 'Escape') {
+      patchHeader(column.id, {
+        hideFilterMenu: true,
+        hideFilterButton: false
+      });
+      innerRef.current.focus();
+    }
+  };
+
   const idPreffix = 'datatable-number-range';
   return /*#__PURE__*/_jsx(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: /*#__PURE__*/_jsx(Grid, {
-      "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
+      "data-testid": DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
       cols: ['auto', 'auto']
@@ -109,7 +125,10 @@ const NumberRangeFilter = props => {
       onChange: handleFromChange,
       placeholder: "0",
       mask: number => MASK_TYPES.NUMBER(opts)(number),
-      autoFocus: true
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
     })), /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "High",
       inputID: "".concat(idPreffix, "-high-").concat(column.id)
@@ -123,7 +142,10 @@ const NumberRangeFilter = props => {
       value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
       onChange: handleToChange,
       placeholder: "0",
-      mask: number => MASK_TYPES.NUMBER(opts)(number)
+      mask: number => MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: e => {
+        closePopover(e);
+      }
     }))),
     triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx(SearchXsmall, {})),
     customStyles: {

package/esm/addons/Filters/Components/SingleDateFilter/index.js

@@ -70,7 +70,10 @@ const SingleDateFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
       width: "260px"
     }, void 0, /*#__PURE__*/_jsx(Grid, {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
       date: date,
       onDateChange: setDate,

package/esm/addons/Filters/Components/index.js

@@ -5,4 +5,3 @@ export { CurrencyRangeFilter } from './CurrencyRangeFilter/index.js';
 export { SingleSelectFilter } from './SelectFilter/SingleSelectFilter.js';
 export { MultiSelectFilter } from './SelectFilter/MultiSelectFilter.js';
 export { SingleDateFilter } from './SingleDateFilter/index.js';
-export { TextInputFilter } from './TextInputFilter/index.js';

package/esm/addons/Filters/index.js

@@ -5,4 +5,3 @@ export { CurrencyRangeFilter } from './Components/CurrencyRangeFilter/index.js';
 export { SingleSelectFilter } from './Components/SelectFilter/SingleSelectFilter.js';
 export { MultiSelectFilter } from './Components/SelectFilter/MultiSelectFilter.js';
 export { SingleDateFilter } from './Components/SingleDateFilter/index.js';
-export { TextInputFilter } from './Components/TextInputFilter/index.js';

package/esm/configs/usePaginationConfig.js

@@ -20,7 +20,7 @@ const usePaginationConfig = (props, flattenedData) => {
     onPreviousPage = emptyFunc,
     onNextPage = emptyFunc,
     onPageChange = emptyFunc,
-    pageCount = Math.floor(flattenedData.length / pageSize),
+    pageCount = Math.ceil(flattenedData.length / pageSize),
     perPageStep = 5,
     minPerPage = 0,
     maxPerPage = 100,

package/esm/configs/useRowFlattenization.js

@@ -21,7 +21,7 @@ const flatten = function (data, expandedRows, uniqueRowAccessor) {
     const id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
     const uid = getIdFromUniqueRowAccessor(uniqueRowAccessor, {
       id,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     });
     const isExpanded = expandedRows[uid];
     const rowToPush = {
@@ -33,11 +33,11 @@ const flatten = function (data, expandedRows, uniqueRowAccessor) {
       parentIndex,
       depth,
       isExpanded,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     };
     result.push(rowToPush); // If we have subrows and we are expanded
 
-    if (row.subRows && expandedRows[uid] && depth <= maxDepth) {
+    if (row !== null && row !== void 0 && row.subRows && expandedRows[uid] && depth <= maxDepth) {
       row.subRows.forEach((subRow, i) => doit(subRow, i, uid, rowToPush.realIndex, depth + 1));
     }
   };

package/esm/exported-related/EditableCell.js

@@ -11,7 +11,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -33,20 +34,25 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxs(StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,
@@ -54,14 +60,14 @@ const EditableCell = props => {
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
     role: "cell",
-    "aria-describedby": isEditing ? undefined : cell.id,
+    "aria-labelledby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {}))), /*#__PURE__*/_jsx("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
       "aria-hidden": "true"
-    }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
+    }, void 0, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };
 

package/esm/exported-related/FilterPopover.js

@@ -41,6 +41,9 @@ const FilterButton = /*#__PURE__*/styled.span.withConfig({
 const Button = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
+const PopperContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:'#fff';"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 
@@ -141,9 +144,20 @@ const FilterPopover = _ref2 => {
       minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsx("div", {
-    style: {
-      backgroundColor: '#fff'
+  }, void 0, /*#__PURE__*/jsx(PopperContent, {
+    onKeyDown: e => {
+      if (e.code === 'Tab') {
+        setTimeout(() => {
+          var _popperRef$current;
+
+          if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
+            patchHeader(columnId, {
+              hideFilterMenu: true,
+              hideFilterButton: false
+            });
+          }
+        });
+      }
     },
     ref: popperRef,
     children: menuContent

package/esm/exported-related/FilterTypes.js

@@ -1,7 +1,6 @@
 const FILTER_TYPES = {
   SELECT: 'ds-filter-select',
   MULTI_SELECT: 'ds-filter-multi-select',
-  TEXT: 'ds-filter-text',
   SINGLE_DATE: 'ds-filter-single-date',
   DATE_RANGE: 'ds-filter-date-range',
   DATE_SWITCHER: 'ds-filter-date-switcher',

package/esm/exported-related/Filters/applyOutOfTheBoxFilters.js

@@ -3,7 +3,6 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { singleSelectFilterFn } from './singleSelectFilterFn.js';
 import { multiSelectFilterFn } from './multiSelectFilterFn.js';
-import { textFilterFn } from './textFilterFn.js';
 import { singleDateFilterFn } from './singleDateFilterFn.js';
 import { dateRangeFilterFn } from './dateRangeFilterFn.js';
 import { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';
@@ -15,7 +14,6 @@ import { FILTER_TYPES } from '../FilterTypes.js';
 const filterMapper = {
   [FILTER_TYPES.SELECT]: singleSelectFilterFn,
   [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,
-  [FILTER_TYPES.TEXT]: textFilterFn,
   [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,
   [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,
   [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,

package/esm/exported-related/Filters/index.js

@@ -1,5 +1,4 @@
 export { applyOutOfTheBoxFilters } from './applyOutOfTheBoxFilters.js';
-export { textFilterFn } from './textFilterFn.js';
 export { singleDateFilterFn } from './singleDateFilterFn.js';
 export { singleSelectFilterFn } from './singleSelectFilterFn.js';
 export { multiSelectFilterFn } from './multiSelectFilterFn.js';

package/esm/exported-related/index.js

@@ -5,7 +5,6 @@ export { groupBy } from './groupBy.js';
 export { FILTER_TYPES } from './FilterTypes.js';
 export { ROW_VARIANTS, ROW_VARIANT_COMPACT_KEY, ROW_VARIANT_KEY } from './RowVariants.js';
 export { applyOutOfTheBoxFilters } from './Filters/applyOutOfTheBoxFilters.js';
-export { textFilterFn } from './Filters/textFilterFn.js';
 export { singleDateFilterFn } from './Filters/singleDateFilterFn.js';
 export { singleSelectFilterFn } from './Filters/singleSelectFilterFn.js';
 export { multiSelectFilterFn } from './Filters/multiSelectFilterFn.js';

package/esm/helpers/refs-helpers.js

@@ -11,8 +11,8 @@ const setMultipleRefs = function () {
   }
 
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length) return null;
-  if (filteredRefs.length === 0) return filteredRefs[0];
+  if (!filteredRefs.length) return () => null;
+  if (filteredRefs.length === 0) return () => null;
   return newRef => {
     filteredRefs.forEach(refToBeUpdated => {
       if (typeof refToBeUpdated === 'function') {

package/esm/index.js

@@ -6,7 +6,6 @@ export { groupBy } from './exported-related/groupBy.js';
 export { FILTER_TYPES } from './exported-related/FilterTypes.js';
 export { ROW_VARIANTS, ROW_VARIANT_COMPACT_KEY, ROW_VARIANT_KEY } from './exported-related/RowVariants.js';
 export { applyOutOfTheBoxFilters } from './exported-related/Filters/applyOutOfTheBoxFilters.js';
-export { textFilterFn } from './exported-related/Filters/textFilterFn.js';
 export { singleDateFilterFn } from './exported-related/Filters/singleDateFilterFn.js';
 export { singleSelectFilterFn } from './exported-related/Filters/singleSelectFilterFn.js';
 export { multiSelectFilterFn } from './exported-related/Filters/multiSelectFilterFn.js';

package/esm/parts/FilterBar/FiltersBar.js

@@ -45,14 +45,12 @@ import { MultiSelectPill } from './components/MultiSelectPill.js';
 import { NumberRangePill } from './components/NumberRangePill.js';
 import { SelectPill } from './components/SelectPill.js';
 import { SingleDatePill } from './components/SingleDatePill.js';
-import { TextPill } from './components/TextPill.js';
 import { StyledWrapper, StyledDropdownMenu } from './styled.js';
 
 var _MoreOptionsVert;
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,
-  [FILTER_TYPES.TEXT]: TextPill,
   [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,
   [FILTER_TYPES.DATE_RANGE]: DateRangePill,
   [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,

package/esm/parts/FilterBar/components/index.js

@@ -4,4 +4,3 @@ export { MultiSelectPill } from './MultiSelectPill.js';
 export { NumberRangePill } from './NumberRangePill.js';
 export { SelectPill } from './SelectPill.js';
 export { SingleDatePill } from './SingleDatePill.js';
-export { TextPill } from './TextPill.js';

package/esm/parts/Filters/index.js

@@ -15,7 +15,6 @@ import { CurrencyRangeFilter } from '../../addons/Filters/Components/CurrencyRan
 import { SingleSelectFilter } from '../../addons/Filters/Components/SelectFilter/SingleSelectFilter.js';
 import { MultiSelectFilter } from '../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js';
 import { SingleDateFilter } from '../../addons/Filters/Components/SingleDateFilter/index.js';
-import { TextInputFilter } from '../../addons/Filters/Components/TextInputFilter/index.js';
 import '@babel/runtime/helpers/esm/jsx';
 import '@elliemae/ds-button';
 import '@elliemae/ds-popperjs';
@@ -55,7 +54,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,
-  [FILTER_TYPES.TEXT]: TextInputFilter,
   [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,
   [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,
   [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,

package/esm/parts/Headers/HeaderCellGroup.js

@@ -54,7 +54,7 @@ const HeaderCellGroupComp = _ref => {
   const children = header.columns;
   const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  const ChildGroup = isDragOverlay ? NotSortableHeaderCellGroup : HeaderCellGroup;
+  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;
   const colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
   return /*#__PURE__*/jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
@@ -84,7 +84,7 @@ const HeaderCellGroupComp = _ref => {
 };
 
 // We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function
-const NotSortableHeaderCellGroup = HeaderCellGroupComp;
-const HeaderCellGroup = withDnDSortableColumnContext(HeaderCellGroupComp);
+const HeaderCellGroup = HeaderCellGroupComp;
+const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);
 
-export { HeaderCellGroup };
+export { HeaderCellGroup, HeaderCellGroupSortable as default };

package/esm/parts/Headers/index.js

@@ -5,7 +5,7 @@ import { useContext, useMemo } from 'react';
 import { StyledHeadTr, StyledHeadWrapper } from '../../styled.js';
 import DataTableContext from '../../DataTableContext.js';
 import { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';
-import { HeaderCellGroup } from './HeaderCellGroup.js';
+import HeaderCellGroupSortable from './HeaderCellGroup.js';
 import { SortableHeaderCell } from '../SortableHeaderCell.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -29,7 +29,7 @@ const HeadersComp = () => {
     cols: gridLayout,
     colsLayoutStyle: colsLayoutStyle,
     isExpandable: isExpandable
-  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx(HeaderCellGroup, {
+  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx(HeaderCellGroupSortable, {
     header: h,
     isLast: index === visibleColumns.length - 1
   }, h.id)))), [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]);

package/esm/parts/Headers/useHeaderCellHandlers.js

@@ -37,7 +37,9 @@ const useHeaderCellHandlers = _ref => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
   const onMouseLeave = useCallback(() => {
-    if (!headerRef.current.contains(document.activeElement)) {
+    var _headerRef$current;
+
+    if (!(headerRef !== null && headerRef !== void 0 && (_headerRef$current = headerRef.current) !== null && _headerRef$current !== void 0 && _headerRef$current.contains(document.activeElement))) {
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
@@ -72,7 +74,7 @@ const useHeaderCellHandlers = _ref => {
   }, [column.canSort, column.id, onColumnSortChange, patchHeader, reduxHeader, hasFilter, hasDnD, dragHandleRef, filterIconRef]);
   const onFocus = useCallback(e => {
     // Don't do anything if focus wasn't placed in the element (bubling issues)
-    if (e.target === headerRef.current) {
+    if (e.target === (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)) {
       patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);

package/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -1,17 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
 import React, { useMemo, useCallback, createContext } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
+import { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';
 import { arrayMove } from '@dnd-kit/sortable';
-import { DragOverlayContext } from './DragOverlayContext.js';
-import useHierarchyDndkitConfig from '../../helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js';
 import DataTableContext from '../../DataTableContext.js';
+import { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';
+import { DATA_TESTID } from '../../configs/constants.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -26,7 +29,9 @@ const flattenColumns = cols => {
 
   const flatten = function (col, index) {
     let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    const id = col.Header;
+    const {
+      id
+    } = col;
     flattened.push([{
       id,
       parentId,
@@ -44,13 +49,11 @@ const withConditionalDnDColumnContext = Component => props => {
   const {
     tableProps: {
       dragAndDropColumns,
-      columns,
       onColumnsReorder
-    }
+    },
+    visibleColumns
   } = React.useContext(DataTableContext);
-  const [PureDraggedJSX, setPureDraggedJSX] = React.useState(null); // todo: check if this can be done via portal
-
-  const flattenedItems = useMemo(() => flattenColumns(columns), [columns]);
+  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);
   const onReorder = useCallback((movedItem, indexes) => {
     // Send from index to target index
     const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex); // Pull the cols's data into an object
@@ -74,25 +77,43 @@ const withConditionalDnDColumnContext = Component => props => {
     });
     onColumnsReorder(newData, indexes);
   }, [flattenedItems, onColumnsReorder]);
+  const onPreviewResetState = useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    if (el) el.onscroll = () => null;
+  }, []);
+  const onPreviewDragStart = useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
+    if (el) {
+      const y = el.scrollTop;
+
+      el.onscroll = () => el.scrollTo(0, y);
+    }
+  }, []);
   const {
     dndContextProps,
     activeId,
     activeIndex
   } = useHierarchyDndkitConfig({
     flattenedItems,
+    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
     isHorizontalDnD: true,
-    onReorder
+    onReorder,
+    onPreviewResetState,
+    onPreviewDragStart
   });
   if (dragAndDropColumns) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
-    children: [/*#__PURE__*/_jsx(DragOverlayContext.Provider, {
-      value: {
-        setPureDraggedJSX
-      }
-    }, void 0, /*#__PURE__*/_jsx(DnDGroupContext.Provider, {
+    children: [/*#__PURE__*/_jsx(DnDGroupContext.Provider, {
       value: {
         activeIndex
       }
-    }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)))), /*#__PURE__*/_jsx(DragOverlay, {}, void 0, activeId ? PureDraggedJSX : null)]
+    }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props))), /*#__PURE__*/_jsx(DragOverlay, {}, void 0, activeId ? /*#__PURE__*/_jsx(HeaderCellGroup, {
+      header: flattenedItems.find(_ref3 => {
+        let [item] = _ref3;
+        return item.id === activeId;
+      })[1],
+      isDragOverlay: true
+    }) : null)]
   }));
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 };

package/esm/parts/HoC/withConditionalDnDRowContext.js

@@ -1,18 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
 import React, { createContext, useCallback } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import DataTableContext from '../../DataTableContext.js';
-import useTreeDndkitConfig from '../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import { DragOverlayContext } from './DragOverlayContext.js';
+import { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';
 import { DropIndicatorPosition } from './SortableItemContext.js';
+import { Row } from '../Row.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -38,8 +40,6 @@ const withConditionalDnDRowContext = Component => props => {
     flattenedData,
     allDataFlattened
   } = React.useContext(DataTableContext);
-  const [PureDraggedJSX, setPureDraggedJSX] = React.useState(null); // todo: check if this can be done via portal
-
   const [lastActiveId, setLastActiveId] = React.useState(null);
   const onReorder = useCallback((newData, indexes, considerExpanding) => {
     // Pull the row's original data into an object
@@ -79,11 +79,7 @@ const withConditionalDnDRowContext = Component => props => {
   if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
   if (dragAndDropRows) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/jsx(SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
-      children: /*#__PURE__*/_jsx(DragOverlayContext.Provider, {
-        value: {
-          setPureDraggedJSX
-        }
-      }, void 0, /*#__PURE__*/_jsx(DnDTreeContext.Provider, {
+      children: /*#__PURE__*/_jsx(DnDTreeContext.Provider, {
         value: {
           activeIndex,
           depth,
@@ -92,12 +88,15 @@ const withConditionalDnDRowContext = Component => props => {
           lastActiveId,
           setLastActiveId
         }
-      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props))))
+      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)))
     })), /*#__PURE__*/_jsx(DragOverlay, {
       style: {
         width: 'auto'
       }
-    }, void 0, activeId ? PureDraggedJSX : null)]
+    }, void 0, activeId ? /*#__PURE__*/_jsx(Row, {
+      row: flattenedData.find(row => row.uid === activeId),
+      isDragOverlay: true
+    }) : null)]
   }));
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 };

package/esm/parts/HoC/withConditionalDnDSortableContext.js

@@ -26,7 +26,7 @@ const withConditionalDnDSortableContext = function (items) {
     // It's important that drag overlays DO NOT have any sortable functionality!
 
     if (!isDragOverlay && dragAndDropColumns) return /*#__PURE__*/_jsx(SortableContext, {
-      items: items.map(item => item.Header),
+      items: items.map(item => item.id),
       strategy: horizontalListSortingStrategy
     }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
     return /*#__PURE__*/jsx(Component, _objectSpread({}, props));

package/esm/parts/HoC/withDnDSortableColumnContext.js

@@ -5,10 +5,9 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useContext, useMemo, useEffect, cloneElement } from 'react';
+import { useContext, useMemo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import DataTableContext from '../../DataTableContext.js';
-import { DragOverlayContext } from './DragOverlayContext.js';
 import { DnDGroupContext } from './withConditionalDnDColumnContext.js';
 import { DropIndicatorPosition, SortableItemContext } from './SortableItemContext.js';
 import { jsx } from 'react/jsx-runtime';
@@ -22,18 +21,14 @@ const withDnDSortableColumnContext = Component => props => {
       dragAndDropColumns
     }
   } = useContext(DataTableContext);
-  const {
-    setPureDraggedJSX
-  } = useContext(DragOverlayContext);
   const {
     activeIndex
   } = useContext(DnDGroupContext); // onMount generate unique options, so everyting is only ran once
 
   const draggableOptions = useMemo(() => ({
-    id: props.header.Header
-  }), [props.header.Header]);
-  const useSortableHelpers = useSortable(draggableOptions);
-  const PureComponentJSX = useMemo(() => /*#__PURE__*/jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+    id: props.header.id
+  }), [props.header.id]);
+  const useSortableHelpers = useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = useMemo(() => {
     if (!dragAndDropColumns) return false;
@@ -45,16 +40,7 @@ const withDnDSortableColumnContext = Component => props => {
       shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
       dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before
     });
-  }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
-  useEffect(() => {
-    // We assume the structure of the inner element WON'T change during DnD
-    // This is a huge performance boost
-    if (useSortableHelpers.isDragging) {
-      setPureDraggedJSX( /*#__PURE__*/cloneElement(PureComponentJSX, {
-        isDragOverlay: true
-      }));
-    }
-  }, [useSortableHelpers.isDragging, setPureDraggedJSX]); // we use a context so we can easly access information wherever without bubbling down
+  }, [useSortableHelpers, dragAndDropColumns, activeIndex]); // we use a context so we can easly access information wherever without bubbling down
   // this context is all Memoized so as long as component is not re-mounted,
   // the context won't trigger un-required renders per-se...
 
@@ -64,7 +50,7 @@ const withDnDSortableColumnContext = Component => props => {
 
   return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
 };
 
 export { withDnDSortableColumnContext };