@carbon/ibm-products 2.61.0 → 2.62.0

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

@@ -9,8 +9,6 @@ import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, ext
 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';
-import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
-import { useReducedMotion, motion } from 'framer-motion';
 import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 import { Close } from '@carbon/react/icons';
 import { FilterContext } from './FilterProvider.js';
@@ -20,12 +18,13 @@ import { pkg } from '../../../../../settings.js';
 import { rem } from '@carbon/layout';
 import useFilters from './hooks/useFilters.js';
 import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
+import { usePrefersReducedMotion } from '../../../../../global/js/hooks/usePrefersReducedMotion.js';
+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 MotionActionSet = motion(ActionSet);
 var defaults = {
   title: 'Filter',
   closeIconDescription: 'Close filter panel',
@@ -39,38 +38,38 @@ var defaults = {
 var emptyArray = [];
 var FilterPanel = function FilterPanel(_ref) {
   var _ref$title = _ref.title,
-    title = _ref$title === undefined ? defaults.title : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === undefined ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    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 === undefined ? function () {} : _ref$onApply,
+    onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
     _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === undefined ? function () {} : _ref$onCancel,
+    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$onPanelOpen = _ref.onPanelOpen,
-    onPanelOpen = _ref$onPanelOpen === undefined ? function () {} : _ref$onPanelOpen,
+    onPanelOpen = _ref$onPanelOpen === void 0 ? function () {} : _ref$onPanelOpen,
     _ref$onPanelClose = _ref.onPanelClose,
-    onPanelClose = _ref$onPanelClose === undefined ? function () {} : _ref$onPanelClose,
+    onPanelClose = _ref$onPanelClose === void 0 ? function () {} : _ref$onPanelClose,
     _ref$showFilterSearch = _ref.showFilterSearch,
-    showFilterSearch = _ref$showFilterSearch === undefined ? false : _ref$showFilterSearch,
+    showFilterSearch = _ref$showFilterSearch === void 0 ? false : _ref$showFilterSearch,
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
-    filterPanelMinHeight = _ref$filterPanelMinHe === undefined ? 600 : _ref$filterPanelMinHe,
+    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === undefined ? defaults.primaryActionLabel : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === undefined ? defaults.secondaryActionLabel : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     _ref$searchLabelText = _ref.searchLabelText,
-    searchLabelText = _ref$searchLabelText === undefined ? defaults.searchLabelText : _ref$searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
     _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === undefined ? defaults.searchPlaceholder : _ref$searchPlaceholde,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === undefined ? emptyArray : _ref$reactTableFilter,
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
-    autoHideFilters = _ref$autoHideFilters === undefined ? false : _ref$autoHideFilters,
+    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
     _ref$isFetching = _ref.isFetching,
-    isFetching = _ref$isFetching === undefined ? false : _ref$isFetching;
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -120,7 +119,14 @@ var FilterPanel = function FilterPanel(_ref) {
 
   // NOTE: In the future when we get rid of framer-motion we can use our own usePrefersReducedMotion hook
   // using our own was causing an error
-  var shouldReduceMotion = useReducedMotion();
+  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];
 
   /** Memos */
   var showActionSet = useMemo(function () {
@@ -132,6 +138,22 @@ var FilterPanel = function FilterPanel(_ref) {
     cancel();
     setPanelOpen(false);
   };
+
+  // Set the internal state `animationComplete` to true if
+  // prefers reduced motion is true
+  useEffect(function () {
+    if (shouldReduceMotion) {
+      setAnimationComplete(true);
+    }
+  }, [shouldReduceMotion]);
+
+  // initializes the side panel to open
+  var onAnimationStart = function onAnimationStart() {
+    setAnimationComplete(false);
+  };
+  var onAnimationEnd = function onAnimationEnd() {
+    setAnimationComplete(!animationComplete);
+  };
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     // From the user
@@ -161,7 +183,7 @@ var FilterPanel = function FilterPanel(_ref) {
     });
   };
   var renderActionSet = function renderActionSet() {
-    return showActionSet && /*#__PURE__*/React__default.createElement(MotionActionSet, {
+    return showActionSet && /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: [{
         key: 1,
         kind: 'primary',
@@ -175,10 +197,8 @@ var FilterPanel = function FilterPanel(_ref) {
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
-      className: "".concat(componentClass, "__action-set"),
-      ref: actionSetRef,
-      custom: shouldReduceMotion,
-      variants: actionSetVariants
+      className: cx("".concat(componentClass, "__action-set"), _defineProperty({}, "".concat(componentClass, "__animationComplete"), animationComplete)),
+      ref: actionSetRef
     });
   };
   var onInnerContainerScroll = function onInnerContainerScroll(event) {
@@ -199,8 +219,8 @@ var FilterPanel = function FilterPanel(_ref) {
   }, [panelOpen, onPanelClose, onPanelOpen]);
   useEffect(function setPanelMinimumHeight() {
     var _filterPanelRef$curre;
-    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === undefined || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
-  }, [filterPanelMinHeight]);
+    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
+  }, [filterPanelMinHeight, shouldRender]);
 
   // tableId is passed in from the event emitter from the FilterSummary component
   // in DatagridContent
@@ -209,30 +229,25 @@ var FilterPanel = function FilterPanel(_ref) {
   });
   var getScrollableContainerHeight = useCallback(function () {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
-    var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === undefined ? undefined : _filterHeadingRef$cur.getBoundingClientRect().height;
-    var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === undefined ? undefined : _filterSearchRef$curr.getBoundingClientRect().height;
-    var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === undefined ? undefined : _actionSetRef$current.getBoundingClientRect().height;
+    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;
     return height;
   }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
   useIsomorphicEffect(function () {
     var height = getScrollableContainerHeight();
-    if (innerContainerRef.current && innerContainerRef.current.style) {
+    if (innerContainerRef.current && innerContainerRef.current.style && height) {
       innerContainerRef.current.style.height = height;
     }
-  }, [getScrollableContainerHeight, innerContainerRef]);
-  return /*#__PURE__*/React__default.createElement(motion.div, {
+  }, [getScrollableContainerHeight, innerContainerRef, shouldRender]);
+  return shouldRender ? /*#__PURE__*/React__default.createElement("div", {
     ref: filterPanelRef,
-    className: cx(componentClass, "".concat(componentClass, "__container"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
-    initial: false,
-    animate: panelOpen ? 'visible' : 'hidden',
-    custom: shouldReduceMotion,
-    variants: panelVariants
-  }, /*#__PURE__*/React__default.createElement(motion.div, {
-    custom: shouldReduceMotion,
-    variants: innerContainerVariants
-  }, /*#__PURE__*/React__default.createElement("header", {
+    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))
+  }, /*#__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))
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -265,9 +280,9 @@ var FilterPanel = function FilterPanel(_ref) {
     onScroll: onInnerContainerScroll
   }, filterSections.map(function (_ref2, index) {
     var _ref2$categoryTitle = _ref2.categoryTitle,
-      categoryTitle = _ref2$categoryTitle === undefined ? null : _ref2$categoryTitle,
+      categoryTitle = _ref2$categoryTitle === void 0 ? null : _ref2$categoryTitle,
       _ref2$filters = _ref2.filters,
-      filters = _ref2$filters === undefined ? [] : _ref2$filters,
+      filters = _ref2$filters === void 0 ? [] : _ref2$filters,
       hasAccordion = _ref2.hasAccordion;
     return /*#__PURE__*/React__default.createElement("div", {
       key: index,
@@ -285,7 +300,7 @@ var FilterPanel = function FilterPanel(_ref) {
       var filter = _ref4.filter;
       return renderFilter(filter);
     }));
-  })), renderActionSet()));
+  })), renderActionSet())) : null;
 };
 FilterPanel.propTypes = {
   autoHideFilters: PropTypes.bool,

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

@@ -125,7 +125,7 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
         endDate = _value[1];
       tags.push(_objectSpread2({
         key: id,
-        value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === undefined ? undefined : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== undefined ? _renderDateLabel : formatDateRange(startDate, endDate)
+        value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
       }, sharedFilterProps));
     } else if (type === CHECKBOX || type === MULTISELECT) {
       value.forEach(function (option) {

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

@@ -22,9 +22,9 @@ var OverflowCheckboxes = function OverflowCheckboxes(_ref) {
     type = _ref.type,
     applyFilters = _ref.applyFilters,
     _ref$viewAllLabel = _ref.viewAllLabel,
-    viewAllLabel = _ref$viewAllLabel === undefined ? 'View all' : _ref$viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === void 0 ? 'View all' : _ref$viewAllLabel,
     _ref$viewLessLabel = _ref.viewLessLabel,
-    viewLessLabel = _ref$viewLessLabel === undefined ? 'View less' : _ref$viewLessLabel;
+    viewLessLabel = _ref$viewLessLabel === void 0 ? 'View less' : _ref$viewLessLabel;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showAllItems = _useState2[0],

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

@@ -25,11 +25,7 @@ var MULTISELECT = 'multiSelect';
 var CLEAR_FILTERS = 'clearFilters';
 var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 
-/** Constants for panel dimensions */
-var PANEL_WIDTH = 320;
-var ACTION_SET_HEIGHT = 64;
-
 /** Constants for local reducer */
 var SAVED_FILTERS = 'savedFilters';
 
-export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, MULTISELECT, NUMBER, PANEL, PANEL_WIDTH, RADIO, SAVED_FILTERS };
+export { BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, MULTISELECT, NUMBER, PANEL, RADIO, SAVED_FILTERS };

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

@@ -37,7 +37,7 @@ var handleCheckboxChange = function handleCheckboxChange(_ref) {
     value: _toConsumableArray(filtersState[column].value),
     type: type
   });
-  (_option$onChange = option.onChange) === null || _option$onChange === undefined || _option$onChange.call(option, checked);
+  (_option$onChange = option.onChange) === null || _option$onChange === void 0 || _option$onChange.call(option, checked);
 };
 
 export { handleCheckboxChange };

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

@@ -21,7 +21,7 @@ var emptyArray = [];
 var useFilters = function useFilters(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === undefined ? emptyArray : _ref$filters,
+    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
     setAllFilters = _ref.setAllFilters,
     variation = _ref.variation,
     reactTableFiltersState = _ref.reactTableFiltersState,
@@ -196,7 +196,7 @@ var useFilters = function useFilters(_ref) {
               value: value,
               type: type
             });
-            (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === undefined || _components$DatePicke.call(_components$DatePicke2, value);
+            (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 || _components$DatePicke.call(_components$DatePicke2, value);
           },
           value: filtersState[column].value,
           datePickerType: "range"
@@ -225,7 +225,7 @@ var useFilters = function useFilters(_ref) {
               value: event.target.value,
               type: type
             });
-            (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === undefined || _components$NumberInp.call(_components$NumberInp2, event);
+            (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 || _components$NumberInp.call(_components$NumberInp2, event);
           },
           value: filtersState[column].value
         }));
