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

package/cjs/configs/index.js

@@ -12,9 +12,7 @@ var zIndexInternalConfig = require('./zIndexInternalConfig.js');
 
 Object.defineProperty(exports, 'ColsLayoutStyle', {
 	enumerable: true,
-	get: function () {
-		return constants.ColsLayoutStyle;
-	}
+	get: function () { return constants.ColsLayoutStyle; }
 });
 exports.DATA_TESTID = constants.DATA_TESTID;
 exports.momentFormat = constants.momentFormat;

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');
@@ -14,39 +22,46 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 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; }
+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,11 +19,12 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const [isEditing, setIsEditing] = React.useState(false);
   const [lastIsEditing, setLastIsEditing] = React.useState(false); // When an editable cell is switched on-off, we recalculate the height of the rows
 
@@ -40,27 +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,
-    children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx__default['default'](styled.StyledPencilIcon, {})))]
+    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": "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

@@ -4,30 +4,35 @@ 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 reactPopper = require('react-popper');
 var DSButton = require('@elliemae/ds-button');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 var styled = require('styled-components');
-var hooks = require('@elliemae/ds-utilities/hooks');
 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('@elliemae/ds-icons/ArrowShortReturn');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../styled.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+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');
 
@@ -40,25 +45,31 @@ 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({
+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({
+const Button = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).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__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
@@ -66,6 +77,7 @@ const FilterPopover = ({
     hideFilterButton: true,
     hideFilterMenu: true
   };
+  const popperRef = React.useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -84,51 +96,8 @@ const FilterPopover = ({
     e.stopPropagation();
   };
 
-  const wrapperStyles = React.useMemo(() => {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
   const [referenceElement, setReferenceElement] = React.useState(null);
-  const [popperElement, setPopperElement] = React.useState(null); // We need this ref to correctly call useOnClickOutside
-
-  const ref = React.useRef(null);
-  const updatedReferenceElement = React.useCallback(newRef => {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  const {
-    styles,
-    attributes
-  } = reactPopper.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);
-    }
-  };
-
-  hooks.useOnClickOutside(ref, handleClose);
-  return /*#__PURE__*/_jsx__default['default']("div", {
+  return /*#__PURE__*/_jsx__default["default"]("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
     onKeyDown: e => {
@@ -150,11 +119,16 @@ 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, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](FilterButton, {
     hide: !isIconVisible,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Button, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Button, {
     onClick: handleTriggerClick,
     buttonType: "text",
     "aria-label": ariaLabel,
@@ -167,18 +141,38 @@ const FilterPopover = ({
       innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-    ref: updatedReferenceElement,
-    style: _objectSpread(_objectSpread({}, styles.popper), wrapperStyles)
-  }, attributes.popper), {}, {
+  })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
     "data-testid": constants.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__*/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
   })));
 };
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: () => null,
-  onTriggerClick: () => null,
-  removeWrapperStyles: false
-};
 
 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;

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

@@ -2,30 +2,36 @@
 
 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');
 var moment = require('moment');
 var constants = require('../../configs/constants.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');
 require('react');
 require('react-virtual');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 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('@babel/runtime/helpers/jsx');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('styled-components');
 require('@elliemae/ds-icons');
+require('styled-components');
 require('../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+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('@elliemae/ds-button');
 require('../../DataTableContext.js');
 require('../../parts/Row.js');
 require('../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../../parts/HoC/SortableItemContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,6 +40,6 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
 // use file instead of index to avoid circular imports!
 
-const dateRangeFilterFn = (unfilteredData, filterKey, filterValue) => unfilteredData.filter(datum => !(filterValue !== null && filterValue !== void 0 && filterValue.startDate && filterValue !== null && filterValue !== void 0 && filterValue.endDate) || moment__default['default'](filterValue === null || filterValue === void 0 ? void 0 : filterValue.startDate, constants.momentFormat).isSameOrBefore(datum[filterKey], 'day') && moment__default['default'](filterValue === null || filterValue === void 0 ? void 0 : filterValue.endDate, constants.momentFormat).isSameOrAfter(datum[filterKey], 'day'));
+const dateRangeFilterFn = (unfilteredData, filterKey, filterValue) => unfilteredData.filter(datum => !(filterValue !== null && filterValue !== void 0 && filterValue.startDate && filterValue !== null && filterValue !== void 0 && filterValue.endDate) || moment__default["default"](filterValue === null || filterValue === void 0 ? void 0 : filterValue.startDate, constants.momentFormat).isSameOrBefore(datum[filterKey], 'day') && moment__default["default"](filterValue === null || filterValue === void 0 ? void 0 : filterValue.endDate, constants.momentFormat).isSameOrAfter(datum[filterKey], 'day'));
 
 exports.dateRangeFilterFn = dateRangeFilterFn;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dateRangeFilterFn = require('./dateRangeFilterFn.js');
+var singleDateFilterFn = require('./singleDateFilterFn.js');
+
+// use file instead of index to avoid circular imports!
+
+const dateSwitcherFilterFn = (unfilteredData, filterKey, filterValue) => filterValue.isDateRange ? dateRangeFilterFn.dateRangeFilterFn(unfilteredData, filterKey, filterValue) : singleDateFilterFn.singleDateFilterFn(unfilteredData, filterKey, filterValue.startDate);
+
+exports.dateSwitcherFilterFn = dateSwitcherFilterFn;