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

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { BATCH, MULTISELECT, DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, INSTANT, PANEL } from '../constants.js';
 import { MultiSelect, Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
 import React__default, { useContext, useState, useRef, useCallback, useEffect } from 'react';
@@ -17,52 +17,47 @@ import uuidv4 from '../../../../../../global/js/utils/uuidv4.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
 
 // Use same empty array every time, for benefit of useEffect() etc. dependency checking.
-var emptyArray = [];
-var useFilters = function useFilters(_ref) {
-  var updateMethod = _ref.updateMethod,
-    _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
-    setAllFilters = _ref.setAllFilters,
-    variation = _ref.variation,
-    reactTableFiltersState = _ref.reactTableFiltersState,
-    onCancel = _ref.onCancel,
-    panelOpen = _ref.panelOpen,
-    autoHideFilters = _ref.autoHideFilters,
-    isFetching = _ref.isFetching;
-  var _useContext = useContext(FilterContext),
-    state = _useContext.state,
-    contextTableId = _useContext.tableId;
-  var savedFilters = state.savedFilters;
+const emptyArray = [];
+const useFilters = _ref => {
+  let {
+    updateMethod,
+    filters = emptyArray,
+    setAllFilters,
+    variation,
+    reactTableFiltersState,
+    onCancel,
+    panelOpen,
+    autoHideFilters,
+    isFetching
+  } = _ref;
+  const {
+    state,
+    tableId: contextTableId
+  } = useContext(FilterContext);
+  const {
+    savedFilters
+  } = state;
   /** State */
-  var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
-    _useState2 = _slicedToArray(_useState, 2),
-    filtersState = _useState2[0],
-    setFiltersState = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    fetchingReset = _useState4[0],
-    setFetchingReset = _useState4[1];
-  var _useState5 = useState(reactTableFiltersState),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filtersObjectArray = _useState6[0],
-    setFiltersObjectArray = _useState6[1];
-  var previousState = usePreviousValue({
-    panelOpen: panelOpen
+  const [filtersState, setFiltersState] = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState));
+  const [fetchingReset, setFetchingReset] = useState(false);
+  const [filtersObjectArray, setFiltersObjectArray] = useState(reactTableFiltersState);
+  const previousState = usePreviousValue({
+    panelOpen
   });
-  var filteredItemsRef = useRef(undefined);
+  const filteredItemsRef = useRef(undefined);
 
   // When using batch actions we have to store the filters to then apply them later
-  var prevFiltersRef = useRef(JSON.stringify(filtersState));
-  var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
-  var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
-  var holdingPrevFiltersRef = useRef(undefined);
-  var holdingLastAppliedFiltersRef = useRef([]);
-  var holdingPrevFiltersObjectArrayRef = useRef([]);
+  const prevFiltersRef = useRef(JSON.stringify(filtersState));
+  const lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
+  const prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
+  const holdingPrevFiltersRef = useRef(undefined);
+  const holdingLastAppliedFiltersRef = useRef([]);
+  const holdingPrevFiltersObjectArrayRef = useRef([]);
 
   /** Methods */
   // If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
   // there when they opened the flyout
-  var revertToPreviousFilters = useCallback(function () {
+  const revertToPreviousFilters = useCallback(() => {
     setFiltersState(JSON.parse(prevFiltersRef.current));
     setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
     setAllFilters(JSON.parse(lastAppliedFilters.current));
@@ -73,16 +68,16 @@ var useFilters = function useFilters(_ref) {
     holdingLastAppliedFiltersRef.current = JSON.parse(prevFiltersObjectArrayRef.current);
     holdingPrevFiltersObjectArrayRef.current = JSON.parse(lastAppliedFilters.current);
   }, [setAllFilters]);
-  var reset = useCallback(function (tableId) {
+  const reset = useCallback(tableId => {
     // only reset filters if tableid of the datagrid that triggered "clear filters"
     // matches the table id stored in its context instance
     if (tableId === contextTableId) {
       // When we reset we want the "initialFilters" to be an empty array
-      var resetFiltersArray = [];
+      const resetFiltersArray = [];
 
       // Get the initial values for the filters
-      var initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
-      var initialFiltersObjectArray = [];
+      const initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
+      const initialFiltersObjectArray = [];
 
       // Set the state to the initial values
       setFiltersState(initialFiltersState);
@@ -95,19 +90,19 @@ var useFilters = function useFilters(_ref) {
       lastAppliedFilters.current = JSON.stringify([]);
     }
   }, [filters, setAllFilters, variation, contextTableId]);
-  var applyFilters = function applyFilters(_ref2) {
-    var column = _ref2.column,
-      value = _ref2.value,
-      type = _ref2.type;
+  const applyFilters = _ref2 => {
+    let {
+      column,
+      value,
+      type
+    } = _ref2;
     // If no end date is selected return because we need the end date to do computations
     if (type === DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filterCopy = _toConsumableArray(filtersObjectArray);
+    const filterCopy = [...filtersObjectArray];
     // // check if the filter already exists in the array
-    var filter = filterCopy.find(function (item) {
-      return item.id === column;
-    });
+    const filter = filterCopy.find(item => item.id === column);
 
     // // if filter exists in array then update the filter's new value
     if (filter) {
@@ -115,22 +110,26 @@ var useFilters = function useFilters(_ref) {
     } else {
       filterCopy.push({
         id: column,
-        value: value,
-        type: type
+        value,
+        type
       });
     }
-    var index = filterCopy.findIndex(function (_ref3) {
-      var id = _ref3.id;
+    const index = filterCopy.findIndex(_ref3 => {
+      let {
+        id
+      } = _ref3;
       return id === column;
     });
-    var clearCheckbox = (type === CHECKBOX || type === MULTISELECT) && filterCopy[index].value.every(function (_ref4) {
-      var selected = _ref4.selected;
+    const clearCheckbox = (type === CHECKBOX || type === MULTISELECT) && filterCopy[index].value.every(_ref4 => {
+      let {
+        selected
+      } = _ref4;
       return selected === false;
     });
-    var clearDate = type === DATE && value.length === 0;
-    var clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
-    var clearNum = type === NUMBER && value === '';
-    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    const clearDate = type === DATE && value.length === 0;
+    const clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
+    const clearNum = type === NUMBER && value === '';
+    const shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
     if (shouldClear) {
       filterCopy.splice(index, 1);
     }
@@ -141,17 +140,19 @@ var useFilters = function useFilters(_ref) {
   };
 
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref5) {
-    var _OverflowCheckboxes, _filtersState$column3, _filtersState$column4;
-    var type = _ref5.type,
-      column = _ref5.column,
-      components = _ref5.props;
-    var filter;
-    var isPanel = variation === PANEL;
+  const renderFilter = _ref5 => {
+    var _OverflowCheckboxes;
+    let {
+      type,
+      column,
+      props: components
+    } = _ref5;
+    let filter;
+    const isPanel = variation === PANEL;
     if (!type) {
-      return console.error("type: ".concat(type, "; does not exist as a type of filter."));
+      return console.error(`type: ${type}; does not exist as a type of filter.`);
     }
-    var renderCheckboxes = function renderCheckboxes() {
+    const renderCheckboxes = () => {
       if (variation === PANEL && filtersState[column].value.length > 10 && !autoHideFilters) {
         return _OverflowCheckboxes || (_OverflowCheckboxes = /*#__PURE__*/React__default.createElement(OverflowCheckboxes, {
           components: components,
@@ -162,41 +163,43 @@ var useFilters = function useFilters(_ref) {
           applyFilters: applyFilters
         }));
       }
-      return /*#__PURE__*/React__default.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
-        return /*#__PURE__*/React__default.createElement(Checkbox, _extends({
-          key: option.id
-        }, option, {
-          onChange: function onChange(_, _ref6) {
-            var checked = _ref6.checked;
-            handleCheckboxChange({
-              checked: checked,
-              filtersState: filtersState,
-              column: column,
-              option: option,
-              setFiltersState: setFiltersState,
-              applyFilters: applyFilters,
-              type: type
-            });
-          },
-          checked: option.selected
-        }));
-      }));
+      return /*#__PURE__*/React__default.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(option => /*#__PURE__*/React__default.createElement(Checkbox, _extends({
+        key: option.id
+      }, option, {
+        onChange: (_, _ref6) => {
+          let {
+            checked
+          } = _ref6;
+          handleCheckboxChange({
+            checked,
+            filtersState,
+            column,
+            option,
+            setFiltersState,
+            applyFilters,
+            type
+          });
+        },
+        checked: option.selected
+      }))));
     };
     switch (type) {
       case DATE:
         filter = /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, components.DatePicker, {
-          onChange: function onChange(value) {
-            var _components$DatePicke, _components$DatePicke2;
-            setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
-              value: value,
-              type: type
-            })));
+          onChange: value => {
+            setFiltersState({
+              ...filtersState,
+              [column]: {
+                value,
+                type
+              }
+            });
             applyFilters({
-              column: column,
-              value: value,
-              type: type
+              column,
+              value,
+              type
             });
-            (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 || _components$DatePicke.call(_components$DatePicke2, value);
+            components.DatePicker.onChange?.(value);
           },
           value: filtersState[column].value,
           datePickerType: "range"
@@ -214,18 +217,20 @@ var useFilters = function useFilters(_ref) {
           allowEmpty: true,
           hideSteppers: true
         }, components.NumberInput, {
-          onChange: function onChange(event) {
-            var _components$NumberInp, _components$NumberInp2;
-            setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
-              value: event.target.value,
-              type: type
-            })));
+          onChange: event => {
+            setFiltersState({
+              ...filtersState,
+              [column]: {
+                value: event.target.value,
+                type
+              }
+            });
             applyFilters({
-              column: column,
+              column,
               value: event.target.value,
-              type: type
+              type
             });
-            (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 || _components$NumberInp.call(_components$NumberInp2, event);
+            components.NumberInput.onChange?.(event);
           },
           value: filtersState[column].value
         }));
@@ -235,76 +240,76 @@ var useFilters = function useFilters(_ref) {
         break;
       case RADIO:
         {
-          var _filtersState$column, _components$DefaultRa, _components$DefaultRa2, _filtersState$column2, _components$DefaultRa3, _components$DefaultRa4, _components$DefaultRa5, _components$DefaultRa6, _components$DefaultRa7, _components$DefaultRa8;
-          var _components$RadioButt = _objectSpread2({}, components.RadioButtonGroup),
-            name = _components$RadioButt.name;
+          const {
+            name
+          } = {
+            ...components.RadioButtonGroup
+          };
           filter = /*#__PURE__*/React__default.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React__default.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-            valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? (_components$DefaultRa = (_components$DefaultRa2 = components.DefaultRadioButton) === null || _components$DefaultRa2 === void 0 ? void 0 : _components$DefaultRa2.value) !== null && _components$DefaultRa !== void 0 ? _components$DefaultRa : 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
-            onChange: function onChange(selected) {
-              var _components$RadioButt2, _components$RadioButt3;
-              setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
-                value: selected,
-                type: type
-              })));
+            valueSelected: filtersState[column]?.value === '' ? components.DefaultRadioButton?.value ?? 'Any' : filtersState[column]?.value,
+            onChange: selected => {
+              setFiltersState({
+                ...filtersState,
+                [column]: {
+                  value: selected,
+                  type
+                }
+              });
               applyFilters({
-                column: column,
+                column,
                 value: selected,
-                type: type
+                type
               });
-              (_components$RadioButt2 = (_components$RadioButt3 = components.RadioButtonGroup).onChange) === null || _components$RadioButt2 === void 0 || _components$RadioButt2.call(_components$RadioButt3, selected);
+              components.RadioButtonGroup.onChange?.(selected);
             }
           }), /*#__PURE__*/React__default.createElement(RadioButton, _extends({
-            id: (_components$DefaultRa3 = components === null || components === void 0 || (_components$DefaultRa4 = components.DefaultRadioButton) === null || _components$DefaultRa4 === void 0 ? void 0 : _components$DefaultRa4.id) !== null && _components$DefaultRa3 !== void 0 ? _components$DefaultRa3 : "any__".concat(name),
-            labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
-            value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
-          }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref7, _radio$id;
-            return /*#__PURE__*/React__default.createElement(RadioButton, _extends({
-              key: (_ref7 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref7 !== void 0 ? _ref7 : radio.value
-            }, radio));
-          })));
+            id: components?.DefaultRadioButton?.id ?? `any__${name}`,
+            labelText: components?.DefaultRadioButton?.labelText ?? 'Any',
+            value: components?.DefaultRadioButton?.value ?? 'Any'
+          }, components.DefaultRadioButton)), components.RadioButton.map(radio => /*#__PURE__*/React__default.createElement(RadioButton, _extends({
+            key: radio.id ?? radio.labelText ?? radio.value
+          }, radio)))));
         }
         break;
       case DROPDOWN:
         filter = /*#__PURE__*/React__default.createElement(Dropdown, _extends({}, components.Dropdown, {
-          selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
-          items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
-          onChange: function onChange(_ref8) {
-            var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref8.selectedItem;
-            setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
-              value: selectedItem,
-              type: type
-            })));
+          selectedItem: filtersState[column]?.value === '' ? 'Any' : filtersState[column]?.value,
+          items: ['Any', ...components.Dropdown.items],
+          onChange: _ref7 => {
+            let {
+              selectedItem
+            } = _ref7;
+            setFiltersState({
+              ...filtersState,
+              [column]: {
+                value: selectedItem,
+                type
+              }
+            });
             applyFilters({
-              column: column,
+              column,
               value: selectedItem,
-              type: type
+              type
             });
-            (_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === void 0 || _components$Dropdown$.call(_components$Dropdown, selectedItem);
+            components.Dropdown.onChange?.(selectedItem);
           }
         }));
         break;
       case MULTISELECT:
         {
-          var _filtersState$column5;
-          var isStringArray = components.MultiSelect.items.length && typeof components.MultiSelect.items[0] === 'string';
-          var selectedFilters = (_filtersState$column5 = filtersState[column]) === null || _filtersState$column5 === void 0 ? void 0 : _filtersState$column5.value.filter(function (i) {
-            return i.selected;
-          });
-          var filteredItems = components.MultiSelect.items.map(function (item) {
-            if (selectedFilters.filter(function (a) {
-              return isStringArray ? a.id === item : a.id === item.id;
-            }).length) {
+          const isStringArray = components.MultiSelect.items.length && typeof components.MultiSelect.items[0] === 'string';
+          const selectedFilters = filtersState[column]?.value.filter(i => i.selected);
+          const filteredItems = components.MultiSelect.items.map(item => {
+            if (selectedFilters.filter(a => isStringArray ? a.id === item : a.id === item.id).length) {
               return item;
             }
             return null;
           }).filter(Boolean);
-          var isEqual = compareFilterItems(filteredItems);
+          const isEqual = compareFilterItems(filteredItems);
           if (!isEqual) {
-            filteredItemsRef.current = _toConsumableArray(filteredItems);
+            filteredItemsRef.current = [...filteredItems];
           }
-          var getKey = function getKey() {
+          const getKey = () => {
             return isEqual ? {
               key: uuidv4()
             } : column;
@@ -312,50 +317,44 @@ var useFilters = function useFilters(_ref) {
           filter = /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, components.MultiSelect, {
             selectedItems: filteredItems,
             key: getKey(),
-            onChange: function onChange(_ref9) {
-              var _components$MultiSele, _components$MultiSele2;
-              var selectedItems = _ref9.selectedItems;
-              var allOptions = filtersState[column].value;
+            onChange: _ref8 => {
+              let {
+                selectedItems
+              } = _ref8;
+              const allOptions = filtersState[column].value;
               // Find selected items from list of options
-              var foundItems = selectedItems.map(function (item) {
-                if (allOptions.filter(function (option) {
-                  return isStringArray ? option.id === item : option.id === item.id;
-                })) {
-                  return allOptions.filter(function (option) {
-                    return isStringArray ? option.id === item : option.id === item.id;
-                  })[0];
+              const foundItems = selectedItems.map(item => {
+                if (allOptions.filter(option => isStringArray ? option.id === item : option.id === item.id)) {
+                  return allOptions.filter(option => isStringArray ? option.id === item : option.id === item.id)[0];
                 }
                 return null;
               }).filter(Boolean);
-              filteredItemsRef.current = _toConsumableArray(foundItems);
+              filteredItemsRef.current = [...foundItems];
 
               // Change selected state for those items that have been selected
-              allOptions.map(function (a) {
-                return a.selected = false;
-              });
-              foundItems.map(function (item) {
-                var foundOriginalItem = allOptions.filter(function (a) {
-                  return isStringArray ? a === item : a.id === item.id;
-                });
+              allOptions.map(a => a.selected = false);
+              foundItems.map(item => {
+                const foundOriginalItem = allOptions.filter(a => isStringArray ? a === item : a.id === item.id);
                 if (foundOriginalItem && foundOriginalItem.length) {
                   foundOriginalItem[0].selected = true;
                 }
               });
               if (!selectedItems.length) {
-                allOptions.map(function (a) {
-                  return a.selected = false;
-                });
+                allOptions.map(a => a.selected = false);
               }
-              setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
-                value: allOptions,
-                type: type
-              })));
+              setFiltersState({
+                ...filtersState,
+                [column]: {
+                  value: allOptions,
+                  type
+                }
+              });
               applyFilters({
-                column: column,
-                value: _toConsumableArray(filtersState[column].value),
-                type: type
+                column,
+                value: [...filtersState[column].value],
+                type
               });
-              (_components$MultiSele = components.MultiSelect) === null || _components$MultiSele === void 0 || (_components$MultiSele2 = _components$MultiSele.onChange) === null || _components$MultiSele2 === void 0 || _components$MultiSele2.call(_components$MultiSele, selectedItems);
+              components.MultiSelect?.onChange?.(selectedItems);
             }
           }));
           break;
@@ -370,24 +369,17 @@ var useFilters = function useFilters(_ref) {
       key: column
     }, filter);
   };
-  var compareFilterItems = function compareFilterItems(filteredItems) {
-    var _filteredItems$map, _filteredItemsRef$cur, _filteredItemsRef$cur2;
-    var filteredItemsId = (_filteredItems$map = filteredItems.map(function (item) {
-      return item.id;
-    })) !== null && _filteredItems$map !== void 0 ? _filteredItems$map : [];
-    var previousFilteredItemsId = (_filteredItemsRef$cur = filteredItemsRef === null || filteredItemsRef === void 0 || (_filteredItemsRef$cur2 = filteredItemsRef.current) === null || _filteredItemsRef$cur2 === void 0 ? void 0 : _filteredItemsRef$cur2.map(function (item) {
-      return item.id;
-    })) !== null && _filteredItemsRef$cur !== void 0 ? _filteredItemsRef$cur : [];
-    var set1 = new Set(filteredItemsId);
-    var set2 = new Set(previousFilteredItemsId);
+  const compareFilterItems = filteredItems => {
+    const filteredItemsId = filteredItems.map(item => item.id) ?? [];
+    const previousFilteredItemsId = filteredItemsRef?.current?.map(item => item.id) ?? [];
+    const set1 = new Set(filteredItemsId);
+    const set2 = new Set(previousFilteredItemsId);
     // Check if the sets have the same size (same number of unique elements)
     if (set1.size !== set2.size) {
       return false;
     }
     // Check if all elements in set1 are also present in set2 (using spread syntax)
-    return _toConsumableArray(set1).every(function (element) {
-      return set2.has(element);
-    });
+    return [...set1].every(element => set2.has(element));
   };
 
   /** This useEffect will properly handle the previous filters when the panel closes
@@ -396,23 +388,23 @@ var useFilters = function useFilters(_ref) {
    * 2. When the panel opens again, take the values from the temporary place
    * and populate the filter state with them
    */
-  useEffect(function () {
-    if (!panelOpen && previousState !== null && previousState !== void 0 && previousState.panelOpen) {
+  useEffect(() => {
+    if (!panelOpen && previousState?.panelOpen) {
       revertToPreviousFilters();
       setAllFilters(holdingLastAppliedFiltersRef.current);
     }
-    if (panelOpen && !(previousState !== null && previousState !== void 0 && previousState.panelOpen)) {
+    if (panelOpen && !previousState?.panelOpen) {
       if (holdingPrevFiltersRef.current && holdingLastAppliedFiltersRef.current && holdingPrevFiltersObjectArrayRef.current) {
         setFiltersState(holdingPrevFiltersRef.current);
         setFiltersObjectArray(holdingLastAppliedFiltersRef.current);
         setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       }
     }
-  }, [panelOpen, previousState, previousState === null || previousState === void 0 ? void 0 : previousState.panelOpen, reset, setAllFilters, revertToPreviousFilters]);
+  }, [panelOpen, previousState, previousState?.panelOpen, reset, setAllFilters, revertToPreviousFilters]);
 
   // Re-applies filters if the Datagrid goes into a fetching state while panel is open
   // and has had filters changed without applying
-  useEffect(function () {
+  useEffect(() => {
     if (isFetching && !fetchingReset) {
       setFiltersState(JSON.parse(prevFiltersRef.current));
       setFiltersObjectArray(JSON.parse(prevFiltersRef.current));
@@ -420,9 +412,11 @@ var useFilters = function useFilters(_ref) {
       setFetchingReset(true);
     }
     if (isFetching && fetchingReset) {
-      var cleanFilters = function cleanFilters(originalFilterState) {
-        var copy = _objectSpread2({}, originalFilterState);
-        var updatedFilters = savedFilters.map(function (f) {
+      const cleanFilters = originalFilterState => {
+        const copy = {
+          ...originalFilterState
+        };
+        const updatedFilters = savedFilters.map(f => {
           if (Object.hasOwn(copy, f.id)) {
             copy[f.id] = f;
             return copy;
@@ -432,9 +426,8 @@ var useFilters = function useFilters(_ref) {
         return updatedFilters[0];
       };
       if (savedFilters && savedFilters.length) {
-        var _cleanFilters;
         setFiltersObjectArray(savedFilters);
-        var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== void 0 ? _cleanFilters : [];
+        const filterStateCopy = cleanFilters(filtersState) ?? [];
         setFiltersState(filterStateCopy);
       }
     }
@@ -443,7 +436,7 @@ var useFilters = function useFilters(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
-  var cancel = function cancel() {
+  const cancel = () => {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {
       revertToPreviousFilters();
@@ -454,23 +447,23 @@ var useFilters = function useFilters(_ref) {
   /** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
       those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
   useEffect(function updateStateAndFiltersToReflectExternalFilterChanges() {
-    var newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
+    const newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
     setFiltersState(newFiltersState);
     prevFiltersRef.current = JSON.stringify(newFiltersState);
     prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
     setFiltersObjectArray(reactTableFiltersState);
   }, [filters, reactTableFiltersState, variation]);
   return {
-    filtersState: filtersState,
-    setFiltersState: setFiltersState,
-    prevFiltersObjectArrayRef: prevFiltersObjectArrayRef,
-    prevFiltersRef: prevFiltersRef,
-    revertToPreviousFilters: revertToPreviousFilters,
-    reset: reset,
-    renderFilter: renderFilter,
-    filtersObjectArray: filtersObjectArray,
-    lastAppliedFilters: lastAppliedFilters,
-    cancel: cancel
+    filtersState,
+    setFiltersState,
+    prevFiltersObjectArrayRef,
+    prevFiltersRef,
+    revertToPreviousFilters,
+    reset,
+    renderFilter,
+    filtersObjectArray,
+    lastAppliedFilters,
+    cancel
   };
 };