@carbon/ibm-products 2.1.3 → 2.2.0

package/lib/components/PageHeader/PageHeader.js

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

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -71,11 +71,11 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     var scrollableContainer = (0, _scrollableAncestor.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/lib/components/RemoveModal/RemoveModal.js

@@ -29,12 +29,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (0, _defineProperty2.default)(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; }
 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.
- */
 var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var body = _ref.body,
     className = _ref.className,

package/lib/components/SidePanel/SidePanel.js

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

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -23,10 +23,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 //
 
 var componentName = 'SingleAddSelect';
-
-/**
- * Used to add or select one or more items from larger lists or hierarchies.
- */
 var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // remove multi add select specific props
   var validProps = (0, _propsHelper.prepareProps)(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);

package/lib/components/StatusIcon/StatusIcon.js

@@ -26,16 +26,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var blockClass = "".concat(_settings.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.
- */
 var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _icons$kind;
   var kind = _ref.kind,

package/lib/components/TagSet/TagSet.js

@@ -164,8 +164,7 @@ var TagSet = /*#__PURE__*/_react.default.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;
@@ -207,8 +206,12 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleSizerTagsResize);
-  (0, _useResizeObserver.useResizeObserver)(tagSetRef, handleResize);
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleSizerTagsResize
+  });
+  (0, _useResizeObserver.useResizeObserver)(tagSetRef, {
+    callback: handleResize
+  });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
     ref: tagSetRef

package/lib/components/Tearsheet/TearsheetShell.js

@@ -63,13 +63,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
   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
 exports.tearsheetHasCloseIcon = tearsheetHasCloseIcon;
 var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
@@ -231,8 +225,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-content"),
-      element: wide ? _react2.Layer : undefined
+      className: "".concat(bc, "__header-content")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__header-fields")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
@@ -257,10 +250,12 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__main"),
-      alwaysRender: includeActions
+      alwaysRender: includeActions,
+      element: wide ? _react2.Layer : undefined
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right'
+      alwaysRender: influencer && influencerPosition === 'right',
+      element: wide ? _react2.Layer : undefined
     }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -15,7 +15,7 @@ require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
 var _icons = require("@carbon/react/icons");
 var _react2 = require("@carbon/react");
-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
  *
@@ -31,12 +31,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.
  */
 var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -49,8 +45,6 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     size = _ref.size,
     theme = _ref.theme,
     tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var icons = {
     user: {
@@ -130,8 +124,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
   return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
     label: tooltipText,
     className: "".concat(blockClass, "__tooltip"),
-    kind: "ghost",
-    align: tooltipAlignment
+    kind: "ghost"
   }, renderUserProfileImage()) : renderUserProfileImage());
 });
 
@@ -180,10 +173,6 @@ UserProfileImage.propTypes = {
    * Set theme in which the component will be rendered
    */
   theme: _propTypes.default.oneOf(['light', 'dark']).isRequired,
-  /**
-   * Specify how the trigger should align with the tooltip
-   */
-  tooltipAlignment: _propTypes.default.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/lib/components/WebTerminal/WebTerminal.js

@@ -45,10 +45,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.
- */
 var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref3;
   var _ref$actions = _ref.actions,

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -37,20 +37,6 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
-  var continueToNextStep = (0, _react.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
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
@@ -178,9 +164,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
               // 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;
             });
           },
@@ -208,5 +194,18 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       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 = (0, _react.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]);
 };
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

package/lib/global/js/hooks/useResizeObserver.js

@@ -14,7 +14,13 @@ var _react = require("react");
  * LICENSE file in the root directory of this source tree.
  */
 
