fix(pageheader): compensate the width of the overflow menu

packages/ibm-products/src/components/ActionBar/ActionBar.tsx

@@ -12,6 +12,7 @@ import React, {
   useRef,
   PropsWithChildren,
   Ref,
+  ForwardedRef,
 } from 'react';
 
 // Other standard imports.
@@ -85,6 +86,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
    */
@@ -107,6 +112,7 @@ export let ActionBar = React.forwardRef(
       menuOptionsClass,
       onWidthChange,
       overflowAriaLabel,
+      overflowMenuRef,
       rightAlign,
 
       // Collect any other property values passed in.
@@ -139,6 +145,7 @@ export let ActionBar = React.forwardRef(
             <ActionBarOverflowItems
               className={`${blockClass}__hidden-sizing-item`}
               overflowAriaLabel="hidden sizing overflow items"
+              overflowMenuRef={overflowMenuRef}
               overflowItems={[]}
               key="hidden-overflow-menu"
               tabIndex={-1}
@@ -156,7 +163,7 @@ export let ActionBar = React.forwardRef(
           </span>
         </div>
       );
-    }, [actions]);
+    }, [actions, overflowMenuRef]);
 
     // creates displayed items based on actions, displayCount and alignment
     useEffect(() => {
@@ -174,14 +181,21 @@ export let ActionBar = React.forwardRef(
           <ActionBarOverflowItems
             menuOptionsClass={menuOptionsClass}
             overflowAriaLabel={overflowAriaLabel}
+            overflowMenuRef={overflowMenuRef}
             overflowItems={newOverflowItems}
             key={`overflow-menu-${internalId.current}`}
           />
         );
       }
 
       setDisplayedItems(newDisplayedItems);
-    }, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
+    }, [
+      actions,
+      displayCount,
+      overflowAriaLabel,
+      menuOptionsClass,
+      overflowMenuRef,
+    ]);
 
     // determine display count based on space available and width of pageActions
     const checkFullyVisibleItems = () => {
@@ -354,6 +368,14 @@ ActionBar.propTypes = {
    * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
    */
   overflowAriaLabel: PropTypes.string.isRequired,
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: PropTypes.oneOfType([
+    PropTypes.shape({ current: PropTypes.elementType }),
+    PropTypes.object,
+  ]),
   /**
    * align tags to right of available space
    */

packages/ibm-products/src/components/ActionBar/ActionBarOverflowItems.tsx

@@ -6,7 +6,12 @@
 //
 
 // Import portions of React that are needed.
-import React, { useRef, PropsWithChildren, ReactElement } from 'react';
+import React, {
+  useRef,
+  PropsWithChildren,
+  ReactElement,
+  ForwardedRef,
+} from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -38,9 +43,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
    */
@@ -57,48 +66,52 @@ export const ActionBarOverflowItems = ({
   menuOptionsClass,
   overflowItems,
   overflowAriaLabel,
+  overflowMenuRef,
 }: ActionBarOverflowItemProps) => {
   const internalId = useRef(uuidv4());
+
   return (
-    <OverflowMenu
-      aria-label={overflowAriaLabel}
-      className={cx(blockClass, className)}
-      direction="bottom"
-      flipped
-      iconDescription={overflowAriaLabel} // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
-      menuOptionsClass={cx(`${blockClass}__options`, menuOptionsClass)}
-    >
-      {React.Children.map(overflowItems, (item, index) => {
-        // This uses a copy of a menu item option
-        // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
-        // div equivalent below is based on Carbon 10.25.0
-        const ItemIcon = item?.props.renderIcon as React.ComponentType<any>;
-        return (
-          <OverflowMenuItem
-            className={`${blockClass}__item`}
-            onClick={item?.props.onClick}
-            itemText={
-              <div
-                className={`${blockClass}__item-content`}
-                aria-describedby={`${internalId.current}-${index}--item-label`}
-              >
-                <span
-                  className={`${blockClass}__item-label`}
-                  id={`${internalId.current}-${index}--item-label`}
+    <div ref={overflowMenuRef}>
+      <OverflowMenu
+        aria-label={overflowAriaLabel}
+        className={cx(blockClass, className)}
+        direction="bottom"
+        flipped
+        iconDescription={overflowAriaLabel} // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+        menuOptionsClass={cx(`${blockClass}__options`, menuOptionsClass)}
+      >
+        {React.Children.map(overflowItems, (item, index) => {
+          // This uses a copy of a menu item option
+          // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
+          // div equivalent below is based on Carbon 10.25.0
+          const ItemIcon = item?.props.renderIcon as React.ComponentType<any>;
+          return (
+            <OverflowMenuItem
+              className={`${blockClass}__item`}
+              onClick={item?.props.onClick}
+              itemText={
+                <div
+                  className={`${blockClass}__item-content`}
+                  aria-describedby={`${internalId.current}-${index}--item-label`}
                 >
-                  {item?.props.label}
-                </span>
-                {typeof item?.props.renderIcon === 'function' ? (
-                  <ItemIcon />
-                ) : (
-                  item?.props.renderIcon
-                )}
-              </div>
-            }
-          />
-        );
-      })}
-    </OverflowMenu>
+                  <span
+                    className={`${blockClass}__item-label`}
+                    id={`${internalId.current}-${index}--item-label`}
+                  >
+                    {item?.props.label}
+                  </span>
+                  {typeof item?.props.renderIcon === 'function' ? (
+                    <ItemIcon />
+                  ) : (
+                    item?.props.renderIcon
+                  )}
+                </div>
+              }
+            />
+          );
+        })}
+      </OverflowMenu>
+    </div>
   );
 };
 
@@ -118,11 +131,21 @@ ActionBarOverflowItems.propTypes = {
    * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
    */
   overflowAriaLabel: PropTypes.string,
+
   /**
    * overflowItems: items to bre shown in the ActionBar overflow menu
    */
   overflowItems: PropTypes.arrayOf(PropTypes.element),
 
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: PropTypes.oneOfType([
+    PropTypes.shape({ current: PropTypes.elementType }),
+    PropTypes.object,
+  ]),
+
   /**
    * Optional tab index
    */

packages/ibm-products/src/components/PageHeader/PageHeader.tsx

@@ -5,7 +5,15 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import { Button, Column, FlexGrid, Row, Tag, Tooltip } from '@carbon/react';
+import {
+  Button,
+  Column,
+  FlexGrid,
+  Row,
+  Tag,
+  Tooltip,
+  usePrefix,
+} from '@carbon/react';
 import { ButtonProps, PopoverAlignment, TagProps } from '@carbon/type';
 import React, {
   ForwardedRef,
@@ -454,6 +462,7 @@ export let PageHeader = React.forwardRef(
     const sizingContainerRef: MutableRefObject<HTMLDivElement | null> =
       useRef(null);
     const offsetTopMeasuringRef = useRef(null);
+    const overflowMenuRef = useRef<HTMLDivElement>(null);
 
     // state based on props only
     const hasActionBar = actionBarItems && actionBarItems.length > 0;
@@ -508,11 +517,23 @@ export let PageHeader = React.forwardRef(
     const [fullyCollapsed, setFullyCollapsed] = useState(false);
     const [widthIsNarrow, setWidthIsNarrow] = useState(false);
 
+    const prefix = usePrefix();
+
     // handlers
     const handleActionBarWidthChange = ({ minWidth, maxWidth }) => {
+      let overflowMenuWidth = 0;
+
+      const overflowMenu = overflowMenuRef?.current?.querySelector(
+        `.${prefix}--overflow-menu`
+      );
+
+      if (overflowMenu) {
+        overflowMenuWidth = (overflowMenu as HTMLDivElement).offsetWidth;
+      }
+
       /* don't know how to test resize */
       /* istanbul ignore next */
-      setActionBarMaxWidth(maxWidth);
+      setActionBarMaxWidth(maxWidth + overflowMenuWidth);
       /* don't know how to test resize */
       /* istanbul ignore next */
       setActionBarMinWidth(minWidth);
@@ -953,6 +974,7 @@ export let PageHeader = React.forwardRef(
                                 )}`,
                                 onWidthChange: handleActionBarWidthChange,
                                 overflowAriaLabel: actionBarOverflowAriaLabel,
+                                overflowMenuRef,
                                 rightAlign: true,
                               } as any)}
                             />