@carbon/ibm-products 2.1.3 → 2.2.0

package/es/components/StatusIcon/StatusIcon.js

@@ -16,16 +16,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--status-icon");
 var componentName = 'StatusIcon';
-
-/**
-The `StatusIcon` component follows the Carbon guidelines for status icons with
-some added specifications around illustration usage. For additional usage
-guidelines and documentation please refer to the links above.
-
-_Status icons_ are an important method of communicating severity level
-information to users. The shapes and colors, communicate severity that enable
-users to quickly assess and identify status and respond accordingly.
- */
 export var StatusIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _icons$kind;
   var kind = _ref.kind,

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

@@ -55,13 +55,7 @@ export var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCl
   return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
 };
 
-/**
- *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
- *
- * The component is not public.
- *
- * See the canvas tab for the component API details.
- * */
+// TearSheetShell is used internally by TearSheet and TearSheetNarrow
 export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
     children = _ref.children,
@@ -222,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, {
@@ -248,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,12 +28,8 @@ var componentName = 'UserProfileImage';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  tooltipAlignment: 'bottom'
-};
 /**
- * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * This is a user profile image component which displays an image, or initials or icon for a user.
  */
 export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -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/components/WebTerminal/WebTerminal.js

@@ -39,10 +39,6 @@ var defaults = {
   documentationLinksIconDescription: 'Show documentation links',
   isInitiallyOpen: false
 };
-
-/**
- * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
- */
 export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref3;
   var _ref$actions = _ref.actions,

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

@@ -1,5 +1,3 @@
-import _toArray from "@babel/runtime/helpers/toArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -12,7 +10,6 @@ import PropTypes from 'prop-types';
 import { sanitize } from '@storybook/csf';
 import pkg from '../package-settings';
 import { getPathForComponent } from '../../../../../core/story-structure';
-import { paramCase } from 'change-case';
 
 /**
  * A helper function to return the structured story title for a component.
@@ -67,14 +64,12 @@ export var prepareStory = function prepareStory(template, options) {
  * The link URL is based on the example directory name and the standard codesandbox URL for package examples.
  */
 var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
-export var codeSandboxHref = function codeSandboxHref(exampleDirectory) {
-  return "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
-};
 export var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
-  var href = codeSandboxHref(exampleDirectory);
+  // const stackblitz = `https://stackblitz.com/${packagePath}/${dir}?file=src%2FExample%2FExample.jsx`;
+  var codesandbox = "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
   return /*#__PURE__*/React.createElement("a", {
-    href: href
+    href: codesandbox
   }, /*#__PURE__*/React.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"
@@ -86,14 +81,11 @@ CodesandboxLink.propTypes = {
    */
   exampleDirectory: PropTypes.string
 };
-export var stackblitzHref = function stackblitzHref(exampleDirectory) {
-  return "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
-};
 export var StackblitzLink = function StackblitzLink(_ref2) {
   var exampleDirectory = _ref2.exampleDirectory;
-  var href = stackblitzHref(exampleDirectory);
+  var stackblitz = "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
   return /*#__PURE__*/React.createElement("a", {
-    href: href
+    href: stackblitz
   }, /*#__PURE__*/React.createElement("img", {
     alt: "Edit on Stackblitz",
     src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
@@ -105,106 +97,12 @@ StackblitzLink.propTypes = {
    */
   exampleDirectory: PropTypes.string
 };
-export var palUsageHref = function palUsageHref(csfFile) {
-  var _csfFile$meta;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
-  var _title$split = title.split('/'),
-    _title$split2 = _slicedToArray(_title$split, 3),
-    _pkg = _title$split2[0],
-    kind = _title$split2[1],
-    section = _title$split2[2];
-  if (/components|patterns/i.test(kind) && name) {
-    return "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat(paramCase(section), "/usage");
-  }
-};
-export var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
-  var _csfFile$meta2;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
-  var _title$split3 = title.split('/'),
-    _title$split4 = _toArray(_title$split3),
-    _pkg = _title$split4[0],
-    kind = _title$split4[1],
-    a = _title$split4[2],
-    b = _title$split4[3],
-    rest = _title$split4.slice(4);
-  var component;
-  if (/components|patterns/i.test(kind)) {
-    // components and patterns have an additional level
-    component = b;
-  } else {
-    component = a;
-  }
-  var name = component.split('#')[0]; // canary always written as Example#canary};
-
-  if (name) {
-    if (rest.length > 0) {
-      return "".concat(name, " (").concat(rest.join(' '), ")");
-    } else {
-      return name;
-    }
-  }
-  console.error('Error: unable to parse title from metadata.');
-  return title;
-};
-export var storyDocsPageInfo = function storyDocsPageInfo(csfFile) {
-  var _csfFile$meta3;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
-  var _title$split5 = title.split('/'),
-    _title$split6 = _toArray(_title$split5),
-    pkg = _title$split6[0],
-    kind = _title$split6[1],
-    a = _title$split6[2],
-    b = _title$split6[3],
-    rest = _title$split6.slice(4);
-  var result = {
-    package: pkg,
-    kind: kind,
-    expectCodedExample: false
-  };
-  var component;
-  if (/components|patterns/i.test(kind)) {
-    result.expectCodedExample = true;
-    // components and patterns have an additional level
-    component = b;
-    result.section = a;
-    result.guidelinesHref = "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat(paramCase(result.section), "/usage");
-  } else {
-    component = a;
-  }
-  var nameSplit = component.split('#'); // canary always written as Example#canary};
-  var name = nameSplit[0];
-  if (nameSplit.length > 1 && nameSplit[1] === 'canary') {
-    result.canary = true;
-  }
-  if (name) {
-    if (rest.length > 0) {
-      result.component = result.title = "".concat(name, " (").concat(rest.join(' '), ")");
-    } else {
-      result.component = name;
-      result.title = name;
-    }
-  } else {
-    console.error('Error: unable to parse title from metadata.');
-    result.title = title;
-  }
-  if (result.guidelinesHref) {
-    result.guidelinesLinkLabel = "".concat(result.title, " usage guidelines");
-  }
-  return result;
-};
-export var storyDocsGuidelines = function storyDocsGuidelines(csfFile) {
-  var storyInfo = storyDocsPageInfo(csfFile);
-  return {
-    href: storyInfo.guidelinesHref,
-    label: storyInfo.guidelinesLinkLabel
-  };
-};
 
 /**
  * A helper function that finds the designated theme on the Storybook canvas.
  * @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

@@ -39,7 +39,7 @@ var componentName = 'AboutModal';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
- * The `AboutModal` component provides a way to communicate product information
+ * The AboutModal component provides a way to communicate product information
  * to users. It is triggered by a user’s action, appears on top of the main
  * page content, and is persistent until dismissed. The purpose of this modal
  * should be immediately apparent to the user, with a clear and obvious path
@@ -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

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -59,14 +58,15 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
-    className, // Apply any supplied class names to the main HTML element.
-    "".concat(carbonPrefix, "--btn--").concat(size), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wrapper--").concat(kind), kind)),
+    className // Apply any supplied class names to the main HTML element.
+    ),
+
     "aria-label": menuAriaLabel,
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     size: size,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("".concat(blockClass, "__trigger"))
+        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(carbonPrefix, "--btn"), "".concat(carbonPrefix, "--btn--").concat(kind), "".concat(carbonPrefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,