@carbon/ibm-products 2.1.2 → 2.2.0

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/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/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/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/TagSet/TagSet.js

@@ -156,8 +156,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (sizingTags.length > 0) {
       var spaceAvailable = tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
-        var _sizingTags$i;
-        var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
+        var tagWidth = sizingTags[i].offsetWidth;
         if (spaceAvailable >= tagWidth) {
           spaceAvailable -= tagWidth;
           willFit += 1;
@@ -199,8 +198,12 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-  useResizeObserver(sizingContainerRef, handleSizerTagsResize);
-  useResizeObserver(tagSetRef, handleResize);
+  useResizeObserver(sizingContainerRef, {
+    callback: handleSizerTagsResize
+  });
+  useResizeObserver(tagSetRef, {
+    callback: handleResize
+  });
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),
     ref: tagSetRef

package/es/components/Tearsheet/TearsheetShell.js

@@ -216,8 +216,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React.createElement(Wrap, {
-      className: "".concat(bc, "__header-content"),
-      element: wide ? Layer : undefined
+      className: "".concat(bc, "__header-content")
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__header-fields")
     }, /*#__PURE__*/React.createElement(Wrap, {
@@ -242,10 +241,12 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__main"),
-      alwaysRender: includeActions
+      alwaysRender: includeActions,
+      element: wide ? Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right'
+      alwaysRender: influencer && influencerPosition === 'right',
+      element: wide ? Layer : undefined
     }, children), /*#__PURE__*/React.createElement(Wrap, {
       className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'

package/es/components/UserProfileImage/UserProfileImage.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 /**
  * Copyright IBM Corp. 2021, 2021
  *
@@ -28,10 +28,6 @@ var componentName = 'UserProfileImage';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  tooltipAlignment: 'bottom'
-};
 /**
  * This is a user profile image component which displays an image, or initials or icon for a user.
  */
@@ -46,8 +42,6 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     size = _ref.size,
     theme = _ref.theme,
     tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = _objectWithoutProperties(_ref, _excluded);
   var icons = {
     user: {
@@ -127,8 +121,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
     label: tooltipText,
     className: "".concat(blockClass, "__tooltip"),
-    kind: "ghost",
-    align: tooltipAlignment
+    kind: "ghost"
   }, renderUserProfileImage()) : renderUserProfileImage());
 });
 
@@ -176,10 +169,6 @@ UserProfileImage.propTypes = {
    * Set theme in which the component will be rendered
    */
   theme: PropTypes.oneOf(['light', 'dark']).isRequired,
-  /**
-   * Specify how the trigger should align with the tooltip
-   */
-  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in the display name to have it shown on hover
    */

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -30,20 +30,6 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
-  var continueToNextStep = useCallback(function () {
-    setIsSubmitting(false);
-    setCurrentStep(function (prev) {
-      // Find next included step to render
-      // There will always be a next step otherwise we will
-      // have reach the onSubmit
-      do {
-        var _stepData;
-        prev++;
-      } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
-      return prev;
-    });
-  }, [setCurrentStep, setIsSubmitting, stepData]);
-
   // useEffect to handle multi step logic
   useEffect(function () {
     var onUnmount = function onUnmount() {
@@ -171,9 +157,9 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
               // There will always be a previous step otherwise we will
               // have disabled the back button since we have reached the first visible step
               do {
-                var _stepData2;
+                var _stepData;
                 prev--;
-              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
               return prev;
             });
           },
@@ -201,4 +187,17 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       setCreateComponentActions(buttons);
     }
   }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
+  var continueToNextStep = useCallback(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData2;
+        prev++;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, setIsSubmitting, stepData]);
 };

package/es/global/js/hooks/useResizeObserver.js

