@elliemae/ds-data-table 2.0.0-alpha.10 → 2.0.0-alpha.14

package/cjs/addons/Filters/index.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('./Components/DateRangeFilter/index.js');
-var index$1 = require('./Components/NumberRangeFilter/index.js');
+var index$1 = require('./Components/DateSwitcherFilter/index.js');
+var index$2 = require('./Components/NumberRangeFilter/index.js');
+var index$3 = require('./Components/CurrencyRangeFilter/index.js');
 var SingleSelectFilter = require('./Components/SelectFilter/SingleSelectFilter.js');
 var MultiSelectFilter = require('./Components/SelectFilter/MultiSelectFilter.js');
-var index$2 = require('./Components/SingleDateFilter/index.js');
-var index$3 = require('./Components/TextInputFilter/index.js');
+var index$4 = require('./Components/SingleDateFilter/index.js');
 
 
 
 exports.DateRangeFilter = index.DateRangeFilter;
-exports.NumberRangeFilter = index$1.NumberRangeFilter;
+exports.DateSwitcherFilter = index$1.DateSwitcherFilter;
+exports.NumberRangeFilter = index$2.NumberRangeFilter;
+exports.CurrencyRangeFilter = index$3.CurrencyRangeFilter;
 exports.SingleSelectFilter = SingleSelectFilter.SingleSelectFilter;
 exports.MultiSelectFilter = MultiSelectFilter.MultiSelectFilter;
-exports.SingleDateFilter = index$2.SingleDateFilter;
-exports.TextInputFilter = index$3.TextInputFilter;
+exports.SingleDateFilter = index$4.SingleDateFilter;

package/cjs/addons/Pagination/Pagination.js

@@ -2,53 +2,32 @@
 
 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 React = require('react');
-var styled = require('../../styled.js');
+var dsPagination = require('@elliemae/ds-pagination');
 var DataTableContext = require('../../DataTableContext.js');
