@elliemae/ds-data-table 2.0.0-rc.2 → 2.0.0-rc.6

package/cjs/parts/FilterBar/FiltersBar.js

@@ -49,7 +49,6 @@ var MultiSelectPill = require('./components/MultiSelectPill.js');
 var NumberRangePill = require('./components/NumberRangePill.js');
 var SelectPill = require('./components/SelectPill.js');
 var SingleDatePill = require('./components/SingleDatePill.js');
-var TextPill = require('./components/TextPill.js');
 var styled = require('./styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -62,7 +61,6 @@ var _MoreOptionsVert;
 const pillRenderMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: SelectPill.SelectPill,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: MultiSelectPill.MultiSelectPill,
-  [FilterTypes.FILTER_TYPES.TEXT]: TextPill.TextPill,
   [FilterTypes.FILTER_TYPES.SINGLE_DATE]: SingleDatePill.SingleDatePill,
   [FilterTypes.FILTER_TYPES.DATE_RANGE]: DateRangePill.DateRangePill,
   [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill.DateSwitcherPill,

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

@@ -8,7 +8,6 @@ var MultiSelectPill = require('./MultiSelectPill.js');
 var NumberRangePill = require('./NumberRangePill.js');
 var SelectPill = require('./SelectPill.js');
 var SingleDatePill = require('./SingleDatePill.js');
-var TextPill = require('./TextPill.js');
 
 
 
@@ -18,4 +17,3 @@ exports.MultiSelectPill = MultiSelectPill.MultiSelectPill;
 exports.NumberRangePill = NumberRangePill.NumberRangePill;
 exports.SelectPill = SelectPill.SelectPill;
 exports.SingleDatePill = SingleDatePill.SingleDatePill;
-exports.TextPill = TextPill.TextPill;

package/cjs/parts/Filters/index.js

@@ -12,14 +12,13 @@ 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.for-each.js');
 var React = require('react');
-var index$2 = require('../../addons/Filters/Components/DateRangeFilter/index.js');
-var index$3 = require('../../addons/Filters/Components/DateSwitcherFilter/index.js');
-var index$4 = require('../../addons/Filters/Components/NumberRangeFilter/index.js');
-var index$5 = require('../../addons/Filters/Components/CurrencyRangeFilter/index.js');
+var index$1 = require('../../addons/Filters/Components/DateRangeFilter/index.js');
+var index$2 = require('../../addons/Filters/Components/DateSwitcherFilter/index.js');
+var index$3 = require('../../addons/Filters/Components/NumberRangeFilter/index.js');
+var index$4 = require('../../addons/Filters/Components/CurrencyRangeFilter/index.js');
 var SingleSelectFilter = require('../../addons/Filters/Components/SelectFilter/SingleSelectFilter.js');
 var MultiSelectFilter = require('../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js');
-var index$1 = require('../../addons/Filters/Components/SingleDateFilter/index.js');
-var index = require('../../addons/Filters/Components/TextInputFilter/index.js');
+var index = require('../../addons/Filters/Components/SingleDateFilter/index.js');
 require('@babel/runtime/helpers/jsx');
 require('@elliemae/ds-button');
 require('@elliemae/ds-popperjs');
@@ -63,12 +62,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const FilterMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: SingleSelectFilter.SingleSelectFilter,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter.MultiSelectFilter,
-  [FilterTypes.FILTER_TYPES.TEXT]: index.TextInputFilter,
-  [FilterTypes.FILTER_TYPES.SINGLE_DATE]: index$1.SingleDateFilter,
-  [FilterTypes.FILTER_TYPES.DATE_RANGE]: index$2.DateRangeFilter,
-  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: index$3.DateSwitcherFilter,
-  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: index$4.NumberRangeFilter,
-  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: index$5.CurrencyRangeFilter
+  [FilterTypes.FILTER_TYPES.SINGLE_DATE]: index.SingleDateFilter,
+  [FilterTypes.FILTER_TYPES.DATE_RANGE]: index$1.DateRangeFilter,
+  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: index$2.DateSwitcherFilter,
+  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: index$3.NumberRangeFilter,
+  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: index$4.CurrencyRangeFilter
 };
 const FilterMapItem = props => {
   const {

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -63,7 +63,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__*/jsxRuntime.jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
@@ -93,7 +93,8 @@ 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.withDnDSortableColumnContext(HeaderCellGroupComp);
+const HeaderCellGroup = HeaderCellGroupComp;
+const HeaderCellGroupSortable = withDnDSortableColumnContext.withDnDSortableColumnContext(HeaderCellGroupComp);
 
 exports.HeaderCellGroup = HeaderCellGroup;
+exports["default"] = HeaderCellGroupSortable;

package/cjs/parts/Headers/index.js

@@ -35,7 +35,7 @@ const HeadersComp = () => {
     cols: gridLayout,
     colsLayoutStyle: colsLayoutStyle,
     isExpandable: isExpandable
-  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx__default["default"](HeaderCellGroup.HeaderCellGroup, {
+  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx__default["default"](HeaderCellGroup["default"], {
     header: h,
     isLast: index === visibleColumns.length - 1
   }, h.id)))), [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]);

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -8,14 +8,16 @@ 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 sortable = require('@dnd-kit/sortable');
-var DragOverlayContext = require('./DragOverlayContext.js');
 var useHierarchyDndkitConfig = require('../../helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js');
 var DataTableContext = require('../../DataTableContext.js');
+var HeaderCellGroup = require('../Headers/HeaderCellGroup.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +38,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,
@@ -54,13 +58,11 @@ const withConditionalDnDColumnContext = Component => props => {
   const {
     tableProps: {
       dragAndDropColumns,
-      columns,
       onColumnsReorder
-    }
+    },
+    visibleColumns
   } = React__default["default"].useContext(DataTableContext["default"]);
-  const [PureDraggedJSX, setPureDraggedJSX] = React__default["default"].useState(null); // todo: check if this can be done via portal
-
-  const flattenedItems = React.useMemo(() => flattenColumns(columns), [columns]);
+  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
@@ -94,15 +96,17 @@ const withConditionalDnDColumnContext = Component => props => {
     onReorder
   });
   if (dragAndDropColumns) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
-    children: [/*#__PURE__*/_jsx__default["default"](DragOverlayContext.DragOverlayContext.Provider, {
-      value: {
-        setPureDraggedJSX
-      }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DnDGroupContext.Provider, {
+    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 ? PureDraggedJSX : null)]
+    }, 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));
 };

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -8,6 +8,8 @@ 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');
@@ -15,8 +17,8 @@ var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
 var useTreeDndkitConfig = require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
 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 }; }