@@ -239,7 +239,7 @@ var useFilters = function useFilters(_ref) {
           var _components$RadioButt = _objectSpread2({}, components.RadioButtonGroup),
             name = _components$RadioButt.name;
           filter = /*#__PURE__*/React__default.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React__default.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-            valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === undefined ? undefined : _filtersState$column.value) === '' ? (_components$DefaultRa = (_components$DefaultRa2 = components.DefaultRadioButton) === null || _components$DefaultRa2 === undefined ? undefined : _components$DefaultRa2.value) !== null && _components$DefaultRa !== undefined ? _components$DefaultRa : 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === undefined ? undefined : _filtersState$column2.value,
+            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, {
@@ -251,23 +251,23 @@ var useFilters = function useFilters(_ref) {
                 value: selected,
                 type: type
               });
-              (_components$RadioButt2 = (_components$RadioButt3 = components.RadioButtonGroup).onChange) === null || _components$RadioButt2 === undefined || _components$RadioButt2.call(_components$RadioButt3, selected);
+              (_components$RadioButt2 = (_components$RadioButt3 = components.RadioButtonGroup).onChange) === null || _components$RadioButt2 === void 0 || _components$RadioButt2.call(_components$RadioButt3, selected);
             }
           }), /*#__PURE__*/React__default.createElement(RadioButton, _extends({
-            id: (_components$DefaultRa3 = components === null || components === undefined || (_components$DefaultRa4 = components.DefaultRadioButton) === null || _components$DefaultRa4 === undefined ? undefined : _components$DefaultRa4.id) !== null && _components$DefaultRa3 !== undefined ? _components$DefaultRa3 : "any__".concat(name),
-            labelText: (_components$DefaultRa5 = components === null || components === undefined || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === undefined ? undefined : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== undefined ? _components$DefaultRa5 : 'Any',
-            value: (_components$DefaultRa7 = components === null || components === undefined || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === undefined ? undefined : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== undefined ? _components$DefaultRa7 : 'Any'
+            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 !== undefined ? _radio$id : radio.labelText) !== null && _ref7 !== undefined ? _ref7 : radio.value
+              key: (_ref7 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref7 !== void 0 ? _ref7 : radio.value
             }, radio));
           })));
         }
         break;
       case DROPDOWN:
         filter = /*#__PURE__*/React__default.createElement(Dropdown, _extends({}, components.Dropdown, {
-          selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === undefined ? undefined : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === undefined ? undefined : _filtersState$column4.value,
+          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;
@@ -281,7 +281,7 @@ var useFilters = function useFilters(_ref) {
               value: selectedItem,
               type: type
             });
-            (_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === undefined || _components$Dropdown$.call(_components$Dropdown, selectedItem);
+            (_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === void 0 || _components$Dropdown$.call(_components$Dropdown, selectedItem);
           }
         }));
         break;
