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

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -8,15 +8,17 @@ 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 useTreeDndkitConfig = require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
-var DragOverlayContext = require('./DragOverlayContext.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 }; }
@@ -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
@@ -78,7 +78,7 @@ const withConditionalDnDRowContext = Component => props => {
     depth,
     dropIndicatorPosition,
     visibleItems
-  } = useTreeDndkitConfig({
+  } = dsDragAndDrop.useTreeDndkitConfig({
     flattenedItems: allDataFlattened,
     visibleItems: flattenedData,
     isHorizontalDnD: false,
@@ -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
@@ -207,7 +207,7 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
     theme
   } = _ref12;
   return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
-}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[300], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
+}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[500], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
 exports.GroupHeaderContainer = GroupHeaderContainer;
 exports.GroupHeaderTitle = GroupHeaderTitle;

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 = {
@@ -64,20 +64,29 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: PropTypes.func.description('Function invoked when filters change'),
-  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    pageIndex: PropTypes.number.description('Index of the current page, starting from 1'),
-    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not'),
-    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not'),
-    pageSize: PropTypes.number.description('The current page size'),
-    perPageOptions: PropTypes.arrayOf(PropTypes.number).description('The available options for page size'),
-    onPageChange: PropTypes.func.description('Function invoked when the page is changed'),
-    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed'),
-    onNextPage: PropTypes.func.description('Function invoked when next button is pressed'),
-    pageCount: PropTypes.number.description('How many pages are there. By default it will be calculated based on the ammount of rows you have'),
+  pagination: PropTypes.shape({
+    pageCount: PropTypes.number.description('How many pages are there'),
+    pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
+    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
+    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
+    pageSize: PropTypes.number.description('The current page size').defaultValue(10),
     showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
+    perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      dsId: PropTypes.string,
+      value: PropTypes.number,
+      label: PropTypes.string,
+      type: PropTypes.oneOf(['single'])
+    })])).description('The available options for page size').defaultValue([10]),
+    perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),
+    minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),
+    maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),
+    onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
+    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
+    onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
+    onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
     pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),
     pageDetailsTitle: PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue('')
-  })]).description('Object containing the data for the pagination'),
+  }).description('Object containing the data for the pagination'),
   colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),
   hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),
   dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),

package/esm/addons/Filters/Components/CurrencyRangeFilter/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;
 
@@ -82,6 +84,20 @@ const CurrencyRangeFilter = 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-currency-range';
   return /*#__PURE__*/_jsx(FilterPopover, {
     reduxHeader: reduxHeader,
@@ -106,7 +122,10 @@ const CurrencyRangeFilter = props => {
       onChange: handleFromChange,
       placeholder: "0.00",
       mask: number => MASK_TYPES.NUMBER(opts)(number),
-      autoFocus: true
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
     })), /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Max",
       inputID: "".concat(idPreffix, "-max-").concat(column.id)
@@ -120,7 +139,10 @@ const CurrencyRangeFilter = 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.00",
-      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/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/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

@@ -54,14 +54,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';