@carbon/ibm-products 2.1.3 → 2.2.0

package/es/components/Datagrid/useActionsColumn.js

@@ -5,22 +5,19 @@ 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; }
-/**
- * Copyright IBM Corp. 2021, 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.
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-
-import React, { useEffect } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
-  }, []);
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,

package/es/components/Datagrid/useCustomizeColumns.js

@@ -3,20 +3,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-/**
- * Copyright IBM Corp. 2021, 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.
+// @flow
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
 import * as React from 'react';
-import { pkg } from '../../settings';
 import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
 var useCustomizeColumns = function useCustomizeColumns(hooks) {
-  React.useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
-  }, []);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTearsheetOpen = _React$useState2[0],

package/es/components/Datagrid/useExpandedRow.js

@@ -2,21 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-/**
- * Copyright IBM Corp. 2020, 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.
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-
-import { useEffect, useState } from 'react';
-import { pkg } from '../../settings';
+import { useState } from 'react';
 import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
 import useRowExpander from './useRowExpander';
 var useExpandedRow = function useExpandedRow(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
-  }, []);
   useRowExpander(hooks);
   var useInstance = function useInstance(instance) {
     var rows = instance.rows,

package/es/components/Datagrid/useFiltering.js

@@ -2,21 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-/**
- * 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.
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2023
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-
-import { useMemo, useEffect } from 'react';
-import { pkg } from '../../settings';
+import { useMemo } from 'react';
 import { FilterFlyout } from './Datagrid/addons/Filtering';
 import { BATCH } from './Datagrid/addons/Filtering/constants';
 var useFiltering = function useFiltering(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
-  }, []);
   var filterTypes = useMemo(function () {
     return {
       date: function date(rows, id, _ref) {
@@ -74,7 +70,7 @@ var useFiltering = function useFiltering(hooks) {
       variation: 'flyout',
       updateMethod: BATCH,
       panelIconDescription: 'Open filter panel',
-      reactTableFiltersState: state.filters
+      initialFilters: state.filters
     };
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {

package/es/components/Datagrid/useInlineEdit.js

@@ -16,9 +16,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
     if (!usingEditableCell) {
       pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
     }
-    if (usingEditableCell) {
-      pkg.checkReportFeatureEnabled('Datagrid.useEditableCell');
-    }
   }, [usingEditableCell]);
   var addInlineEdit = function addInlineEdit(props, _ref) {
     var _cell$column, _cell$column$inlineEd, _instance$columns$fil;

package/es/components/Datagrid/useNestedRows.js

@@ -1,20 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Copyright IBM Corp. 2020, 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.
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-
-import { useEffect } from 'react';
 import { pkg } from '../../settings';
 import cx from 'classnames';
 import useNestedRowExpander from './useNestedRowExpander';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
-  }, []);
   useNestedRowExpander(hooks);
   var marginLeft = 24;
   var getRowProps = function getRowProps(props, _ref) {

package/es/components/Datagrid/useStickyColumn.js

@@ -21,13 +21,10 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = useRef();
   var stickyHeaderCellRef = useRef();
-  var _useState = useState(null),
+  var _useState = useState(window.innerWidth),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
-  useEffect(function () {
-    setWindowSize(window.innerWidth);
-  }, []);
   useLayoutEffect(function () {
     function updateSize() {
       setWindowSize(window.innerWidth);
@@ -56,13 +53,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
         headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', boundListener);
-      }
+      window.addEventListener('resize', boundListener);
       return function () {
-        if (typeof window !== 'undefined') {
-          window.removeEventListener('resize', boundListener);
-        }
+        window.removeEventListener('resize', boundListener);
       };
     }, [instance.rows, instance.isFetching]);
     useEffect(function () {

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

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * Copyright IBM Corp. 2020, 2022
  *
@@ -7,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useLayoutEffect, useState, useContext } from 'react';
-import { TableToolbarContent, TableToolbarSearch, Button, IconButton, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
+import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
 import { Download, Add, Restart, ChevronDown, Filter } from '@carbon/react/icons';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
@@ -44,18 +45,25 @@ export var DatagridActions = function DatagridActions(datagridState) {
     return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
   };
   var renderFilterPanelButton = function renderFilterPanelButton() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(IconButton, {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
-      align: "bottom",
-      label: filterProps.panelIconDescription,
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Filter, _extends({
+          size: 16
+        }, props));
+      },
+      iconDescription: filterProps.panelIconDescription,
       className: "".concat(blockClass, "-filter-panel-open-button"),
       onClick: function onClick() {
         return setPanelOpen(function (open) {
           return !open;
         });
       },
-      disabled: data.length === 0
-    }, /*#__PURE__*/React.createElement(Filter, null));
+      disabled: data.length === 0,
+      tooltipAlignment: "start"
+    });
   };
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/es/components/EditFullPage/EditFullPage.js

