@elliemae/ds-data-table 2.0.0-rc.3 → 2.0.0-rc.7

package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js

@@ -4,11 +4,11 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/esnext.async-iterator.for-each.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 { KeyboardCode, getViewRect, closestCorners } from '@dnd-kit/core';
 import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react';
@@ -48,16 +48,14 @@ const getHorizontalKeyboardCoordinates = _ref => {
     event,
     currentCoordinates,
     droppableContainers,
-    translatedRect
+    collisionRect
   } = _ref;
   if (vertical.includes(event.code)) return undefined;
-  const activeItem = items.find(item => item.id === active);
+  const activeItem = items.find(item => item.id === active.id);
   const overRect = over.rect;
   const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
 
-  Object.entries(droppableContainers).forEach(_ref2 => {
-    let [id, container] = _ref2;
-
+  droppableContainers.forEach(container => {
     if (container !== null && container !== void 0 && container.disabled || !overRect) {
       return;
     }
@@ -68,44 +66,48 @@ const getHorizontalKeyboardCoordinates = _ref => {
       return;
     }
 
-    const itemParent = items.find(item => item.id === id).parentId;
+    const itemParent = items.find(item => item.id === container.id).parentId;
     if (itemParent !== activeItem.parentId) return;
     const rect = getViewRect(node);
 
-    if (event.code === KeyboardCode.Left && translatedRect.left > rect.right - 10) {
-      layoutRects.push([id, rect]);
-    } else if (event.code === KeyboardCode.Right && translatedRect.left < rect.left) {
-      layoutRects.push([id, rect]);
+    if (event.code === KeyboardCode.Left && collisionRect.left > rect.right - 10) {
+      layoutRects.push(container);
+    } else if (event.code === KeyboardCode.Right && collisionRect.left < rect.left) {
+      layoutRects.push(container);
     }
   });
   const dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
     width: 150,
     left: 0
   };
-  const closestId = closestCorners(layoutRects, translatedRect);
+  const closestId = closestCorners({
+    droppableContainers: layoutRects,
+    collisionRect,
+    active
+  });
   if (!closestId) return undefined;
-  const closestRect = getViewRect(droppableContainers[closestId].node.current);
-  const activeRect = getViewRect(droppableContainers[active].node.current);
+  const closestRect = getViewRect(droppableContainers.get(closestId).node.current);
+  const activeRect = getViewRect(droppableContainers.get(active.id).node.current);
   return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
     x: closestRect.left + (closestRect.width - dragOverlayRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
   });
 };
 
