@carbon/ibm-products 2.49.1 → 2.50.0-rc.1

package/es/components/TagSet/TagSet.js

@@ -17,7 +17,7 @@ import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 var componentName = 'TagSet';
@@ -32,14 +32,6 @@ var defaults = {
   overflowType: 'default',
   onOverflowTagChange: function onOverflowTagChange() {}
 };
-
-// interface TagType extends TagBaseProps
-// {
-//   label: string;
-//   // we duplicate this prop to improve the DocGen
-//   type?: typeof tagTypes[number];
-// }
-
 var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'start' : _ref$align,
@@ -47,15 +39,20 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
+    overflowAutoAlign = _ref.overflowAutoAlign,
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    showAllTagsLabel = _ref.showAllTagsLabel,
+    _ref$allTagsModalTitl = _ref.allTagsModalTitle,
+    allTagsModalTitle = _ref$allTagsModalTitl === void 0 ? 'All tags' : _ref$allTagsModalTitl,
+    _ref$allTagsModalSear = _ref.allTagsModalSearchLabel,
+    allTagsModalSearchLabel = _ref$allTagsModalSear === void 0 ? 'Search all tags' : _ref$allTagsModalSear,
+    _ref$allTagsModalSear2 = _ref.allTagsModalSearchPlaceholderText,
+    allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
+    _ref$showAllTagsLabel = _ref.showAllTagsLabel,
+    showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
     tags = _ref.tags,
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
@@ -88,13 +85,21 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = useRef(null);
-  var _useState11 = useState(false),
+  var _useState11 = useState(0),
     _useState12 = _slicedToArray(_useState11, 2),
