@carbon/ibm-products 2.61.0 → 2.62.0

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

@@ -13,8 +13,6 @@ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBa
 var react = require('@carbon/react');
 var constants = require('./constants.js');
 var React = require('react');
-var variants = require('./motion/variants.js');
-var framerMotion = require('framer-motion');
 var ActionSet = require('../../../../ActionSet/ActionSet.js');
 var icons = require('@carbon/react/icons');
 var FilterProvider = require('./FilterProvider.js');
@@ -24,12 +22,13 @@ var settings = require('../../../../../settings.js');
 var layout = require('@carbon/layout');
 var useFilters = require('./hooks/useFilters.js');
 var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
+var usePrefersReducedMotion = require('../../../../../global/js/hooks/usePrefersReducedMotion.js');
+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 MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
 var defaults = {
   title: 'Filter',
   closeIconDescription: 'Close filter panel',
@@ -43,38 +42,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 = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -124,7 +123,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 = framerMotion.useReducedMotion();
+  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];
 
   /** Memos */
   var showActionSet = React.useMemo(function () {
@@ -136,6 +142,22 @@ var FilterPanel = function FilterPanel(_ref) {
     cancel();
     setPanelOpen(false);
   };
+
+  // Set the internal state `animationComplete` to true if
+  // prefers reduced motion is true
+  React.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
@@ -165,7 +187,7 @@ var FilterPanel = function FilterPanel(_ref) {
     });
   };
   var renderActionSet = function renderActionSet() {
-    return showActionSet && /*#__PURE__*/React.createElement(MotionActionSet, {
+    return showActionSet && /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: [{
         key: 1,
         kind: 'primary',
@@ -179,10 +201,8 @@ var FilterPanel = function FilterPanel(_ref) {
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
-      className: "".concat(componentClass, "__action-set"),
-      ref: actionSetRef,
-      custom: shouldReduceMotion,
-      variants: variants.actionSetVariants
+      className: cx("".concat(componentClass, "__action-set"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__animationComplete"), animationComplete)),
+      ref: actionSetRef
     });
   };
   var onInnerContainerScroll = function onInnerContainerScroll(event) {
@@ -203,8 +223,8 @@ var FilterPanel = function FilterPanel(_ref) {
   }, [panelOpen, onPanelClose, onPanelOpen]);
   React.useEffect(function setPanelMinimumHeight() {
     var _filterPanelRef$curre;
-    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === undefined || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', layout.rem(filterPanelMinHeight));
-  }, [filterPanelMinHeight]);
+    (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.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
@@ -213,30 +233,25 @@ var FilterPanel = function FilterPanel(_ref) {
   });
   var getScrollableContainerHeight = React.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 === constants.BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
   }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
   useIsomorphicEffect.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.createElement(framerMotion.motion.div, {
+  }, [getScrollableContainerHeight, innerContainerRef, shouldRender]);
+  return shouldRender ? /*#__PURE__*/React.createElement("div", {
     ref: filterPanelRef,
-    className: cx(componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
-    initial: false,
-    animate: panelOpen ? 'visible' : 'hidden',
-    custom: shouldReduceMotion,
-    variants: variants.panelVariants
-  }, /*#__PURE__*/React.createElement(framerMotion.motion.div, {
-    custom: shouldReduceMotion,
-    variants: variants.innerContainerVariants
-  }, /*#__PURE__*/React.createElement("header", {
+    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))
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("header", {
     ref: filterHeadingRef,
     className: cx("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
   }, /*#__PURE__*/React.createElement("div", {
@@ -269,9 +284,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.createElement("div", {
       key: index,
@@ -289,7 +304,7 @@ var FilterPanel = function FilterPanel(_ref) {
       var filter = _ref4.filter;
       return renderFilter(filter);
     }));
-  })), renderActionSet()));
+  })), renderActionSet())) : null;
 };
 FilterPanel.propTypes = {
   autoHideFilters: index.default.bool,

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

@@ -127,7 +127,7 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
         endDate = _value[1];
       tags.push(_rollupPluginBabelHelpers.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 === constants.CHECKBOX || type === constants.MULTISELECT) {
       value.forEach(function (option) {

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

@@ -26,9 +26,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 = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     showAllItems = _useState2[0],

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

@@ -27,14 +27,9 @@ 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';
 
-exports.ACTION_SET_HEIGHT = ACTION_SET_HEIGHT;
 exports.BATCH = BATCH;
 exports.CHECKBOX = CHECKBOX;
 exports.CLEAR_FILTERS = CLEAR_FILTERS;
@@ -46,6 +41,5 @@ exports.INSTANT = INSTANT;
 exports.MULTISELECT = MULTISELECT;
 exports.NUMBER = NUMBER;
 exports.PANEL = PANEL;
-exports.PANEL_WIDTH = PANEL_WIDTH;
 exports.RADIO = RADIO;
 exports.SAVED_FILTERS = SAVED_FILTERS;

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

@@ -39,7 +39,7 @@ var handleCheckboxChange = function handleCheckboxChange(_ref) {
     value: _rollupPluginBabelHelpers.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);
 };
 
 exports.handleCheckboxChange = handleCheckboxChange;

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

@@ -25,7 +25,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,
@@ -200,7 +200,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"
@@ -229,7 +229,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
         }));
@@ -243,7 +243,7 @@ var useFilters = function useFilters(_ref) {
           var _components$RadioButt = _rollupPluginBabelHelpers.objectSpread2({}, components.RadioButtonGroup),
             name = _components$RadioButt.name;
           filter = /*#__PURE__*/React.createElement(react.FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(react.RadioButtonGroup, _rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, filtersState), {}, _rollupPluginBabelHelpers.defineProperty({}, column, {
@@ -255,23 +255,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.createElement(react.RadioButton, _rollupPluginBabelHelpers.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.createElement(react.RadioButton, _rollupPluginBabelHelpers.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 constants.DROPDOWN:
         filter = /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.toConsumableArray(components.Dropdown.items)),
           onChange: function onChange(_ref8) {
             var _components$Dropdown$, _components$Dropdown;
@@ -285,7 +285,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;
@@ -293,7 +293,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) {
@@ -359,7 +359,7 @@ var useFilters = function useFilters(_ref) {
                 value: _rollupPluginBabelHelpers.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;
@@ -378,10 +378,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)
@@ -401,18 +401,18 @@ var useFilters = function useFilters(_ref) {
    * and populate the filter state with them
    */
   React.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
@@ -438,7 +438,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/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js

@@ -83,7 +83,7 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters, va
   } else if (variation === constants.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/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -33,7 +33,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "__inline-edit-button-label"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React.createElement("div", {