@@ -5,8 +5,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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 { useRef, useState, useLayoutEffect, useEffect } from 'react';
-export var useResizeObserver = function useResizeObserver(ref, callback) {
+import { useRef, useState, useLayoutEffect } from 'react';
+export var useResizeObserver = function useResizeObserver(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    callback: null,
+    throttleInterval: 0
+  };
+  var callback = options.callback,
+    throttleInterval = options.throttleInterval;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -15,14 +21,8 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
     _useState4 = _slicedToArray(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
+  var throttleTimeout = useRef(null);
   var entriesToHandle = useRef(null);
-  var cb = useRef(callback);
-  useEffect(function () {
-    // ref for callback removes it as dependency fro useLayoutEffect
-    // This significantly reduces repeated calls if a function is redefined on every
-    // render
-    cb.current = callback;
-  }, [callback]);
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -34,15 +34,29 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       var entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
-      cb.current && cb.current(entry.contentRect);
+      throttleTimeout.current = null;
+      callback && callback(entry.contentRect);
     };
     var observer = new ResizeObserver(function (entries) {
       // always update entriesToHandle
       entriesToHandle.current = entries;
-      window.requestAnimationFrame(function () {
-        // do callbacks
+      if (throttleInterval) {
+        // if a throttleInterval check for running timeout
+        if (throttleTimeout.current === null) {
+          // no live timeout set entries to handle and move on
+
+          // set up throttle
+          throttleTimeout.current = setTimeout(function () {
+            // do callbacks
+            doCallbacks();
+            // reset throttle
+            throttleTimeout.current = null;
+          }, throttleInterval);
+        }
+      } else {
+        // no throttle do callbacks every time
         doCallbacks();
-      });
+      }
     });
 
     // observe all refs passed
@@ -52,7 +66,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref]);
+  }, [ref, options]);
   return {
     width: width,
     height: height

package/es/global/js/package-settings.js

@@ -76,15 +76,7 @@ var defaults = {
     'a-new-feature': false,
     'default-portal-target-body': true,
     'Datagrid.useInfiniteScroll': false,
-    'Datagrid.useInlineEdit': false,
-    'Datagrid.useEditableCell': false,
-    'Datagrid.useExpandedRow': false,
-    'Datagrid.useNestedRows': false,
-    'Datagrid.useActionsColumn': false,
-    'Datagrid.useFiltering': false,
-    'Datagrid.useCustomizeColumns': false,
-    'ExampleComponent.secondaryIcon': false,
-    'ExampleComponent.useExample': false
+    'Datagrid.useInlineEdit': false
   }
 };
 var warningMessageComponent = function warningMessageComponent(property) {
@@ -131,11 +123,6 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
 });
 var feature = new Proxy(_objectSpread({}, defaults.feature), {
   set: function set(target, property, value) {
-    // If we receive a feature flag that doesn't exist in our defaults we should not log
-    // a warning message and instead just return
-    if (!Object.getOwnPropertyDescriptor(defaults.feature, property)) {
-      return true;
-    }
     if (target[property] !== true && !silent && value) {
       // not already true, not silent, and now true
       console.warn(warningMessageFeature(property));

package/es/global/js/utils/story-helper.js

@@ -103,6 +103,6 @@ StackblitzLink.propTypes = {
  * @returns "dark" or "light"
  */
 export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
-  var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
+  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
   return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };

package/lib/components/AboutModal/AboutModal.js

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

package/lib/components/ActionBar/ActionBar.js

@@ -192,8 +192,12 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   // // resize of the items
-  (0, _useResizeObserver.useResizeObserver)(sizingRef, handleResize);
-  (0, _useResizeObserver.useResizeObserver)(localRef, handleResize);
+  (0, _useResizeObserver.useResizeObserver)(sizingRef, {
+    callback: handleResize
+  });
+  (0, _useResizeObserver.useResizeObserver)(localRef, {
+    callback: handleResize
+  });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
     ref: localRef

package/lib/components/AddSelect/AddSelectFormControl.js

@@ -14,15 +14,16 @@ var _UserProfileImage = require("../UserProfileImage");
 var componentName = 'AddSelectFormControl';
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
 var AddSelectFormControl = function AddSelectFormControl(_ref) {
+  var _controlProps;
   var item = _ref.item,
     onClick = _ref.onClick,
     selected = _ref.selected,
     type = _ref.type;
-  var controlProps = (0, _defineProperty2.default)({
+  var controlProps = (_controlProps = {
     onClick: onClick,
-    className: "".concat(blockClass, "-form-control-wrapper ").concat(blockClass, "-form-control-wrapper--").concat(type),
-    size: 20
-  }, "aria-labelledby", "control-label-".concat(item.id));
+    id: item.id,
+    className: "".concat(blockClass, "-form-control-wrapper")
+  }, (0, _defineProperty2.default)(_controlProps, "aria-label", item.title), (0, _defineProperty2.default)(_controlProps, "size", 20), _controlProps);
   var getCheckbox = function getCheckbox() {
     if (selected) {
       return /*#__PURE__*/_react.default.createElement(_icons.CheckboxCheckedFilled, controlProps);
@@ -74,8 +75,7 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
   }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-form-control-label-text")
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(blockClass, "-cell-title"),
-    id: "control-label-".concat(item.id)
+    className: "".concat(blockClass, "-cell-title")
   }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(blockClass, "-cell-subtitle")
   }, item.subtitle))));