@@ -41,8 +41,7 @@ var componentName = 'EditFullPage';
 // };
 
 /**
- * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
- * See usage guidance for further details.
+ * TODO: A description of the component.
  */
 export var EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/es/components/EditSidePanel/EditSidePanel.js

@@ -38,7 +38,7 @@ var defaults = {
 };
 
 /**
- * Use with medium complexity edits if the user needs page context.
+ * TODO: A description of the component.
  */
 export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/es/components/EditTearsheet/EditTearsheet.js

@@ -33,10 +33,6 @@ var defaults = {
   verticalPosition: 'normal',
   influencerWidth: 'narrow'
 };
-
-/**
- * Use Tearsheet with medium to complex edits. See usage guidance for further information.
- */
 export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -41,7 +41,7 @@ var componentName = 'EditTearsheetNarrow';
 // };
 
 /**
- * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * TODO: A description of the component.
  */
 export var EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -44,10 +44,9 @@ var componentName = 'EditUpdateCards';
 // };
 
 /**
- Editable cards allow a user to view, modify, and save the content contained within the card.
- These cards are generally used in instances where a user needs to make changes to a resource instances
- (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ * TODO: A description of the component.
  */
+
 export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actionIcons = _ref.actionIcons,
     actionsPlacement = _ref.actionsPlacement,

package/es/components/EmptyStates/EmptyState.js

@@ -32,10 +32,6 @@ export var defaults = {
   position: 'top',
   size: 'lg'
 };
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'ErrorEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NoDataEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NoTagsEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -27,10 +27,6 @@ import { defaults } from '../EmptyState';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'UnauthorizedEmptyState';
-
-/**
- * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
- */
 export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/es/components/ExportModal/ExportModal.js

@@ -28,10 +28,6 @@ var defaults = {
   preformattedExtensions: Object.freeze([]),
   validExtensions: Object.freeze([])
 };
-
-/**
- * Modal dialog version of the export pattern
- */
 export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var body = _ref.body,
     className = _ref.className,

package/es/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -22,12 +22,6 @@ import { pkg } from '../../../settings';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPError403';
-
-/**
- * HTTP errors are used in an attempt to access something that isn’t available or
-the user doesn’t have permission for. This HTTPError component is generic so you
-can use it when you receive an error code that isn't provided.
- */
 export var HTTPError403 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,

package/es/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -22,12 +22,6 @@ import { pkg } from '../../../settings';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPError404';
-
-/**
- * HTTP errors are used in an attempt to access something that isn’t available or
-the user doesn’t have permission for. This HTTPError component is generic so you
-can use it when you receive an error code that isn't provided.
- */
 export var HTTPError404 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,

package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -22,12 +22,6 @@ import { pkg } from '../../../settings';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPErrorOther';
-
-/**
- * HTTP errors are used in an attempt to access something that isn’t available or
-the user doesn’t have permission for. This HTTPError component is generic so you
-can use it when you receive an error code that isn't provided.
- */
 export var HTTPErrorOther = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,

package/es/components/ImportModal/ImportModal.js

