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

package/esm/{styled-2aa33852.js → styled-c95c391d.js}

@@ -1,19 +1,17 @@
 import styled from 'styled-components';
-import Grid, { Grid as Grid$1 } from '@elliemae/ds-grid';
-import EditPencil from '@elliemae/ds-icons/EditPencil';
+import Grid, { Grid as Grid$2 } from '@elliemae/ds-grid';
+import { ArrowheadDown, ArrowheadRight, ArrowShortReturn, DatePicker2, Search, SearchXsmall, GripperVertical, EditPencil } from '@elliemae/ds-icons';
 import { sizeToCss } from './helpers/sizeToCss.js';
 import { DATA_TESTID, momentFormat, ColsLayoutStyle } from './configs/constants.js';
 import { columnPadding, cellPadding } from './helpers/cellPadding.js';
 import React, { useMemo, useCallback, useContext, useEffect, useRef, useState, useLayoutEffect, memo, createContext, cloneElement } from 'react';
 import { FIXED_SIZES } from './configs/fixedSizes.js';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import { useVirtual } from 'react-virtual';
+import 'react-virtual';
 import './configs/useRowFlattenization.js';
 import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
-import DSRadio from '@elliemae/ds-form/Radio';
+import { DSCheckbox, DSRadio, ComboBoxFreeSolo, DSTextBox } from '@elliemae/ds-form';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { connect } from 'react-redux';
 import DataTableContext from './DataTableContext.js';
@@ -29,9 +27,7 @@ import { withDnDSortableRowContext } from './parts/HoC/withDnDSortableRowContext
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import './redux/reducers/index.js';
 import Footer from './parts/Footer.js';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 import 'uid';
 import { ROW_VARIANTS } from './exported-related/RowVariants.js';
 import { singleSelectFilterFn } from './exported-related/Filters/singleSelectFilterFn.js';
@@ -44,7 +40,6 @@ import './addons/Columns/ColumnAction/ColumnAction.js';
 import { useRecoverFocusRow } from './hooks/useRecoverFocusRow.js';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { editableCellPropType } from './prop-types.js';
-import ComboBoxFreeSolo from '@elliemae/ds-form/ComboBoxFreeSolo';
 import { useCellStyle } from './parts/Cells/useCellStyle.js';
 import { useDispatchRowsActions } from './redux/reducers/rowsReducers/useDispatchRowsActions.js';
 import { useRowRendererProperties } from './exported-related/RowRenderer/useRowRendererProperties.js';
