@carbon/ibm-products 1.44.1 → 1.45.0

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

@@ -5,13 +5,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
+
 import { Filter16 } from '@carbon/icons-react';
 import { Button, Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup } from 'carbon-components-react';
 import cx from 'classnames';
@@ -21,7 +21,7 @@ import { useClickOutside } from '../../../../../global/js/hooks';
 import { pkg } from '../../../../../settings';
 import { ActionSet } from '../../../../ActionSet';
 import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, RADIO } from './constants';
-import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
+import { useInitialStateFromFilters, useShouldDisableButtons, useSubscribeToEventEmitter } from './hooks';
 import { getInitialStateFromFilters } from './utils';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
@@ -69,6 +69,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
   var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
+  var _useShouldDisableButt = useShouldDisableButtons({
+      initialValue: true,
+      filtersState: filtersState,
+      prevFiltersRef: prevFiltersRef
+    }),
+    _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
+    shouldDisableButtons = _useShouldDisableButt2[0],
+    setShouldDisableButtons = _useShouldDisableButt2[1];
 
   /** Memos */
   var showActionSet = updateMethod === BATCH;
@@ -88,6 +96,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     // From the user
     onApply();
 
+    // When the user clicks apply, the action set buttons should be disabled again
+    setShouldDisableButtons(true);
+
     // updates the ref so next time the flyout opens we have records of the previous filters
     prevFiltersRef.current = JSON.stringify(filtersState);
     prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
@@ -161,6 +172,19 @@ var FilterFlyout = function FilterFlyout(_ref) {
       if (shouldRemoveFromArray) {
         filtersObjectArrayCopy.splice(index, 1);
       }
+    } else if (type === DROPDOWN || type === RADIO) {
+      if (value === 'Any') {
+        /**
+        Checks to see if the selected value is 'Any', that means the user wants
+        to reset specific filter
+        */
+        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        });
+
+        // Remove it from the filters array
+        filtersObjectArrayCopy.splice(_index, 1);
+      }
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
@@ -258,8 +282,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
         }));
       }));
     } else if (type === RADIO) {
+      var _filtersState$column, _filtersState$column2;
       return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-        valueSelected: filtersState[column].value,
+        valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
         onChange: function onChange(selected) {
           var _components$RadioButt, _components$RadioButt2;
           setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
@@ -273,6 +298,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
         }
+      }), /*#__PURE__*/React.createElement(RadioButton, {
+        id: "any",
+        labelText: "Any",
+        value: "Any"
       }), components.RadioButton.map(function (radio) {
         var _ref4, _radio$id;
         return /*#__PURE__*/React.createElement(RadioButton, _extends({
@@ -281,7 +310,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
       })));
     } else if (type === DROPDOWN) {
       return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
-        selectedItem: filtersState[column].value,
+        selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
+        items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
         onChange: function onChange(_ref5) {
           var _components$Dropdown$, _components$Dropdown;
           var selectedItem = _ref5.selectedItem;
@@ -311,13 +341,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
         kind: 'primary',
         label: primaryActionLabel,
         onClick: apply,
-        isExpressive: false
+        isExpressive: false,
+        disabled: shouldDisableButtons
       }, {
         key: 3,
         kind: 'secondary',
         label: secondaryActionLabel,
         onClick: cancel,
-        isExpressive: false
+        isExpressive: false,
+        disabled: shouldDisableButtons
       }],
       size: "md",
       buttonSize: "md"

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