-var PerPageSelector = require('./PerPageSelector.js');
-var PagesButtons = require('./PagesButtons.js');
-var constants = require('../../configs/constants.js');
-require('react-virtual');
-require('../../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons');
-require('styled-components');
-require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
-require('../../parts/TableContent.js');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
-require('@elliemae/ds-system');
-require('@elliemae/ds-button');
-require('../../parts/Row.js');
-require('../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
-require('../../parts/HoC/SortableItemContext.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);
 
+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 Pagination = () => {
   const {
     tableProps: {
-      pagination,
       onPageChanged
     },
-    paginationHelpers: {
-      pageIndex,
-      pageSize,
-      canPreviousPage,
-      canNextPage,
-      onPageSizeChange,
-      onNextPage,
-      onPreviousPage,
-      onPageChange,
-      pageCount
-    },
+    paginationHelpers,
     flattenedData: page,
     layoutHelpers: {
       totalColumnsWidth
@@ -58,22 +37,9 @@ const Pagination = () => {
   React.useEffect(() => {
     onPageChanged(originalPage);
   }, [onPageChanged, originalPage]);
-  return /*#__PURE__*/_jsx__default["default"](styled.PaginationContainer, {
-    width: totalColumnsWidth,
-    "data-testid": constants.DATA_TESTID.DATA_TABLE_PAGINATION_CONTAINER
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](PerPageSelector, {
-    pagination: pagination,
-    pageSize: pageSize,
-    setPageSize: onPageSizeChange
-  }), /*#__PURE__*/_jsx__default["default"](PagesButtons, {
-    canPreviousPage: canPreviousPage,
-    canNextPage: canNextPage,
-    pageCount: pageCount,
-    pageIndex: pageIndex,
-    onNextPage: onNextPage,
-    onPreviousPage: onPreviousPage,
-    onPageChange: onPageChange
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(dsPagination.DSPagination, _objectSpread(_objectSpread({}, paginationHelpers), {}, {
+    width: totalColumnsWidth
+  }));
 };
 
 exports.Pagination = Pagination;

package/cjs/configs/constants.js

@@ -23,12 +23,10 @@ const DATA_TESTID = {
   DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',
   DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',
   DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',
+  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',
   DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',
   DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',
   DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',
-  DATA_TABLE_PAGINATION_PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
-  DATA_TABLE_PAGINATION_NEXT_BUTTON: 'data-table-pagination-next-button',
-  DATA_TABLE_PAGINATION_CONTAINER: 'data-table-pagination-container',
   DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',
   DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',
   DATA_TABLE_ROW_CONTENT: 'data-table-row-content',

package/cjs/configs/fixedSizes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const FIXED_SIZES = {
-  PAGINATION_HEIGHT: 50
+  PAGINATION_HEIGHT: 42
 };
 
 exports.FIXED_SIZES = FIXED_SIZES;

package/cjs/configs/useDatatableConfig.js

@@ -2,6 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var React = require('react');
 var reactVirtual = require('react-virtual');
 var columnsToGrid = require('../helpers/columnsToGrid.js');
@@ -11,7 +17,7 @@ var useTableColsWithAddons = require('./useTableColsWithAddons.js');
 var constants = require('./constants.js');
 
 const useDatatableConfig = props => {
-  var _columnHeaderRef$curr, _columnHeaderRef$curr2;
+  var _columnHeaderRef$curr, _columnHeaderRef$curr2, _columnHeaderRef$curr3;
 
   const virtualListRef = React.useRef(null);
   const columnHeaderRef = React.useRef(null); // ===========================================================================
@@ -30,7 +36,7 @@ const useDatatableConfig = props => {
     size: dataLength,
     parentRef: virtualListRef,
     overscan: 15,
-    paddingStart: ((_columnHeaderRef$curr = columnHeaderRef.current) === null || _columnHeaderRef$curr === void 0 ? void 0 : (_columnHeaderRef$curr2 = _columnHeaderRef$curr.getBoundingClientRect()) === null || _columnHeaderRef$curr2 === void 0 ? void 0 : _columnHeaderRef$curr2.height) ?? 24
+    paddingStart: (_columnHeaderRef$curr = (_columnHeaderRef$curr2 = columnHeaderRef.current) === null || _columnHeaderRef$curr2 === void 0 ? void 0 : (_columnHeaderRef$curr3 = _columnHeaderRef$curr2.getBoundingClientRect()) === null || _columnHeaderRef$curr3 === void 0 ? void 0 : _columnHeaderRef$curr3.height) !== null && _columnHeaderRef$curr !== void 0 ? _columnHeaderRef$curr : 24
   }); // ===========================================================================
   // Action ref setup
   // ===========================================================================

package/cjs/configs/usePaginationConfig.js

@@ -24,10 +24,13 @@ 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
+    maxPerPage = 100,
+    showPerPageSelector = true,
+    pageDetails = [],
+    pageDetailsTitle = ''
   } = pagination || noPagination; // pagination can be false
   // Get the needed page
 
@@ -48,8 +51,11 @@ const usePaginationConfig = (props, flattenedData) => {
     pageCount,
     perPageStep,
     minPerPage,
-    maxPerPage
-  }), [pageIndex, canPreviousPage, canNextPage, pageSize, perPageOptions, onPageSizeChange, onPreviousPage, onNextPage, onPageChange, pageCount, perPageStep, minPerPage, maxPerPage]);
+    maxPerPage,
+    showPerPageSelector,
+    pageDetails,
+    pageDetailsTitle
+  }), [pageIndex, canPreviousPage, canNextPage, pageSize, perPageOptions, onPageSizeChange, onPreviousPage, onNextPage, onPageChange, pageCount, perPageStep, minPerPage, maxPerPage, showPerPageSelector, pageDetails, pageDetailsTitle]);
   return [page, paginationHelpers];
 };
 

package/cjs/configs/useRowFlattenization.js

@@ -2,23 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 var React = require('react');
 var getIdFromUniqueRowAccessor = require('../helpers/getIdFromUniqueRowAccessor.js');
 
-/* eslint-disable max-params */
 const emptyObject = {};
 const trueReturner = new Proxy({}, {
   get: () => true
 });
 
-const flatten = (data, expandedRows, uniqueRowAccessor, maxDepth = 0) => {
+const flatten = function (data, expandedRows, uniqueRowAccessor) {
+  let maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   const result = [];
 
-  const doit = (row, index = 0, parentId = null, parentIndex = null, depth = 0) => {
-    const id = (parentId ? `${parentId}.` : '') + index.toString();
+  const doit = function (row) {
+    let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let parentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    let depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    const id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
     const uid = getIdFromUniqueRowAccessor.getIdFromUniqueRowAccessor(uniqueRowAccessor, {
       id,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     });
     const isExpanded = expandedRows[uid];
     const rowToPush = {
@@ -30,11 +37,11 @@ const flatten = (data, expandedRows, uniqueRowAccessor, maxDepth = 0) => {
       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/cjs/configs/useTableColsWithAddons.js

@@ -1,6 +1,14 @@
 'use strict';
 
 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/web.dom-collections.iterator.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 React = require('react');
 var ColumnAction = require('../addons/Columns/ColumnAction/ColumnAction.js');
 var ColumnExpand = require('../addons/Columns/ColumnExpand/ColumnExpand.js');
@@ -17,36 +25,43 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 augmentColumns = columns => {
-  const augmentColumn = (column, index, parentId = null, depth = 0) => {
-    let id = `column${index}`;
+  const augmentColumn = function (column, index) {
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    let id = "column".concat(index);
     if (typeof column.Header === 'string') id = column.Header;
     if (typeof column.accessor === 'string') id = column.accessor;
     if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));
-    return _objectSpread({
+    return _objectSpread(_objectSpread({
       id,
       parentId,
       depth
-    }, column);
+    }, column), {}, {
+      ref: /*#__PURE__*/React.createRef()
+    });
   };
 
   return columns.map((col, index) => augmentColumn(col, index));
 };
 
-const useTableColsWithAddons = ({
-  columns,
-  renderRowActions,
-  isExpandable,
-  selectSingle,
-  selection,
-  dragAndDropRows,
-  noSelectionColumn
-}) => React.useMemo(() => {
-  const columnsWithAddons = [...augmentColumns(columns)];
-  if (isExpandable) columnsWithAddons.unshift(ColumnExpand.expandRowColumn);
-  if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(ColumnSelectSingle.singleSelectColumn);else columnsWithAddons.unshift(ColumnSelectMultiple.multiSelectColumn);
-  if (dragAndDropRows) columnsWithAddons.unshift(ColumnDragHandle.dragHandleColumn);
-  if (renderRowActions) columnsWithAddons.push(ColumnAction.actionColumn(renderRowActions));
-  return columnsWithAddons;
-}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+const useTableColsWithAddons = _ref => {
+  let {
+    columns,
+    renderRowActions,
+    isExpandable,
+    selectSingle,
+    selection,
+    dragAndDropRows,
+    noSelectionColumn
+  } = _ref;
+  return React.useMemo(() => {
+    const columnsWithAddons = [...augmentColumns(columns)];
+    if (isExpandable) columnsWithAddons.unshift(ColumnExpand.expandRowColumn);
+    if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(ColumnSelectSingle.singleSelectColumn);else columnsWithAddons.unshift(ColumnSelectMultiple.multiSelectColumn);
+    if (dragAndDropRows) columnsWithAddons.unshift(ColumnDragHandle.dragHandleColumn);
+    if (renderRowActions) columnsWithAddons.push(ColumnAction.actionColumn(renderRowActions));
+    return columnsWithAddons;
+  }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+};
 
 module.exports = useTableColsWithAddons;

package/cjs/exported-related/EditableCell.js

@@ -3,6 +3,7 @@
 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');
 var styled = require('../styled.js');
 var DataTableContext = require('../DataTableContext.js');
@@ -18,7 +19,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -40,34 +42,40 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = React.useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = React.useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,
     onKeyDown: handleOnKeyDown,
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
-    "aria-describedby": isEditing ? undefined : cell.id,
+    role: "cell",
+    "aria-labelledby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx__default["default"](styled.StyledPencilIcon, {}))), /*#__PURE__*/_jsx__default["default"]("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
-      "aria-hidden": "false"
-    }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
+      "aria-hidden": "true"
+    }, void 0, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };
 

package/cjs/exported-related/FilterPopover.js

@@ -2,55 +2,74 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.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 React = require('react');
 var DSButton = require('@elliemae/ds-button');
 var dsPopperjs = require('@elliemae/ds-popperjs');
 var styled = require('styled-components');
 require('../redux/reducers/index.js');
 var constants = require('../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../styled.js');
-require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+var jsxRuntime = require('react/jsx-runtime');
+require('@elliemae/ds-form');
 require('../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('../DataTableContext.js');
 require('../parts/Row.js');
 require('../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../parts/HoC/SortableItemContext.js');
 var useDispatchHeadersActions = require('../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+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 FilterButton = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], props => props.hide ? 'opacity: 0; display: none; width: 0;' : '');
 const Button = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
-const FilterPopover = ({
-  columnId,
-  triggerIcon,
-  menuContent,
-  onTriggerClick = () => null,
-  onClickOutsideMenu = () => null,
-  reduxHeader,
-  innerRef,
-  ariaLabel
-}) => {
+const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:#fff;"]);
+const FilterPopover = _ref2 => {
+  var _column$ref$current$o, _column$ref, _column$ref$current;
+
+  let {
+    column,
+    columnId,
+    triggerIcon,
+    menuContent,
+    onTriggerClick = () => null,
+    onClickOutsideMenu = () => null,
+    reduxHeader,
+    innerRef,
+    ariaLabel,
+    customStyles
+  } = _ref2;
   const {
     hideFilterButton,
     hideFilterMenu
@@ -58,6 +77,7 @@ const FilterPopover = ({
     hideFilterButton: true,
     hideFilterMenu: true
   };
+  const popperRef = React.useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -99,6 +119,11 @@ const FilterPopover = ({
     },
     style: {
       display: 'flex'
+    },
+    onBlur: e => {
+      if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
+        referenceElement.focus();
+      }
     }
   }, void 0, /*#__PURE__*/_jsx__default["default"](FilterButton, {
     hide: !isIconVisible,
@@ -124,17 +149,30 @@ const FilterPopover = ({
     startPlacementPreference: "bottom-end",
     customOffset: [5, 4],
     withoutArrow: true,
-    withoutPortal: true,
     zIndex: 10,
-    extraPopperStyles: {
-      minWidth: '100%'
-    },
+    withoutAnimation: true,
+    extraPopperStyles: _objectSpread(_objectSpread({}, customStyles), {}, {
+      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__default["default"]("div", {
-    style: {
-      backgroundColor: '#fff'
-    }
-  }, void 0, menuContent)));
+  }, void 0, /*#__PURE__*/jsxRuntime.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
+  })));
 };
 
 exports.FilterPopover = FilterPopover;

package/cjs/exported-related/FilterTypes.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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',
-  NUMBER_RANGE: 'ds-filter-number-range'
+  DATE_SWITCHER: 'ds-filter-date-switcher',
+  NUMBER_RANGE: 'ds-filter-number-range',
+  CURRENCY_RANGE: 'ds-filter-currency-range'
 };
 
 exports.FILTER_TYPES = FILTER_TYPES;

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

@@ -2,22 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 var singleSelectFilterFn = require('./singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./multiSelectFilterFn.js');
-var textFilterFn = require('./textFilterFn.js');
 var singleDateFilterFn = require('./singleDateFilterFn.js');
 var dateRangeFilterFn = require('./dateRangeFilterFn.js');
+var dateSwitcherFilterFn = require('./dateSwitcherFilterFn.js');
 var numberRangeFilterFn = require('./numberRangeFilterFn.js');
+var currencyRangeFilterFn = require('./currencyRangeFilterFn.js');
 var FilterTypes = require('../FilterTypes.js');
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const filterMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: singleSelectFilterFn.singleSelectFilterFn,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn.multiSelectFilterFn,
-  [FilterTypes.FILTER_TYPES.TEXT]: textFilterFn.textFilterFn,
   [FilterTypes.FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn.singleDateFilterFn,
   [FilterTypes.FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn.dateRangeFilterFn,
-  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn.numberRangeFilterFn
+  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn.dateSwitcherFilterFn,
+  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn.numberRangeFilterFn,
+  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn.currencyRangeFilterFn
 };
 const applyOutOfTheBoxFilters = (data, filters) => {
   let filteredData = data;

package/cjs/exported-related/Filters/currencyRangeFilterFn.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+const getNumber = str => {
+  if (str === null) return null;
+  if (typeof str === 'number') return str;
+  if (typeof str !== 'string') return null;
+  return Number.parseFloat(str.split('').filter(x => ![',', '$'].includes(x)).join(''));
+};
+
+const isEmpty = number => Number.isNaN(number) || number === null || number === undefined;
+
+const currencyRangeFilterFn = (unfilteredData, filterKey, filterValue) => {
+  const fromNumber = getNumber(filterValue.from);
+  const toNumber = getNumber(filterValue.to);
+  return unfilteredData.filter(datum => isEmpty(fromNumber) || isEmpty(toNumber) || getNumber(datum[filterKey]) >= fromNumber && getNumber(datum[filterKey]) <= toNumber);
+};
+
+exports.currencyRangeFilterFn = currencyRangeFilterFn;