@elliemae/ds-data-table 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/addons/Pagination/Pagination.js

@@ -1,47 +1,25 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext, useMemo, useEffect } from 'react';
-import { PaginationContainer, PaginationWrapper } from '../../styled.js';
+import { DSPagination } from '@elliemae/ds-pagination';
 import DataTableContext from '../../DataTableContext.js';
-import PerPageSelector from './PerPageSelector.js';
-import PagesButtons from './PagesButtons.js';
-import { DATA_TESTID } from '../../configs/constants.js';
-import 'react-virtual';
-import '../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
-import '@elliemae/ds-icons';
-import 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
-import '../../parts/TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../../parts/Row.js';
-import '../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
-import '../../parts/HoC/SortableItemContext.js';
+import { jsx } from 'react/jsx-runtime';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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(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
@@ -51,22 +29,9 @@ const Pagination = () => {
   useEffect(() => {
     onPageChanged(originalPage);
   }, [onPageChanged, originalPage]);
-  return /*#__PURE__*/_jsx(PaginationContainer, {
-    width: totalColumnsWidth,
-    "data-testid": DATA_TESTID.DATA_TABLE_PAGINATION_CONTAINER
-  }, void 0, /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, /*#__PURE__*/_jsx(PerPageSelector, {
-    pagination: pagination,
-    pageSize: pageSize,
-    setPageSize: onPageSizeChange
-  }), /*#__PURE__*/_jsx(PagesButtons, {
-    canPreviousPage: canPreviousPage,
-    canNextPage: canNextPage,
-    pageCount: pageCount,
-    pageIndex: pageIndex,
-    onNextPage: onNextPage,
-    onPreviousPage: onPreviousPage,
-    onPageChange: onPageChange
-  })));
+  return /*#__PURE__*/jsx(DSPagination, _objectSpread(_objectSpread({}, paginationHelpers), {}, {
+    width: totalColumnsWidth
+  }));
 };
 
 export { Pagination };

package/esm/configs/constants.js

@@ -19,12 +19,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',
@@ -38,7 +36,9 @@ const DATA_TESTID = {
   DATA_TABLE_HEADER: 'data-table-header',
   DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',
   DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',
-  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay'
+  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',
+  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',
+  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button'
 };
 
 export { ColsLayoutStyle, DATA_TESTID, momentFormat };

package/esm/configs/fixedSizes.js

@@ -1,5 +1,5 @@
 const FIXED_SIZES = {
-  PAGINATION_HEIGHT: 50
+  PAGINATION_HEIGHT: 42
 };
 
 export { FIXED_SIZES };

package/esm/configs/useDatatableConfig.js

@@ -1,3 +1,9 @@
+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.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { useRef, useMemo, useState, useEffect } from 'react';
 import { useVirtual } from 'react-virtual';
 import { columnsToGrid } from '../helpers/columnsToGrid.js';
@@ -7,7 +13,7 @@ import useTableColsWithAddons from './useTableColsWithAddons.js';
 import { ColsLayoutStyle } from './constants.js';
 
 const useDatatableConfig = props => {
-  var _columnHeaderRef$curr, _columnHeaderRef$curr2;
+  var _columnHeaderRef$curr, _columnHeaderRef$curr2, _columnHeaderRef$curr3;
 
   const virtualListRef = useRef(null);
   const columnHeaderRef = useRef(null); // ===========================================================================
@@ -26,7 +32,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/esm/configs/usePaginationConfig.js

@@ -20,10 +20,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
 
@@ -44,8 +47,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/esm/configs/useRowFlattenization.js

@@ -1,20 +1,27 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useMemo } from 'react';
 import { getIdFromUniqueRowAccessor } from '../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(uniqueRowAccessor, {
       id,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     });
     const isExpanded = expandedRows[uid];
     const rowToPush = {
@@ -26,11 +33,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/esm/configs/useTableColsWithAddons.js

@@ -1,5 +1,13 @@
+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/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useMemo } from 'react';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useMemo, createRef } from 'react';
 import { actionColumn } from '../addons/Columns/ColumnAction/ColumnAction.js';
 import { expandRowColumn } from '../addons/Columns/ColumnExpand/ColumnExpand.js';
 import { multiSelectColumn } from '../addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js';
@@ -11,36 +19,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(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__*/createRef()
+    });
   };
 
   return columns.map((col, index) => augmentColumn(col, index));
 };
 