@@ -289,7 +289,7 @@ var useFilters = function useFilters(_ref) {
         {
           var _filtersState$column5;
           var isStringArray = components.MultiSelect.items.length && typeof components.MultiSelect.items[0] === 'string';
-          var selectedFilters = (_filtersState$column5 = filtersState[column]) === null || _filtersState$column5 === undefined ? undefined : _filtersState$column5.value.filter(function (i) {
+          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) {
@@ -355,7 +355,7 @@ var useFilters = function useFilters(_ref) {
                 value: _toConsumableArray(filtersState[column].value),
                 type: type
               });
-              (_components$MultiSele = components.MultiSelect) === null || _components$MultiSele === undefined || (_components$MultiSele2 = _components$MultiSele.onChange) === null || _components$MultiSele2 === undefined || _components$MultiSele2.call(_components$MultiSele, selectedItems);
+              (_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);
             }
           }));
           break;
@@ -374,10 +374,10 @@ var useFilters = function useFilters(_ref) {
     var _filteredItems$map, _filteredItemsRef$cur, _filteredItemsRef$cur2;
     var filteredItemsId = (_filteredItems$map = filteredItems.map(function (item) {
       return item.id;
-    })) !== null && _filteredItems$map !== undefined ? _filteredItems$map : [];
-    var previousFilteredItemsId = (_filteredItemsRef$cur = filteredItemsRef === null || filteredItemsRef === undefined || (_filteredItemsRef$cur2 = filteredItemsRef.current) === null || _filteredItemsRef$cur2 === undefined ? undefined : _filteredItemsRef$cur2.map(function (item) {
+    })) !== 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 !== undefined ? _filteredItemsRef$cur : [];
+    })) !== null && _filteredItemsRef$cur !== void 0 ? _filteredItemsRef$cur : [];
     var set1 = new Set(filteredItemsId);
     var set2 = new Set(previousFilteredItemsId);
     // Check if the sets have the same size (same number of unique elements)
