@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.0

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

@@ -0,0 +1,148 @@
+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-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 _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 = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
+
+  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
+  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(Wrapper, {
+    "data-testid": "date-range__wrapper",
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
+    style: {
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px'
+    }
+  }, void 0, showHeader && /*#__PURE__*/_jsx(Header, {
+    style: {
+      padding: '8px',
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, void 0, /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
+    },
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(false);
+    },
+    type: "date-range-inputs"
+  })), /*#__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"
+  }));
+};
+
+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 "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
+};
+
+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: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
+        startDate.startOf('day');
+        endDate.endOf('day');
+        onAddFilter({
+          group: column.property,
+          label: column.label,
+          value: dateFormatter({
+            startDate,
+            endDate
+          }),
+          type: 'date',
+          // todo: create constants for filter types
+          filterParams: {
+            start: startDate,
+            end: endDate
+          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
+          operator: 'range'
+        }, column);
+        onOpenMenu(false);
+      },
+      showHeader: showHeader
+    })),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement: placement,
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+      size: "s"
+    }),
+    zIndex: menuProps.zIndex
+  });
+}
+
+export { DateRangeFilterMenu as default };

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

@@ -0,0 +1,97 @@
+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-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 _DatePicker;
+
+const SingleDatePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [date, setDate] = useState('');
+  const handleDateChange = useCallback(data => {
+    if (!data.includes('_')) onChange(moment(data));
+    setDate(data);
+  }, [onChange]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)'
+    }
+  }, void 0, showHeader && /*#__PURE__*/_jsx(Grid, {
+    p: "xxs"
+  }, void 0, /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+    date: date,
+    onDateChange: handleDateChange,
+    type: "date-inputs",
+    isClearable: true
+  })), /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
+    date: date,
+    onDateChange: handleDateChange,
+    type: "date-picker-controller-only"
+  }));
+};
+
+const formatDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
+  return date.format(format);
+};
+
+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,
+      "data-testid": "date-single__wrapper"
+    }, void 0, /*#__PURE__*/_jsx(SingleDatePickerContainer, {
+      minimumNights: 0,
+      onChange: date => {
+        const t = date.clone();
+        onAddFilter({
+          group: column.property,
+          label: column.label,
+          value: dateFormatter(date, column.dateFormat),
+          type: 'date',
+          operator: 'range',
+          filterParams: {
+            start: date.startOf('day'),
+            end: t.endOf('day')
+          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT)
+        }, column);
+        onOpenMenu(false);
+      },
+      showHeader: showHeader
+    })),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement: placement,
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+      size: "s"
+    }),
+    zIndex: menuProps.zIndex
+  });
+}
+
+export { SingleDateFilterMenu as default };

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

@@ -0,0 +1,184 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 { DatePicker2 } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-basic/Button';
+import Grid from '@elliemae/ds-grid';
+import moment from 'moment';
+import styled from 'styled-components';
+import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
+
+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 noop = function () {};
+
+const SingleRangeSwitcherContainer = _ref => {
+  let {
+    onChange = noop,
+    enableOutsideDays
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
+
+  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
+  const [isDateRange, setIsDateRange] = useState(false);
+  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('');
+    }
+  }), /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 'fit-content'
+    }
+  }, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
+    },
+    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 = 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 "".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(_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,
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
+        startDate.startOf('day');
+        endDate.endOf('day');
+        onAddFilter({
+          group: column.property,
+          label: column.label,
+          value: dateFormatter({
+            startDate,
+            endDate
+          }, column.format),
+          type: 'date',
+          // todo: create constants for filter types
+          filterParams: {
+            start: startDate,
+            end: endDate
+          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
+          operator: 'range'
+        }, column);
+        onOpenMenu(false);
+      }
+    })),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement: placement,
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+      size: "s"
+    }),
+    zIndex: menuProps.zIndex
+  });
+}
+
+export { SingleRangeSwitcherMenu as default };

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