-const useTableColsWithAddons = ({
-  columns,
-  renderRowActions,
-  isExpandable,
-  selectSingle,
-  selection,
-  dragAndDropRows,
-  noSelectionColumn
-}) => useMemo(() => {
-  const columnsWithAddons = [...augmentColumns(columns)];
-  if (isExpandable) columnsWithAddons.unshift(expandRowColumn);
-  if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(singleSelectColumn);else columnsWithAddons.unshift(multiSelectColumn);
-  if (dragAndDropRows) columnsWithAddons.unshift(dragHandleColumn);
-  if (renderRowActions) columnsWithAddons.push(actionColumn(renderRowActions));
-  return columnsWithAddons;
-}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+const useTableColsWithAddons = _ref => {
+  let {
+    columns,
+    renderRowActions,
+    isExpandable,
+    selectSingle,
+    selection,
+    dragAndDropRows,
+    noSelectionColumn
+  } = _ref;
+  return useMemo(() => {
+    const columnsWithAddons = [...augmentColumns(columns)];
+    if (isExpandable) columnsWithAddons.unshift(expandRowColumn);
+    if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(singleSelectColumn);else columnsWithAddons.unshift(multiSelectColumn);
+    if (dragAndDropRows) columnsWithAddons.unshift(dragHandleColumn);
+    if (renderRowActions) columnsWithAddons.push(actionColumn(renderRowActions));
+    return columnsWithAddons;
+  }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+};
 
 export { useTableColsWithAddons as default };

package/esm/exported-related/EditableCell.js

@@ -1,4 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useLayoutEffect, useCallback } from 'react';
 import { StyledEditableContainer, StyledPencilIcon } from '../styled.js';
 import DataTableContext from '../DataTableContext.js';
@@ -10,7 +11,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -32,27 +34,40 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = 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 = 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__*/jsxs(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,
-    children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {})))]
+    role: "cell",
+    "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, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };
 

package/esm/exported-related/FilterPopover.js

@@ -1,29 +1,34 @@
+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/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useMemo, useState, useRef, useCallback } from 'react';
-import { usePopper } from 'react-popper';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState } from 'react';
 import DSButton from '@elliemae/ds-button';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
 import styled from 'styled-components';
-import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
 import '../redux/reducers/index.js';
 import { DATA_TESTID } from '../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
 import '../styled.js';
 import { jsx } from 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import '../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '../DataTableContext.js';
 import '../parts/Row.js';
 import '../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../parts/HoC/SortableItemContext.js';
 import { useDispatchHeadersActions } from '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
@@ -36,18 +41,24 @@ const FilterButton = /*#__PURE__*/styled.span.withConfig({
 const Button = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
-const FilterPopover = ({
-  column,
-  columnId,
-  triggerIcon,
-  menuContent,
-  onTriggerClick,
-  onClickOutsideMenu,
-  removeWrapperStyles,
-  reduxHeader,
-  innerRef,
-  ariaLabel
-}) => {
+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;
+
+  let {
+    column,
+    columnId,
+    triggerIcon,
+    menuContent,
+    onTriggerClick = () => null,
+    onClickOutsideMenu = () => null,
+    reduxHeader,
+    innerRef,
+    ariaLabel,
+    customStyles
+  } = _ref2;
   const {
     hideFilterButton,
     hideFilterMenu
@@ -55,6 +66,7 @@ const FilterPopover = ({
     hideFilterButton: true,
     hideFilterMenu: true
   };
+  const popperRef = useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -73,50 +85,7 @@ const FilterPopover = ({
     e.stopPropagation();
   };
 
-  const wrapperStyles = useMemo(() => {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
   const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null); // We need this ref to correctly call useOnClickOutside
-
-  const ref = useRef(null);
-  const updatedReferenceElement = useCallback(newRef => {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  const {
-    styles,
-    attributes
-  } = usePopper(referenceElement, popperElement, {
-    placement: 'bottom-end',
-    modifiers: [{
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [3, 4]
-      }
-    }, {
-      name: 'preventOverflow',
-      options: {
-        mainAxis: true,
-        altAxis: true
-      }
-    }]
-  });
-
-  const handleClose = e => {
-    if (referenceElement && !referenceElement.contains(e.target)) {
-      handleClickOutsideMenu(e);
-    }
-  };
-
-  useOnClickOutside(ref, handleClose);
   return /*#__PURE__*/_jsx("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
@@ -139,6 +108,11 @@ const FilterPopover = ({
     },
     style: {
       display: 'flex'
+    },
+    onBlur: e => {
+      if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
+        referenceElement.focus();
+      }
     }
   }, void 0, /*#__PURE__*/_jsx(FilterButton, {
     hide: !isIconVisible,
@@ -156,18 +130,38 @@ const FilterPopover = ({
       innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    ref: updatedReferenceElement,
-    style: _objectSpread(_objectSpread({}, styles.popper), wrapperStyles)
-  }, attributes.popper), {}, {
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
     "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
-    children: isMenuOpen && menuContent
+    startPlacementPreference: "bottom-end",
+    customOffset: [5, 4],
+    withoutArrow: true,
+    zIndex: 10,
+    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(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
   })));
 };
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: () => null,
-  onTriggerClick: () => null,
-  removeWrapperStyles: false
-};
 
 export { FilterPopover };

package/esm/exported-related/FilterTypes.js

@@ -1,10 +1,11 @@
 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'
 };
 
 export { FILTER_TYPES };

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

@@ -1,19 +1,24 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { 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';
 import { numberRangeFilterFn } from './numberRangeFilterFn.js';
+import { currencyRangeFilterFn } from './currencyRangeFilterFn.js';
 import { FILTER_TYPES } from '../FilterTypes.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 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.NUMBER_RANGE]: numberRangeFilterFn
+  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,
+  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,
+  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn
 };
 const applyOutOfTheBoxFilters = (data, filters) => {
   let filteredData = data;

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

@@ -0,0 +1,20 @@
+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';
+
+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);
+};
+
+export { currencyRangeFilterFn };