@@ -58,13 +53,10 @@ import { DragOverlayContext } from './parts/HoC/DragOverlayContext.js';
 import { useHierarchyActionHandlers } from './helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
 import { useHierarchyAnnouncements } from './helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
 import { SortByCaret } from './parts/SortByCaret.js';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
 import { DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import { useDispatchHeadersActions } from './redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import DSTextBox from '@elliemae/ds-form/TextBox';
-import SearchIcon from '@elliemae/ds-icons/SearchXsmall';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { Wrapper, InputWrapper, Input, VirtualListWrapper, MenuList, MenuItem } from './addons/Filters/Components/SelectFilter/components.js';
+import { Grid as Grid$1 } from '@elliemae/ds-grid/';
+import { DSComboBox } from '@elliemae/ds-form/ComboBox';
 import { columnsToGrid } from './helpers/columnsToGrid.js';
 import { useHeaderCellHandlers } from './parts/Headers/useHeaderCellHandlers.js';
 import { useHeaderCellConfig } from './parts/Headers/useHeaderCellConfig.js';
@@ -75,9 +67,9 @@ import { EmptyChildrenGroup } from './parts/Headers/EmptyChildrenGroup.js';
 import Loader from './parts/Loader.js';
 import { ZIndexDataTable } from './configs/zIndexInternalConfig.js';
 
-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(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(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.span.withConfig({
   componentId: "sc-1xp824d-0"
 })(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
@@ -103,7 +95,7 @@ var expandRowColumn = {
       return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
     }, [allExpandable, expandedRows]);
     var onExpandedAllHandler = 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 = useMemo(function () {
       if (isAllRowsExpanded) return /*#__PURE__*/React.createElement(ArrowheadDown, {
@@ -173,7 +165,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;
@@ -251,9 +243,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(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(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',
@@ -327,7 +319,7 @@ var multiSelectColumn = {
         onChange: function onChange(e) {
           var newState = !selectedState;
 
-          var newSelection = _objectSpread$9(_objectSpread$9({}, selection), {}, _defineProperty({}, uid, newState)); // we only want true and mixed values
+          var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty({}, uid, newState)); // we only want true and mixed values
 
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
@@ -516,6 +508,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(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.span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], function (props) {
@@ -541,7 +536,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,
@@ -630,13 +626,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.createElement("div", {
     style: {
-      backgroundColor: '#fff'
+      backgroundColor: '#fff',
+      maxHeight: '300px',
+      overflow: 'auto'
     },
     ref: popperRef
   }, menuContent)));
@@ -2018,7 +2016,7 @@ var DateRangeFilter = function DateRangeFilter(props) {
       onToDateChange: setEndDate,
       type: "date-range-picker-controller-only"
     }))),
-    triggerIcon: /*#__PURE__*/React.createElement(DatePickerIcon, null),
+    triggerIcon: /*#__PURE__*/React.createElement(DatePicker2, null),
     innerRef: innerRef,
     ariaLabel: "Open Date Range Filter"
   });
@@ -2085,209 +2083,117 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
       onChange: handleToChange,
       type: "number"
     })),
-    triggerIcon: /*#__PURE__*/React.createElement(SearchIcon, null),
+    triggerIcon: /*#__PURE__*/React.createElement(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(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(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 = 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(selectedItems), [option]);
-      }
-
-      onValueChange(type, nextSelectedItems);
-    }
-  }, [isSingle, isMulti, onValueChange, type, selectedItems]);
-  var onInputWrapperKeyDown = useCallback(function (e) {
-    if (e.code === 'ArrowDown') focusNextMenuItem(e, -1);
-  }, []);
-  var onMenuItemClick = useCallback(function (option) {
-    return function () {
-      handleSelectItem(option);
-      if (isSingle) patchHeaderFilterButtonAndMenu(id, true);
-    };
-  }, [handleSelectItem, id, isSingle, patchHeaderFilterButtonAndMenu]);
-  var onMenuItemKeyDown = 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(props, _excluded);
-
+      onValueChange = props.onValueChange;
   var filterOptions = useMemo(function () {
     // If the user didn't provide options, use the available ones
-    if (!userFilterOptions) return _toConsumableArray(new Set(data.map(function (datum) {
-      return datum[id].toString();
-    }))); // If user provided the array itself, use it
+    if (!userFilterOptions) {
+      var automaticFilters = _toConsumableArray(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 = useRef(null);
 
-  var _useState = 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(multiSelectedItem), [value]));
+      }
+    } else {
+      var singleSelectedItem = selectedItems;
+      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
+    }
+  };
+
+  var _useState = useState(filterOptions),
       _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
+      filters = _useState2[0],
+      setFilteredOptions = _useState2[1];
 
