@elliemae/ds-data-table 1.56.1 → 1.57.0-rc.11

package/cjs/{styled-26b1eef5.js → styled-5a8d1da0.js}

@@ -2,20 +2,18 @@
 
 var styled = require('styled-components');
 var Grid = require('@elliemae/ds-grid');
-var EditPencil = require('@elliemae/ds-icons/EditPencil');
+var dsIcons = require('@elliemae/ds-icons');
 var helpers_sizeToCss = require('./helpers/sizeToCss.js');
 var configs_constants = require('./configs/constants.js');
 var helpers_cellPadding = require('./helpers/cellPadding.js');
 var React = require('react');
 var configs_fixedSizes = require('./configs/fixedSizes.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var reactVirtual = require('react-virtual');
+require('react-virtual');
 require('./configs/useRowFlattenization.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var dsIcons = require('@elliemae/ds-icons');
-var DSCheckbox = require('@elliemae/ds-form/Checkbox');
-var DSRadio = require('@elliemae/ds-form/Radio');
+var dsForm = require('@elliemae/ds-form');
 var _extends = require('@babel/runtime/helpers/extends');
 var reactRedux = require('react-redux');
 var DataTableContext = require('./DataTableContext.js');
@@ -31,9 +29,7 @@ var parts_HoC_withDnDSortableRowContext = require('./parts/HoC/withDnDSortableRo
 var dsPopperjs = require('@elliemae/ds-popperjs');
 require('./redux/reducers/index.js');
 var parts_Footer = require('./parts/Footer.js');
-var GripperVertical = require('@elliemae/ds-icons/GripperVertical');
-require('@elliemae/ds-icons/MoreOptionsVert');
-require('@elliemae/ds-utilities/hooks');
+require('@elliemae/ds-utilities');
 require('uid');
 var exportedRelated_RowVariants = require('./exported-related/RowVariants.js');
 var exportedRelated_Filters_singleSelectFilterFn = require('./exported-related/Filters/singleSelectFilterFn.js');
@@ -46,7 +42,6 @@ require('./addons/Columns/ColumnAction/ColumnAction.js');
 var hooks_useRecoverFocusRow = require('./hooks/useRecoverFocusRow.js');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var propTypes = require('./prop-types.js');
-var ComboBoxFreeSolo = require('@elliemae/ds-form/ComboBoxFreeSolo');
 var parts_Cells_useCellStyle = require('./parts/Cells/useCellStyle.js');
 var redux_reducers_rowsReducers_useDispatchRowsActions = require('./redux/reducers/rowsReducers/useDispatchRowsActions.js');
 var exportedRelated_RowRenderer_useRowRendererProperties = require('./exported-related/RowRenderer/useRowRendererProperties.js');
@@ -60,13 +55,10 @@ var parts_HoC_DragOverlayContext = require('./parts/HoC/DragOverlayContext.js');
 var helpers_dndkit_hierarchy_useHierarchyActionHandlers = require('./helpers/dndkit/hierarchy/useHierarchyActionHandlers.js');
 var helpers_dndkit_hierarchy_useHierarchyAnnouncements = require('./helpers/dndkit/hierarchy/useHierarchyAnnouncements.js');
 var parts_SortByCaret = require('./parts/SortByCaret.js');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
 var redux_reducers_headersReducers_useDispatchHeadersActions = require('./redux/reducers/headersReducers/useDispatchHeadersActions.js');
-var DSTextBox = require('@elliemae/ds-form/TextBox');
-var SearchIcon = require('@elliemae/ds-icons/SearchXsmall');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var addons_Filters_Components_SelectFilter_components = require('./addons/Filters/Components/SelectFilter/components.js');
+var _ = require('@elliemae/ds-grid/');
+var ComboBox = require('@elliemae/ds-form/ComboBox');
 var helpers_columnsToGrid = require('./helpers/columnsToGrid.js');
 var parts_Headers_useHeaderCellHandlers = require('./parts/Headers/useHeaderCellHandlers.js');
 var parts_Headers_useHeaderCellConfig = require('./parts/Headers/useHeaderCellConfig.js');
@@ -81,28 +73,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var EditPencil__default = /*#__PURE__*/_interopDefaultLegacy(EditPencil);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
-var DSRadio__default = /*#__PURE__*/_interopDefaultLegacy(DSRadio);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var GripperVertical__default = /*#__PURE__*/_interopDefaultLegacy(GripperVertical);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var ComboBoxFreeSolo__default = /*#__PURE__*/_interopDefaultLegacy(ComboBoxFreeSolo);
 var DSIndeterminateProgressIndicator__default = /*#__PURE__*/_interopDefaultLegacy(DSIndeterminateProgressIndicator);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
-var DSTextBox__default = /*#__PURE__*/_interopDefaultLegacy(DSTextBox);
-var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-function ownKeys$a(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 ownKeys$b(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(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$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(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$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var StyledSpan = /*#__PURE__*/styled__default['default'].span.withConfig({
   componentId: "sc-1xp824d-0"
 })(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
@@ -128,7 +111,7 @@ var expandRowColumn = {
       return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
     }, [allExpandable, expandedRows]);
     var onExpandedAllHandler = React.useCallback(function () {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$a({}, allExpandable), 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$b({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     var GlobalExpandIcon = React.useMemo(function () {
       if (isAllRowsExpanded) return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowheadDown, {
@@ -198,7 +181,7 @@ var expandRowColumn = {
         expandedRows[uniqueId] = true;
       }
 
-      onRowExpand(_objectSpread$a({}, expandedRows), uniqueId);
+      onRowExpand(_objectSpread$b({}, expandedRows), uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     var isDragging = draggableProps ? draggableProps.isDragging : false;
     var isDragOverlay = dragAndDropRows && !draggableProps;
@@ -276,9 +259,9 @@ var expandRowColumn = {
   disableDnD: true
 };
 
-function ownKeys$9(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 ownKeys$a(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(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$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(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$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var multiSelectColumn = {
   // Build our multiSelecter column
   id: 'multiSelecter',
@@ -318,7 +301,7 @@ var multiSelectColumn = {
       onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
     var PureHeaderCheckbox = React.useMemo(function () {
-      return /*#__PURE__*/React__default['default'].createElement(DSCheckbox__default['default'], {
+      return /*#__PURE__*/React__default['default'].createElement(dsForm.DSCheckbox, {
         "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
         title: "Toggle All Rows Selected",
         checked: currentGlobalState,
@@ -343,7 +326,7 @@ var multiSelectColumn = {
     var uid = row.uid;
     var selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
     var PureCheckboxCell = React.useMemo(function () {
-      return /*#__PURE__*/React__default['default'].createElement(DSCheckbox__default['default'], {
+      return /*#__PURE__*/React__default['default'].createElement(dsForm.DSCheckbox, {
         "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_CHECKBOX,
         title: "Toggle Row Selected",
         "aria-checked": selectedState,
@@ -352,7 +335,7 @@ var multiSelectColumn = {
         onChange: function onChange(e) {
           var newState = !selectedState;
 
-          var newSelection = _objectSpread$9(_objectSpread$9({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
+          var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
 
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
@@ -380,7 +363,7 @@ var multiSelectColumn = {
 var CenteredContent = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-1u47u8g-0"
 })(["display:flex;height:100%;width:100%;justify-content:center;align-items:center;"]);
-var StyledDSRadio = /*#__PURE__*/styled__default['default'](DSRadio__default['default']).withConfig({
+var StyledDSRadio = /*#__PURE__*/styled__default['default'](dsForm.DSRadio).withConfig({
   componentId: "sc-1u47u8g-1"
 })(["padding-bottom:0;cursor:pointer;"]);
 var singleSelectColumn = {
@@ -541,6 +524,9 @@ var RowLoading = function RowLoading() {
   return PureLoading;
 };
 
+function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(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$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var FilterButton = /*#__PURE__*/styled__default['default'].span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], function (props) {
@@ -566,7 +552,8 @@ var FilterPopover = function FilterPopover(_ref2) {
   } : _ref2$onClickOutsideM,
       reduxHeader = _ref2.reduxHeader,
       _innerRef = _ref2.innerRef,
-      ariaLabel = _ref2.ariaLabel;
+      ariaLabel = _ref2.ariaLabel,
+      customStyles = _ref2.customStyles;
 
   var _ref3 = reduxHeader || {
     hideFilterButton: true,
@@ -655,13 +642,15 @@ var FilterPopover = function FilterPopover(_ref2) {
     customOffset: [5, 4],
     withoutArrow: true,
     zIndex: 10,
-    extraPopperStyles: {
+    extraPopperStyles: _objectSpread$9(_objectSpread$9({}, 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']
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      backgroundColor: '#fff'
+      backgroundColor: '#fff',
+      maxHeight: '300px',
+      overflow: 'auto'
     },
     ref: popperRef
   }, menuContent)));
@@ -861,7 +850,7 @@ var ComboboxEditableCell = function ComboboxEditableCell(props) {
   }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
   return /*#__PURE__*/React__default['default'].createElement(EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/React__default['default'].createElement(ComboBoxFreeSolo__default['default'], {
+    EditableRenderer: /*#__PURE__*/React__default['default'].createElement(dsForm.ComboBoxFreeSolo, {
       value: value,
       autoFocus: true,
       onBlur: handleOnBlur,
@@ -2043,7 +2032,7 @@ var DateRangeFilter = function DateRangeFilter(props) {
       onToDateChange: setEndDate,
       type: "date-range-picker-controller-only"
     }))),
-    triggerIcon: /*#__PURE__*/React__default['default'].createElement(DatePickerIcon__default['default'], null),
+    triggerIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.DatePicker2, null),
     innerRef: innerRef,
     ariaLabel: "Open Date Range Filter"
   });
@@ -2098,221 +2087,129 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
       gutter: "xxs",
       padding: "xs",
       cols: ['50px', 'auto', '50px']
-    }, /*#__PURE__*/React__default['default'].createElement(DSTextBox__default['default'], {
+    }, /*#__PURE__*/React__default['default'].createElement(dsForm.DSTextBox, {
       value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
       onChange: handleFromChange,
       type: "number"
     }), /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
       justifyItems: "center",
       alignItems: "center"
-    }, "\u2014"), /*#__PURE__*/React__default['default'].createElement(DSTextBox__default['default'], {
+    }, "\u2014"), /*#__PURE__*/React__default['default'].createElement(dsForm.DSTextBox, {
       value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
       onChange: handleToChange,
       type: "number"
     })),
-    triggerIcon: /*#__PURE__*/React__default['default'].createElement(SearchIcon__default['default'], null),
+    triggerIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.Search, null),
     innerRef: innerRef,
     ariaLabel: "Open Number Range Filter"
   });
 };
 
-var focusNextMenuItem = function focusNextMenuItem(e, index) {
-  var _menuItems$item;
-
-  e.preventDefault();
-  var menuItems = document.querySelectorAll("[data-testid=\"".concat(configs_constants.DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM, "\"]"));
-  (_menuItems$item = menuItems.item(index + 1)) === null || _menuItems$item === void 0 ? void 0 : _menuItems$item.focus();
-};
-var focusPrevMenuItem = function focusPrevMenuItem(e, index) {
-  var _menuItems$item2;
-
-  e.preventDefault();
-  var menuItems = document.querySelectorAll("[data-testid=\"".concat(configs_constants.DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM, "\"]"));
-  (_menuItems$item2 = menuItems.item(index - 1)) === null || _menuItems$item2 === void 0 ? void 0 : _menuItems$item2.focus();
-};
-
-var useSelectFilterHandlers = function useSelectFilterHandlers(_ref) {
-  var id = _ref.column.id,
-      type = _ref.type,
-      isSingle = _ref.isSingle,
-      isMulti = _ref.isMulti,
-      selectedItems = _ref.selectedItems,
-      onValueChange = _ref.onValueChange,
-      patchHeaderFilterButtonAndMenu = _ref.patchHeaderFilterButtonAndMenu,
-      patchHeader = _ref.patchHeader;
-  var handleSelectItem = React.useCallback(function (option) {
-    if (isSingle) {
-      onValueChange(type, option);
-    } else if (isMulti) {
-      var nextSelectedItems = [];
-
-      if (selectedItems.includes(option)) {
-        nextSelectedItems = selectedItems.filter(function (opt) {
-          return opt !== option;
-        });
-      } else {
-        nextSelectedItems = [].concat(_toConsumableArray__default['default'](selectedItems), [option]);
-      }
-
-      onValueChange(type, nextSelectedItems);
-    }
-  }, [isSingle, isMulti, onValueChange, type, selectedItems]);
-  var onInputWrapperKeyDown = React.useCallback(function (e) {
-    if (e.code === 'ArrowDown') focusNextMenuItem(e, -1);
-  }, []);
-  var onMenuItemClick = React.useCallback(function (option) {
-    return function () {
-      handleSelectItem(option);
-      if (isSingle) patchHeaderFilterButtonAndMenu(id, true);
-    };
-  }, [handleSelectItem, id, isSingle, patchHeaderFilterButtonAndMenu]);
-  var onMenuItemKeyDown = React.useCallback(function (option, index, virtualIndex, inputRef, innerRef) {
-    return function (e) {
-      if (e.code === 'ArrowUp') {
-        if (index === 0) inputRef.current.focus();else focusPrevMenuItem(e, virtualIndex);
-      }
-
-      if (e.code === 'ArrowDown') focusNextMenuItem(e, virtualIndex);
-
-      if (e.code === 'Space') {
-        e.preventDefault();
-        handleSelectItem(option);
-
-        if (isSingle) {
-          patchHeader(id, {
-            hideFilterMenu: true,
-            hideFilterButton: false
-          });
-          setTimeout(function () {
-            return innerRef.current.focus();
-          });
-        }
-      }
-
-      if (e.code === 'Enter') {
-        patchHeader(id, {
-          hideFilterMenu: true,
-          hideFilterButton: false
-        });
-        setTimeout(function () {
-          return innerRef.current.focus();
-        });
-      }
-    };
-  }, [handleSelectItem, id, isSingle, patchHeader]);
-  return {
-    onInputWrapperKeyDown: onInputWrapperKeyDown,
-    onMenuItemClick: onMenuItemClick,
-    onMenuItemKeyDown: onMenuItemKeyDown
-  };
-};
-
-var _excluded = ["isMulti", "selectedItems", "column", "column", "ctx", "reduxHeader", "innerRef"];
 var BaseSelectFilter = function BaseSelectFilter(props) {
+  var _column$ref$current$o, _column$ref, _column$ref$current;
+
   var _props$isMulti = props.isMulti,
       isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-      _props$selectedItems = props.selectedItems,
-      selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
+      selectedItems = props.selectedItems,
       column = props.column,
+      type = props.type,
       _props$column = props.column,
       id = _props$column.id,
       userFilterOptions = _props$column.filterOptions,
       data = props.ctx.tableProps.data,
       reduxHeader = props.reduxHeader,
       innerRef = props.innerRef,
-      rest = _objectWithoutProperties__default['default'](props, _excluded);
-
+      onValueChange = props.onValueChange;
   var filterOptions = React.useMemo(function () {
     // If the user didn't provide options, use the available ones
-    if (!userFilterOptions) return _toConsumableArray__default['default'](new Set(data.map(function (datum) {
-      return datum[id].toString();
-    }))); // If user provided the array itself, use it
+    if (!userFilterOptions) {
+      var automaticFilters = _toConsumableArray__default['default'](new Set(data.map(function (datum) {
+        return datum[id].toString();
+      }))).map(function (item) {
+        return {
+          type: 'option',
+          dsId: item,
+          value: item,
+          label: item
+        };
+      });
+
+      return automaticFilters;
+    } // If user provided the array itself, use it
+
 
     if (Array.isArray(userFilterOptions)) return userFilterOptions; // Otherwise, it is a function
 
     return userFilterOptions();
   }, [data, id, userFilterOptions]);
-  var inputRef = React.useRef(null);
 
-  var _useState = React.useState(''),
+  var handleOnChange = function handleOnChange(value) {
+    if (isMulti) {
+      var multiSelectedItem = selectedItems;
+      var isFound = multiSelectedItem.find(function (item) {
+        return item.dsId === value.dsId;
+      });
+
+      if (isFound) {
+        onValueChange(type, multiSelectedItem.filter(function (item) {
+          return item.dsId !== value.dsId;
+        }));
+      } else {
+        onValueChange(type, [].concat(_toConsumableArray__default['default'](multiSelectedItem), [value]));
+      }
+    } else {
+      var singleSelectedItem = selectedItems;
+      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
+    }
+  };
+
+  var _useState = React.useState(filterOptions),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
+      filters = _useState2[0],
+      setFilteredOptions = _useState2[1];
 
-  var _useState3 = React.useState(filterOptions),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      filteredOptions = _useState4[0],
-      setFilteredOptions = _useState4[1];
-
-  var virtualListRef = React.useRef();
-  var virtualListHelpers = reactVirtual.useVirtual({
-    size: filteredOptions.length,
-    parentRef: virtualListRef,
-    overscan: 15
-  });
-  var virtualItems = virtualListHelpers.virtualItems,
-      totalSize = virtualListHelpers.totalSize;
-  var handleInputChange = React.useCallback(function (e) {
-    return setInputValue(e.target.value);
-  }, [setInputValue]);
   React.useEffect(function () {
-    var filtered = filterOptions.filter(function (opt) {
-      return opt.toLowerCase().includes(inputValue.toLowerCase());
+    setFilteredOptions(filterOptions);
+  }, [filterOptions]);
+  var filteredOptions = React.useCallback(function (filter) {
+    return filterOptions.filter(function (option) {
+      return option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase());
     });
-    setFilteredOptions(filtered);
-  }, [inputValue, filterOptions]);
-
-  var _useSelectFilterHandl = useSelectFilterHandlers(props),
-      onInputWrapperKeyDown = _useSelectFilterHandl.onInputWrapperKeyDown,
-      onMenuItemClick = _useSelectFilterHandl.onMenuItemClick,
-      onMenuItemKeyDown = _useSelectFilterHandl.onMenuItemKeyDown;
-
-  var Select = /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.Wrapper, {
-    "data-testid": rest['data-testid']
-  }, /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.InputWrapper, null, /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.Input, {
-    value: inputValue,
-    onChange: handleInputChange,
-    autoFocus: true,
-    onKeyDown: onInputWrapperKeyDown,
-    ref: inputRef
-  })), /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.VirtualListWrapper, {
-    ref: virtualListRef
-  }, /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.MenuList, {
+  }, [filterOptions]);
+  var handleOnFilter = React.useCallback(function (newFilter) {
+    setFilteredOptions(filteredOptions(newFilter));
+  }, [filteredOptions]);
+  var Select = /*#__PURE__*/React__default['default'].createElement(_.Grid, {
+    "data-testid": isMulti ? configs_constants.DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : configs_constants.DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
     style: {
-      height: "".concat(totalSize, "px")
+      background: '#fff',
+      position: 'relative'
     }
-  }, virtualItems.map(function (virtualItem, virtualIndex) {
-    var index = virtualItem.index,
-        measureRef = virtualItem.measureRef,
-        start = virtualItem.start;
-    var option = filteredOptions[index];
-    return /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.MenuItem, {
-      onClick: onMenuItemClick(option),
-      style: {
-        top: "".concat(start, "px"),
-        outline: 'none'
-      },
-      ref: measureRef,
-      tabIndex: -1,
-      key: option,
-      "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM,
-      onKeyDown: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef)
-    }, isMulti && /*#__PURE__*/React__default['default'].createElement(DSCheckbox__default['default'], {
-      style: {
-        marginRight: '10px'
-      },
-      checked: selectedItems.includes(option),
-      onChange: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef)
-    }), option);
-  }))));
+  }, /*#__PURE__*/React__default['default'].createElement(ComboBox.DSComboBox, {
+    inline: true,
+    autoFocus: true,
+    options: filters,
+    onChange: handleOnChange,
+    selectedValues: selectedItems,
+    onFilter: handleOnFilter
+  }));
+
+  var handleOnClickOutside = function handleOnClickOutside() {
+    setFilteredOptions(filteredOptions(''));
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: Select,
-    triggerIcon: /*#__PURE__*/React__default['default'].createElement(SearchIcon__default['default'], null),
+    triggerIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.SearchXsmall, null),
     innerRef: innerRef,
-    ariaLabel: "Open Selection Filter"
+    ariaLabel: "Open Selection Filter",
+    onClickOutsideMenu: handleOnClickOutside,
+    customStyles: {
+      width: (_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'
+    }
   });
 };
 
@@ -2323,6 +2220,7 @@ var SingleSelectFilter = function SingleSelectFilter(_ref) {
       patchHeaderFilterButtonAndMenu = _ref.patchHeaderFilterButtonAndMenu,
       patchHeader = _ref.patchHeader,
       onValueChange = _ref.onValueChange,
+      filterValue = _ref.filterValue,
       reduxHeader = _ref.reduxHeader,
       innerRef = _ref.innerRef;
   return /*#__PURE__*/React__default['default'].createElement(BaseSelectFilter, {
@@ -2331,6 +2229,7 @@ var SingleSelectFilter = function SingleSelectFilter(_ref) {
     isSingle: true,
     column: column,
     ctx: ctx,
+    selectedItems: filterValue,
     type: exportedRelated_FilterTypes.FILTER_TYPES.SELECT,
     onValueChange: onValueChange,
     patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
@@ -2412,7 +2311,7 @@ var SingleDateFilter = function SingleDateFilter(props) {
       onDateChange: setDate,
       type: "date-picker-controller-only"
     }))),
-    triggerIcon: /*#__PURE__*/React__default['default'].createElement(DatePickerIcon__default['default'], null),
+    triggerIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.DatePicker2, null),
     innerRef: innerRef,
     ariaLabel: "Open Single Date Filter"
   });
@@ -2449,7 +2348,7 @@ var TextInputFilter = function TextInputFilter(props) {
       placeholder: "Search ".concat(count, " records..."),
       autoFocus: true
     }),
-    triggerIcon: /*#__PURE__*/React__default['default'].createElement(SearchIcon__default['default'], null),
+    triggerIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.SearchXsmall, null),
     removeWrapperStyles: true,
     innerRef: innerRef,
     ariaLabel: "Open Text Input Filter"
@@ -3115,7 +3014,7 @@ var DragHandle = function DragHandle(_ref2) {
     "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
     id: "".concat(id, "-drag-handle"),
     key: "".concat(id, "-drag-handle")
-  }), /*#__PURE__*/React__default['default'].createElement(GripperVertical__default['default'], {
+  }), /*#__PURE__*/React__default['default'].createElement(dsIcons.GripperVertical, {
     size: "s",
     color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']
   }));
@@ -3288,7 +3187,7 @@ var StyledCell = /*#__PURE__*/styled__default['default'].div.withConfig({
 var StyledCellContent = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-38sgfo-12"
 })(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
-var StyledPencilIcon = /*#__PURE__*/styled__default['default'](EditPencil__default['default']).withConfig({
+var StyledPencilIcon = /*#__PURE__*/styled__default['default'](dsIcons.EditPencil).withConfig({
   componentId: "sc-38sgfo-13"
 })([""]);
 var StyledEditableContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
@@ -3436,8 +3335,6 @@ exports.customCollisionDetection = customCollisionDetection;
 exports.dateRangeFilterFn = dateRangeFilterFn;
 exports.dragHandleColumn = dragHandleColumn;
 exports.expandRowColumn = expandRowColumn;
-exports.focusNextMenuItem = focusNextMenuItem;
-exports.focusPrevMenuItem = focusPrevMenuItem;
 exports.getHierarchyKeyboardCoordinates = getHierarchyKeyboardCoordinates;
 exports.multiSelectColumn = multiSelectColumn;
 exports.outOfTheBoxEditables = outOfTheBoxEditables;
@@ -3446,7 +3343,6 @@ exports.singleSelectColumn = singleSelectColumn;
 exports.useHierarchyDndkitConfig = useHierarchyDndkitConfig;
 exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;
 exports.useRowRendererHandlers = useRowRendererHandlers;
-exports.useSelectFilterHandlers = useSelectFilterHandlers;
 exports.withConditionalDnDColumnContext = withConditionalDnDColumnContext;
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;
-//# sourceMappingURL=styled-26b1eef5.js.map
+//# sourceMappingURL=styled-5a8d1da0.js.map