@elliemae/ds-datagrids 2.0.0-next.1 → 2.0.0-next.13

package/esm/plugins/filterable/components/FilterableHeader.js

@@ -1,10 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.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 { useState, useEffect, useCallback } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { debounce, get } from '@elliemae/ds-utilities/utils';
-import useResizeObserver from '@elliemae/ds-utilities/hooks/useResizeObserver';
+import { debounce, useResizeObserver, get } from '@elliemae/ds-utilities';
 import { useTheme } from '@elliemae/ds-system';
 import getFilterMenuByType from './filterable-menus/getFilterMenuByType.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -13,25 +18,29 @@ 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 blockName = 'data-grid-filter-header';
-const Container = aggregatedClasses('div')(blockName, null, ({
-  showFilter
-}) => ({
-  'show-filter': showFilter
-}));
+const Container = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    showFilter
+  } = _ref;
+  return {
+    'show-filter': showFilter
+  };
+});
 const FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');
 const FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');
-function FilterableHeader({
-  column,
-  value,
-  columnData,
-  onAddFilter,
-  onRemoveFilter,
-  filterMenuRef,
-  onFilterMenuClose,
-  onFilterMenuOpen,
-  filters,
-  isMulti
-}) {
+function FilterableHeader(_ref2) {
+  let {
+    column,
+    value,
+    columnData,
+    onAddFilter,
+    onRemoveFilter,
+    filterMenuRef,
+    onFilterMenuClose,
+    onFilterMenuOpen,
+    filters,
+    isMulti
+  } = _ref2;
   const [isMenuOpened, setMenuOpened] = useState(false);
   const [headerWidth, setHeaderWidth] = useState();
   const debouncedWidthSetter = debounce(setHeaderWidth, 200);
@@ -42,9 +51,10 @@ function FilterableHeader({
   const theme = useTheme();
   const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
 
-  const defineHeaderWidth = ({
-    width
-  }) => {
+  const defineHeaderWidth = _ref3 => {
+    let {
+      width
+    } = _ref3;
     let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
 
     if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;

package/esm/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -1,22 +1,24 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';
-import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
+import { DatePicker2 } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import moment from 'moment';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
 
-var _DatePickerIcon;
+var _DatePicker;
 const blockname = 'date-range';
 const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
 const Header = aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
 
-const DateRangePickerContainer = ({
-  onChange = () => null,
-  showHeader
-}) => {
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState(''); // For some reason it worked like this
 
@@ -35,10 +37,12 @@ const DateRangePickerContainer = ({
   }, [startDate, endDate, lastChangeWasPicker]);
   return /*#__PURE__*/_jsx(Wrapper, {
     "data-testid": "date-range__wrapper",
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
     style: {
-      width: '262px'
-    },
-    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px'
+    }
   }, void 0, showHeader && /*#__PURE__*/_jsx(Header, {
     style: {
       padding: '8px',
@@ -72,35 +76,39 @@ const DateRangePickerContainer = ({
   }));
 };
 
-const formatRangeDate = ({
-  startDate,
-  endDate
-}, format = DEFAULT_DATE_FORMAT) => {
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
   const sameDay = startDate.isSame(endDate, 'day');
-  if (sameDay) return `${endDate.format(format)}`;
-  return `${startDate.format(format)} - ${endDate.format(format)}`;
+  if (sameDay) return "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 };
 
-function DateRangeFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatRangeDate,
-  showHeader = true,
-  menuProps
-}) {
+function DateRangeFilterMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
   return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: /*#__PURE__*/_jsx("div", {
       className: className
     }, void 0, /*#__PURE__*/_jsx(DateRangePickerContainer, {
       minimumNights: 0,
-      onChange: ({
-        startDate,
-        endDate
-      }) => {
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
@@ -129,7 +137,7 @@ function DateRangeFilterMenu({
     showArrow: false,
     triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

package/esm/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js

@@ -1,19 +1,21 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback } from 'react';
 import Grid from '@elliemae/ds-grid';
 import { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
-import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
+import { DatePicker2 } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import moment from 'moment';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
 
-var _DatePickerIcon;
+var _DatePicker;
 
-const SingleDatePickerContainer = ({
-  onChange = () => null,
-  showHeader
-}) => {
+const SingleDatePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
   const [date, setDate] = useState('');
   const handleDateChange = useCallback(data => {
     if (!data.includes('_')) onChange(moment(data));
@@ -37,19 +39,23 @@ const SingleDatePickerContainer = ({
   }));
 };
 
-const formatDate = (date, format = DEFAULT_DATE_FORMAT) => date.format(format);
+const formatDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
+  return date.format(format);
+};
 
-function SingleDateFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatDate,
-  showHeader = false,
-  menuProps
-}) {
+function SingleDateFilterMenu(_ref2) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatDate,
+    showHeader = false,
+    menuProps
+  } = _ref2;
   return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: /*#__PURE__*/_jsx("div", {
       className: className,
@@ -80,7 +86,7 @@ function SingleDateFilterMenu({
     showArrow: false,
     triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

package/esm/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js

@@ -1,184 +1,151 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { useState, useCallback } from 'react';
-import { DayPickerRangeController } from '@elliemae/ds-date-range-picker';
-import { SingleRangeDateSwitcher, DSDatePickerController } from '@elliemae/ds-date-picker';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { DSControlledCheckbox, DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
-import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
+import { DatePicker2 } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-basic/Button';
+import Grid from '@elliemae/ds-grid';
 import moment from 'moment';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
+import styled from 'styled-components';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
-import { jsx } from 'react/jsx-runtime';
 
-var _DatePickerIcon;
+var _DatePicker;
+const StyledGridWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-jay5xg-0"
+})([".notCurrentMonth{opacity:", ";pointer-events:", ";}"], props => props.enableOutsideDays ? '1' : '0', props => props.enableOutsideDays ? 'auto' : 'none'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
 
-const _excluded = ["onChange", "enableOutsideDays"];
-
-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 START_DATE = 'startDate';
-const END_DATE = 'endDate';
-const blockname = 'date-range';
-const Wrapper = aggregatedClasses('div')(blockname, 'wrapper'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-
-const noop = (...args) => {};
+const noop = function () {};
 
 const SingleRangeSwitcherContainer = _ref => {
   let {
     onChange = noop,
     enableOutsideDays
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
 
-  const [focusedInputHeader, setFocusedInputHeader] = useState(START_DATE);
-  const [focusedInputPicker, setFocusedInputPicker] = useState(START_DATE);
-  const [singleDate, setSingleDate] = useState();
-  const [dateRange, setDateRange] = useState({});
+  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
   const [isDateRange, setIsDateRange] = useState(false);
-  const [pickerRange, setPickerRange] = useState({});
-
-  const handleHeaderFocusChange = inputType => {
-    setFocusedInputHeader(inputType);
-  };
-
-  const handlePickerFocusChange = () => {
-    setFocusedInputPicker(focusedInputPicker === START_DATE ? END_DATE : START_DATE);
-  };
-
-  const handleDatesChange = dates => {
-    if (dates.endDate) {
-      setTimeout(() => {
-        onChange({
-          startDate: dates.startDate,
-          endDate: dates.endDate.endOf('day')
-        });
-      }, 500);
+  useEffect(() => {
+    const startMoment = moment(startDate);
+    const endMoment = moment(endDate);
+
+    if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
+      onChange({
+        startDate: startMoment,
+        endDate: endMoment
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startDate, endDate, lastChangeWasPicker]);
+  return /*#__PURE__*/_jsx(StyledGridWrapper, {
+    "data-testid": "date-single-range__wrapper",
+    style: {
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px',
+      display: 'grid',
+      justifyContent: 'center'
+    },
+    cols: ['100%'],
+    enableOutsideDays: enableOutsideDays,
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    gutter: "xxs",
+    alignItems: "center",
+    p: "xxs"
+  }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
+    checked: isDateRange,
+    name: "Date range",
+    label: "Range",
+    id: "date-range-switcher-id-internal",
+    onChange: () => {
+      setIsDateRange(!isDateRange);
+      setStartDate('');
+      setEndDate('');
     }
-
-    setPickerRange({
-      startDate: dates.startDate,
-      endDate: dateRange.endDate
-    });
-    setDateRange(dates);
-  };
-
-  const handlePickerChange = dates => {
-    if (dates.endDate) {
-      setTimeout(() => {
-        onChange({
-          startDate: dates.startDate,
-          endDate: dates.endDate
-        });
-      }, 500);
+  }), /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 'fit-content'
     }
-
-    if (dates.startDate) handleHeaderFocusChange(undefined);
-    setPickerRange(dates);
-    setDateRange(dates);
-  };
-
-  const handleSingleDateChange = useCallback(date => {
-    const dates = {
-      startDate: moment(date).startOf('day'),
-      endDate: moment(date).endOf('day')
-    };
-    onChange(dates);
-    setSingleDate(dates);
-  }, [onChange]);
-
-  const handleStartInputChange = newDate => {
-    setDateRange({
-      startDate: newDate,
-      endDate: dateRange.endDate
-    });
-    setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
-      startDate: newDate
-    }));
-  };
-
-  const handleEndInputChange = newDate => {
-    setDateRange({
-      startDate: dateRange.startDate,
-      endDate: newDate
-    });
-    setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
-      endDate: newDate
-    }));
-  };
-
-  const dateRangeController = /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
-    enableOutsideDays: enableOutsideDays,
-    endDate: pickerRange.endDate,
-    focusedInput: focusedInputPicker,
-    hideKeyboardShortcutsPanel: true,
-    onDatesChange: handlePickerChange,
-    onFocusChange: handlePickerFocusChange,
-    startDate: pickerRange.startDate
-  }));
-
-  const singleDateController = /*#__PURE__*/_jsx(DSDatePickerController, {
-    date: singleDate,
-    enableOutsideDays: enableOutsideDays,
-    onDateChange: handleSingleDateChange
-  });
-
-  return /*#__PURE__*/_jsx(Wrapper, {
-    "data-testid": "date-single-range__wrapper"
-  }, void 0, /*#__PURE__*/_jsx(SingleRangeDateSwitcher, {
-    isDateRange: isDateRange,
-    focusedInput: focusedInputHeader,
-    onFocusChange: handleHeaderFocusChange,
-    onEndInputChange: handleEndInputChange,
-    onSingleInputChange: handleSingleDateChange,
-    onStartInputChange: handleStartInputChange,
-    selectedEndDate: dateRange.endDate,
-    selectedSingleDate: singleDate,
-    selectedStartDate: dateRange.startDate,
-    setIsDateRange: ({
-      target: {
-        checked
-      }
-    }) => {
-      setIsDateRange(checked);
+  }, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
     },
-    handleDatesChange: handleDatesChange
-  }), isDateRange ? dateRangeController : singleDateController);
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(false);
+    },
+    type: "date-range-inputs"
+  }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+    date: startDate,
+    onDateChange: _date => {
+      setLastChangeWasPicker(false);
+      setStartDate(_date);
+      setEndDate(_date);
+    },
+    type: "date-inputs"
+  }))), /*#__PURE__*/_jsx(Grid, {}, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(true);
+    },
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(true);
+    },
+    type: "date-range-picker-controller-only"
+  }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+    date: startDate,
+    onDateChange: _date => {
+      setLastChangeWasPicker(true);
+      setStartDate(_date);
+      setEndDate(_date);
+    },
+    type: "date-picker-controller-only"
+  })));
 };
 