package/lib/components/AddSelect/AddSelectRow.js

@@ -47,7 +47,6 @@ var AddSelectRow = function AddSelectRow(_ref) {
     setMultiSelection = _ref.setMultiSelection,
     setParentSelected = _ref.setParentSelected,
     setSingleSelection = _ref.setSingleSelection,
-    setSize = _ref.setSize,
     singleSelection = _ref.singleSelection;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -130,20 +129,14 @@ var AddSelectRow = function AddSelectRow(_ref) {
   var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
   var tabIndex = getTabIndex();
   var selected = isSelected();
-  var expanded = parentSelected === item.id;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected()), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), expanded), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), parentSelected === item.id), _cx)),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,
-    role: "row",
-    "aria-selected": selected,
-    "aria-posinset": index,
-    "aria-setsize": setSize,
-    "aria-expanded": expanded
+    role: "row"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-cell"),
-    role: "gridcell"
+    className: "".concat(blockClass, "-cell")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-cell-wrapper")
   }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
@@ -156,7 +149,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
     type: "inline",
     items: modifiers.options,
     label: modifiers.label,
-    disabled: !isSelected(),
+    disabled: !isSelected(item.id),
     className: "".concat(blockClass, "-dropdown"),
     initialSelectedItem: item[modifiers.id],
     onChange: function onChange(_ref3) {
@@ -181,9 +174,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
     hasIconOnly: true,
     onClick: onNavigateItem,
     kind: "ghost",
-    size: "sm",
-    tabIndex: -1,
-    "aria-hidden": true
+    size: "sm"
   }), item.meta && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     className: "".concat(blockClass, "-view-meta"),
     renderIcon: function renderIcon(props) {
@@ -221,7 +212,6 @@ AddSelectRow.propTypes = {
   setMultiSelection: _propTypes.default.func,
   setParentSelected: _propTypes.default.func,
   setSingleSelection: _propTypes.default.func,
-  setSize: _propTypes.default.number,
   singleSelection: _propTypes.default.string
 };
 AddSelectRow.displayName = componentName;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -167,9 +167,6 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
   }, [breadcrumbs, displayCount]);
   var checkFullyVisibleBreadcrumbItems = function checkFullyVisibleBreadcrumbItems() {
-    if (!breadcrumbItemWithOverflow.current) {
-      return;
-    }
     var displayItemIndex = function displayItemIndex(itemCount, index) {
       // In this data set the overflow measuring item is [0]
       // so the first displayItem in the list is [1]
@@ -260,9 +257,13 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   }
 
   // container resize
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleResize);
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleResize
+  });
   // item resize
-  (0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, handleResize);
+  (0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, {
+    callback: handleResize
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
     ref: breadcrumbItemWithOverflow