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

package/esm/addons/Filters/Components/SelectFilter/utils.js

@@ -1,39 +1,46 @@
 import { DATA_TESTID } from '../../../../configs/constants.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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react';
 import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@babel/runtime/helpers/esm/jsx';
 import '@elliemae/ds-icons';
 import 'styled-components';
 import '../../../../styled.js';
 import '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 '@elliemae/ds-button';
 import '../../../../DataTableContext.js';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 
 const focusNextMenuItem = (e, index) => {
   var _menuItems$item;
 
   e.preventDefault();
-  const menuItems = document.querySelectorAll(`[data-testid="${DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM}"]`);
+  const menuItems = document.querySelectorAll("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM, "\"]"));
   (_menuItems$item = menuItems.item(index + 1)) === null || _menuItems$item === void 0 ? void 0 : _menuItems$item.focus();
 };
 const focusPrevMenuItem = (e, index) => {
   var _menuItems$item2;
 
   e.preventDefault();
-  const menuItems = document.querySelectorAll(`[data-testid="${DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM}"]`);
+  const menuItems = document.querySelectorAll("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM, "\"]"));
   (_menuItems$item2 = menuItems.item(index - 1)) === null || _menuItems$item2 === void 0 ? void 0 : _menuItems$item2.focus();
 };
 

package/esm/addons/Filters/Components/SingleDateFilter/index.js

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback } from 'react';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
+import { DatePicker2 } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import { FilterPopover } from '../../../../exported-related/FilterPopover.js';
@@ -9,28 +10,35 @@ import '../../../../DataTableContext.js';
 import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities';
 import { DATA_TESTID } from '../../../../configs/constants.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.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-form';
 import '../../../../parts/TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 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';
 
-var _DatePickerIcon;
+var _DatePicker;
 const SingleDateFilter = props => {
   const {
     column,
@@ -76,7 +84,7 @@ const SingleDateFilter = props => {
       onDateChange: setDate,
       type: "date-picker-controller-only"
     }))),
-    triggerIcon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
+    triggerIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
     innerRef: innerRef,
     ariaLabel: "Open Single Date Filter"
   });

package/esm/addons/Filters/Components/index.js

@@ -1,6 +1,7 @@
 export { DateRangeFilter } from './DateRangeFilter/index.js';
+export { DateSwitcherFilter } from './DateSwitcherFilter/index.js';
 export { NumberRangeFilter } from './NumberRangeFilter/index.js';
+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

@@ -1,6 +1,7 @@
 export { DateRangeFilter } from './Components/DateRangeFilter/index.js';
+export { DateSwitcherFilter } from './Components/DateSwitcherFilter/index.js';
 export { NumberRangeFilter } from './Components/NumberRangeFilter/index.js';
+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/addons/Pagination/Pagination.js

@@ -1,46 +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';
-import 'styled-components';
-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
@@ -50,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',

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,34 +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,
-    "aria-describedby": isEditing ? undefined : cell.id,
+    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": "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/esm/exported-related/FilterPopover.js

@@ -1,46 +1,64 @@
+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 { useState } from 'react';
+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 '../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 '@babel/runtime/helpers/esm/defineProperty';
+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 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import { jsx } from 'react/jsx-runtime';
+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';
 
+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 FilterButton = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], props => props.hide ? 'opacity: 0; display: none; width: 0;' : '');
 const Button = /*#__PURE__*/styled(DSButton).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.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
@@ -48,6 +66,7 @@ const FilterPopover = ({
     hideFilterButton: true,
     hideFilterMenu: true
   };
+  const popperRef = useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -89,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,
@@ -114,17 +138,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("div", {
-    style: {
-      backgroundColor: '#fff'
-    }
-  }, void 0, menuContent)));
+  }, 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
+  })));
 };
 
 export { FilterPopover };