-const formatRangeDate = ({
-  startDate,
-  endDate
-}, format = DEFAULT_DATE_FORMAT) => {
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
   const sameDay = startDate.isSame(endDate, 'day');
-  if (sameDay) return `${endDate.format(format)}`;
-  return `${startDate.format(format)} - ${endDate.format(format)}`;
+  if (sameDay) return "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
 
-function SingleRangeSwitcherMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = noop,
-  placement = PopperPositions.BOTTOM_END,
-  onAddFilter = noop,
-  dateFormatter = formatRangeDate,
-  enableOutsideDays = true,
-  menuProps
-}) {
+function SingleRangeSwitcherMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = noop,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = noop,
+    dateFormatter = formatRangeDate,
+    enableOutsideDays = true,
+    menuProps
+  } = _ref3;
   return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: /*#__PURE__*/_jsx("div", {
       className: className
     }, void 0, /*#__PURE__*/_jsx(SingleRangeSwitcherContainer, {
       enableOutsideDays: enableOutsideDays,
-      minimumNights: 0,
-      onChange: ({
-        startDate,
-        endDate
-      }) => {
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
@@ -206,7 +173,7 @@ function SingleRangeSwitcherMenu({
     showArrow: false,
     triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

package/esm/plugins/filterable/components/filterable-menus/TextFilterMenu.js

@@ -1,13 +1,21 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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/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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { useState } from 'react';
 import { compact } from 'lodash';
 import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
-import DSButton from '@elliemae/ds-basic/Button';
-import { PopperPositions } from '@elliemae/ds-basic/Popper';
+import DSButton from '@elliemae/ds-button';
+import { PopperPositions } from '@elliemae/ds-popper';
 import { Menu, MenuCombobox } from '@elliemae/ds-menu';
-import SearchSmall from '@elliemae/ds-icons/SearchSmall';
+import { SearchSmall } from '@elliemae/ds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 var _SearchSmall;
@@ -18,21 +26,23 @@ 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; }
 
-function TextFilterMenu({
-  column,
-  menuStyle = {},
-  className,
-  filters = [],
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  onClose = () => null,
-  placement = PopperPositions.BOTTOM_END,
-  menuProps = {},
-  onAddFilter = () => null,
-  onRemoveFilter = () => null,
-  maxOptions = 10,
-  isMulti = false
-}) {
+function TextFilterMenu(_ref) {
+  let {
+    column,
+    menuStyle = {},
+    className,
+    filters = [],
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    onClose = () => null,
+    placement = PopperPositions.BOTTOM_END,
+    menuProps = {},
+    onAddFilter = () => null,
+    onRemoveFilter = () => null,
+    maxOptions = 10,
+    isMulti = false
+  } = _ref;
+
   const {
     options
   } = menuProps,