-const getHierarchyKeyboardCoordinates = (context, isHorizontalDnD) => (event, _ref3) => {
+const getHierarchyKeyboardCoordinates = (context, isHorizontalDnD) => (event, _ref2) => {
   let {
-    active,
     currentCoordinates,
     context: {
+      active,
       over,
-      translatedRect,
+      collisionRect,
       droppableContainers
     }
-  } = _ref3;
+  } = _ref2;
 
   if (directions.includes(event.code)) {
     event.preventDefault();
 
-    if (!translatedRect) {
+    if (!collisionRect) {
       return undefined;
     }
 
@@ -121,7 +123,7 @@ const getHierarchyKeyboardCoordinates = (context, isHorizontalDnD) => (event, _r
       event,
       currentCoordinates,
       droppableContainers,
-      translatedRect
+      collisionRect
     };
     if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
     return undefined;

package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js

@@ -10,7 +10,7 @@ import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useMemo, useRef, useEffect } from 'react';
-import { LayoutMeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
+import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
 import { useHierarchyActionHandlers } from './useHierarchyActionHandlers.js';
 import { useHierarchyPreviewHandlers } from './useHierarchyPreviewHandlers.js';
 import { getHierarchyKeyboardCoordinates } from './getHierarchyKeyboardCoordinates.js';
@@ -39,8 +39,10 @@ const adjustTranslate = function (_ref) {
   return newTransform;
 };
 
-const layoutMeasuring = {
-  strategy: LayoutMeasuringStrategy.Always
+const measuring = {
+  droppable: {
+    strategy: MeasuringStrategy.Always
+  }
 };
 
 const useHierarchyDndkitConfig = _ref2 => {
@@ -89,7 +91,7 @@ const useHierarchyDndkitConfig = _ref2 => {
     announcements,
     modifiers,
     sensors,
-    layoutMeasuring,
+    measuring,
     collisionDetection: customCollisionDetection(activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems)
   }, dragActionHandlers), [announcements, modifiers, sensors, activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems, dragActionHandlers]);
   return {

package/esm/helpers/dndkit/tree/customCollisionDetection.js

@@ -1,9 +1,9 @@
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
 
 const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
@@ -29,58 +29,78 @@ const RECT_DOWN = {
 const thresholdRatio = 0.2; // Percentage to be inside
 
 const insideThreshold = 0.7;
-const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => (rects, rect) => {
-  const originalRect = rects.find(_ref => {
-    let [rectId] = _ref;
-    return rectId === activeId;
-  }); // We first check if the item was moved up or down
+const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
+  var _originalContainer$re;
+
+  let {
+    droppableContainers,
+    collisionRect
+  } = _ref;
+  const originalContainer = droppableContainers.find(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    return id === activeId;
+  });
+  const originalRect = originalContainer === null || originalContainer === void 0 ? void 0 : (_originalContainer$re = originalContainer.rect) === null || _originalContainer$re === void 0 ? void 0 : _originalContainer$re.current; // We first check if the item was moved up or down
   // This modifies how to search the matching colliding rect
 
   let isUp = lastPosition === 'up';
 
   if (originalRect) {
-    isUp = originalRect[1].offsetTop > rect.top;
+    isUp = originalRect.offsetTop > collisionRect.top;
   } // Threshold
 
 
-  const threshold = rect.height * thresholdRatio;
-  let collidingRect = null;
+  const threshold = collisionRect.height * thresholdRatio;
+  let collidingContainer = null;
 
   if (isUp) {
     // Up -- We need to find the first rectangle downwards
-    collidingRect = rects.reduce((acc, _ref2) => {
-      let [rectID, rectData] = _ref2;
+    collidingContainer = droppableContainers.reduce((acc, container) => {
+      const rect = container.rect.current;
 
-      if (rectData.offsetTop + threshold > rect.top && rectData.offsetTop < acc[1].offsetTop) {
-        return [rectID, rectData];
+      if (rect.offsetTop + threshold > collisionRect.top && rect.offsetTop < acc.rect.current.offsetTop) {
+        return container;
       }
 
       return acc;
-    }, [DUMMY_ID, RECT_DOWN]);
+    }, {
+      id: DUMMY_ID,
+      rect: {
+        current: RECT_DOWN
+      }
+    });
   } else {
     // Down -- We need to find the first rectangle upwards
-    collidingRect = rects.reduce((acc, _ref3) => {
-      let [rectID, rectData] = _ref3;
+    collidingContainer = droppableContainers.reduce((acc, container) => {
+      const rect = container.rect.current;
 
-      if (rectData.offsetTop - threshold < rect.top && rectData.offsetTop > acc[1].offsetTop) {
-        return [rectID, rectData];
+      if (rect.offsetTop - threshold < collisionRect.top && rect.offsetTop > acc.rect.current.offsetTop) {
+        return container;
       }
 
       return acc;
-    }, [DUMMY_ID, RECT_UP]);
+    }, {
+      id: DUMMY_ID,
+      rect: {
+        current: RECT_UP
+      }
+    });
   } // If we didn't find a match, return null
 
 
-  if (collidingRect[0] === DUMMY_ID) {
+  if (collidingContainer.id === DUMMY_ID) {
     return null;
-  } // Calculate the intersection interval
+  }
 
+  const collidingRect = collidingContainer.rect.current; // Calculate the intersection interval
 
-  const [top, bottom] = [Math.max(rect.top, collidingRect[1].offsetTop), Math.min(rect.bottom, collidingRect[1].offsetTop + collidingRect[1].height)]; // Calculate the percentage of intersection
+  const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
 
-  const intersectionPercentage = Math.abs(bottom - top) / collidingRect[1].height;
+  const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
 
-  if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingRect[0]].depth + 1 <= maxDragAndDropLevel && collidingRect[0] !== activeId) {
+  if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
     setDropIndicatorPosition(DropIndicatorPosition.Inside);
   } else {
     setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);
@@ -88,7 +108,7 @@ const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndic
 
   if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
 
-  return collidingRect[0];
+  return collidingContainer.id;
 };
 
 export { customCollisionDetection };

package/esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js

@@ -2,12 +2,11 @@ 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.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
-import { KeyboardCode, getViewRect, closestCorners } from '@dnd-kit/core';
+import { KeyboardCode, closestCorners, getViewRect } from '@dnd-kit/core';
 import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
 
 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; }
@@ -24,80 +23,76 @@ const getVerticalKeyboardCoordinates = _ref => {
     event,
     currentCoordinates,
     droppableContainers,
-    translatedRect,
+    collisionRect,
     dropIndicatorPosition,
     maxDragAndDropLevel
   } = _ref;
   if (horizontal.includes(event.code)) return undefined;
-  const activeRect = droppableContainers[active].rect.current;
   const overRect = over.rect;
   const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
 
-  Object.entries(droppableContainers).forEach(_ref2 => {
-    let [id, container] = _ref2;
-
+  droppableContainers.forEach(container => {
     if (container !== null && container !== void 0 && container.disabled || !overRect) {
       return;
     }
 
-    const node = container === null || container === void 0 ? void 0 : container.node.current;
-
-    if (!node) {
-      return;
-    }
-
-    const rect = getViewRect(node);
+    const rect = container.rect.current;
 
-    if (event.code === KeyboardCode.Down && translatedRect.top - 2 <= rect.top) {
-      layoutRects.push([id, rect]);
-    } else if (event.code === KeyboardCode.Up && translatedRect.top >= rect.top) {
-      layoutRects.push([id, rect]);
+    if (event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
+      layoutRects.push(container);
+    } else if (event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
+      layoutRects.push(container);
     }
   });
-  const closestId = closestCorners(layoutRects, translatedRect);
+  const closestId = closestCorners({
+    collisionRect,
+    droppableContainers: layoutRects,
+    active
+  });
   if (!closestId) return undefined;
   const closestItem = items.find(item => item.uid === closestId);
-  const closestRect = getViewRect(droppableContainers[closestId].node.current);
+  const closestRect = getViewRect(droppableContainers.get(closestId).node.current);
 
   if (event.code === KeyboardCode.Up) {
     // If the drop indicator is inside (or over ourselves)
     // We are gonna go to the before position
     // Else we are gonna go inside the over rect
-    if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active || closestItem.depth + 1 > maxDragAndDropLevel) {
+    if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
       return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
-        y: closestRect.top - translatedRect.height / 2
+        y: closestRect.top - collisionRect.height / 2
       });
     }
 
     return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
-      y: closestRect.top + Math.abs(closestRect.height - activeRect.height) / 2
+      y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
     });
   } // If the drop indicator is inside (or over ourselves)
   // We are gonna go to the after position
   // Else we are gonna go inside the over rect
 
 
-  if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active || closestItem.depth + 1 > maxDragAndDropLevel) {
+  if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
     return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
-      y: closestRect.top + translatedRect.height / 2
+      y: closestRect.top + collisionRect.height / 2
     });
   }
 
   return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