-var useResizeObserver = function useResizeObserver(ref, callback) {
+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 = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
@@ -23,14 +29,8 @@ var useResizeObserver = function useResizeObserver(ref, callback) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
+  var throttleTimeout = (0, _react.useRef)(null);
   var entriesToHandle = (0, _react.useRef)(null);
-  var cb = (0, _react.useRef)(callback);
-  (0, _react.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]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -42,15 +42,29 @@ 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
@@ -60,7 +74,7 @@ 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/lib/global/js/package-settings.js

@@ -81,15 +81,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) {
@@ -136,11 +128,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/lib/global/js/utils/story-helper.js

@@ -4,15 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storyDocsPageTitle = exports.storyDocsPageInfo = exports.storyDocsGuidelines = exports.stackblitzHref = exports.prepareStory = exports.palUsageHref = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.codeSandboxHref = exports.StackblitzLink = exports.CodesandboxLink = void 0;
-var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.StackblitzLink = exports.CodesandboxLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _csf = require("@storybook/csf");
 var _packageSettings = _interopRequireDefault(require("../package-settings"));
 var _storyStructure = require("../../../../../core/story-structure");
-var _changeCase = require("change-case");
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -76,15 +73,12 @@ var prepareStory = function prepareStory(template, options) {
  */
 exports.prepareStory = prepareStory;
 var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
-var codeSandboxHref = function codeSandboxHref(exampleDirectory) {
-  return "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
-};
-exports.codeSandboxHref = codeSandboxHref;
 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.default.createElement("a", {
-    href: href
+    href: codesandbox
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"
@@ -97,15 +91,11 @@ CodesandboxLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
-var stackblitzHref = function stackblitzHref(exampleDirectory) {
-  return "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
-};
-exports.stackblitzHref = stackblitzHref;
 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.default.createElement("a", {
-    href: href
+    href: stackblitz
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on Stackblitz",
     src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
@@ -118,111 +108,13 @@ StackblitzLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
-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 = (0, _slicedToArray2.default)(_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((0, _changeCase.paramCase)(section), "/usage");
-  }
-};
-exports.palUsageHref = palUsageHref;
-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 = (0, _toArray2.default)(_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;
-};
-exports.storyDocsPageTitle = storyDocsPageTitle;
-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 = (0, _toArray2.default)(_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((0, _changeCase.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;
-};
-exports.storyDocsPageInfo = storyDocsPageInfo;
-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"
  */
-exports.storyDocsGuidelines = storyDocsGuidelines;
 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';
 };
 exports.getSelectedCarbonTheme = getSelectedCarbonTheme;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.37",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.23",
+    "jest-config-ibm-cloud-cognitive": "^0.24.24",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "8fb7c59793ba9325124d55ae01191adb45acff4e"
+  "gitHead": "36a061543213748633227ce75ea1441e1edaca7d"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -77,10 +77,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     align-items: center;
   }
 
-  &-form-control-wrapper--radio {
-    cursor: pointer;
-  }
-
   &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -92,5 +92,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
 .#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
   // Need to disable stylelint until dart sass namespace support is added
+  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('header');
 }

package/scss/components/ButtonMenu/_button-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2023
+// Copyright IBM Corp. 2021, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,10 +7,7 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/react/scss/theme' as *;
-@use '@carbon/styles/scss/type';
 
 // TODO: @use(s) of Carbon settings and component styles and other
 // related component styles used by ButtonMenu
@@ -20,37 +17,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
 
 .#{$block-class} {
   min-width: 160px;
-  &.#{$block-class}__wrapper--primary,
-  &.#{$block-class}__wrapper--primary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
-    background-color: $button-primary;
-  }
-  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--primary:hover {
-    background-color: $button-primary-hover;
-  }
-
-  &.#{$block-class}__wrapper--tertiary,
-  &.#{$block-class}__wrapper--tertiary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
-    background-color: $button-tertiary;
-  }
-  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--tertiary:hover {
-    background-color: $button-tertiary-hover;
-  }
-
-  &.#{$block-class}__wrapper--ghost,
-  &.#{$block-class}__wrapper--ghost.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
-    background-color: transparent;
-  }
-  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--ghost:hover {
-    background-color: $layer-hover;
-  }
 
   .#{$block-class}__trigger {
-    @include type.type-style('body-compact-01');
-
-    display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: space-between;
     padding: 0 $spacing-05;
   }
 }