@elliemae/ds-data-table 1.61.0 → 2.0.0-alpha.12

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -2,101 +2,131 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('@dnd-kit/core');
-require('@dnd-kit/sortable');
-require('./DragOverlayContext.js');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-b86fbdf4.js');
-require('../../DataTableContext.js');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-icons');
-require('../../helpers/sizeToCss.js');
-require('../../configs/constants.js');
-require('../../helpers/cellPadding.js');
-require('react-virtual');
-require('../../configs/useRowFlattenization.js');
-require('../../helpers/getIdFromUniqueRowAccessor.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-form');
-require('@babel/runtime/helpers/extends');
-require('react-redux');
-require('../../addons/Pagination/Pagination.js');
-require('@elliemae/ds-pagination');
-require('@elliemae/ds-indeterminate-progress-indicator');
-require('@elliemae/ds-circular-progress-indicator');
-require('../EmptyContent.js');
-require('@elliemae/ds-system');
-require('@elliemae/ds-button');
-require('prop-types');
-require('../../helpers/refs-helpers.js');
-require('./SortableItemContext.js');
-require('./withDnDSortableRowContext.js');
-require('./withConditionalDnDRowContext.js');
-require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
-require('../../helpers/dndkit/tree/useTreePreviewHandlers.js');
-require('../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js');
-require('../../helpers/dndkit/utilities.js');
-require('../../helpers/dndkit/tree/useTreeActionHandlers.js');
-require('lodash');
-require('../../helpers/dndkit/tree/customCollisionDetection.js');
-require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
-require('@elliemae/ds-popperjs');
-require('../../redux/reducers/index.js');
-require('redux');
-require('../../redux/reducers/headersReducers/headersReducers.js');
-require('@reduxjs/toolkit');
-require('../../redux/reducers/headersReducers/logic.js');
-require('../../redux/reducers/headersReducers/defaults.js');
-require('../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
-require('../../redux/reducers/rowsReducers/rowsReducer.js');
-require('../../redux/reducers/rowsReducers/logic.js');
-require('../../redux/reducers/rowsReducers/defaults.js');
-require('../../redux/reducers/rowsReducers/useDispatchRowsActions.js');
-require('../Footer.js');
-require('@elliemae/ds-utilities');
-require('uid');
-require('../../exported-related/RowVariants.js');
-require('../../exported-related/Filters/singleSelectFilterFn.js');
-require('../../exported-related/Filters/multiSelectFilterFn.js');
-require('../../exported-related/Filters/textFilterFn.js');
-require('moment');
-require('../../exported-related/Filters/numberRangeFilterFn.js');
-require('../../exported-related/Filters/currencyRangeFilterFn.js');
-require('../../exported-related/FilterTypes.js');
-require('../../addons/Columns/ColumnAction/ColumnAction.js');
-require('../../hooks/useRecoverFocusRow.js');
-require('@elliemae/ds-truncated-tooltip-text');
-require('../../prop-types.js');
-require('../Cells/useCellStyle.js');
-require('../../exported-related/RowRenderer/useRowRendererProperties.js');
-require('../../exported-related/RowRenderer/useRowStyle.js');
-require('../DropIndicator.js');
-require('../../configs/zIndexInternalConfig.js');
-require('../../helpers/addCellData.js');
-require('../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js');
-require('../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js');
-require('../SortByCaret.js');
-require('@elliemae/ds-controlled-form');
-require('@elliemae/ds-form-layout-blocks');
-require('@elliemae/ds-grid/');
-require('@elliemae/ds-form/ComboBox');
-require('../../helpers/columnsToGrid.js');
-require('../Headers/useHeaderCellHandlers.js');
-require('../Headers/useHeaderCellConfig.js');
-require('../../hooks/useRecoverFocusCol.js');
-require('../Headers/RequiredDot.js');
-require('../SortableHeaderCell.js');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('./withConditionalDnDSortableContext.js');
-require('../Headers/EmptyChildrenGroup.js');
-require('../../configs/fixedSizes.js');
-require('../Loader.js');
-
-
-
-exports.DnDGroupContext = addons_Columns_ColumnExpand_ColumnExpand.DnDGroupContext;
-exports.withConditionalDnDColumnContext = addons_Columns_ColumnExpand_ColumnExpand.withConditionalDnDColumnContext;
-//# sourceMappingURL=withConditionalDnDColumnContext.js.map
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
+var sortable = require('@dnd-kit/sortable');
+var DataTableContext = require('../../DataTableContext.js');
+var HeaderCellGroup = require('../Headers/HeaderCellGroup.js');
+var constants = require('../../configs/constants.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const DnDGroupContext = /*#__PURE__*/React.createContext({
+  activeIndex: undefined
+});
+
+const flattenColumns = cols => {
+  const flattened = [];
+
+  const flatten = function (col, index) {
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    const {
+      id
+    } = col;
+    flattened.push([{
+      id,
+      parentId,
+      index
+    }, col]);
+    if (col.columns) col.columns.forEach((subColumn, childIndex) => flatten(subColumn, childIndex, id));
+  };
+
+  cols.forEach((col, index) => flatten(col, index));
+  return flattened;
+}; // only wraps in "DnDContext" and "DnDGroupContext" if any Drag and Drop functionality is requested
+
+
+const withConditionalDnDColumnContext = Component => props => {
+  const {
+    tableProps: {
+      dragAndDropColumns,
+      onColumnsReorder
+    },
+    visibleColumns
+  } = React__default["default"].useContext(DataTableContext["default"]);
+  const flattenedItems = React.useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);
+  const onReorder = React.useCallback((movedItem, indexes) => {
+    // Send from index to target index
+    const newFlattenedData = sortable.arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex); // Pull the cols's data into an object
+
+    const nodes = {};
+    newFlattenedData.forEach(_ref => {
+      let [dndData, colData] = _ref;
+      delete colData.columns;
+      nodes[dndData.id] = colData;
+    });
+    const newData = [];
+    newFlattenedData.forEach(_ref2 => {
+      let [dndData, colData] = _ref2;
+
+      // If row has parent, insert it to it's subrows
+      // otherwise append it to the new user data
+      if (dndData.parentId) {
+        const parentNode = nodes[dndData.parentId];
+        if (parentNode.columns) parentNode.columns.push(colData);else parentNode.columns = [colData];
+      } else newData.push(colData);
+    });
+    onColumnsReorder(newData, indexes);
+  }, [flattenedItems, onColumnsReorder]);
+  const onPreviewResetState = React.useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    if (el) el.onscroll = () => null;
+  }, []);
+  const onPreviewDragStart = React.useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
+    if (el) {
+      const y = el.scrollTop;
+
+      el.onscroll = () => el.scrollTo(0, y);
+    }
+  }, []);
+  const {
+    dndContextProps,
+    activeId,
+    activeIndex
+  } = dsDragAndDrop.useHierarchyDndkitConfig({
+    flattenedItems,
+    dragOverlayDataTestid: constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
+    isHorizontalDnD: true,
+    onReorder,
+    onPreviewResetState,
+    onPreviewDragStart
+  });
+  if (dragAndDropColumns) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
+    children: [/*#__PURE__*/_jsx__default["default"](DnDGroupContext.Provider, {
+      value: {
+        activeIndex
+      }
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props))), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {}, void 0, activeId ? /*#__PURE__*/_jsx__default["default"](HeaderCellGroup.HeaderCellGroup, {
+      header: flattenedItems.find(_ref3 => {
+        let [item] = _ref3;
+        return item.id === activeId;
+      })[1],
+      isDragOverlay: true
+    }) : null)]
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
+};
+
+exports.DnDGroupContext = DnDGroupContext;
+exports.withConditionalDnDColumnContext = withConditionalDnDColumnContext;

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -2,119 +2,114 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
-var helpers_dndkit_tree_useTreeDndkitConfig = require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
-var parts_HoC_DragOverlayContext = require('./DragOverlayContext.js');
-var parts_HoC_SortableItemContext = require('./SortableItemContext.js');
-require('../../configs/constants.js');
-require('@babel/runtime/helpers/defineProperty');
-require('../../helpers/dndkit/tree/useTreePreviewHandlers.js');
-require('../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js');
-require('../../helpers/dndkit/utilities.js');
-require('../../helpers/dndkit/tree/useTreeActionHandlers.js');
-require('lodash');
-require('../../helpers/dndkit/tree/customCollisionDetection.js');
-require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
+var SortableItemContext = require('./SortableItemContext.js');
+var Row = require('../Row.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var DnDTreeContext = /*#__PURE__*/React.createContext({
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const DnDTreeContext = /*#__PURE__*/React.createContext({
   depth: undefined,
   activeIndex: undefined,
   visibleItems: undefined,
-  dropIndicatorPosition: parts_HoC_SortableItemContext.DropIndicatorPosition.None,
+  dropIndicatorPosition: SortableItemContext.DropIndicatorPosition.None,
   lastActiveId: undefined,
   setLastActiveId: undefined
 }); // only wraps in "DnDContext" and "DnDTreeContext" if any Drag and Drop functionality is requested
 
-var withConditionalDnDRowContext = function withConditionalDnDRowContext(Component) {
-  return function (props) {
-    var _React$useContext = React__default['default'].useContext(DataTableContext['default']),
-        _React$useContext$tab = _React$useContext.tableProps,
-        dragAndDropRows = _React$useContext$tab.dragAndDropRows,
-        isExpandable = _React$useContext$tab.isExpandable,
-        onRowsReorder = _React$useContext$tab.onRowsReorder,
-        maxDragAndDropLevel = _React$useContext$tab.maxDragAndDropLevel,
-        flattenedData = _React$useContext.flattenedData,
-        allDataFlattened = _React$useContext.allDataFlattened;
-
-    var _React$useState = React__default['default'].useState(null),
-        _React$useState2 = _slicedToArray__default['default'](_React$useState, 2),
-        PureDraggedJSX = _React$useState2[0],
-        setPureDraggedJSX = _React$useState2[1]; // todo: check if this can be done via portal
-
-
-    var _React$useState3 = React__default['default'].useState(null),
-        _React$useState4 = _slicedToArray__default['default'](_React$useState3, 2),
-        lastActiveId = _React$useState4[0],
-        setLastActiveId = _React$useState4[1];
-
-    var onReorder = React.useCallback(function (newData, indexes, considerExpanding) {
-      // Pull the row's original data into an object
-      var nodes = {};
-      newData.forEach(function (row) {
-        delete row.original.subRows;
-        nodes[row.uid] = row.original;
-      });
-      var newUserData = [];
-      newData.forEach(function (row) {
-        // If row has parent, insert it to it's subrows
-        // otherwise append it to the new user data
-        if (row.parentId) {
-          var parentNode = nodes[row.parentId];
-          if (parentNode !== null && parentNode !== void 0 && parentNode.subRows) parentNode.subRows.push(row.original);else parentNode.subRows = [row.original];
-        } else newUserData.push(row.original);
-      }); // Tell the user that the order has change, he can chose to commit it or not
+const withConditionalDnDRowContext = Component => props => {
+  const {
+    tableProps: {
+      dragAndDropRows,
+      isExpandable,
+      onRowsReorder,
+      maxDragAndDropLevel
+    },
+    flattenedData,
+    allDataFlattened
+  } = React__default["default"].useContext(DataTableContext["default"]);
+  const [lastActiveId, setLastActiveId] = React__default["default"].useState(null);
+  const onReorder = React.useCallback((newData, indexes, considerExpanding) => {
+    // Pull the row's original data into an object
+    const nodes = {};
+    newData.forEach(row => {
+      delete row.original.subRows;
+      nodes[row.uid] = row.original;
+    });
+    const newUserData = [];
+    newData.forEach(row => {
+      // If row has parent, insert it to it's subrows
+      // otherwise append it to the new user data
+      if (row.parentId) {
+        const parentNode = nodes[row.parentId];
+        if (parentNode !== null && parentNode !== void 0 && parentNode.subRows) parentNode.subRows.push(row.original);else parentNode.subRows = [row.original];
+      } else newUserData.push(row.original);
+    }); // Tell the user that the order has change, he can chose to commit it or not
 
-      onRowsReorder(newUserData, indexes, considerExpanding);
-    }, [onRowsReorder]);
-
-    var _useTreeDndkitConfig = helpers_dndkit_tree_useTreeDndkitConfig({
-      flattenedItems: allDataFlattened,
-      visibleItems: flattenedData,
-      isHorizontalDnD: false,
-      isExpandable: isExpandable,
-      onReorder: onReorder,
-      maxDragAndDropLevel: maxDragAndDropLevel
-    }),
-        dndContextProps = _useTreeDndkitConfig.dndContextProps,
-        sortableContextProps = _useTreeDndkitConfig.sortableContextProps,
-        activeId = _useTreeDndkitConfig.activeId,
-        activeIndex = _useTreeDndkitConfig.activeIndex,
-        depth = _useTreeDndkitConfig.depth,
-        dropIndicatorPosition = _useTreeDndkitConfig.dropIndicatorPosition,
-        visibleItems = _useTreeDndkitConfig.visibleItems;
-
-    if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
-    if (dragAndDropRows) return /*#__PURE__*/React__default['default'].createElement(core.DndContext, dndContextProps, /*#__PURE__*/React__default['default'].createElement(sortable.SortableContext, sortableContextProps, /*#__PURE__*/React__default['default'].createElement(parts_HoC_DragOverlayContext.DragOverlayContext.Provider, {
-      value: {
-        setPureDraggedJSX: setPureDraggedJSX
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(DnDTreeContext.Provider, {
-      value: {
-        activeIndex: activeIndex,
-        depth: depth,
-        visibleItems: visibleItems,
-        dropIndicatorPosition: dropIndicatorPosition,
-        lastActiveId: lastActiveId,
-        setLastActiveId: setLastActiveId
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(Component, props)))), /*#__PURE__*/React__default['default'].createElement(core.DragOverlay, {
+    onRowsReorder(newUserData, indexes, considerExpanding);
+  }, [onRowsReorder]);
+  const {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex,
+    depth,
+    dropIndicatorPosition,
+    visibleItems
+  } = dsDragAndDrop.useTreeDndkitConfig({
+    flattenedItems: allDataFlattened,
+    visibleItems: flattenedData,
+    isHorizontalDnD: false,
+    isExpandable,
+    onReorder,
+    maxDragAndDropLevel
+  });
+  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
+  if (dragAndDropRows) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
+      children: /*#__PURE__*/_jsx__default["default"](DnDTreeContext.Provider, {
+        value: {
+          activeIndex,
+          depth,
+          visibleItems,
+          dropIndicatorPosition,
+          lastActiveId,
+          setLastActiveId
+        }
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))
+    })), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {
       style: {
         width: 'auto'
       }
-    }, activeId ? PureDraggedJSX : null));
-    return /*#__PURE__*/React__default['default'].createElement(Component, props);
-  };
+    }, void 0, activeId ? /*#__PURE__*/_jsx__default["default"](Row.Row, {
+      row: flattenedData.find(row => row.uid === activeId),
+      isDragOverlay: true
+    }) : null)]
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
 };
 
 exports.DnDTreeContext = DnDTreeContext;
 exports.withConditionalDnDRowContext = withConditionalDnDRowContext;
-//# sourceMappingURL=withConditionalDnDRowContext.js.map

package/cjs/parts/HoC/withConditionalDnDSortableContext.js

@@ -2,34 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var sortable = require('@dnd-kit/sortable');
 var React = require('react');
 var DataTableContext = require('../../DataTableContext.js');
-require('../../configs/constants.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var withConditionalDnDSortableContext = function withConditionalDnDSortableContext(items) {
-  var isDragOverlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return function (Component) {
-    return function (props) {
-      var _useContext = React.useContext(DataTableContext['default']),
-          dragAndDropColumns = _useContext.tableProps.dragAndDropColumns; // Only add the context if it's not a dragOverlay and dnd for cols was requested
-      // It's important that drag overlays DO NOT have any sortable functionality!
-
-
-      if (!isDragOverlay && dragAndDropColumns) return /*#__PURE__*/React__default['default'].createElement(sortable.SortableContext, {
-        items: items.map(function (item) {
-          return item.Header;
-        }),
-        strategy: sortable.horizontalListSortingStrategy
-      }, /*#__PURE__*/React__default['default'].createElement(Component, props));
-      return /*#__PURE__*/React__default['default'].createElement(Component, props);
-    };
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const withConditionalDnDSortableContext = function (items) {
+  let isDragOverlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return Component => props => {
+    const {
+      tableProps: {
+        dragAndDropColumns
+      }
+    } = React.useContext(DataTableContext["default"]); // Only add the context if it's not a dragOverlay and dnd for cols was requested
+    // It's important that drag overlays DO NOT have any sortable functionality!
+
+    if (!isDragOverlay && dragAndDropColumns) return /*#__PURE__*/_jsx__default["default"](sortable.SortableContext, {
+      items: items.map(item => item.id),
+      strategy: sortable.horizontalListSortingStrategy
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
+    return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
   };
 };
 
 exports.withConditionalDnDSortableContext = withConditionalDnDSortableContext;
-//# sourceMappingURL=withConditionalDnDSortableContext.js.map