-  var _useState3 = useState(filterOptions),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filteredOptions = _useState4[0],
-      setFilteredOptions = _useState4[1];
-
-  var virtualListRef = useRef();
-  var virtualListHelpers = useVirtual({
-    size: filteredOptions.length,
-    parentRef: virtualListRef,
-    overscan: 15
-  });
-  var virtualItems = virtualListHelpers.virtualItems,
-      totalSize = virtualListHelpers.totalSize;
-  var handleInputChange = useCallback(function (e) {
-    return setInputValue(e.target.value);
-  }, [setInputValue]);
   useEffect(function () {
-    var filtered = filterOptions.filter(function (opt) {
-      return opt.toLowerCase().includes(inputValue.toLowerCase());
+    setFilteredOptions(filterOptions);
+  }, [filterOptions]);
+  var filteredOptions = 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.createElement(Wrapper, {
-    "data-testid": rest['data-testid']
-  }, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
-    value: inputValue,
-    onChange: handleInputChange,
-    autoFocus: true,
-    onKeyDown: onInputWrapperKeyDown,
-    ref: inputRef
-  })), /*#__PURE__*/React.createElement(VirtualListWrapper, {
-    ref: virtualListRef
-  }, /*#__PURE__*/React.createElement(MenuList, {
+  }, [filterOptions]);
+  var handleOnFilter = useCallback(function (newFilter) {
+    setFilteredOptions(filteredOptions(newFilter));
+  }, [filteredOptions]);
+  var Select = /*#__PURE__*/React.createElement(Grid$1, {
+    "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : 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.createElement(MenuItem, {
-      onClick: onMenuItemClick(option),
-      style: {
-        top: "".concat(start, "px"),
-        outline: 'none'
-      },
-      ref: measureRef,
-      tabIndex: -1,
-      key: option,
-      "data-testid": DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM,
-      onKeyDown: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef)
-    }, isMulti && /*#__PURE__*/React.createElement(DSCheckbox, {
-      style: {
-        marginRight: '10px'
-      },
-      checked: selectedItems.includes(option),
-      onChange: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef)
-    }), option);
-  }))));
+  }, /*#__PURE__*/React.createElement(DSComboBox, {
+    inline: true,
+    autoFocus: true,
+    options: filters,
+    onChange: handleOnChange,
+    selectedValues: selectedItems,
+    onFilter: handleOnFilter
+  }));
+
+  var handleOnClickOutside = function handleOnClickOutside() {
+    setFilteredOptions(filteredOptions(''));
+  };
+
   return /*#__PURE__*/React.createElement(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: Select,
-    triggerIcon: /*#__PURE__*/React.createElement(SearchIcon, null),
+    triggerIcon: /*#__PURE__*/React.createElement(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'
+    }
   });
 };
 
@@ -2298,6 +2204,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.createElement(BaseSelectFilter, {
@@ -2306,6 +2213,7 @@ var SingleSelectFilter = function SingleSelectFilter(_ref) {
     isSingle: true,
     column: column,
     ctx: ctx,
+    selectedItems: filterValue,
     type: FILTER_TYPES.SELECT,
     onValueChange: onValueChange,
     patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
@@ -2387,7 +2295,7 @@ var SingleDateFilter = function SingleDateFilter(props) {
       onDateChange: setDate,
       type: "date-picker-controller-only"
     }))),
-    triggerIcon: /*#__PURE__*/React.createElement(DatePickerIcon, null),
+    triggerIcon: /*#__PURE__*/React.createElement(DatePicker2, null),
     innerRef: innerRef,
     ariaLabel: "Open Single Date Filter"
   });
@@ -2424,7 +2332,7 @@ var TextInputFilter = function TextInputFilter(props) {
       placeholder: "Search ".concat(count, " records..."),
       autoFocus: true
     }),
-    triggerIcon: /*#__PURE__*/React.createElement(SearchIcon, null),
+    triggerIcon: /*#__PURE__*/React.createElement(SearchXsmall, null),
     removeWrapperStyles: true,
     innerRef: innerRef,
     ariaLabel: "Open Text Input Filter"
@@ -2831,7 +2739,7 @@ var withDnDSortableColumnContext = function withDnDSortableColumnContext(Compone
 };
 
 /* eslint-disable complexity */
