@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button, Layer, Search, Accordion, AccordionItem } from '@carbon/react';
 import { BATCH, CLEAR_FILTERS, PANEL, SAVED_FILTERS, INSTANT } from './constants.js';
 import React__default, { useState, useContext, useRef, useMemo, useEffect, useCallback } from 'react';
@@ -23,9 +23,9 @@ import { usePresence } from '../../../../../global/js/hooks/usePresence.js';
 import useSubscribeToEventEmitter from './hooks/useSubscribeToEventEmitter.js';
 import { useIsomorphicEffect } from '../../../../../global/js/hooks/useIsomorphicEffect.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var componentClass = "".concat(blockClass, "-filter-panel");
-var defaults = {
+const blockClass = `${pkg.prefix}--datagrid`;
+const componentClass = `${blockClass}-filter-panel`;
+const defaults = {
   title: 'Filter',
   closeIconDescription: 'Close filter panel',
   primaryActionLabel: 'Apply',
@@ -35,129 +35,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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showDividerLine = _useState2[0],
-    setShowDividerLine = _useState2[1];
+  const [showDividerLine, setShowDividerLine] = useState(false);
 
   /** Context */
-  var _useContext = useContext(FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen,
-    localDispatch = _useContext.dispatch;
-  var _useFilters = useFilters({
-      updateMethod: updateMethod,
-      filters: filterSections,
-      setAllFilters: setAllFilters,
-      variation: 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
+  } = useContext(FilterContext);
+  const {
+    filtersState,
+    prevFiltersObjectArrayRef,
+    prevFiltersRef,
+    cancel,
+    reset,
+    renderFilter,
+    filtersObjectArray,
+    lastAppliedFilters
+  } = useFilters({
+    updateMethod,
+    filters: filterSections,
+    setAllFilters,
+    variation: PANEL,
+    reactTableFiltersState,
+    onCancel,
+    panelOpen,
+    autoHideFilters,
+    isFetching
+  });
 
   /** Refs */
-  var filterPanelRef = useRef(undefined);
-  var filterHeadingRef = useRef(undefined);
-  var filterSearchRef = useRef(undefined);
-  var actionSetRef = useRef(undefined);
-  var innerContainerRef = useRef(undefined);
+  const filterPanelRef = useRef(undefined);
+  const filterHeadingRef = useRef(undefined);
+  const filterSearchRef = useRef(undefined);
+  const actionSetRef = useRef(undefined);
+  const innerContainerRef = useRef(undefined);
   /** State from hooks */
-  var _useShouldDisableButt = useShouldDisableButtons({
-      initialValue: true,
-      filtersState: filtersState,
-      prevFiltersRef: prevFiltersRef
-    }),
-    _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
-    shouldDisableButtons = _useShouldDisableButt2[0],
-    setShouldDisableButtons = _useShouldDisableButt2[1];
-  var shouldReduceMotion = usePrefersReducedMotion();
-  var exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';
-  var _usePresence = usePresence(panelOpen, filterPanelRef, exitAnimationName),
-    shouldRender = _usePresence.shouldRender;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    animationComplete = _useState4[0],
-    setAnimationComplete = _useState4[1];
+  const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons({
+    initialValue: true,
+    filtersState,
+    prevFiltersRef
+  });
+  const shouldReduceMotion = usePrefersReducedMotion();
+  const exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';
+  const {
+    shouldRender
+  } = usePresence(panelOpen, filterPanelRef, exitAnimationName);
+  const [animationComplete, setAnimationComplete] = useState(false);
 
   /** Memos */
-  var showActionSet = useMemo(function () {
-    return updateMethod === BATCH;
-  }, [updateMethod]);
+  const showActionSet = useMemo(() => updateMethod === 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
-  useEffect(function () {
+  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);
@@ -179,7 +158,7 @@ var FilterPanel = function FilterPanel(_ref) {
       }
     });
   };
-  var renderActionSet = function renderActionSet() {
+  const renderActionSet = () => {
     return showActionSet && /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: [{
         key: 1,
@@ -194,11 +173,13 @@ var FilterPanel = function FilterPanel(_ref) {
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
-      className: cx("".concat(componentClass, "__action-set"), _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 {
@@ -215,26 +196,24 @@ var FilterPanel = function FilterPanel(_ref) {
     }
   }, [panelOpen, onPanelClose, onPanelOpen]);
   useEffect(function setPanelMinimumHeight() {
-    var _filterPanelRef$curre;
-    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
+    filterPanelRef.current?.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
   }, [filterPanelMinHeight, shouldRender]);
 
   // tableId is passed in from the event emitter from the FilterSummary component
   // in DatagridContent
-  useSubscribeToEventEmitter(CLEAR_FILTERS, function (tableId) {
+  useSubscribeToEventEmitter(CLEAR_FILTERS, tableId => {
     reset(tableId);
   });
-  var getScrollableContainerHeight = 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 === BATCH ? actionSetHeight : 0, "px)") : 0;
+  const getScrollableContainerHeight = 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 === BATCH ? actionSetHeight : 0}px)` : 0;
     return height;
   }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
-  useIsomorphicEffect(function () {
-    var height = getScrollableContainerHeight();
+  useIsomorphicEffect(() => {
+    const height = getScrollableContainerHeight();
     if (innerContainerRef.current && innerContainerRef.current.style && height) {
       innerContainerRef.current.style.height = height;
     }
@@ -243,19 +222,25 @@ var FilterPanel = function FilterPanel(_ref) {
     ref: filterPanelRef,
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
-    className: cx(componentClass, "".concat(componentClass, "__container"), "".concat(componentClass, "--left-placement"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_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__default.createElement("div", null, /*#__PURE__*/React__default.createElement("header", {
     ref: filterHeadingRef,
-    className: cx("".concat(componentClass, "__heading"), _defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
+    className: cx(`${componentClass}__heading`, {
+      [`${componentClass}__heading--with-divider`]: showDividerLine
+    })
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(componentClass, "__title")
+    className: `${componentClass}__title`
   }, title), /*#__PURE__*/React__default.createElement(Button, {
     hasIconOnly: true,
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Close, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Close, _extends({
+      size: 16
+    }, props)),
     iconDescription: closeIconDescription,
     kind: "ghost",
     tooltipPosition: "bottom",
@@ -266,35 +251,39 @@ var FilterPanel = function FilterPanel(_ref) {
   /* istanbul ignore next */
   React__default.createElement("div", {
     ref: filterSearchRef,
-    className: "".concat(componentClass, "__search")
+    className: `${componentClass}__search`
   }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement(Search, {
     labelText: searchLabelText,
     placeholder: searchPlaceholder,
     size: "sm"
   })))), /*#__PURE__*/React__default.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__default.createElement("div", {
       key: index,
-      className: "".concat(componentClass, "__category")
+      className: `${componentClass}__category`
     }, categoryTitle && /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(componentClass, "__category-title")
-    }, categoryTitle), hasAccordion ? /*#__PURE__*/React__default.createElement(Accordion, null, filters.map(function (_ref3) {
-      var filterLabel = _ref3.filterLabel,
-        filter = _ref3.filter;
+      className: `${componentClass}__category-title`
+    }, categoryTitle), hasAccordion ? /*#__PURE__*/React__default.createElement(Accordion, null, filters.map(_ref3 => {
+      let {
+        filterLabel,
+        filter
+      } = _ref3;
       return /*#__PURE__*/React__default.createElement(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/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js

@@ -5,23 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useReducer, createContext } from 'react';
 import PropTypes from '../../../../../_virtual/index.js';
 import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, MULTISELECT, SAVED_FILTERS, CLEAR_SINGLE_FILTER } from './constants.js';
 
-var FilterContext = /*#__PURE__*/createContext();
-var EventEmitter = {
+const FilterContext = /*#__PURE__*/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 {
@@ -29,58 +26,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 === CHECKBOX || type === MULTISELECT) {
     return;
   }
   if (type === 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 = _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 === CHECKBOX || filterType === 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 = _objectSpread2(_objectSpread2({}, f), {}, {
-          value: _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);
         }
@@ -89,102 +77,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(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 === DROPDOWN || type === RADIO || type === NUMBER) {
-      tags.push(_objectSpread2({
+      tags.push({
         key: id,
-        value: value
-      }, sharedFilterProps));
+        value,
+        ...sharedFilterProps
+      });
     } else if (type === DATE) {
-      var _renderDateLabel;
-      var _value = _slicedToArray(value, 2),
-        startDate = _value[0],
-        endDate = _value[1];
-      tags.push(_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 === CHECKBOX || type === MULTISELECT) {
-      value.forEach(function (option) {
+      value.forEach(option => {
         if (option.selected) {
-          tags.push(_objectSpread2(_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 SAVED_FILTERS:
       {
-        var _ref3 = action.payload || {},
-          savedFilters = _ref3.savedFilters;
-        return _objectSpread2(_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 = useState(false),
-    _useState2 = _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] = useState(false);
+  const initialState = {
     savedFilters: []
   };
-  var _useReducer = useReducer(filteringReducer, initialState),
-    _useReducer2 = _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] = useReducer(filteringReducer, initialState);
+  const value = {
+    filterTags,
+    EventEmitter,
+    panelOpen,
+    setPanelOpen,
+    state,
+    dispatch,
+    tableId
   };
   return /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
     value: value