@elliemae/ds-data-table 2.0.0-next.7 → 2.0.0-rc.10

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

@@ -0,0 +1,133 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { DatePicker2 } from '@elliemae/ds-icons';
+import Grid from '@elliemae/ds-grid';
+import { DSControlledCheckbox, DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
+import { FilterPopover } from '../../../../exported-related/FilterPopover.js';
+import '../../../../styled.js';
+import '../../../../DataTableContext.js';
+import 'react/jsx-runtime';
+import 'styled-components';
+import '@elliemae/ds-button';
+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 '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-system';
+import '../../../../parts/Row.js';
+import '../../../../parts/Footer.js';
+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 _DatePicker;
+const emptyFilterValue = {
+  startDate: null,
+  endDate: null
+};
+const DateSwitcherFilter = props => {
+  const {
+    column,
+    column: {
+      id
+    },
+    filterValue = emptyFilterValue,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef
+  } = props;
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = useState(dateRange.startDate || '');
+  const [endDate, setEndDate] = useState(dateRange.endDate || '');
+  const [isDateRange, setIsDateRange] = useState(false);
+  useEffect(() => {
+    setStartDate(dateRange.startDate || '');
+    setEndDate(dateRange.endDate || '');
+  }, [dateRange]);
+  useEffect(() => {
+    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
+      onValueChange(FILTER_TYPES.DATE_SWITCHER, {
+        startDate,
+        endDate,
+        isDateRange
+      });
+    } // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startDate, endDate, isDateRange]);
+  return /*#__PURE__*/_jsx(FilterPopover, {
+    reduxHeader: reduxHeader,
+    column: column,
+    columnId: id,
+    menuContent: /*#__PURE__*/_jsx(Grid, {
+      width: "260px",
+      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      p: "xxs",
+      gutter: "xxs"
+    }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
+      checked: isDateRange,
+      name: "Date range",
+      label: "Date Range",
+      id: "date-range-switcher-id-internal",
+      onChange: () => {
+        setIsDateRange(!isDateRange);
+        setStartDate('');
+        setEndDate('');
+      },
+      autoFocus: true
+    }), isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-inputs"
+    }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+      date: startDate,
+      onDateChange: _date => {
+        setStartDate(_date);
+        setEndDate(_date);
+      },
+      type: "date-inputs"
+    })), /*#__PURE__*/_jsx(Grid, {
+      onKeyDown: e => e.code === 'Enter' && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)
+    }, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-picker-controller-only"
+    }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+      date: startDate,
+      onDateChange: _date => {
+        setStartDate(_date);
+        setEndDate(_date);
+      },
+      type: "date-picker-controller-only"
+    }))),
+    triggerIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+    innerRef: innerRef,
+    ariaLabel: "Open Date Range Filter"
+  });
+};
+
+export { DateSwitcherFilter };

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