@@ -48,8 +50,6 @@ const withConditionalDnDRowContext = Component => props => {
     flattenedData,
     allDataFlattened
   } = React__default["default"].useContext(DataTableContext["default"]);
-  const [PureDraggedJSX, setPureDraggedJSX] = React__default["default"].useState(null); // todo: check if this can be done via portal
-
   const [lastActiveId, setLastActiveId] = React__default["default"].useState(null);
   const onReorder = React.useCallback((newData, indexes, considerExpanding) => {
     // Pull the row's original data into an object
@@ -89,11 +89,7 @@ const withConditionalDnDRowContext = Component => props => {
   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"](DragOverlayContext.DragOverlayContext.Provider, {
-        value: {
-          setPureDraggedJSX
-        }
-      }, void 0, /*#__PURE__*/_jsx__default["default"](DnDTreeContext.Provider, {
+      children: /*#__PURE__*/_jsx__default["default"](DnDTreeContext.Provider, {
         value: {
           activeIndex,
           depth,
@@ -102,12 +98,15 @@ const withConditionalDnDRowContext = Component => props => {
           lastActiveId,
           setLastActiveId
         }
-      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props))))
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))
     })), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {
       style: {
         width: 'auto'
       }
-    }, void 0, activeId ? PureDraggedJSX : null)]
+    }, 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));
 };

package/cjs/parts/HoC/withConditionalDnDSortableContext.js

@@ -35,7 +35,7 @@ const withConditionalDnDSortableContext = function (items) {
     // 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.Header),
+      items: items.map(item => item.id),
       strategy: sortable.horizontalListSortingStrategy
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
     return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));

package/cjs/parts/HoC/withDnDSortableColumnContext.js

@@ -12,7 +12,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
 var withConditionalDnDColumnContext = require('./withConditionalDnDColumnContext.js');
 var SortableItemContext = require('./SortableItemContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -31,18 +30,14 @@ const withDnDSortableColumnContext = Component => props => {
       dragAndDropColumns
     }
   } = React.useContext(DataTableContext["default"]);