-    popoverOpen = _useState12[0],
-    setPopoverOpen = _useState12[1];
+    maxVisibleCount = _useState12[0],
+    setMaxVisibleCount = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    popoverOpen = _useState14[0],
+    setPopoverOpen = _useState14[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
+  useEffect(function () {
+    var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
+    setMaxVisibleCount(maxCount);
+  }, [maxVisible, tags]);
   useEffect(function () {
     var newSizingTags = [];
     // create sizing tags
@@ -149,6 +154,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
     newDisplayedTags.push( /*#__PURE__*/React__default.createElement(TagSetOverflow, {
       allTagsModalSearchThreshold: allTagsModalSearchThreshold,
+      overflowAutoAlign: overflowAutoAlign,
       className: overflowClassName,
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
@@ -162,10 +168,10 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }));
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible || 3);
+      return setDisplayCount(maxVisibleCount);
     }
 
     // how many will fit?
@@ -195,12 +201,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (willFit < 1) {
       setDisplayCount(0);
     } else {
-      setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
+      setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
+  }, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
   useEffect(function () {
     checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
+  }, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
 
   /* don't know how to test resize */
   /* istanbul ignore next */
@@ -279,21 +285,21 @@ TagSet.propTypes = {
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
-  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  allTagsModalSearchLabel: PropTypes.string,
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * placeholder text for the show all search.
    */
-  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  allTagsModalSearchPlaceholderText: PropTypes.string,
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget: PropTypes.node,
   /**
-   * title for the show all modal. **Note: Required if more than 10 tags**
+   * title for the show all modal.
    */
-  allTagsModalTitle: string_required_if_more_than_10_tags,
+  allTagsModalTitle: PropTypes.string,
   /**
    * className
    */
@@ -325,6 +331,10 @@ TagSet.propTypes = {
    * overflowAlign from the standard tooltip. Default center.
    */
   overflowAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: PropTypes.bool,
   /**
    * overflowClassName for the tooltip popup
    */
@@ -335,10 +345,8 @@ TagSet.propTypes = {
   overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
-   *
-   * **Note:** Required if more than 10 tags
    */
-  showAllTagsLabel: string_required_if_more_than_10_tags,
+  showAllTagsLabel: PropTypes.string,
   /**
    * The tags to be shown in the TagSet. Each tag is specified as an object
    * with properties: **label**\* (required) to supply the tag content, and

package/es/components/TagSet/TagSetOverflow.d.ts

@@ -26,6 +26,10 @@ interface TagSetOverflowProps {
      * Type of rendering displayed inside of the tag overflow component
      */
     overflowType?: OverflowType;
+    /**
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+     */
+    overflowAutoAlign?: boolean;
     /**
      * Open state of the popover
      */

package/es/components/TagSet/TagSetOverflow.js

@@ -13,7 +13,7 @@ import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
 
@@ -28,6 +28,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
+    overflowAutoAlign = _ref.overflowAutoAlign,
     overflowTags = _ref.overflowTags,
     overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
@@ -63,7 +64,8 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     dropShadow: true,
     highContrast: true,
     onKeyDown: handleEscKeyPress,
-    open: popoverOpen
+    open: popoverOpen,
+    autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React__default.createElement(Tag, {
     onClick: function onClick() {
       return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
@@ -115,6 +117,10 @@ TagSetOverflow.propTypes = {
    * overflowAlign from the standard tooltip
    */
   overflowAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: PropTypes.bool,
   /**
    * tags shown in overflow
    */

package/es/components/Tearsheet/Tearsheet.d.ts

@@ -35,7 +35,7 @@ export interface TearsheetProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions: ButtonProps<'button'>[];
+    actions?: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -23,7 +23,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps[];
+    actions?: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -9,7 +9,7 @@ import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
-    actions?: ButtonProps<any>[];
+    actions?: ButtonProps<'button'>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.

package/es/components/Tearsheet/TearsheetShell.js

@@ -301,7 +301,8 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: !!(influencer && influencerPosition === 'right')
+      alwaysRender: !!(influencer && influencerPosition === 'right'),
+      tabIndex: -1
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'

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

@@ -1,4 +1,4 @@
-export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, }: {
+export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, experimentalSecondarySubmit, experimentalSecondarySubmitText, }: {
     firstIncludedStep: any;
     lastIncludedStep: any;
     stepData: any;
@@ -21,4 +21,6 @@ export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedSt
     componentBlockClass: any;
     setCreateComponentActions: any;
     setModalIsOpen: any;
+    experimentalSecondarySubmit: any;
+    experimentalSecondarySubmitText: any;
 }): void;

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

@@ -32,7 +32,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     isSubmitting = _ref.isSubmitting,
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
-    setModalIsOpen = _ref.setModalIsOpen;
+    setModalIsOpen = _ref.setModalIsOpen,
+    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
+    experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText;
   var continueToNextStep = useCallback(function () {
     setIsSubmitting(false);
     setCurrentStep(function (prev) {
@@ -212,6 +214,11 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         return _ref5.apply(this, arguments);
       };
     }();
+    var handleExperimentalSecondarySubmit = function handleExperimentalSecondarySubmit() {
+      if (typeof (experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.onClick) === 'function') {
+        experimentalSecondarySubmit.onClick();
+      }
+    };
     if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
       if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1) {
@@ -232,6 +239,15 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
         } : onUnmount,
         kind: 'ghost'
       });
+      if (experimentalSecondarySubmitText && !(experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.hideSecondarySubmit)) {
+        buttons.push({
+          key: 'create-action-button-experimentalSecondarySubmit',
+          label: experimentalSecondarySubmitText,
+          onClick: handleExperimentalSecondarySubmit,
+          kind: 'secondary',
+          disabled: experimentalSecondarySubmit === null || experimentalSecondarySubmit === void 0 ? void 0 : experimentalSecondarySubmit.disabled
+        });
+      }
       buttons.push({
         key: 'create-action-button-submit',
         label: currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
@@ -243,7 +259,7 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       });
       setCreateComponentActions(buttons);
     }
-  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious, experimentalSecondarySubmit, experimentalSecondarySubmitText]);
 };
 
 export { useCreateComponentStepChange };

package/es/global/js/utils/Wrap.d.ts

@@ -26,6 +26,10 @@ interface WrapProps extends PropsWithChildren {
      */
     neverRender?: boolean;
     className?: string;
+    /**
+     * Tab index for the wrapper div
+     */
+    tabIndex?: number;
 }
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other

package/lib/components/AboutModal/AboutModal.js

@@ -15,6 +15,7 @@ var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
+var useFocus = require('../../global/js/hooks/useFocus.js');
 var settings = require('../../settings.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
@@ -54,9 +55,13 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     version = _ref.version,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var bodyRef = React.useRef(null);
+  var localRef = React.useRef();
+  var modalRef = ref || localRef;
   var contentRef = React.useRef(null);
   var contentId = uuidv4["default"]();
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  var _useFocus = useFocus.useFocus(modalRef),
+    firstElement = _useFocus.firstElement;
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
@@ -64,16 +69,28 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     var _contentRef$current;
     bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
-  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  React.useEffect(function () {
+    if (open) {
+      setTimeout(function () {
+        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+      }, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.unstable_FeatureFlags, {
+    flags: {
+      'enable-experimental-focus-wrap-without-sentinels': true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     ),
-    "aria-label": modalAriaLabel
+    "aria-label": modalAriaLabel,
+    ref: modalRef
   }, _rollupPluginBabelHelpers.objectSpread2({
     onClose: onClose,
-    open: open,
-    ref: ref
+    open: open
   }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__logo")
   }, logo), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
@@ -104,7 +121,7 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     theme: "g100"
   }, /*#__PURE__*/React__default["default"].createElement(react.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, additionalInfo))));
+  }, additionalInfo)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/ActionBar/ActionBar.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ForwardedRef } from 'react';
 import { ButtonProps } from '@carbon/type';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 interface Action extends ButtonProps {
@@ -49,6 +49,10 @@ interface ActionBarProps extends PropsWithChildren {
      * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
      */
     overflowAriaLabel: string;
+    /**
+     * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+     */
+    overflowMenuRef?: ForwardedRef<HTMLDivElement>;
     /**
      * align tags to right of available space
      */

package/lib/components/ActionBar/ActionBar.js

@@ -26,7 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
+var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
   _excluded2 = ["key", "id"],
   _excluded3 = ["key"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -50,6 +50,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     menuOptionsClass = _ref.menuOptionsClass,
     onWidthChange = _ref.onWidthChange,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowMenuRef = _ref.overflowMenuRef,
     rightAlign = _ref.rightAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(0),
@@ -81,6 +82,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
+      overflowMenuRef: overflowMenuRef,
       overflowItems: [],
       key: "hidden-overflow-menu",
       tabIndex: -1
@@ -96,7 +98,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
         tabIndex: -1
       }));
     }))));