@@ -1,9 +1,15 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import Grid from '@elliemae/ds-grid';
-import DSTextBox from '@elliemae/ds-form/TextBox';
-import SearchIcon from '@elliemae/ds-icons/SearchXsmall';
+import { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';
+import { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';
+import { SearchXsmall } from '@elliemae/ds-icons';
 import { FilterPopover } from '../../../../exported-related/FilterPopover.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import '../../../../styled.js';
@@ -11,34 +17,44 @@ import '../../../../DataTableContext.js';
 import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 import { DATA_TESTID } from '../../../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons';
-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 '../../../../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';
+import '../../../../redux/reducers/headersReducers/headersReducers.js';
+import { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
-var _Grid, _SearchIcon;
+var _SearchXsmall;
 
 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 opts = {
+  prefix: '',
+  suffix: '',
+  allowDecimal: false,
+  includeThousandsSeparator: false,
+  requireDecimal: false,
+  allowNegative: true
+};
 const NumberRangeFilter = props => {
-  var _filterValue$from, _filterValue$to;
+  var _filterValue$from, _filterValue$to, _column$ref$current$o, _column$ref, _column$ref$current;
 
   const {
     column,
@@ -52,51 +68,89 @@ const NumberRangeFilter = props => {
   } = props;
 
   const handleFromChange = e => {
-    var _e$target;
-
-    const from = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) !== '' ? parseInt(e.target.value, 10) : '';
+    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';
 
     const nextValue = _objectSpread(_objectSpread({}, filterValue), {}, {
       from
     });
 
-    onValueChange(FILTER_TYPES.NUMBER_RANGE, nextValue);
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
 
   const handleToChange = e => {
-    var _e$target2;
-
-    const to = (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) !== '' ? parseInt(e.target.value, 10) : '';
+    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';
 
     const nextValue = _objectSpread(_objectSpread({}, filterValue), {}, {
       to
     });
 
-    onValueChange(FILTER_TYPES.NUMBER_RANGE, nextValue);
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+
+  const {
+    patchHeader
+  } = useDispatchHeadersActions(); // workaround to close menu with esc key since DSInputMask has stoppropagation on key down
+
+  const closePopover = e => {
+    if (e.code === 'Escape') {
+      patchHeader(column.id, {
+        hideFilterMenu: true,
+        hideFilterButton: false
+      });
+      innerRef.current.focus();
+    }
   };
 
+  const idPreffix = 'datatable-number-range';
   return /*#__PURE__*/_jsx(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: /*#__PURE__*/_jsx(Grid, {
       "data-testid": DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
-      gutter: "xxs",
-      padding: "xs",
-      cols: ['50px', 'auto', '50px']
-    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      gutter: "xxxs",
+      padding: "xxs",
+      cols: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
+      label: "Low",
+      inputID: "".concat(idPreffix, "-low-").concat(column.id)
+    }, void 0, /*#__PURE__*/_jsx(DSInputMask, {
+      containerProps: {
+        style: {
+          textAlign: 'right'
+        }
+      },
+      id: "".concat(idPreffix, "-low-").concat(column.id),
       value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
       onChange: handleFromChange,
-      type: "number"
-    }), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
-      justifyItems: "center",
-      alignItems: "center"
-    }, void 0, "\u2014")), /*#__PURE__*/_jsx(DSTextBox, {
+      placeholder: "0",
+      mask: number => MASK_TYPES.NUMBER(opts)(number),
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
+    })), /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
+      label: "High",
+      inputID: "".concat(idPreffix, "-high-").concat(column.id)
+    }, void 0, /*#__PURE__*/_jsx(DSInputMask, {
+      containerProps: {
+        style: {
+          textAlign: 'right'
+        }
+      },
+      id: "".concat(idPreffix, "-high-").concat(column.id),
       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: _SearchIcon || (_SearchIcon = /*#__PURE__*/_jsx(SearchIcon, {})),
+      placeholder: "0",
+      mask: number => MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: e => {
+        closePopover(e);
+      }
+    }))),
+    triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx(SearchXsmall, {})),
+    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'
+    },
     innerRef: innerRef,
     ariaLabel: "Open Number Range Filter"
   });

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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 'core-js/modules/esnext.set.add-all.js';
 import 'core-js/modules/esnext.set.delete-all.js';
@@ -17,46 +18,52 @@ import 'core-js/modules/esnext.set.reduce.js';
 import 'core-js/modules/esnext.set.some.js';
 import 'core-js/modules/esnext.set.symmetric-difference.js';
 import 'core-js/modules/esnext.set.union.js';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { useVirtual } from 'react-virtual';
-import SearchIcon from '@elliemae/ds-icons/SearchXsmall';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
-import { Wrapper, InputWrapper, Input, VirtualListWrapper, MenuList, MenuItem } from './components.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSComboBox } from '@elliemae/ds-form/ComboBox';
+import { SearchXsmall } from '@elliemae/ds-icons';
 import { FilterPopover } from '../../../../exported-related/FilterPopover.js';
 import '../../../../styled.js';
 import '../../../../DataTableContext.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 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 '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/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 '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 import 'uid';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