-  const {
-    setPureDraggedJSX
-  } = React.useContext(DragOverlayContext.DragOverlayContext);
   const {
     activeIndex
   } = React.useContext(withConditionalDnDColumnContext.DnDGroupContext); // onMount generate unique options, so everyting is only ran once
 
   const draggableOptions = React.useMemo(() => ({
-    id: props.header.Header
-  }), [props.header.Header]);
-  const useSortableHelpers = sortable.useSortable(draggableOptions);
-  const PureComponentJSX = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+    id: props.header.id
+  }), [props.header.id]);
+  const useSortableHelpers = sortable.useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = React.useMemo(() => {
     if (!dragAndDropColumns) return false;
@@ -54,16 +49,7 @@ const withDnDSortableColumnContext = Component => props => {
       shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
       dropIndicatorPosition: index > activeIndex ? SortableItemContext.DropIndicatorPosition.After : SortableItemContext.DropIndicatorPosition.Before
     });
-  }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
-  React.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__*/React.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...
 
@@ -73,7 +59,7 @@ const withDnDSortableColumnContext = Component => props => {
 
   return /*#__PURE__*/_jsx__default["default"](SortableItemContext.SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
 };
 
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;

package/cjs/parts/HoC/withDnDSortableRowContext.js

@@ -13,7 +13,6 @@ var React = require('react');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
 var withConditionalDnDRowContext = require('./withConditionalDnDRowContext.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
 var SortableItemContext = require('./SortableItemContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -31,9 +30,6 @@ const withDnDSortableRowContext = Component => props => {
       dragAndDropRows
     }
   } = React.useContext(DataTableContext["default"]);
-  const {
-    setPureDraggedJSX
-  } = React.useContext(DragOverlayContext.DragOverlayContext);
   const {
     dropIndicatorPosition,
     lastActiveId,
@@ -43,8 +39,7 @@ const withDnDSortableRowContext = Component => props => {
   const draggableOptions = React.useMemo(() => ({
     id: props.row.uid
   }), [props.row]);
-  const useSortableHelpers = sortable.useSortable(draggableOptions);
-  const PureComponentJSX = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+  const useSortableHelpers = sortable.useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = React.useMemo(() => {
     if (!dragAndDropRows) return false;
@@ -58,16 +53,7 @@ const withDnDSortableRowContext = Component => props => {
       lastActiveId,
       setLastActiveId
     });
-  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]);
-  React.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__*/React.cloneElement(PureComponentJSX, {
-        isDragOverlay: true
-      }));
-    }
-  }, [useSortableHelpers.isDragging, setPureDraggedJSX]); // we use a context so we can easly access information wherever without bubbling down
+  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]); // 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...
 
@@ -77,7 +63,7 @@ const withDnDSortableRowContext = Component => props => {
 
   return /*#__PURE__*/_jsx__default["default"](SortableItemContext.SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
 };
 
 exports.withDnDSortableRowContext = withDnDSortableRowContext;

package/cjs/parts/Row.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
@@ -22,17 +24,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const setItemRefs = (measureRef, draggableRef, ref) => {
-  const refsToSet = [measureRef];
+  const refsToSet = [];
+  if (measureRef) refsToSet.push(measureRef);
   if (draggableRef) refsToSet.push(draggableRef);
   refsHelpers.setMultipleRefs(...refsToSet)(ref);
 };
 
-const Row = props => {
+const RowComp = props => {
   const {
     row,
     measureRef,
     itemWrapperStyle,
-    itemIndex,
     isDragOverlay,
     focusedRowId,
     selectedRowId
@@ -47,7 +49,7 @@ const Row = props => {
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {
       row: row,
-      itemIndex: itemIndex,
+      itemIndex: row.realIndex,
       isDragOverlay: isDragOverlay,
       ctx: ctx,
       focusedRowId: focusedRowId,
@@ -56,15 +58,13 @@ const Row = props => {
   });
 };
 
-Row.defaultProps = {
-  itemWrapperStyle: {}
-};
-
 const mapStateToProps = state => ({
   focusedRowId: state.rows.focusedRowId,
   selectedRowId: state.rows.selectedRowId
 });
 
-var Row$1 = withDnDSortableRowContext.withDnDSortableRowContext(reactRedux.connect(mapStateToProps)(Row));
+const Row = reactRedux.connect(mapStateToProps)(RowComp);
+var Row$1 = withDnDSortableRowContext.withDnDSortableRowContext(Row);
 
-module.exports = Row$1;
+exports.Row = Row;
+exports["default"] = Row$1;

package/cjs/parts/Rows.js

@@ -64,7 +64,7 @@ const Rows = () => {
         itemIndex: index,
         itemWrapperStyle: style
       };
-      return /*#__PURE__*/jsxRuntime.jsx(Row, _objectSpread({}, rowProps));
+      return /*#__PURE__*/jsxRuntime.jsx(Row["default"], _objectSpread({}, rowProps));
     })
   }), [virtualItems, items, visibleColumns, totalColumnsWidth]);
   return PureVirtualizedRows;

