@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -27,9 +27,9 @@ var usePresence = require('../../../../../global/js/hooks/usePresence.js');
 var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');
 var useIsomorphicEffect = require('../../../../../global/js/hooks/useIsomorphicEffect.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var componentClass = "".concat(blockClass, "-filter-panel");
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const componentClass = `${blockClass}-filter-panel`;
+const defaults = {
   title: 'Filter',
   closeIconDescription: 'Close filter panel',
   primaryActionLabel: 'Apply',
@@ -39,129 +39,108 @@ var defaults = {
 };
 
 // Use same empty array every time, for benefit of useEffect() etc. dependency checking.
-var emptyArray = [];
-var FilterPanel = function FilterPanel(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? defaults.title : _ref$title,
-    _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
-    updateMethod = _ref.updateMethod,
-    filterSections = _ref.filterSections,
-    setAllFilters = _ref.setAllFilters,
-    _ref$onApply = _ref.onApply,
-    onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
-    _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    _ref$onPanelOpen = _ref.onPanelOpen,
-    onPanelOpen = _ref$onPanelOpen === void 0 ? function () {} : _ref$onPanelOpen,
-    _ref$onPanelClose = _ref.onPanelClose,
-    onPanelClose = _ref$onPanelClose === void 0 ? function () {} : _ref$onPanelClose,
-    _ref$showFilterSearch = _ref.showFilterSearch,
-    showFilterSearch = _ref$showFilterSearch === void 0 ? false : _ref$showFilterSearch,
-    _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
-    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
-    _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
-    _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
-    _ref$searchLabelText = _ref.searchLabelText,
-    searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
-    _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
-    _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter,
-    _ref$autoHideFilters = _ref.autoHideFilters,
-    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
-    _ref$isFetching = _ref.isFetching,
-    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
+const emptyArray = [];
+const FilterPanel = _ref => {
+  let {
+    title = defaults.title,
+    closeIconDescription = defaults.closeIconDescription,
+    updateMethod,
+    filterSections,
+    setAllFilters,
+    onApply = () => {},
+    onCancel = () => {},
+    onPanelOpen = () => {},
+    onPanelClose = () => {},
+    showFilterSearch = false,
+    filterPanelMinHeight = 600,
+    primaryActionLabel = defaults.primaryActionLabel,
+    secondaryActionLabel = defaults.secondaryActionLabel,
+    searchLabelText = defaults.searchLabelText,
+    searchPlaceholder = defaults.searchPlaceholder,
+    reactTableFiltersState = emptyArray,
+    autoHideFilters = false,
+    isFetching = false
+  } = _ref;
   /** State */
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    showDividerLine = _useState2[0],
-    setShowDividerLine = _useState2[1];
+  const [showDividerLine, setShowDividerLine] = React.useState(false);
 
   /** Context */
-  var _useContext = React.useContext(FilterProvider.FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen,
-    localDispatch = _useContext.dispatch;
-  var _useFilters = useFilters.default({
-      updateMethod: updateMethod,
-      filters: filterSections,
-      setAllFilters: setAllFilters,
-      variation: constants.PANEL,
-      reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel,
-      panelOpen: panelOpen,
-      autoHideFilters: autoHideFilters,
-      isFetching: isFetching
-    }),
-    filtersState = _useFilters.filtersState,
-    prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
-    prevFiltersRef = _useFilters.prevFiltersRef,
-    cancel = _useFilters.cancel,
-    reset = _useFilters.reset,
-    renderFilter = _useFilters.renderFilter,
-    filtersObjectArray = _useFilters.filtersObjectArray,
-    lastAppliedFilters = _useFilters.lastAppliedFilters;
+  const {
+    panelOpen,
+    setPanelOpen,
+    dispatch: localDispatch
+  } = React.useContext(FilterProvider.FilterContext);
+  const {
+    filtersState,
+    prevFiltersObjectArrayRef,
+    prevFiltersRef,
+    cancel,
+    reset,
+    renderFilter,
+    filtersObjectArray,
+    lastAppliedFilters
+  } = useFilters.default({
+    updateMethod,
+    filters: filterSections,
+    setAllFilters,
+    variation: constants.PANEL,
+    reactTableFiltersState,
+    onCancel,
+    panelOpen,
+    autoHideFilters,
+    isFetching
+  });
 
   /** Refs */
-  var filterPanelRef = React.useRef(undefined);
-  var filterHeadingRef = React.useRef(undefined);
-  var filterSearchRef = React.useRef(undefined);
-  var actionSetRef = React.useRef(undefined);
-  var innerContainerRef = React.useRef(undefined);
+  const filterPanelRef = React.useRef(undefined);
+  const filterHeadingRef = React.useRef(undefined);
+  const filterSearchRef = React.useRef(undefined);
+  const actionSetRef = React.useRef(undefined);
+  const innerContainerRef = React.useRef(undefined);
   /** State from hooks */
-  var _useShouldDisableButt = useShouldDisableButtons.default({
-      initialValue: true,
-      filtersState: filtersState,
-      prevFiltersRef: prevFiltersRef
-    }),
-    _useShouldDisableButt2 = _rollupPluginBabelHelpers.slicedToArray(_useShouldDisableButt, 2),
-    shouldDisableButtons = _useShouldDisableButt2[0],
-    setShouldDisableButtons = _useShouldDisableButt2[1];
-  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
-  var exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';
-  var _usePresence = usePresence.usePresence(panelOpen, filterPanelRef, exitAnimationName),
-    shouldRender = _usePresence.shouldRender;
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    animationComplete = _useState4[0],
-    setAnimationComplete = _useState4[1];
+  const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons.default({
+    initialValue: true,
+    filtersState,
+    prevFiltersRef
+  });
+  const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  const exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';
+  const {
+    shouldRender
+  } = usePresence.usePresence(panelOpen, filterPanelRef, exitAnimationName);
+  const [animationComplete, setAnimationComplete] = React.useState(false);
 
   /** Memos */
-  var showActionSet = React.useMemo(function () {
-    return updateMethod === constants.BATCH;
-  }, [updateMethod]);
+  const showActionSet = React.useMemo(() => updateMethod === constants.BATCH, [updateMethod]);
 
   /** Methods */
-  var closePanel = function closePanel() {
+  const closePanel = () => {
     cancel();
     setPanelOpen(false);
   };
 
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
   }, [shouldReduceMotion]);
 
   // initializes the side panel to open
-  var onAnimationStart = function onAnimationStart() {
+  const onAnimationStart = () => {
     setAnimationComplete(false);
   };
-  var onAnimationEnd = function onAnimationEnd() {
+  const onAnimationEnd = () => {
     setAnimationComplete(!animationComplete);
   };
-  var apply = function apply() {
+  const apply = () => {
     setAllFilters(filtersObjectArray);
     // From the user
     onApply({
-      filtersState: filtersState,
-      filtersObjectArray: filtersObjectArray,
-      lastAppliedFilters: lastAppliedFilters
+      filtersState,
+      filtersObjectArray,
+      lastAppliedFilters
     });
     // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
@@ -183,7 +162,7 @@ var FilterPanel = function FilterPanel(_ref) {
       }
     });
   };
-  var renderActionSet = function renderActionSet() {
+  const renderActionSet = () => {
     return showActionSet && /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: [{
         key: 1,
@@ -198,11 +177,13 @@ var FilterPanel = function FilterPanel(_ref) {
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
-      className: cx("".concat(componentClass, "__action-set"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__animationComplete"), animationComplete)),
+      className: cx(`${componentClass}__action-set`, {
+        [`${componentClass}__animationComplete`]: animationComplete
+      }),
       ref: actionSetRef
     });
   };
-  var onInnerContainerScroll = function onInnerContainerScroll(event) {
+  const onInnerContainerScroll = event => {
     if (event.target.scrollTop > 0) {
       setShowDividerLine(true);
     } else {
@@ -219,26 +200,24 @@ var FilterPanel = function FilterPanel(_ref) {
     }
   }, [panelOpen, onPanelClose, onPanelOpen]);
   React.useEffect(function setPanelMinimumHeight() {
-    var _filterPanelRef$curre;
-    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', layout.rem(filterPanelMinHeight));
+    filterPanelRef.current?.style.setProperty('--filter-panel-min-height', layout.rem(filterPanelMinHeight));
   }, [filterPanelMinHeight, shouldRender]);
 
   // tableId is passed in from the event emitter from the FilterSummary component
   // in DatagridContent
-  useSubscribeToEventEmitter.default(constants.CLEAR_FILTERS, function (tableId) {
+  useSubscribeToEventEmitter.default(constants.CLEAR_FILTERS, tableId => {
     reset(tableId);
   });
-  var getScrollableContainerHeight = React.useCallback(function () {
-    var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
-    var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
-    var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
-    var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
-    var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(/* istanbul ignore next */
-    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === constants.BATCH ? actionSetHeight : 0, "px)") : 0;
+  const getScrollableContainerHeight = React.useCallback(() => {
+    const filterHeadingHeight = filterHeadingRef.current?.getBoundingClientRect().height;
+    const filterSearchHeight = filterSearchRef.current?.getBoundingClientRect().height;
+    const actionSetHeight = actionSetRef.current?.getBoundingClientRect().height;
+    const height = panelOpen ? `calc(100vh - ${filterHeadingHeight}px - ${/* istanbul ignore next */
+    showFilterSearch ? filterSearchHeight : 0}px - ${updateMethod === constants.BATCH ? actionSetHeight : 0}px)` : 0;
     return height;
   }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    var height = getScrollableContainerHeight();
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    const height = getScrollableContainerHeight();
     if (innerContainerRef.current && innerContainerRef.current.style && height) {
       innerContainerRef.current.style.height = height;
     }
@@ -247,19 +226,25 @@ var FilterPanel = function FilterPanel(_ref) {
     ref: filterPanelRef,
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
-    className: cx(componentClass, "".concat(componentClass, "__container"), "".concat(componentClass, "--left-placement"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--closing"), !panelOpen), "".concat(componentClass, "--reduced-motion"), shouldReduceMotion), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet))
+    className: cx(componentClass, `${componentClass}__container`, `${componentClass}--left-placement`, {
+      [`${componentClass}--open`]: panelOpen,
+      [`${componentClass}--closing`]: !panelOpen,
+      [`${componentClass}--reduced-motion`]: shouldReduceMotion,
+      [`${componentClass}--batch`]: showActionSet,
+      [`${componentClass}--instant`]: !showActionSet
+    })
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("header", {
     ref: filterHeadingRef,
-    className: cx("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
+    className: cx(`${componentClass}__heading`, {
+      [`${componentClass}__heading--with-divider`]: showDividerLine
+    })
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__title")
+    className: `${componentClass}__title`
   }, title), /*#__PURE__*/React.createElement(react.Button, {
     hasIconOnly: true,
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     iconDescription: closeIconDescription,
     kind: "ghost",
     tooltipPosition: "bottom",
@@ -270,35 +255,39 @@ var FilterPanel = function FilterPanel(_ref) {
   /* istanbul ignore next */
   React.createElement("div", {
     ref: filterSearchRef,
-    className: "".concat(componentClass, "__search")
+    className: `${componentClass}__search`
   }, /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement(react.Search, {
     labelText: searchLabelText,
     placeholder: searchPlaceholder,
     size: "sm"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__inner-container"),
+    className: `${componentClass}__inner-container`,
     ref: innerContainerRef,
     onScroll: onInnerContainerScroll
-  }, filterSections.map(function (_ref2, index) {
-    var _ref2$categoryTitle = _ref2.categoryTitle,
-      categoryTitle = _ref2$categoryTitle === void 0 ? null : _ref2$categoryTitle,
-      _ref2$filters = _ref2.filters,
-      filters = _ref2$filters === void 0 ? [] : _ref2$filters,
-      hasAccordion = _ref2.hasAccordion;
+  }, filterSections.map((_ref2, index) => {
+    let {
+      categoryTitle = null,
+      filters = [],
+      hasAccordion
+    } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: "".concat(componentClass, "__category")
+      className: `${componentClass}__category`
     }, categoryTitle && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(componentClass, "__category-title")
-    }, categoryTitle), hasAccordion ? /*#__PURE__*/React.createElement(react.Accordion, null, filters.map(function (_ref3) {
-      var filterLabel = _ref3.filterLabel,
-        filter = _ref3.filter;
+      className: `${componentClass}__category-title`
+    }, categoryTitle), hasAccordion ? /*#__PURE__*/React.createElement(react.Accordion, null, filters.map(_ref3 => {
+      let {
+        filterLabel,
+        filter
+      } = _ref3;
       return /*#__PURE__*/React.createElement(react.AccordionItem, {
         title: filterLabel,
         key: filterLabel
       }, renderFilter(filter));
-    })) : filters.map(function (_ref4) {
-      var filter = _ref4.filter;
+    })) : filters.map(_ref4 => {
+      let {
+        filter
+      } = _ref4;
       return renderFilter(filter);
     }));
   })), renderActionSet())) : null;

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js

@@ -7,23 +7,20 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../../../_virtual/index.js');
 var constants = require('./constants.js');
 
-var FilterContext = /*#__PURE__*/React.createContext();
-var EventEmitter = {
+const FilterContext = /*#__PURE__*/React.createContext();
+const EventEmitter = {
   events: {},
-  dispatch: function dispatch(event, data) {
+  dispatch: function (event, data) {
     if (!this.events[event]) {
       return;
     }
-    this.events[event].forEach(function (callback) {
-      return callback(data);
-    });
+    this.events[event].forEach(callback => callback(data));
   },
-  subscribe: function subscribe(event, callback) {
+  subscribe: function (event, callback) {
     if (!this.events[event]) {
       this.events[event] = [];
     } else {
@@ -31,58 +28,49 @@ var EventEmitter = {
     }
   }
 };
-var removeFilterItem = function removeFilterItem(state, index) {
-  return state.splice(index, 1);
-};
-var updateFilterState = function updateFilterState(state, type, value) {
+const removeFilterItem = (state, index) => state.splice(index, 1);
+const updateFilterState = (state, type, value) => {
   if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
     return;
   }
   if (type === constants.DATE) {
-    var _filterTagIndex = state.findIndex(function (val) {
-      return formatDateRange(val.value[0], val.value[1]) === formatDateRange(value[0], value[1]);
-    });
-    return removeFilterItem(state, _filterTagIndex);
+    const filterTagIndex = state.findIndex(val => formatDateRange(val.value[0], val.value[1]) === formatDateRange(value[0], value[1]));
+    return removeFilterItem(state, filterTagIndex);
   }
-  var filterTagIndex = state.findIndex(function (val) {
-    return val.value === value;
-  });
+  const filterTagIndex = state.findIndex(val => val.value === value);
   return removeFilterItem(state, filterTagIndex);
 };
-var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state, contextTableId) {
-  var key = _ref.key,
-    value = _ref.value,
-    tableId = _ref.tableId;
+const clearSingleFilter = (_ref, setAllFilters, state, contextTableId) => {
+  let {
+    key,
+    value,
+    tableId
+  } = _ref;
   if (tableId !== contextTableId) {
     return;
   }
-  var tempState = _rollupPluginBabelHelpers.toConsumableArray(state.filters);
-  tempState.forEach(function (f, filterIndex) {
+  const tempState = [...state.filters];
+  tempState.forEach((f, filterIndex) => {
     if (f.id === key) {
-      var filterValues = f.value;
-      var filterType = f.type;
+      const filterValues = f.value;
+      const filterType = f.type;
       updateFilterState(tempState, filterType, value);
       if (filterType === constants.CHECKBOX || filterType === constants.MULTISELECT) {
         /**
           When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
           This checks if all the checkboxes are selected = false and removes it from the array
         */
-        var valueIndex = filterValues.findIndex(function (val) {
-          return val.value === value;
-        });
+        const valueIndex = filterValues.findIndex(val => val.value === value);
         filterValues[valueIndex].selected = false;
-        var updatedFilterObject = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, f), {}, {
-          value: _rollupPluginBabelHelpers.toConsumableArray(filterValues)
-        });
+        const updatedFilterObject = {
+          ...f,
+          value: [...filterValues]
+        };
         tempState[filterIndex] = updatedFilterObject;
-        var index = tempState.findIndex(function (filter) {
-          return filter.id === key;
-        });
+        const index = tempState.findIndex(filter => filter.id === key);
 
         // If all the selected state is false remove from array
-        var shouldRemoveFromArray = tempState[index].value.every(function (val) {
-          return val.selected === false;
-        });
+        const shouldRemoveFromArray = tempState[index].value.every(val => val.selected === false);
         if (shouldRemoveFromArray) {
           removeFilterItem(tempState, index);
         }
@@ -91,102 +79,98 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state, c
   });
   setAllFilters(tempState);
 };
-var handleSingleFilterRemoval = function handleSingleFilterRemoval(key, value, tableId) {
+const handleSingleFilterRemoval = (key, value, tableId) => {
   EventEmitter.dispatch(constants.CLEAR_SINGLE_FILTER, {
-    key: key,
-    value: value,
-    tableId: tableId
+    key,
+    value,
+    tableId
   });
 };
-var formatDateRange = function formatDateRange(startDate, endDate) {
-  var startDateObj = new Date(startDate);
-  var endDateObj = new Date(endDate);
-  return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+const formatDateRange = (startDate, endDate) => {
+  const startDateObj = new Date(startDate);
+  const endDateObj = new Date(endDate);
+  return `${startDateObj.toLocaleDateString()} - ${endDateObj.toLocaleDateString()}`;
 };
-var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLabel, tableId) {
-  var tags = [];
-  filters.forEach(function (_ref2) {
-    var id = _ref2.id,
-      type = _ref2.type,
-      value = _ref2.value;
-    var sharedFilterProps = {
+const prepareFiltersForTags = (filters, renderDateLabel, tableId) => {
+  const tags = [];
+  filters.forEach(_ref2 => {
+    let {
+      id,
+      type,
+      value
+    } = _ref2;
+    const sharedFilterProps = {
       filter: true,
-      onClose: function onClose() {
-        return handleSingleFilterRemoval(id, value, tableId);
-      }
+      onClose: () => handleSingleFilterRemoval(id, value, tableId)
     };
     if (type === constants.DROPDOWN || type === constants.RADIO || type === constants.NUMBER) {
-      tags.push(_rollupPluginBabelHelpers.objectSpread2({
+      tags.push({
         key: id,
-        value: value
-      }, sharedFilterProps));
+        value,
+        ...sharedFilterProps
+      });
     } else if (type === constants.DATE) {
-      var _renderDateLabel;
-      var _value = _rollupPluginBabelHelpers.slicedToArray(value, 2),
-        startDate = _value[0],
-        endDate = _value[1];
-      tags.push(_rollupPluginBabelHelpers.objectSpread2({
+      const [startDate, endDate] = value;
+      tags.push({
         key: id,
-        value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
-      }, sharedFilterProps));
+        value: renderDateLabel?.(startDate, endDate) ?? formatDateRange(startDate, endDate),
+        ...sharedFilterProps
+      });
     } else if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
-      value.forEach(function (option) {
+      value.forEach(option => {
         if (option.selected) {
-          tags.push(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+          tags.push({
             key: id,
-            value: option.value
-          }, sharedFilterProps), {}, {
-            onClose: function onClose() {
-              return handleSingleFilterRemoval(id, option.value, tableId);
-            }
-          }));
+            value: option.value,
+            ...sharedFilterProps,
+            onClose: () => handleSingleFilterRemoval(id, option.value, tableId)
+          });
         }
       });
     }
   });
   return tags;
 };
-var filteringReducer = function filteringReducer(state, action) {
+const filteringReducer = (state, action) => {
   switch (action.type) {
     case constants.SAVED_FILTERS:
       {
-        var _ref3 = action.payload || {},
-          savedFilters = _ref3.savedFilters;
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-          savedFilters: savedFilters
-        });
+        const {
+          savedFilters
+        } = action.payload || {};
+        return {
+          ...state,
+          savedFilters
+        };
       }
     default:
       return state;
   }
 };
-var FilterProvider = function FilterProvider(_ref4) {
-  var children = _ref4.children,
-    filters = _ref4.filters,
-    filterProps = _ref4.filterProps,
-    tableId = _ref4.tableId;
-  var _ref5 = filterProps || {},
-    renderDateLabel = _ref5.renderDateLabel;
-  var filterTags = prepareFiltersForTags(filters, renderDateLabel, tableId);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    panelOpen = _useState2[0],
-    setPanelOpen = _useState2[1];
-  var initialState = {
+const FilterProvider = _ref3 => {
+  let {
+    children,
+    filters,
+    filterProps,
+    tableId
+  } = _ref3;
+  const {
+    renderDateLabel
+  } = filterProps || {};
+  const filterTags = prepareFiltersForTags(filters, renderDateLabel, tableId);
+  const [panelOpen, setPanelOpen] = React.useState(false);
+  const initialState = {
     savedFilters: []
   };
-  var _useReducer = React.useReducer(filteringReducer, initialState),
-    _useReducer2 = _rollupPluginBabelHelpers.slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  var value = {
-    filterTags: filterTags,
-    EventEmitter: EventEmitter,
-    panelOpen: panelOpen,
-    setPanelOpen: setPanelOpen,
-    state: state,
-    dispatch: dispatch,
-    tableId: tableId
+  const [state, dispatch] = React.useReducer(filteringReducer, initialState);
+  const value = {
+    filterTags,
+    EventEmitter,
+    panelOpen,
+    setPanelOpen,
+    state,
+    dispatch,
+    tableId
   };
   return /*#__PURE__*/React.createElement(FilterContext.Provider, {
     value: value