@@ -0,0 +1,163 @@
+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-button';
+import { PopperPositions } from '@elliemae/ds-popper';
+import { Menu, MenuCombobox } from '@elliemae/ds-menu';
+import { SearchSmall } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+var _SearchSmall;
+
+const _excluded = ["options"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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,
+        otherMenuProps = _objectWithoutProperties(menuProps, _excluded);
+
+  const generateOption = (option, idx) => /*#__PURE__*/_jsx(Menu.ItemCheckbox, {
+    label: option.label,
+    name: option.id
+  }, idx);
+
+  const renderOptions = arr => arr.map(generateOption);
+
+  const filtersForColumn = filters.filter(f => f.group === column.property);
+  const initialSelectedOptions = filtersForColumn.map(f => f.value);
+  const [selected, setSelected] = useState(initialSelectedOptions);
+  React.useEffect(() => {
+    const filtersForColumn2 = filters.filter(f => f.group === column.property);
+    setSelected(filtersForColumn2.map(f => f.value));
+  }, [filters]);
+  const filterGroup = column.searchBy || column.property;
+
+  const onCloseMulti = () => {
+    let nextFilters = [...filters];
+    const shouldRemove = []; // if selected doesn't includes item, then we have to remove the filter
+    // but given that we are maintaining state here and updating the grid state
+    // is not implemented on useFilterableState, we have to do this in 2 traverses
+    // as doing it in one gives trouble when removing and adding at the same time.
+
+    initialSelectedOptions.forEach(item => {
+      if (!selected.includes(item)) {
+        nextFilters = nextFilters.filter(filter => !(filter.group === filterGroup && filter.value === item));
+        shouldRemove.push({
+          group: filterGroup,
+          pill: {
+            value: item
+          }
+        });
+      }
+    });
+    shouldRemove.forEach(removedFilter => {
+      onRemoveFilter(_objectSpread(_objectSpread({}, removedFilter), {}, {
+        nextFilters
+      }));
+    });
+    selected.forEach(item => {
+      // if initialSelectedOptions includes item, then we do nothing
+      if (!initialSelectedOptions.includes(item)) {
+        var _column$filter;
+
+        onAddFilter({
+          group: filterGroup,
+          label: column.label,
+          value: item,
+          operator: (column === null || column === void 0 ? void 0 : (_column$filter = column.filter) === null || _column$filter === void 0 ? void 0 : _column$filter.operator) || 'contains',
+          transformRowValue: column.valueTransformation
+        }, column);
+      }
+    });
+    onClose();
+  };
+
+  return /*#__PURE__*/_jsx(DSDropdownMenu, {
+    closeMenuOnItemSelection: true,
+    contentStyle: menuStyle,
+    customMenu: isMulti ? /*#__PURE__*/_jsx(Menu, {
+      containerProps: {
+        id: 'text-filter-menu-multiple'
+      },
+      className: "dg-multiple-filter",
+      visible: true
+    }, void 0, /*#__PURE__*/_jsx(Menu.SelectionGroup, {
+      active: selected,
+      onSelect: newValues => {
+        setSelected(newValues);
+      },
+      focusOnOpen: true,
+      multi: true,
+      searchable: true
+    }, void 0, renderOptions(options))) : /*#__PURE__*/jsx(MenuCombobox, _objectSpread(_objectSpread({}, otherMenuProps), {}, {
+      className: className,
+      dropdownFilterOptions: _objectSpread(_objectSpread({}, column.dropdownFilterOptions), {}, {
+        maxOptions
+      }),
+      maxWidth: column.filterMenuMaxWidth,
+      minWidth: column.filterMenuMinWidth,
+      onSelectMenuItem: selectedValue => {
+        if (selectedValue) {
+          var _column$filter2;
+
+          onAddFilter({
+            group: column.searchBy || column.property,
+            label: column.label,
+            value: selectedValue,
+            operator: (column === null || column === void 0 ? void 0 : (_column$filter2 = column.filter) === null || _column$filter2 === void 0 ? void 0 : _column$filter2.operator) || 'contains',
+            transformRowValue: column.valueTransformation
+          }, column);
+          onOpenMenu(false);
+        }
+      }
+    })),
+    isOpen: isMenuOpened,
+    maxWidth: column.filterMenuMaxWidth,
+    menuProps: menuProps,
+    minWidth: column.filterMenuMinWidth,
+    onOpenMenu: onOpenMenu,
+    onClose: isMulti ? onCloseMulti : onClose,
+    options: compact(options),
+    placement: placement,
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      icon: _SearchSmall || (_SearchSmall = /*#__PURE__*/_jsx(SearchSmall, {})),
+      onClick: () => isMenuOpened ? onOpenMenu(false) : onOpenMenu(true),
+      size: "s"
+    })
+  });
+}
+
+export { TextFilterMenu as default };

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

@@ -0,0 +1,3 @@
+const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
+
+export { DEFAULT_DATE_FORMAT };

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

@@ -0,0 +1,16 @@
+import DateRangeFilterMenu from './DateRangeFilterMenu.js';
+import SingleDateFilterMenu from './SingleDateFilterMenu.js';
+import SingleRangeSwitcherMenu from './SingleRangeSwitcherMenu.js';
+import TextFilterMenu from './TextFilterMenu.js';
+
+const ComponentTypes = {
+  'date-range': DateRangeFilterMenu,
+  'single-date': SingleDateFilterMenu,
+  'date-switcher': SingleRangeSwitcherMenu,
+  string: TextFilterMenu
+};
+function getFilterMenuByType(type) {
+  return ComponentTypes[type] || ComponentTypes.string;
+}
+
+export { getFilterMenuByType as default };

package/esm/plugins/filterable/filterableFormatter.js

@@ -0,0 +1,57 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 'react';
+import FilterableHeader from './components/FilterableHeader.js';
+import { getFilterLabelsGroup, getFilterLabels } from './helper.js';
+
+function FilterableFormatter(_ref) {
+  let {
+    grid,
+    onAddFilter,
+    onRemoveFilter,
+    query,
+    filterMenuRef
+  } = _ref;
+  return (value, _ref2) => {
+    let {
+      column
+    } = _ref2;
+    const {
+      rows,
+      composedRows,
+      props: {
+        groupedRows,
+        groupedBy,
+        onFilterMenuClose,
+        onFilterMenuOpen
+      },
+      state: {
+        filters
+      }
+    } = grid.getInstance();
+    let rowsToUse = composedRows;
+
+    if (column.filter && column.filter.isMulti) {
+      rowsToUse = rows;
+    }
+
+    const filteredLabels = groupedRows && !groupedBy ? getFilterLabelsGroup(column, rows) : getFilterLabels(column, rowsToUse.rows || rowsToUse);
+    const columnData = column.filterOptions || filteredLabels;
+    return /*#__PURE__*/_jsx(FilterableHeader, {
+      column: column,
+      columnData: columnData,
+      filters: filters,
+      filterMenuRef: filterMenuRef,
+      onAddFilter: onAddFilter,
+      onFilterMenuClose: onFilterMenuClose,
+      onFilterMenuOpen: onFilterMenuOpen,
+      onRemoveFilter: onRemoveFilter,
+      isMulti: column.filter && column.filter.isMulti,
+      value: value
+    });
+  };
+}
+
+export { FilterableFormatter as default };