package/cjs/parts/index.js

@@ -14,6 +14,6 @@ var DnDHandle = require('./DnDHandle.js');
 exports.TableContent = TableContent;
 exports.Loader = Loader;
 exports.EmptyContent = EmptyContent;
-exports.Row = Row;
+exports.Row = Row["default"];
 exports.Footer = Footer;
 exports.DnDHandle = DnDHandle;

package/cjs/styled.js

@@ -181,7 +181,7 @@ const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
 const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-18"
-})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => getGridTemplateColumnsStyle({
+})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable

package/esm/DataTableSchema.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 
 /* eslint-disable max-lines */
-const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-text', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
+const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
 const textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
 const rowVariantType = PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
 const columnPropTypes = {

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/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/dndkit/hierarchy/customCollisionDetection.js

@@ -1,12 +1,12 @@
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.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.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 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';
@@ -31,42 +31,55 @@ import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
 import '../../../parts/HoC/SortableItemContext.js';
 
-const customCollisionDetection = (activeId, activeParent, dndItems) => (entries, target) => {
+const customCollisionDetection = (activeId, activeParent, dndItems) => _ref => {
   var _document$querySelect, _document$querySelect2;
 
-  const entriesWithSameParent = entries.filter(_ref => {
+  let {
+    droppableContainers,
+    collisionRect
+  } = _ref;
+  const entriesWithSameParent = droppableContainers.filter(_ref2 => {
     var _dndItems$find;
 
-    let [id] = _ref;
+    let {
+      id
+    } = _ref2;
     return ((_dndItems$find = dndItems.find(item => item.id === id)) === null || _dndItems$find === void 0 ? void 0 : _dndItems$find.parentId) === activeParent;
   });
   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
   };
-  const originalRect = entriesWithSameParent.find(_ref2 => {
-    let [id] = _ref2;
+  const originalContainer = entriesWithSameParent.find(_ref3 => {
+    let {
+      id
+    } = _ref3;
     return id === activeId;
   });
+  const originalRect = originalContainer.rect.current;
 
-  if (originalRect[1].offsetLeft <= target.offsetLeft && target.offsetLeft <= originalRect[1].offsetLeft + originalRect[1].width) {
-    return originalRect[0];
+  if (originalRect.offsetLeft <= collisionRect.offsetLeft && collisionRect.offsetLeft <= originalRect.offsetLeft + originalRect.width) {
+    return originalContainer.id;
   }
 
-  const isLeft = target.offsetLeft <= originalRect[1].offsetLeft + dragOverlayRect.width / 2 + 5;
+  const isLeft = collisionRect.offsetLeft <= originalRect.offsetLeft + dragOverlayRect.width / 2 + 5;
   let match = null; // If going to the left, search the closest offset left
   // Otherwise, get the closest offset right
 
-  const collisionPoint = target.offsetLeft + dragOverlayRect.width / 2;
+  const collisionPoint = collisionRect.offsetLeft + dragOverlayRect.width / 2;
   entriesWithSameParent.forEach(entry => {
-    const [, rect] = entry;
+    const {
+      rect: {
+        current: rect
+      }
+    } = entry;
     const offsetRight = rect.offsetLeft + rect.width;
-    if (!match) match = entry;else if (isLeft && Math.abs(collisionPoint - rect.offsetLeft) <= Math.abs(collisionPoint - match[1].offsetLeft)) {
+    if (!match) match = entry;else if (isLeft && Math.abs(collisionPoint - rect.offsetLeft) <= Math.abs(collisionPoint - match.rect.current.offsetLeft)) {
       match = entry;
-    } else if (!isLeft && Math.abs(collisionPoint - offsetRight) <= Math.abs(collisionPoint - match[1].offsetLeft - match[1].width)) {
+    } else if (!isLeft && Math.abs(collisionPoint - offsetRight) <= Math.abs(collisionPoint - match.rect.current.offsetLeft - match.rect.current.width)) {
       match = entry;
     }
   });
-  return match === null ? null : match[0];
+  return match === null ? null : match.id;
 };
 
 export { customCollisionDetection };