-    y: closestRect.top + Math.abs(closestRect.height - activeRect.height) / 2
+    y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
   });
 };
 
-const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref3) => {
+const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
   let {
-    active,
     currentCoordinates,
     context: {
       over,
       translatedRect,
-      droppableContainers
+      droppableContainers,
+      active,
+      collisionRect
     }
-  } = _ref3;
+  } = _ref2;
 
   if (directions.includes(event.code)) {
     if (!translatedRect) {
@@ -117,7 +112,7 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
       event,
       currentCoordinates,
       droppableContainers,
-      translatedRect,
+      collisionRect,
       dropIndicatorPosition,
       maxDragAndDropLevel
     };

package/esm/helpers/dndkit/tree/useTreeDndkitConfig.js

@@ -8,7 +8,7 @@ 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 { useState, useMemo, useRef, useEffect } from 'react';
-import { LayoutMeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
+import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
 import { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useTreePreviewHandlers } from './useTreePreviewHandlers.js';
 import { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';
@@ -39,8 +39,10 @@ const adjustTranslate = function (_ref) {
   return newTransform;
 };
 
-const layoutMeasuring = {
-  strategy: LayoutMeasuringStrategy.BeforeDragging
+const measuring = {
+  droppable: {
+    strategy: MeasuringStrategy.BeforeDragging
+  }
 };
 
 const useTreeDndkitConfig = _ref2 => {
@@ -111,7 +113,7 @@ const useTreeDndkitConfig = _ref2 => {
     announcements,
     modifiers,
     sensors,
-    layoutMeasuring,
+    measuring,
     collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
   }, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
   const sortableContextProps = useMemo(() => ({

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/HoC/withConditionalDnDColumnContext.js

@@ -1,17 +1,19 @@
+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 { 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 { 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 +28,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 +48,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
@@ -84,15 +86,17 @@ const withConditionalDnDColumnContext = Component => props => {
     onReorder
   });
   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));
 };