@@ -397,18 +397,18 @@ var useFilters = function useFilters(_ref) {
    * and populate the filter state with them
    */
   useEffect(function () {
-    if (!panelOpen && previousState !== null && previousState !== undefined && previousState.panelOpen) {
+    if (!panelOpen && previousState !== null && previousState !== void 0 && previousState.panelOpen) {
       revertToPreviousFilters();
       setAllFilters(holdingLastAppliedFiltersRef.current);
     }
-    if (panelOpen && !(previousState !== null && previousState !== undefined && previousState.panelOpen)) {
+    if (panelOpen && !(previousState !== null && previousState !== void 0 && 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 === undefined ? undefined : previousState.panelOpen, reset, setAllFilters, revertToPreviousFilters]);
+  }, [panelOpen, previousState, previousState === null || previousState === void 0 ? void 0 : 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
@@ -434,7 +434,7 @@ var useFilters = function useFilters(_ref) {
       if (savedFilters && savedFilters.length) {
         var _cleanFilters;
         setFiltersObjectArray(savedFilters);
-        var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== undefined ? _cleanFilters : [];
+        var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== void 0 ? _cleanFilters : [];
         setFiltersState(filterStateCopy);
       }
     }

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

@@ -81,7 +81,7 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters, va
   } else if (variation === PANEL) {
     filters.forEach(function (_ref3) {
       var _ref3$filters = _ref3.filters,
-        sections = _ref3$filters === undefined ? [] : _ref3$filters;
+        sections = _ref3$filters === void 0 ? [] : _ref3$filters;
       sections.forEach(function (_ref4) {
         var filter = _ref4.filter;
         return setInitialState(filter);

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -31,7 +31,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React__default.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React__default.createElement("span", {
-    className: cx("".concat(blockClass, "__inline-edit-button-label"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === undefined ? undefined : columnConfig.multiLineWrap))
+    className: cx("".concat(blockClass, "__inline-edit-button-label"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
   }, label) : /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React__default.createElement("div", {