-var StyledWrapper = /*#__PURE__*/styled(Grid$1).withConfig({
+var StyledWrapper = /*#__PURE__*/styled(Grid$2).withConfig({
   componentId: "sc-1dqaj8a-0"
 })(["position:relative;width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";"], function (props) {
   return props.isDragOverlay ? 'fit-content' : '100%';
@@ -3350,5 +3258,5 @@ var PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-20"
 })(["display:flex;margin:5px 0;justify-content:flex-end;"]);
 
-export { StyledFocusWithin as $, customCollisionDetection as A, useHierarchyDndkitConfig as B, ComboboxEditableCell as C, DragHandle as D, EditableCell as E, FilterPopover as F, DnDGroupContext as G, withConditionalDnDColumnContext as H, focusNextMenuItem as I, focusPrevMenuItem as J, useSelectFilterHandlers as K, BaseSelectFilter as L, MultiSelectFilter as M, NumberRangeFilter as N, FilterMapItem as O, Pagination as P, HeaderResizer as Q, Row$1 as R, SingleSelectFilter as S, TableContent as T, HeaderCellTitle as U, HeaderCell as V, withDnDSortableColumnContext as W, HeaderCellGroup as X, Headers as Y, VirtualRowsList as Z, INTERNAL_COLUMNS as _, applyOutOfTheBoxFilters as a, StyledDataTableWrapper as a0, StyledTableWrapper as a1, StyledTableContentWrapper as a2, StyledVirtualListWrapper as a3, StyledHeadWrapper as a4, StyledHeadTr as a5, StyledHeadTh as a6, StyledHeaderRightIconsWrapper as a7, StyledResizer as a8, StyledActionCell as a9, StyledCell as aa, StyledCellContent as ab, StyledPencilIcon as ac, StyledEditableContainer as ad, StyledFullsizeGrid as ae, GroupHeaderContainer as af, GroupHeaderTitle as ag, StyledCellContainer as ah, PaginationContainer as ai, PaginationWrapper as aj, singleSelectColumn as b, dragHandleColumn as c, dateRangeFilterFn as d, expandRowColumn as e, DateRangeFilter as f, SingleDateFilter as g, TextInputFilter as h, PagesButtons as i, RowLoading as j, TextEditableCell as k, Cell as l, multiSelectColumn as m, Cells as n, outOfTheBoxEditables as o, DefaultRowContentRenderer as p, RowRenderer as q, RowVariantHeader as r, singleDateFilterFn as s, RowVariantPrimary as t, useRowRendererHandlers as u, RowVariantSecondary as v, RowVariantMapItem as w, Rows$1 as x, useHierarchyPreviewHandlers as y, getHierarchyKeyboardCoordinates as z };
-//# sourceMappingURL=styled-2aa33852.js.map
+export { StyledTableContentWrapper as $, customCollisionDetection as A, useHierarchyDndkitConfig as B, ComboboxEditableCell as C, DragHandle as D, EditableCell as E, FilterPopover as F, DnDGroupContext as G, withConditionalDnDColumnContext as H, BaseSelectFilter as I, FilterMapItem as J, HeaderResizer as K, HeaderCellTitle as L, MultiSelectFilter as M, NumberRangeFilter as N, HeaderCell as O, Pagination as P, withDnDSortableColumnContext as Q, Row$1 as R, SingleSelectFilter as S, TableContent as T, HeaderCellGroup as U, Headers as V, VirtualRowsList as W, INTERNAL_COLUMNS as X, StyledFocusWithin as Y, StyledDataTableWrapper as Z, StyledTableWrapper as _, applyOutOfTheBoxFilters as a, StyledVirtualListWrapper as a0, StyledHeadWrapper as a1, StyledHeadTr as a2, StyledHeadTh as a3, StyledHeaderRightIconsWrapper as a4, StyledResizer as a5, StyledActionCell as a6, StyledCell as a7, StyledCellContent as a8, StyledPencilIcon as a9, StyledEditableContainer as aa, StyledFullsizeGrid as ab, GroupHeaderContainer as ac, GroupHeaderTitle as ad, StyledCellContainer as ae, PaginationContainer as af, PaginationWrapper as ag, singleSelectColumn as b, dragHandleColumn as c, dateRangeFilterFn as d, expandRowColumn as e, DateRangeFilter as f, SingleDateFilter as g, TextInputFilter as h, PagesButtons as i, RowLoading as j, TextEditableCell as k, Cell as l, multiSelectColumn as m, Cells as n, outOfTheBoxEditables as o, DefaultRowContentRenderer as p, RowRenderer as q, RowVariantHeader as r, singleDateFilterFn as s, RowVariantPrimary as t, useRowRendererHandlers as u, RowVariantSecondary as v, RowVariantMapItem as w, Rows$1 as x, useHierarchyPreviewHandlers as y, getHierarchyKeyboardCoordinates as z };
+//# sourceMappingURL=styled-c95c391d.js.map