@@ -5,6 +5,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /* eslint-disable react/jsx-key */
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 import React, { useRef, useMemo, useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -18,15 +24,15 @@ import { panelVariants, innerContainerVariants, actionSetVariants } from './moti
 import { Close32 } from '@carbon/icons-react';
 import { ActionSet } from '../../../../ActionSet';
 import { FilterContext } from '.';
-import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
+import { useInitialStateFromFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from './hooks';
 import { getInitialStateFromFilters } from './utils';
-import isEqual from 'lodash/isEqual';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = motion(ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
-  var title = _ref.title,
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Filter' : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
     _ref$updateMethod = _ref.updateMethod,
@@ -54,14 +60,10 @@ var FilterPanel = function FilterPanel(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     filtersObjectArray = _useState2[0],
     setFiltersObjectArray = _useState2[1];
-  var _useState3 = useState(true),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    shouldDisableButtons = _useState4[0],
-    setShouldDisableButtons = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showDividerLine = _useState6[0],
-    setShowDividerLine = _useState6[1];
+    showDividerLine = _useState4[0],
+    setShowDividerLine = _useState4[1];
 
   /** Refs */
   var filterPanelRef = useRef();
@@ -72,6 +74,16 @@ var FilterPanel = function FilterPanel(_ref) {
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
   var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
 
+  /** State from hooks */
+  var _useShouldDisableButt = useShouldDisableButtons({
+      initialValue: true,
+      filtersState: filtersState,
+      prevFiltersRef: prevFiltersRef
+    }),
+    _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
+    shouldDisableButtons = _useShouldDisableButt2[0],
+    setShouldDisableButtons = _useShouldDisableButt2[1];
+
   /** Memos */
   var showActionSet = useMemo(function () {
     return updateMethod === BATCH;
@@ -116,7 +128,11 @@ var FilterPanel = function FilterPanel(_ref) {
   };
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
+
+    // From the user
     onApply();
+
+    // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
 
     // updates the ref so next time the flyout opens we have records of the previous filters
@@ -178,6 +194,19 @@ var FilterPanel = function FilterPanel(_ref) {
         // Remove it from the filters array since there is nothing to filter
         filtersObjectArrayCopy.splice(_index, 1);
       }
+    } else if (type === DROPDOWN || type === RADIO) {
+      if (value === 'Any') {
+        /**
+        Checks to see if the selected value is 'Any', that means the user wants
+        to reset specific filter
+        */
+        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        });
+
+        // Remove it from the filters array
+        filtersObjectArrayCopy.splice(_index2, 1);
+      }
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
@@ -189,6 +218,7 @@ var FilterPanel = function FilterPanel(_ref) {
 
   /** Render the individual filter component */
   var renderFilter = function renderFilter(_ref3) {
+    var _filtersState$column, _filtersState$column2;
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -268,7 +298,7 @@ var FilterPanel = function FilterPanel(_ref) {
         }));
       case RADIO:
         return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-          valueSelected: filtersState[column].value,
+          valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
           onChange: function onChange(selected) {
             var _components$RadioButt, _components$RadioButt2;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
@@ -282,6 +312,10 @@ var FilterPanel = function FilterPanel(_ref) {
             });
             (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
           }
+        }), /*#__PURE__*/React.createElement(RadioButton, {
+          id: "any",
+          labelText: "Any",
+          value: "Any"
         }), components.RadioButton.map(function (radio) {
           var _ref4, _radio$id;
           return /*#__PURE__*/React.createElement(RadioButton, _extends({
@@ -290,7 +324,8 @@ var FilterPanel = function FilterPanel(_ref) {
         })));
       case DROPDOWN:
         return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
-          selectedItem: filtersState[column].value,
+          items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
+          selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
           onChange: function onChange(_ref5) {
             var _components$Dropdown$, _components$Dropdown;
             var selectedItem = _ref5.selectedItem;
@@ -349,9 +384,6 @@ var FilterPanel = function FilterPanel(_ref) {
     var _filterPanelRef$curre;
     (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 ? void 0 : _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
   }, [filterPanelMinHeight]);
-  useEffect(function updateDisabledButtonsState() {
-    setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
-  }, [filtersState]);
   useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
   var getScrollableContainerHeight = function getScrollableContainerHeight() {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;

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

@@ -1,2 +1,10 @@
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 export { default as useInitialStateFromFilters } from './useInitialStateFromFilters';
-export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
+export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
+export { default as useShouldDisableButtons } from './useShouldDisableButtons';

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

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* eslint-disable jsdoc/check-param-names */
+
+import { useState, useEffect } from 'react';
+import isEqual from 'lodash/isEqual';
+
+/**
+ * Keeps track of the button disabled state
+ * @param  {string} initialValue - the initial value if the buttons should be enabled or disabled
+ * @param  {object} filtersState - the filter state from the filter panel or flyout
+ * @param  {object} prevFiltersRef - reference of the prev filterState
+ * @returns {Array} returns a tuple of the state and setter function
+ */
+var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
+  var _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+    filtersState = _ref.filtersState,
+    prevFiltersRef = _ref.prevFiltersRef;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldDisableButtons = _useState2[0],
+    setShouldDisableButtons = _useState2[1];
+  useEffect(function updateDisabledButtonsState() {
+    setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
+  }, [filtersState, prevFiltersRef]);
+  return [shouldDisableButtons, setShouldDisableButtons];
+};
+export default useShouldDisableButtons;

package/es/components/Datagrid/utils/DatagridActions.js

@@ -140,7 +140,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
@@ -160,7 +160,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
     style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
     label: "Primary button",
     size: "lg",
     light: true,
@@ -174,7 +174,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
     itemText: "Option 3",
     onClick: action("Click on ButtonMenu Option 3")
-  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
+  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -182,39 +182,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: Restart16,
-    iconDescription: 'Refresh',
-    onClick: refreshColumns
-  })), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: Download16,
-    iconDescription: 'Download CSV',
-    onClick: downloadCsv
-  })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
-    label: "Primary button",
-    renderIcon: Add16
-  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 1",
-    onClick: action("Click on ButtonMenu Option 1")
-  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 2",
-    onClick: action("Click on ButtonMenu Option 2")
-  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 3",
-    onClick: action("Click on ButtonMenu Option 3")
-  })), /*#__PURE__*/React.createElement(OverflowMenu, {
+  }), /*#__PURE__*/React.createElement(OverflowMenu, {
     ariaLabel: "Tools",
     size: "lg",
     flipped: true,

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

@@ -71,6 +71,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
   var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
+  var _useShouldDisableButt = (0, _hooks2.useShouldDisableButtons)({
+      initialValue: true,
+      filtersState: filtersState,
+      prevFiltersRef: prevFiltersRef
+    }),
+    _useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
+    shouldDisableButtons = _useShouldDisableButt2[0],
+    setShouldDisableButtons = _useShouldDisableButt2[1];
 
   /** Memos */
   var showActionSet = updateMethod === _constants.BATCH;
@@ -90,6 +98,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     // From the user
     onApply();
 
+    // When the user clicks apply, the action set buttons should be disabled again
+    setShouldDisableButtons(true);
+
     // updates the ref so next time the flyout opens we have records of the previous filters
     prevFiltersRef.current = JSON.stringify(filtersState);
     prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
@@ -163,6 +174,19 @@ var FilterFlyout = function FilterFlyout(_ref) {
       if (shouldRemoveFromArray) {
         filtersObjectArrayCopy.splice(index, 1);
       }
+    } else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
+      if (value === 'Any') {
+        /**
+        Checks to see if the selected value is 'Any', that means the user wants
+        to reset specific filter
+        */
+        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        });
+
+        // Remove it from the filters array
+        filtersObjectArrayCopy.splice(_index, 1);
+      }
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
@@ -260,8 +284,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
         }));
       }));
     } else if (type === _constants.RADIO) {
+      var _filtersState$column, _filtersState$column2;
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
-        valueSelected: filtersState[column].value,
+        valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
         onChange: function onChange(selected) {
           var _components$RadioButt, _components$RadioButt2;
           setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
@@ -275,6 +300,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
         }
+      }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+        id: "any",
+        labelText: "Any",
+        value: "Any"
       }), components.RadioButton.map(function (radio) {
         var _ref4, _radio$id;
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, (0, _extends2.default)({
@@ -283,7 +312,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
       })));
     } else if (type === _constants.DROPDOWN) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