-  }, [actions]);
+  }, [actions, overflowMenuRef]);
 
   // creates displayed items based on actions, displayCount and alignment
   React.useEffect(function () {
@@ -117,12 +119,13 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
       newDisplayedItems.push( /*#__PURE__*/React__default["default"].createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
         menuOptionsClass: menuOptionsClass,
         overflowAriaLabel: overflowAriaLabel,
+        overflowMenuRef: overflowMenuRef,
         overflowItems: newOverflowItems,
         key: "overflow-menu-".concat(internalId.current)
       }));
     }
     setDisplayedItems(newDisplayedItems);
-  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
+  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
 
   // determine display count based on space available and width of pageActions
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
@@ -259,6 +262,13 @@ exports.ActionBar.propTypes = {
    * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
    */
   overflowAriaLabel: index["default"].string.isRequired,
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: index["default"].oneOfType([index["default"].shape({
+    current: index["default"].elementType
+  }), index["default"].object]),
   /**
    * align tags to right of available space
    */

package/lib/components/ActionBar/ActionBarOverflowItems.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
 import PropTypes from 'prop-types';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type OverflowItem = {
@@ -16,9 +16,13 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
      */
     menuOptionsClass?: string;
     /**
-     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     * overflowAriaLabel label for open close button overflow used for action bar items that do not fit.
      */
     overflowAriaLabel?: string;
+    /**
+     * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+     */
+    overflowMenuRef?: ForwardedRef<HTMLDivElement>;
     /**
      * overflowItems: items to bre shown in the ActionBar overflow menu
      */
@@ -29,7 +33,7 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
     tabIndex?: number;
 }
 export declare const ActionBarOverflowItems: {
-    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -48,6 +52,11 @@ export declare const ActionBarOverflowItems: {
          * overflowItems: items to bre shown in the ActionBar overflow menu
          */
         overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
+        /**
+         * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+         */
+        /**@ts-ignore */
+        overflowMenuRef: PropTypes.Requireable<object>;
         /**
          * Optional tab index
          */

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -28,9 +28,12 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
   var className = _ref.className,
     menuOptionsClass = _ref.menuOptionsClass,
     overflowItems = _ref.overflowItems,
-    overflowAriaLabel = _ref.overflowAriaLabel;
+    overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowMenuRef = _ref.overflowMenuRef;
   var internalId = React.useRef(uuidv4["default"]());
-  return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: overflowMenuRef
+  }, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
     "aria-label": overflowAriaLabel,
     className: cx__default["default"](blockClass, className),
     direction: "bottom",
@@ -54,7 +57,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
       }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
-  }));
+  })));
 };
 ActionBarOverflowItems.displayName = componentName;
 ActionBarOverflowItems.propTypes = {
@@ -75,6 +78,13 @@ ActionBarOverflowItems.propTypes = {
    * overflowItems: items to bre shown in the ActionBar overflow menu
    */
   overflowItems: index["default"].arrayOf(index["default"].element),
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: index["default"].oneOfType([index["default"].shape({
+    current: index["default"].elementType
+  }), index["default"].object]),
   /**
    * Optional tab index
    */

package/lib/components/Carousel/Carousel.js

@@ -276,8 +276,7 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     tabIndex: -1,
     className: cx__default["default"](blockClass, className),
-    ref: carouselRef,
-    role: "main"
+    ref: carouselRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"]("".concat(blockClass, "__elements-container"))
   }, /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -93,7 +93,6 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: "".concat(overlayBlockClass, "__handle"),

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -52,7 +52,6 @@ exports.CoachmarkHeader = /*#__PURE__*/React__default["default"].forwardRef(func
   return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme)),
     ref: ref
-    // role="main"
   }, devtools.getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(overlayBlockClass, "--close-btn-container")
   }, /*#__PURE__*/React__default["default"].createElement(react.Button, {

package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -48,7 +48,6 @@ exports.CoachmarkOverlayElement = /*#__PURE__*/React__default["default"].forward
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content")
   }, title && /*#__PURE__*/React__default["default"].createElement("h2", {

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -120,7 +120,6 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React__default["default"].forwar
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, devtools.getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React__default["default"].createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -89,8 +89,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }
   return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
-    ref: ref,
-    role: "main"
+    ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(CoachmarkHeader.CoachmarkHeader, {
     onClose: function onClose() {
       setLinkFocusIndex(0);

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -89,7 +89,6 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
-    role: "main",
     ref: conditionBuilderRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, {
     className: "".concat(util.blockClass, "__").concat(variant),
@@ -180,8 +179,7 @@ exports.ConditionBuilder.propTypes = {
   }),
   /**
    * This is a mandatory prop that defines the input to the condition builder.
-   
-   */
+    */
   /**@ts-ignore */
   inputConfig: index["default"].shape({
     properties: index["default"].arrayOf(index["default"].shape({