@carbon/ibm-products 2.72.1 → 2.73.0-rc.0

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -63,6 +63,7 @@ let BreadcrumbWithOverflow = _ref => {
     }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
       enableV12Overflowmenu: true
     }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+      role: "navigation",
       "aria-label": overflowAriaLabel,
       label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
@@ -92,6 +93,7 @@ let BreadcrumbWithOverflow = _ref => {
     }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: `${blockClass}-hidden-overflow-${internalId}`
     }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+      role: "navigation",
       "aria-label": overflowAriaLabel,
       renderIcon: props => /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
         size: 32

package/es/components/CreateFullPage/CreateFullPage.js

@@ -173,7 +173,8 @@ let CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${blockClass}__content`
   }, /*#__PURE__*/React__default.createElement(Form, {
     className: `${blockClass}__form`,
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, /*#__PURE__*/React__default.createElement(StepsContext.Provider, {
     value: {
       currentStep,

package/es/components/CreateModal/CreateModal.js

@@ -63,7 +63,8 @@ let CreateModal = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: `${blockClass}__description`
   }, description), /*#__PURE__*/React__default.createElement(Form, {
     className: `${blockClass}__form`,
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, children)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     kind: "secondary",

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -82,7 +82,8 @@ let CreateSidePanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${blockClass}__form-description-text ${blockClass}__content-text`
   }, formDescription), /*#__PURE__*/React__default.createElement(Form, {
     className: `${blockClass}__form`,
-    "aria-labelledby": formTitleId
+    "aria-labelledby": formTitleId,
+    onSubmit: e => e.preventDefault()
   }, children));
 });
 CreateSidePanel = pkg.checkComponentEnabled(CreateSidePanel, componentName);

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -167,7 +167,8 @@ let CreateTearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: `${blockClass}__content`,
     ref: contentRef
   }, /*#__PURE__*/React__default.createElement(Form, {
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, /*#__PURE__*/React__default.createElement(StepsContext.Provider, {
     value: {
       currentStep,

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -78,7 +78,8 @@ let CreateTearsheetNarrow = /*#__PURE__*/React__default.forwardRef((_ref, ref) =
     className: cx(`${blockClass}__form-description-text`, formTextClass)
   }, formDescription), /*#__PURE__*/React__default.createElement(Form, {
     className: `${blockClass}__form`,
-    "aria-labelledby": formTitleId
+    "aria-labelledby": formTitleId,
+    onSubmit: e => e.preventDefault()
   }, children));
 });
 

package/es/components/EmptyStates/EmptyStateContent.js

@@ -31,7 +31,7 @@ const EmptyStateContent = props => {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${blockClass}__subtitle`, {
       [`${blockClass}__subtitle--small`]: size === 'sm'
     })

package/es/components/EmptyStates/EmptyStateV2.js

@@ -59,7 +59,7 @@ let EmptyStateV2 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${blockClass}__subtitle`, {
       [`${blockClass}__subtitle--small`]: size === 'sm'
     })

package/es/components/PageHeader/next/PageHeader.js

@@ -35,6 +35,7 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
     ...other
   } = _ref;
   const [refs, setRefs] = useState({});