@@ -179,13 +179,6 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var inputHandler = function inputHandler(evt) {
     setImportUrl(evt.target.value);
   };
-  var onCloseHandler = function onCloseHandler() {
-    setFiles([]);
-    setImportUrl('');
-    if (onClose) {
-      onClose();
-    }
-  };
   var numberOfFiles = files.length;
   var numberOfValidFiles = files.filter(function (f) {
     return !f.invalid;
@@ -197,13 +190,13 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var blockClass = "".concat(pkg.prefix, "--import-modal");
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, _objectSpread({
     open: open,
-    ref: ref
+    ref: ref,
+    onClose: onClose
   }, getDevtoolsProps(componentName)), {
     "aria-label": title,
     className: cx(blockClass, className),
     size: "sm",
-    preventCloseOnClickOutside: true,
-    onClose: onCloseHandler
+    preventCloseOnClickOutside: true
   }), /*#__PURE__*/React.createElement(ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: title
@@ -266,7 +259,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "secondary",
-    onClick: onCloseHandler
+    onClick: onClose
   }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     kind: "primary",
@@ -369,11 +362,11 @@ ImportModal.propTypes = {
   /**
    * Specify a handler for "submitting" modal. Access the imported file via `file => {}`
    */
-  onRequestSubmit: PropTypes.func.isRequired,
+  onRequestSubmit: PropTypes.func,
   /**
    * Specify whether the Modal is currently open
    */
-  open: PropTypes.bool.isRequired,
+  open: PropTypes.bool,
   /**
    * Specify the text for the primary button
    */

package/es/components/MultiAddSelect/MultiAddSelect.js

@@ -12,10 +12,6 @@ import { AddSelect } from '../AddSelect';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var componentName = 'MultiAddSelect';
-
-/**
- * Used to add or select multiple or more items from larger lists or hierarchies.
- */
 export var MultiAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(AddSelect, _extends({}, props, {
     multi: true,

package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js

@@ -15,19 +15,34 @@ var UnreadNotificationBell = function UnreadNotificationBell() {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React.createElement("title", null, "Unread notification bell"), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
     id: "Group",
     transform: "translate(-1.000000, 0.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "notification"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
     id: "Shape",
+    fill: "#FFFFFF",
     fillRule: "nonzero"
-  }), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("rect", {
+    id: "_Transparent_Rectangle_",
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20"
+  })), /*#__PURE__*/React.createElement("circle", {
     id: "Oval",
     stroke: "#161616",
     fill: "#DA1E28",
     cx: "15",
     cy: "4.375",
     r: "2.5"
-  })));
+  }))));
 };
 export { UnreadNotificationBell };

package/es/components/PageHeader/PageHeader.js

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

package/es/components/PageHeader/PageHeaderUtils.js

@@ -65,11 +65,11 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     var scrollableContainer = scrollableAncestor(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
+    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.offsetTop : 0;
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between. It does not change on scroll or resize.
-    update.headerOffset = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
+    update.headerOffset = scrollableContainerTop + offsetTopMeasuringRef.current.getBoundingClientRect().top;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;

package/es/components/RemoveModal/RemoveModal.js

@@ -21,12 +21,6 @@ import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
 import { usePreviousValue } from '../../global/js/hooks';
 var componentName = 'RemoveModal';
-
-/**
-The `RemoveModal` covers what is known as high impact and medium impact deleting.
-Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
-For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
- */
 export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var body = _ref.body,
     className = _ref.className,

package/es/components/SidePanel/SidePanel.js

@@ -444,7 +444,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var contentRef = ref || sidePanelRef;
-  useResizeObserver(contentRef, handleResize);
+  useResizeObserver(contentRef, {
+    callback: 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,

package/es/components/SingleAddSelect/SingleAddSelect.js

@@ -13,10 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
 var componentName = 'SingleAddSelect';
-
-/**
- * Used to add or select one or more items from larger lists or hierarchies.
- */
 export var SingleAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   // remove multi add select specific props
   var validProps = prepareProps(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);