-import { useSelectFilterHandlers } from './useSelectFilterHandlers.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
-var _SearchIcon;
-
-const _excluded = ["isMulti", "selectedItems", "column", "column", "ctx", "reduxHeader", "innerRef"];
+var _SearchXsmall;
 const BaseSelectFilter = props => {
+  var _column$ref$current$o, _column$ref, _column$ref$current;
+
   const {
     isMulti = false,
-    selectedItems = [],
+    selectedItems,
     column,
+    type,
     column: {
       id,
       filterOptions: userFilterOptions
@@ -67,92 +74,84 @@ const BaseSelectFilter = props => {
       }
     },
     reduxHeader,
-    innerRef
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
-
+    innerRef,
+    onValueChange
+  } = props;
   const filterOptions = useMemo(() => {
     // If the user didn't provide options, use the available ones
-    if (!userFilterOptions) return [...new Set(data.map(datum => datum[id].toString()))]; // If user provided the array itself, use it
+    if (!userFilterOptions) {
+      const automaticFilters = [...new Set(data.map(datum => datum[id].toString()))].map(item => ({
+        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]);
-  const inputRef = useRef(null);
-  const [inputValue, setInputValue] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState(filterOptions);
-  const virtualListRef = useRef();
-  const virtualListHelpers = useVirtual({
-    size: filteredOptions.length,
-    parentRef: virtualListRef,
-    overscan: 15
-  });
-  const {
-    virtualItems,
-    totalSize
-  } = virtualListHelpers;
-  const handleInputChange = useCallback(e => setInputValue(e.target.value), [setInputValue]);
+
+  const handleOnChange = value => {
+    if (isMulti) {
+      const multiSelectedItem = selectedItems;
+      const isFound = multiSelectedItem.find(item => item.dsId === value.dsId);
+
+      if (isFound) {
+        onValueChange(type, multiSelectedItem.filter(item => item.dsId !== value.dsId));
+      } else {
+        onValueChange(type, [...multiSelectedItem, value]);
+      }
+    } else {
+      const singleSelectedItem = selectedItems;
+      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
+    }
+  };
+
+  const [filters, setFilteredOptions] = useState(filterOptions);
   useEffect(() => {
-    const filtered = filterOptions.filter(opt => opt.toLowerCase().includes(inputValue.toLowerCase()));
-    setFilteredOptions(filtered);
-  }, [inputValue, filterOptions]);
-  const {
-    onInputWrapperKeyDown,
-    onMenuItemClick,
-    onMenuItemKeyDown
-  } = useSelectFilterHandlers(props);
+    setFilteredOptions(filterOptions);
+  }, [filterOptions]);
+  const filteredOptions = useCallback(filter => filterOptions.filter(option => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase())), [filterOptions]);
+  const handleOnFilter = useCallback(newFilter => {
+    setFilteredOptions(filteredOptions(newFilter));
+  }, [filteredOptions]);
 
-  const Select = /*#__PURE__*/_jsx(Wrapper, {
-    "data-testid": rest['data-testid']
-  }, void 0, /*#__PURE__*/_jsx(InputWrapper, {}, void 0, /*#__PURE__*/jsx(Input, {
-    value: inputValue,
-    onChange: handleInputChange,
+  const Select = /*#__PURE__*/_jsx(Grid, {
+    "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+    style: {
+      background: '#fff',
+      position: 'relative'
+    }
+  }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+    inline: true,
     autoFocus: true,
-    onKeyDown: onInputWrapperKeyDown,
-    ref: inputRef
-  })), /*#__PURE__*/jsx(VirtualListWrapper, {
-    ref: virtualListRef,
-    children: /*#__PURE__*/_jsx(MenuList, {
-      style: {
-        height: "".concat(totalSize, "px")
-      }
-    }, void 0, virtualItems.map((virtualItem, virtualIndex) => {
-      const {
-        index,
-        measureRef,
-        start
-      } = virtualItem;
-      const option = filteredOptions[index];
-      return /*#__PURE__*/jsxs(MenuItem, {
-        onClick: onMenuItemClick(option),
-        style: {
-          top: "".concat(start, "px"),
-          outline: 'none'
-        },
-        ref: measureRef,
-        tabIndex: -1,
-        "data-testid": DATA_TESTID.DATA_TABLE_SELECT_MENU_ITEM,
-        onKeyDown: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef),
-        children: [isMulti && /*#__PURE__*/_jsx(DSCheckbox, {
-          style: {
-            marginRight: '10px'
-          },
-          checked: selectedItems.includes(option),
-          onChange: onMenuItemKeyDown(option, index, virtualIndex, inputRef, innerRef)
-        }), option]
-      }, option);
-    }))
+    options: filters,
+    onChange: handleOnChange,
+    selectedValues: selectedItems,
+    onFilter: handleOnFilter
   }));
 
+  const handleOnClickOutside = () => {
+    setFilteredOptions(filteredOptions(''));
+  };
+
   return /*#__PURE__*/_jsx(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: Select,
-    triggerIcon: _SearchIcon || (_SearchIcon = /*#__PURE__*/_jsx(SearchIcon, {})),
+    triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx(SearchXsmall, {})),
     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',
+      maxHeight: '300px'
+    }
   });
 };
 

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

@@ -1,58 +1,68 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { BaseSelectFilter } from './BaseSelectFilter.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 '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import '@elliemae/ds-button';
 import '@elliemae/ds-popperjs';
 import '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 '@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 '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-utilities/hooks';
+import '@elliemae/ds-utilities';
 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';
 
-const MultiSelectFilter = ({
-  column,
-  ctx,
-  onValueChange,
-  patchHeaderFilterButtonAndMenu,
-  patchHeader,
-  reduxHeader,
-  filterValue,
-  innerRef
-}) => /*#__PURE__*/_jsx(BaseSelectFilter, {
-  reduxHeader: reduxHeader,
-  "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
-  isMulti: true,
-  column: column,
-  ctx: ctx,
-  selectedItems: filterValue !== null && filterValue !== void 0 ? filterValue : [],
-  type: FILTER_TYPES.MULTI_SELECT,
-  onValueChange: onValueChange,
-  patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
-  patchHeader: patchHeader,
-  innerRef: innerRef
-});
+const MultiSelectFilter = _ref => {
+  let {
+    column,
+    ctx,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    reduxHeader,
+    filterValue,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx(BaseSelectFilter, {
+    reduxHeader: reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
+    isMulti: true,
+    column: column,
+    ctx: ctx,
+    selectedItems: filterValue !== null && filterValue !== void 0 ? filterValue : [],
+    type: FILTER_TYPES.MULTI_SELECT,
+    onValueChange: onValueChange,
+    patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
+    patchHeader: patchHeader,
+    innerRef: innerRef
+  });
+};
 
 export { MultiSelectFilter };