+  const [pageActionsInstance, setPageActionsInstance] = useState(null);
   const tempRef = useRef(null);
   const componentRef = ref ?? tempRef;
   const classNames = cx({
@@ -45,8 +46,10 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
   // Used to set CSS custom property with PageHeaderContent height to be used
   // for sticky positioning
   useResizeObserver(componentRef, () => {
-    if (componentRef?.current && refs?.contentRef?.current) {
-      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight;
+    if (componentRef?.current) {
+      // It's possible we don't have the content element
+      // in which case we set it's height to 0
+      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight ?? 0;
       const totalHeaderOffset = getHeaderOffset(componentRef?.current);
       componentRef?.current.style.setProperty(`--${pkg.prefix}-page-header-header-top`, `${(Math.round(pageHeaderContentHeight) - totalHeaderOffset) * -1}px`);
       componentRef?.current.style.setProperty(`--${pkg.prefix}-page-header-breadcrumb-top`, `${totalHeaderOffset}px`);
@@ -54,6 +57,7 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
   });
   const [fullyCollapsed, setFullyCollapsed] = useState(false);
   const [titleClipped, setTitleClipped] = useState(false);
+  const [contentActionsClipped, setContentActionsClipped] = useState(false);
 
   // Intersection Observer setup, tracks if the PageHeaderContent is visible on page.
   // If it is not visible, we should set fully collapsed to true so that the
@@ -91,12 +95,29 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
       threshold: 0.1
     });
+    if (!refs?.contentActions?.current) {
+      return;
+    }
+    const contentActionsObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === refs?.contentActions.current) {
+          setContentActionsClipped(!entry.isIntersecting);
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 48) * -1}px 0px 0px 0px`,
+      threshold: 0.1
+    });
     if (refs?.contentRef.current) {
       contentObserver.observe(refs?.contentRef.current);
     }
     if (refs?.titleRef.current) {
       titleObserver.observe(refs?.titleRef.current);
     }
+    if (refs?.contentActions.current) {
+      contentActionsObserver.observe(refs?.contentActions.current);
+    }
     return () => {
       if (!refs?.contentRef?.current) {
         return;
@@ -105,7 +126,11 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       if (!refs?.titleRef?.current) {
         return;
       }
-      contentObserver.unobserve(refs?.titleRef.current);
+      titleObserver.unobserve(refs?.titleRef.current);
+      if (!refs?.contentActions?.current) {
+        return;
+      }
+      contentActionsObserver.unobserve(refs?.contentActions.current);
     };
   }, [refs, componentRef]);
   return /*#__PURE__*/React__default.createElement(PageHeaderContext.Provider, {
@@ -113,7 +138,10 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       refs,
       setRefs,
       fullyCollapsed,
-      titleClipped
+      pageActionsInstance,
+      setPageActionsInstance,
+      titleClipped,
+      contentActionsClipped
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
@@ -140,13 +168,19 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function
     pageActionsFlush,
     ...other
   } = _ref2;
+  const {
+    pageActionsInstance: globalActions,
+    contentActionsClipped
+  } = usePageHeader();
   const classNames = cx({
     [`${blockClass}__breadcrumb-bar`]: true,
     [`${blockClass}__breadcrumb-bar-border`]: border,
     [`${blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
   }, className);
   const contentActionsClasses = cx({
-    [`${blockClass}__breadcrumb__content-actions`]: !contentActionsFlush
+    [`${blockClass}__breadcrumb__content-actions`]: !contentActionsFlush,
+    [`${blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
+    [`${blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
   });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
@@ -188,7 +222,8 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
   const contentRef = useRef(null);
   const componentRef = ref ?? contentRef;
   const {
-    setRefs
+    setRefs,
+    setPageActionsInstance
   } = usePageHeader();
   const classNames = cx({
     [`${blockClass}__content`]: true
@@ -204,6 +239,12 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    if (pageActions) {
+      setPageActionsInstance(pageActions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageActions]);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
@@ -287,8 +328,14 @@ const PageHeaderContentPageActions = _ref4 => {
     actions,
     ...other
   } = _ref4;
-  const classNames = cx({
-    [`${blockClass}__content__page-actions`]: true
+  const {
+    setRefs,
+    contentActionsClipped
+  } = usePageHeader();
+  const classNames = cx(`${blockClass}__content__page-actions`, {
+    // Revisit this:
+    // May want to only add this class if there are content actions in the breadcrumb bar as well
+    [`${blockClass}__content__page-actions--clipped`]: contentActionsClipped
   }, className);
   const containerRef = useRef(null);
   const offsetRef = useRef(null);
@@ -303,6 +350,13 @@ const PageHeaderContentPageActions = _ref4 => {
       document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);
     }
   }, [menuButtonVisibility]);
+  useEffect(() => {
+    setRefs(prev => ({
+      ...prev,
+      contentActions: containerRef
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   useEffect(() => {
     if (!containerRef.current || !Array.isArray(actions)) {
       return;
@@ -625,7 +679,9 @@ const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((_ref9, ref) => {
     isCurrentPage: true
   }, other, {
     className: cx(className, `${pkg.prefix}--page-header-title-breadcrumb`, {
-      [`${pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef
+      [`${pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef,
+      [`${pkg.prefix}--page-header-title-breadcrumb-show__with-content-element`]: !!refs?.contentRef,
+      [`${pkg.prefix}--page-header-title-breadcrumb-show__without-content-element`]: !refs?.contentRef
     })
   }), children);
 });

package/es/components/PageHeader/next/context.d.ts

@@ -13,12 +13,16 @@ import { RefObject } from 'react';
 export type PageHeaderRefs = {
     contentRef?: RefObject<HTMLDivElement | null>;
     titleRef?: RefObject<HTMLHeadingElement | null>;
+    contentActions?: RefObject<HTMLDivElement | null>;
 };
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
     setRefs: React.Dispatch<React.SetStateAction<PageHeaderRefs>>;
+    pageActionsInstance?: React.ReactNode;
+    setPageActionsInstance: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     fullyCollapsed?: boolean;
     titleClipped?: boolean;
+    contentActionsClipped?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
 export declare function usePageHeader(): PageHeaderContextType;

package/es/components/PageHeader/next/context.js

@@ -17,7 +17,10 @@ const PageHeaderContext = /*#__PURE__*/createContext({
   fullyCollapsed: false,
   setRefs: () => {},
   refs: {},
-  titleClipped: false
+  titleClipped: false,
+  contentActionsClipped: false,
+  pageActionsInstance: null,
+  setPageActionsInstance: () => {}
 });
 function usePageHeader() {
   const context = useContext(PageHeaderContext);

package/es/components/PageHeader/next/overflowHandler.js

@@ -27,7 +27,7 @@ function getSize(el, dimension) {
   let size = el.getBoundingClientRect()[dimension];
   el.style.display = originalDisplay;
   const computedStyles = getComputedStyle(el);
-  size = dimension === 'width' ? size + parseInt(computedStyles.paddingLeft) + parseInt(computedStyles.paddingRight) + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.paddingTop) + parseInt(computedStyles.paddingBottom) + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
+  size = dimension === 'width' ? size + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
   return size;
 }
 

package/es/components/SidePanel/SidePanel.js

@@ -459,7 +459,7 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     }, _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React__default.createElement(ArrowLeft, null))), title && title.length && labelText && labelText.length && /*#__PURE__*/React__default.createElement("p", {
       className: `${blockClass}__label-text`,
       ref: labelTextRef
-    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default.createElement("div", {
+    }, labelText), title && title.length && renderTitle(), (normalizedDecorator || !hideCloseButton) && /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}__decorator-and-close`
     }, normalizedDecorator, !hideCloseButton && /*#__PURE__*/React__default.createElement(IconButton, {
       className: `${blockClass}__close-button`,

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -65,6 +65,7 @@ exports.BreadcrumbWithOverflow = _ref => {
     }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
       enableV12Overflowmenu: true
     }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
+      role: "navigation",
       "aria-label": overflowAriaLabel,
       label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
@@ -94,6 +95,7 @@ exports.BreadcrumbWithOverflow = _ref => {
     }, /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
       key: `${blockClass}-hidden-overflow-${internalId}`
     }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
+      role: "navigation",
       "aria-label": overflowAriaLabel,
       renderIcon: props => /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
         size: 32

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -175,7 +175,8 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: `${blockClass}__content`
   }, /*#__PURE__*/React.createElement(react.Form, {
     className: `${blockClass}__form`,
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep,

package/lib/components/CreateModal/CreateModal.js

@@ -65,7 +65,8 @@ exports.CreateModal = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${blockClass}__description`
   }, description), /*#__PURE__*/React.createElement(react.Form, {
     className: `${blockClass}__form`,
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, children)), /*#__PURE__*/React.createElement(react.ModalFooter, null, /*#__PURE__*/React.createElement(react.Button, {
     type: "button",
     kind: "secondary",

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -84,7 +84,8 @@ exports.CreateSidePanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: `${blockClass}__form-description-text ${blockClass}__content-text`
   }, formDescription), /*#__PURE__*/React.createElement(react.Form, {
     className: `${blockClass}__form`,
-    "aria-labelledby": formTitleId
+    "aria-labelledby": formTitleId,
+    onSubmit: e => e.preventDefault()
   }, children));
 });
 exports.CreateSidePanel = settings.pkg.checkComponentEnabled(exports.CreateSidePanel, componentName);

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -169,7 +169,8 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: `${blockClass}__content`,
     ref: contentRef
   }, /*#__PURE__*/React.createElement(react.Form, {
-    "aria-label": title
+    "aria-label": title,
+    onSubmit: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep,

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -80,7 +80,8 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: cx(`${blockClass}__form-description-text`, formTextClass)
   }, formDescription), /*#__PURE__*/React.createElement(react.Form, {
     className: `${blockClass}__form`,
-    "aria-labelledby": formTitleId
+    "aria-labelledby": formTitleId,
+    onSubmit: e => e.preventDefault()
   }, children));
 });
 

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -33,7 +33,7 @@ const EmptyStateContent = props => {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
-  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("div", {
     className: cx(`${blockClass}__subtitle`, {
       [`${blockClass}__subtitle--small`]: size === 'sm'
     })

package/lib/components/EmptyStates/EmptyStateV2.js

@@ -61,7 +61,7 @@ exports.EmptyStateV2 = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
-  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("div", {
     className: cx(`${blockClass}__subtitle`, {
       [`${blockClass}__subtitle--small`]: size === 'sm'
     })

package/lib/components/PageHeader/next/PageHeader.js

@@ -37,6 +37,7 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
     ...other
   } = _ref;
   const [refs, setRefs] = React.useState({});
+  const [pageActionsInstance, setPageActionsInstance] = React.useState(null);
   const tempRef = React.useRef(null);
   const componentRef = ref ?? tempRef;
   const classNames = cx({
@@ -47,8 +48,10 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
   // Used to set CSS custom property with PageHeaderContent height to be used
   // for sticky positioning
   useResizeObserver.useResizeObserver(componentRef, () => {
-    if (componentRef?.current && refs?.contentRef?.current) {
-      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight;
+    if (componentRef?.current) {
+      // It's possible we don't have the content element
+      // in which case we set it's height to 0
+      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight ?? 0;
       const totalHeaderOffset = utils.getHeaderOffset(componentRef?.current);
       componentRef?.current.style.setProperty(`--${settings.pkg.prefix}-page-header-header-top`, `${(Math.round(pageHeaderContentHeight) - totalHeaderOffset) * -1}px`);
       componentRef?.current.style.setProperty(`--${settings.pkg.prefix}-page-header-breadcrumb-top`, `${totalHeaderOffset}px`);
@@ -56,6 +59,7 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
   });
   const [fullyCollapsed, setFullyCollapsed] = React.useState(false);
   const [titleClipped, setTitleClipped] = React.useState(false);
+  const [contentActionsClipped, setContentActionsClipped] = React.useState(false);
 
   // Intersection Observer setup, tracks if the PageHeaderContent is visible on page.
   // If it is not visible, we should set fully collapsed to true so that the
@@ -93,12 +97,29 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
       rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
       threshold: 0.1
     });
+    if (!refs?.contentActions?.current) {
+      return;
+    }
+    const contentActionsObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === refs?.contentActions.current) {
+          setContentActionsClipped(!entry.isIntersecting);
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 48) * -1}px 0px 0px 0px`,
+      threshold: 0.1
+    });
     if (refs?.contentRef.current) {
       contentObserver.observe(refs?.contentRef.current);
     }
     if (refs?.titleRef.current) {
       titleObserver.observe(refs?.titleRef.current);
     }
+    if (refs?.contentActions.current) {
+      contentActionsObserver.observe(refs?.contentActions.current);
+    }
     return () => {
       if (!refs?.contentRef?.current) {
         return;
@@ -107,7 +128,11 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
       if (!refs?.titleRef?.current) {
         return;
       }
-      contentObserver.unobserve(refs?.titleRef.current);
+      titleObserver.unobserve(refs?.titleRef.current);
+      if (!refs?.contentActions?.current) {
+        return;
+      }
+      contentActionsObserver.unobserve(refs?.contentActions.current);
     };
   }, [refs, componentRef]);
   return /*#__PURE__*/React.createElement(context.PageHeaderContext.Provider, {
@@ -115,7 +140,10 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
       refs,
       setRefs,
       fullyCollapsed,
-      titleClipped
+      pageActionsInstance,
+      setPageActionsInstance,
+      titleClipped,
+      contentActionsClipped
     }
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
@@ -142,13 +170,19 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
     pageActionsFlush,
     ...other
   } = _ref2;
+  const {
+    pageActionsInstance: globalActions,
+    contentActionsClipped
+  } = context.usePageHeader();
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}__breadcrumb-bar`]: true,
     [`${PageHeaderUtils.blockClass}__breadcrumb-bar-border`]: border,
     [`${PageHeaderUtils.blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
   }, className);
   const contentActionsClasses = cx({
-    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions`]: !contentActionsFlush
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions`]: !contentActionsFlush,
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
+    [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
   });
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
@@ -190,7 +224,8 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
   const contentRef = React.useRef(null);
   const componentRef = ref ?? contentRef;
   const {
-    setRefs
+    setRefs,
+    setPageActionsInstance
   } = context.usePageHeader();
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}__content`]: true
@@ -206,6 +241,12 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  React.useEffect(() => {
+    if (pageActions) {
+      setPageActionsInstance(pageActions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageActions]);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
@@ -289,8 +330,14 @@ const PageHeaderContentPageActions = _ref4 => {
     actions,
     ...other
   } = _ref4;
-  const classNames = cx({
-    [`${PageHeaderUtils.blockClass}__content__page-actions`]: true
+  const {
+    setRefs,
+    contentActionsClipped
+  } = context.usePageHeader();
+  const classNames = cx(`${PageHeaderUtils.blockClass}__content__page-actions`, {
+    // Revisit this:
+    // May want to only add this class if there are content actions in the breadcrumb bar as well
+    [`${PageHeaderUtils.blockClass}__content__page-actions--clipped`]: contentActionsClipped
   }, className);
   const containerRef = React.useRef(null);
   const offsetRef = React.useRef(null);
@@ -305,6 +352,13 @@ const PageHeaderContentPageActions = _ref4 => {
       document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);
     }
   }, [menuButtonVisibility]);
+  React.useEffect(() => {
+    setRefs(prev => ({
+      ...prev,
+      contentActions: containerRef
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   React.useEffect(() => {
     if (!containerRef.current || !Array.isArray(actions)) {
       return;
@@ -627,7 +681,9 @@ const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref9, ref) =>
     isCurrentPage: true
   }, other, {
     className: cx(className, `${settings.pkg.prefix}--page-header-title-breadcrumb`, {
-      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef,
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show__with-content-element`]: !!refs?.contentRef,
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show__without-content-element`]: !refs?.contentRef
     })
   }), children);
 });

package/lib/components/PageHeader/next/context.d.ts

@@ -13,12 +13,16 @@ import { RefObject } from 'react';
 export type PageHeaderRefs = {
     contentRef?: RefObject<HTMLDivElement | null>;
     titleRef?: RefObject<HTMLHeadingElement | null>;
+    contentActions?: RefObject<HTMLDivElement | null>;
 };
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
     setRefs: React.Dispatch<React.SetStateAction<PageHeaderRefs>>;
+    pageActionsInstance?: React.ReactNode;
+    setPageActionsInstance: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     fullyCollapsed?: boolean;
     titleClipped?: boolean;
+    contentActionsClipped?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
 export declare function usePageHeader(): PageHeaderContextType;

package/lib/components/PageHeader/next/context.js

@@ -19,7 +19,10 @@ const PageHeaderContext = /*#__PURE__*/React.createContext({
   fullyCollapsed: false,
   setRefs: () => {},
   refs: {},
-  titleClipped: false
+  titleClipped: false,
+  contentActionsClipped: false,
+  pageActionsInstance: null,
+  setPageActionsInstance: () => {}
 });
 function usePageHeader() {
   const context = React.useContext(PageHeaderContext);

package/lib/components/PageHeader/next/overflowHandler.js

@@ -29,7 +29,7 @@ function getSize(el, dimension) {
   let size = el.getBoundingClientRect()[dimension];
   el.style.display = originalDisplay;
   const computedStyles = getComputedStyle(el);
-  size = dimension === 'width' ? size + parseInt(computedStyles.paddingLeft) + parseInt(computedStyles.paddingRight) + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.paddingTop) + parseInt(computedStyles.paddingBottom) + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
+  size = dimension === 'width' ? size + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
   return size;
 }
 

package/lib/components/SidePanel/SidePanel.js

@@ -461,7 +461,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React.createElement(icons.ArrowLeft, null))), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
       className: `${blockClass}__label-text`,
       ref: labelTextRef
-    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
+    }, labelText), title && title.length && renderTitle(), (normalizedDecorator || !hideCloseButton) && /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}__decorator-and-close`
     }, normalizedDecorator, !hideCloseButton && /*#__PURE__*/React.createElement(react.IconButton, {
       className: `${blockClass}__close-button`,