@carbon/ibm-products 1.53.0 → 1.54.1

package/README.md

@@ -9,18 +9,18 @@
 > name can still be encountered in various places and historical logs.
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg)](#contributors-)
-[![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/LICENSE)
-[![Build status](https://github.com/carbon-design-system/ibm-cloud-cognitive/actions/workflows/ci.yml/badge.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/actions/workflows/ci.yml)
+[![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-products/blob/master/LICENSE)
+[![Build status](https://github.com/carbon-design-system/ibm-products/actions/workflows/ci.yml/badge.svg)](https://github.com/carbon-design-system/ibm-products/actions/workflows/ci.yml)
 [![Netlify status](https://img.shields.io/netlify/f850c678-e8be-43c0-aa95-b2b9cca8ac21)](https://app.netlify.com/sites/carbon-for-ibm-products/deploys)
-[![GitHub Lerna version](https://img.shields.io/github/lerna-json/v/carbon-design-system/ibm-cloud-cognitive)](https://lerna.js.org)
-[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/.github/CONTRIBUTING.md)
+[![GitHub Lerna version](https://img.shields.io/github/lerna-json/v/carbon-design-system/ibm-products)](https://lerna.js.org)
+[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/carbon-design-system/ibm-products/blob/master/.github/CONTRIBUTING.md)
 
 > Carbon for IBM Products common UI components
 
 ## 🚀 Getting started
 
 If you’re just getting started and looking to browse our React components, take
-a look at [our Storybook](https://carbon-for-ibm-products.netlify.app).
+a look at [our Storybook](https://ibm-products.carbondesignsystem.com).
 
 ### 📦 Installing Carbon for IBM Products
 
@@ -44,7 +44,7 @@ import '@carbon/ibm-products/css/index.min.css';
 ### Webpack 4
 
 Our package requires support for ES modules (see
-[#2378](https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/2378#issuecomment-1319276192)).
+[#2378](https://github.com/carbon-design-system/ibm-products/issues/2378#issuecomment-1319276192)).
 In Webpack 5, these are supported by default. In Webpack 4, you will need to add
 the [following rule](https://stackoverflow.com/a/72149467) to your config.
 
@@ -74,7 +74,7 @@ dependencies which need to be installed.
 
 **Note:** `@carbon/elements` rolls up a number of Carbon packages that could be
 installed independently. As this list of dependencies could change, we leave you
-to view `package.json` in ibm-cloud-cognitive if you wish to install individual
+to view `package.json` in ibm-products if you wish to install individual
 packages.
 
 ## Examples
@@ -83,7 +83,7 @@ packages.
 
 Examples for each released component, and some that are still not quite ready,
 can be found here on
-[CodeSandbox](https://codesandbox.io/examples/package/@carbon/ibm-cloud-cognitive).
+[CodeSandbox](https://codesandbox.io/examples/package/@carbon/ibm-products).
 
 ### Packages
 
@@ -170,7 +170,7 @@ So, do not be shy. We both depend on and appreciate contributors, new and old,
 who help us fix bugs, build new features, improve our documentation, etc.
 
 If you’re interested, definitely check out our
-[Contributing Guide](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/.github/CONTRIBUTING.md)
+[Contributing Guide](https://github.com/carbon-design-system/ibm-products/blob/master/.github/CONTRIBUTING.md)
 and
 [Carbon’s Developer Handbook](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md)!
 👀
@@ -180,13 +180,13 @@ and
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/lee-chase"><img src="https://avatars0.githubusercontent.com/u/15086604?v=4" width="100px;" alt=""/><br /><sub><b>Lee Chase</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-cloud-cognitive/commits?author=lee-chase" title="Code">💻</a></td>
-    <td align="center"><a href="http://davidmenendez.net"><img src="https://avatars1.githubusercontent.com/u/6370760?v=4" width="100px;" alt=""/><br /><sub><b>David Menendez</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-cloud-cognitive/commits?author=davidmenendez" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.matthewdgallo.com"><img src="https://avatars0.githubusercontent.com/u/10215203?v=4" width="100px;" alt=""/><br /><sub><b>Matthew Gallo</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-cloud-cognitive/commits?author=matthewgallo" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/lee-chase"><img src="https://avatars0.githubusercontent.com/u/15086604?v=4" width="100px;" alt=""/><br /><sub><b>Lee Chase</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-products/commits?author=lee-chase" title="Code">💻</a></td>
+    <td align="center"><a href="http://davidmenendez.net"><img src="https://avatars1.githubusercontent.com/u/6370760?v=4" width="100px;" alt=""/><br /><sub><b>David Menendez</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-products/commits?author=davidmenendez" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.matthewdgallo.com"><img src="https://avatars0.githubusercontent.com/u/10215203?v=4" width="100px;" alt=""/><br /><sub><b>Matthew Gallo</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-products/commits?author=matthewgallo" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="http://simonfinney.dev"><img src="https://avatars2.githubusercontent.com/u/3846874?v=4" width="100px;" alt=""/><br /><sub><b>Simon Finney</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-cloud-cognitive/commits?author=SimonFinney" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/polinaouk"><img src="https://avatars2.githubusercontent.com/u/24444328?v=4" width="100px;" alt=""/><br /><sub><b>Polina Olemskaia</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-cloud-cognitive/commits?author=polinaouk" title="Code">💻</a></td>
+    <td align="center"><a href="http://simonfinney.dev"><img src="https://avatars2.githubusercontent.com/u/3846874?v=4" width="100px;" alt=""/><br /><sub><b>Simon Finney</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-products/commits?author=SimonFinney" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/polinaouk"><img src="https://avatars2.githubusercontent.com/u/24444328?v=4" width="100px;" alt=""/><br /><sub><b>Polina Olemskaia</b></sub></a><br /><a href="https://github.com/carbon-design-system/ibm-products/commits?author=polinaouk" title="Code">💻</a></td>
   </tr>
 </table>
 
@@ -203,6 +203,6 @@ In order to gather usage information for these components we use
 ## 📝 License
 
 Licensed under the
-[Apache-2.0 License](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/LICENSE).
+[Apache-2.0 License](https://github.com/carbon-design-system/ibm-products/blob/master/LICENSE).
 
 [![This site is powered by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)

package/es/components/AboutModal/AboutModal.js

@@ -74,9 +74,7 @@ export var AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
 
   // Detect resize of the ModalBody to recalculate whether scrolling is enabled
-  useResizeObserver(bodyRef, {
-    callback: handleResize
-  });
+  useResizeObserver(bodyRef, handleResize);
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/es/components/ActionBar/ActionBar.js

@@ -184,12 +184,10 @@ export var ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     /* istanbul ignore next */ // not sure how to fake window resize
     checkFullyVisibleItems();
   };
-  useResizeObserver(sizingRef, {
-    callback: handleResize
-  });
-  useResizeObserver(localRef, {
-    callback: handleResize
-  });
+
+  // // resize of the items
+  useResizeObserver(sizingRef, handleResize);
+  useResizeObserver(localRef, handleResize);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),
     ref: localRef

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -245,13 +245,9 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   }
 
   // container resize
-  useResizeObserver(sizingContainerRef, {
-    callback: handleResize
-  });
+  useResizeObserver(sizingContainerRef, handleResize);
   // item resize
-  useResizeObserver(breadcrumbItemWithOverflow, {
-    callback: handleResize
-  });
+  useResizeObserver(breadcrumbItemWithOverflow, handleResize);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
     ref: breadcrumbItemWithOverflow

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -135,15 +135,9 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }, prepareProps(other, ['iconDescription', 'renderIcon'])));
     }).reverse());
   });
-  useResizeObserver(sizingContainerRefSet, {
-    callback: checkFullyVisibleItems
-  });
-  useResizeObserver(sizingContainerRefCombo, {
-    callback: checkFullyVisibleItems
-  });
-  useResizeObserver(spaceAvailableRef, {
-    callback: checkFullyVisibleItems
-  });
+  useResizeObserver(sizingContainerRefSet, checkFullyVisibleItems);
+  useResizeObserver(sizingContainerRefCombo, checkFullyVisibleItems);
+  useResizeObserver(spaceAvailableRef, checkFullyVisibleItems);
   return /*#__PURE__*/React.createElement("div", {
     className: cx([blockClass, className, _defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
     ref: spaceAvailableRef

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -51,9 +51,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
-  useResizeObserver(gridRef, {
-    callback: handleVirtualGridResize
-  });
+  useResizeObserver(gridRef, handleVirtualGridResize);
   var syncScroll = function syncScroll(e) {
     var virtualBody = e.target;
     document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;

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

@@ -12,12 +12,13 @@ import { Filter16 } from '@carbon/icons-react';
 import { Button } from 'carbon-components-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useClickOutside } from '../../../../../global/js/hooks';
 import { pkg } from '../../../../../settings';
 import { ActionSet } from '../../../../ActionSet';
 import { BATCH, CLEAR_FILTERS, FLYOUT, INSTANT } from './constants';
 import { useSubscribeToEventEmitter, useFilters, useShouldDisableButtons } from './hooks';
+import { carbon } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
 var FilterFlyout = function FilterFlyout(_ref) {
@@ -45,11 +46,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
-    _ref$initialFilters = _ref.initialFilters,
-    initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
-  //  Save the initial filters we only need the filters once when it loads
-  var initialFiltersRef = useRef(initialFilters);
-
+    _ref$reactTableFilter = _ref.reactTableFiltersState,
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -60,15 +58,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
       filters: filters,
       setAllFilters: setAllFilters,
       variation: FLYOUT,
-      initialFilters: initialFiltersRef.current
+      reactTableFiltersState: reactTableFiltersState,
+      onCancel: onCancel
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
     prevFiltersRef = _useFilters.prevFiltersRef,
-    revertToPreviousFilters = _useFilters.revertToPreviousFilters,
+    cancel = _useFilters.cancel,
     reset = _useFilters.reset,
     renderFilter = _useFilters.renderFilter,
-    filtersObjectArray = _useFilters.filtersObjectArray;
+    filtersObjectArray = _useFilters.filtersObjectArray,
+    lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
   var filterFlyoutRef = useRef(null);
@@ -105,26 +105,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
     // 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);
-  };
-  var cancel = function cancel() {
-    // Reverting to previous filters only applies when using batch actions
-    if (updateMethod === BATCH) {
-      revertToPreviousFilters();
-      onCancel();
-    }
-    closeFlyout();
-  };
 
-  /** Effects */
-  useClickOutside(filterFlyoutRef, function (target) {
-    var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
-    var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
-    if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
-      return;
-    }
-    cancel();
-  });
-  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+    // Update the last applied filters
+    lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
+  };
 
   /** Renders all filters */
   var renderFilters = function renderFilters() {
@@ -151,6 +135,21 @@ var FilterFlyout = function FilterFlyout(_ref) {
       buttonSize: "md"
     });
   };
+
+  /** Effects */
+  useClickOutside(filterFlyoutRef, function (target) {
+    var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
+    var hasClickedOnDropdown = target.className === "".concat(carbon.prefix, "--list-box__menu-item__option");
+    if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
+      return;
+    }
+    closeFlyout();
+    cancel();
+  });
+  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+  useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
+    lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
+  }, [reactTableFiltersState, lastAppliedFilters]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(componentClass, "__container")
   }, /*#__PURE__*/React.createElement(Button, {
@@ -190,14 +189,6 @@ FilterFlyout.propTypes = {
    * Icon description for the filter flyout button
    */
   flyoutIconDescription: PropTypes.string,
-  /**
-   * Filters that should be applied on load
-   */
-  initialFilters: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired
-  })),
   /**
    * Callback when the apply button is clicked
    */
@@ -218,6 +209,14 @@ FilterFlyout.propTypes = {
    * Label text of the primary action in the flyout
    */
   primaryActionLabel: PropTypes.string,
+  /**
+   * Filters from react table's state
+   */
+  reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired
+  })),
   /**
    * Label text of the secondary action in the flyout
    */

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

@@ -54,11 +54,8 @@ var FilterPanel = function FilterPanel(_ref) {
     searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
-    _ref$initialFilters = _ref.initialFilters,
-    initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
-  //  Save the initial filters we only need the filters once
-  var initialFiltersRef = useRef(initialFilters);
-
+    _ref$reactTableFilter = _ref.reactTableFiltersState,
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -69,15 +66,17 @@ var FilterPanel = function FilterPanel(_ref) {
       filters: filterSections,
       setAllFilters: setAllFilters,
       variation: PANEL,
-      initialFilters: initialFiltersRef.current
+      reactTableFiltersState: reactTableFiltersState,
+      onCancel: onCancel
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
     prevFiltersRef = _useFilters.prevFiltersRef,
-    revertToPreviousFilters = _useFilters.revertToPreviousFilters,
+    cancel = _useFilters.cancel,
     reset = _useFilters.reset,
     renderFilter = _useFilters.renderFilter,
-    filtersObjectArray = _useFilters.filtersObjectArray;
+    filtersObjectArray = _useFilters.filtersObjectArray,
+    lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
   var filterPanelRef = useRef();
@@ -107,14 +106,8 @@ var FilterPanel = function FilterPanel(_ref) {
 
   /** Methods */
   var closePanel = function closePanel() {
-    return setPanelOpen(false);
-  };
-  var cancel = function cancel() {
-    // Reverting to previous filters only applies when using batch actions
-    if (updateMethod === BATCH) {
-      revertToPreviousFilters();
-      onCancel();
-    }
+    cancel();
+    setPanelOpen(false);
   };
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
@@ -128,6 +121,9 @@ var FilterPanel = function FilterPanel(_ref) {
     // 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);
+
+    // Update the last applied filters
+    lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
   };
   var renderActionSet = function renderActionSet() {
     return showActionSet && /*#__PURE__*/React.createElement(MotionActionSet, {
@@ -213,14 +209,14 @@ var FilterPanel = function FilterPanel(_ref) {
       height: getScrollableContainerHeight()
     },
     onScroll: onInnerContainerScroll
-  }, filterSections.map(function (_ref2) {
+  }, filterSections.map(function (_ref2, index) {
     var _ref2$categoryTitle = _ref2.categoryTitle,
       categoryTitle = _ref2$categoryTitle === void 0 ? null : _ref2$categoryTitle,
       _ref2$filters = _ref2.filters,
       filters = _ref2$filters === void 0 ? [] : _ref2$filters,
       hasAccordion = _ref2.hasAccordion;
     return /*#__PURE__*/React.createElement("div", {
-      key: categoryTitle,
+      key: index,
       className: "".concat(componentClass, "__category")
     }, categoryTitle && /*#__PURE__*/React.createElement("div", {
       className: "".concat(componentClass, "__category-title")
@@ -241,20 +237,20 @@ FilterPanel.propTypes = {
   closeIconDescription: PropTypes.string,
   filterPanelMinHeight: PropTypes.number,
   filterSections: PropTypes.array,
-  /**
-   * Filters that should be applied on load
-   */
-  initialFilters: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired
-  })),
   onApply: PropTypes.func,
   onCancel: PropTypes.func,
   onPanelClose: PropTypes.func,
   onPanelOpen: PropTypes.func,
   open: PropTypes.bool,
   primaryActionLabel: PropTypes.string,
+  /**
+   * Filters from react table's state
+   */
+  reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired
+  })),
   searchLabelText: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   secondaryActionLabel: PropTypes.string,

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

@@ -5,7 +5,6 @@
  * 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 useShouldDisableButtons } from './useShouldDisableButtons';
 export { default as useFilters } from './useFilters';

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

@@ -11,10 +11,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup } from 'carbon-components-react';
-import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
-import useInitialStateFromFilters from './useInitialStateFromFilters';
+import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
 import { getInitialStateFromFilters } from '../utils';
 var useFilters = function useFilters(_ref) {
   var updateMethod = _ref.updateMethod,
@@ -22,19 +21,22 @@ var useFilters = function useFilters(_ref) {
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     setAllFilters = _ref.setAllFilters,
     variation = _ref.variation,
-    initialFilters = _ref.initialFilters;
+    reactTableFiltersState = _ref.reactTableFiltersState,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
   /** State */
-  var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
-    _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
-    filtersState = _useInitialStateFromF2[0],
-    setFiltersState = _useInitialStateFromF2[1];
-  var _useState = useState(initialFilters),
+  var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _slicedToArray(_useState, 2),
-    filtersObjectArray = _useState2[0],
-    setFiltersObjectArray = _useState2[1];
+    filtersState = _useState2[0],
+    setFiltersState = _useState2[1];
+  var _useState3 = useState(reactTableFiltersState),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filtersObjectArray = _useState4[0],
+    setFiltersObjectArray = _useState4[1];
 
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
+  var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
   var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
 
   /** Methods */
@@ -43,6 +45,7 @@ var useFilters = function useFilters(_ref) {
   var revertToPreviousFilters = function revertToPreviousFilters() {
     setFiltersState(JSON.parse(prevFiltersRef.current));
     setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
+    setAllFilters(JSON.parse(lastAppliedFilters.current));
   };
   var reset = function reset() {
     // When we reset we want the "initialFilters" to be an empty array
@@ -154,10 +157,14 @@ var useFilters = function useFilters(_ref) {
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
+    var filter;
     var isPanel = variation === PANEL;
+    if (!type) {
+      return console.error("type: ".concat(type, "; does not exist as a type of filter."));
+    }
     switch (type) {
       case DATE:
-        return /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
+        filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
           onChange: function onChange(value) {
             var _components$DatePicke, _components$DatePicke2;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
@@ -181,8 +188,9 @@ var useFilters = function useFilters(_ref) {
           placeholder: "mm/dd/yyyy",
           labelText: "End date"
         }, components.DatePickerInput.end)));
+        break;
       case NUMBER:
-        return /*#__PURE__*/React.createElement(NumberInput, _extends({
+        filter = /*#__PURE__*/React.createElement(NumberInput, _extends({
           step: 1,
           allowEmpty: true,
           hideSteppers: true
@@ -203,8 +211,9 @@ var useFilters = function useFilters(_ref) {
           value: filtersState[column].value,
           light: isPanel
         }));
+        break;
       case CHECKBOX:
-        return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
+        filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
           return /*#__PURE__*/React.createElement(Checkbox, _extends({
             key: option.labelText
           }, option, {
@@ -229,8 +238,9 @@ var useFilters = function useFilters(_ref) {
             checked: option.selected
           }));
         }));
+        break;
       case RADIO:
-        return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
+        filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
           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;
@@ -255,8 +265,9 @@ var useFilters = function useFilters(_ref) {
             key: (_ref4 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref4 !== void 0 ? _ref4 : radio.value
           }, radio));
         })));
+        break;
       case DROPDOWN:
-        return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
+        filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
           items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
           selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
           onChange: function onChange(_ref5) {
@@ -276,7 +287,27 @@ var useFilters = function useFilters(_ref) {
           light: isPanel
         }));
     }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: column
+    }, filter);
+  };
+  var cancel = function cancel() {
+    // Reverting to previous filters only applies when using batch actions
+    if (updateMethod === BATCH) {
+      revertToPreviousFilters();
+      onCancel();
+    }
   };
+
+  /** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
+      those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
+  useEffect(function updateStateAndFiltersToReflectExternalFilterChanges() {
+    var newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
+    setFiltersState(newFiltersState);
+    prevFiltersRef.current = JSON.stringify(newFiltersState);
+    prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
+    setFiltersObjectArray(reactTableFiltersState);
+  }, [filters, reactTableFiltersState, variation]);
   return {
     filtersState: filtersState,
     setFiltersState: setFiltersState,
@@ -285,7 +316,9 @@ var useFilters = function useFilters(_ref) {
     revertToPreviousFilters: revertToPreviousFilters,
     reset: reset,
     renderFilter: renderFilter,
-    filtersObjectArray: filtersObjectArray
+    filtersObjectArray: filtersObjectArray,
+    lastAppliedFilters: lastAppliedFilters,
+    cancel: cancel
   };
 };
 export default useFilters;

package/es/components/Datagrid/useActionsColumn.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "itemText", "onClick", "icon"],
+var _excluded = ["id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 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; }
@@ -47,7 +47,12 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 itemText = action.itemText,
                 _onClick = action.onClick,
                 icon = action.icon,
+                shouldHideMenuItem = action.shouldHideMenuItem,
                 rest = _objectWithoutProperties(action, _excluded);
+              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+              if (hidden) {
+                return null;
+              }
               var selectedRowId = selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.filter(function (item) {
                 return item.id === row.id ? item.id : null;
               });

package/es/components/Datagrid/useFiltering.js

@@ -74,7 +74,7 @@ var useFiltering = function useFiltering(hooks) {
       variation: 'flyout',
       updateMethod: BATCH,
       panelIconDescription: 'Open filter panel',
-      initialFilters: state.filters
+      reactTableFiltersState: state.filters
     };
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {

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

@@ -55,7 +55,7 @@ var getPasswordStrength = function getPasswordStrength() {
 var renderDocLink = function renderDocLink() {
   var chance = Math.random();
   var docLinkObj = {
-    href: chance > 0.66 ? 'http://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
+    href: chance > 0.66 ? 'https://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'https://ibm-products.carbondesignsystem.com/',
     text: chance > 0.66 ? 'Carbon Design System' : chance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
   };
   return docLinkObj;

package/es/components/PageHeader/PageHeader.js

@@ -314,12 +314,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
-  useResizeObserver(sizingContainerRef, {
-    callback: handleResizeActionBarColumn
-  });
-  useResizeObserver(headerRef, {
-    callback: handleResize
-  });
+  useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
+  useResizeObserver(headerRef, handleResize);
 
   // Determine what form of title to display in the breadcrumb
   var breadcrumbItemForTitle = utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title);

package/es/components/SidePanel/SidePanel.js

@@ -436,9 +436,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var contentRef = ref || sidePanelRef;
-  useResizeObserver(contentRef, {
-    callback: handleResize
-  });
+  useResizeObserver(contentRef, handleResize);
   return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,