-        selectedItem: filtersState[column].value,
+        selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
+        items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
         onChange: function onChange(_ref5) {
           var _components$Dropdown$, _components$Dropdown;
           var selectedItem = _ref5.selectedItem;
@@ -313,13 +343,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
         kind: 'primary',
         label: primaryActionLabel,
         onClick: apply,
-        isExpressive: false
+        isExpressive: false,
+        disabled: shouldDisableButtons
       }, {
         key: 3,
         kind: 'secondary',
         label: secondaryActionLabel,
         onClick: cancel,
-        isExpressive: false
+        isExpressive: false,
+        disabled: shouldDisableButtons
       }],
       size: "md",
       buttonSize: "md"

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

@@ -24,7 +24,6 @@ var _ActionSet = require("../../../../ActionSet");
 var _ = require(".");
 var _hooks = require("./hooks");
 var _utils = require("./utils");
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -34,7 +33,8 @@ var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
-  var title = _ref.title,
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Filter' : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
     _ref$updateMethod = _ref.updateMethod,
@@ -62,14 +62,10 @@ var FilterPanel = function FilterPanel(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     filtersObjectArray = _useState2[0],
     setFiltersObjectArray = _useState2[1];
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    shouldDisableButtons = _useState4[0],
-    setShouldDisableButtons = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    showDividerLine = _useState6[0],
-    setShowDividerLine = _useState6[1];
+    showDividerLine = _useState4[0],
+    setShowDividerLine = _useState4[1];
 
   /** Refs */
   var filterPanelRef = (0, _react.useRef)();
@@ -80,6 +76,16 @@ var FilterPanel = function FilterPanel(_ref) {
   var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
   var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
 
+  /** State from hooks */
+  var _useShouldDisableButt = (0, _hooks.useShouldDisableButtons)({
+      initialValue: true,
+      filtersState: filtersState,
+      prevFiltersRef: prevFiltersRef
+    }),
+    _useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
+    shouldDisableButtons = _useShouldDisableButt2[0],
+    setShouldDisableButtons = _useShouldDisableButt2[1];
+
   /** Memos */
   var showActionSet = (0, _react.useMemo)(function () {
     return updateMethod === _constants.BATCH;
@@ -124,7 +130,11 @@ var FilterPanel = function FilterPanel(_ref) {
   };
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
+
+    // From the user
     onApply();
+
+    // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
 
     // updates the ref so next time the flyout opens we have records of the previous filters
@@ -186,6 +196,19 @@ var FilterPanel = function FilterPanel(_ref) {
         // Remove it from the filters array since there is nothing to filter
         filtersObjectArrayCopy.splice(_index, 1);
       }
+    } else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
+      if (value === 'Any') {
+        /**
+        Checks to see if the selected value is 'Any', that means the user wants
+        to reset specific filter
+        */
+        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        });
+
+        // Remove it from the filters array
+        filtersObjectArrayCopy.splice(_index2, 1);
+      }
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
@@ -197,6 +220,7 @@ var FilterPanel = function FilterPanel(_ref) {
 
   /** Render the individual filter component */
   var renderFilter = function renderFilter(_ref3) {
+    var _filtersState$column, _filtersState$column2;
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -276,7 +300,7 @@ var FilterPanel = function FilterPanel(_ref) {
         }));
       case _constants.RADIO:
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
-          valueSelected: filtersState[column].value,
+          valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
           onChange: function onChange(selected) {
             var _components$RadioButt, _components$RadioButt2;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
@@ -290,6 +314,10 @@ var FilterPanel = function FilterPanel(_ref) {
             });
             (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
           }
+        }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+          id: "any",
+          labelText: "Any",
+          value: "Any"
         }), components.RadioButton.map(function (radio) {
           var _ref4, _radio$id;
           return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, (0, _extends2.default)({
@@ -298,7 +326,8 @@ var FilterPanel = function FilterPanel(_ref) {
         })));
       case _constants.DROPDOWN:
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
-          selectedItem: filtersState[column].value,
+          items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
+          selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
           onChange: function onChange(_ref5) {
             var _components$Dropdown$, _components$Dropdown;
             var selectedItem = _ref5.selectedItem;
@@ -357,9 +386,6 @@ var FilterPanel = function FilterPanel(_ref) {
     var _filterPanelRef$curre;
     (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 ? void 0 : _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', (0, _layout.rem)(filterPanelMinHeight));
   }, [filterPanelMinHeight]);
-  (0, _react.useEffect)(function updateDisabledButtonsState() {
-    setShouldDisableButtons((0, _isEqual.default)(filtersState, JSON.parse(prevFiltersRef.current)));
-  }, [filtersState]);
   (0, _hooks.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
   var getScrollableContainerHeight = function getScrollableContainerHeight() {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;

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

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "useInitialStateFromFilters", {
     return _useInitialStateFromFilters.default;
   }
 });
+Object.defineProperty(exports, "useShouldDisableButtons", {
+  enumerable: true,
+  get: function get() {
+    return _useShouldDisableButtons.default;
+  }
+});
 Object.defineProperty(exports, "useSubscribeToEventEmitter", {
   enumerable: true,
   get: function get() {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
   }
 });
 var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
-var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
+var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
+var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));