chore: revert overflowmenu child typing (#22197)

tay1orjones · heloiselui · tay1orjones · commit 1167334462a7 · 2026-05-07T12:48:44.000-05:00
* revert overflowmenu child typing

* test(overflowmenu): cover mixed children

* fix(actions): update dockerfile to use npm

---------

Co-authored-by: Heloise Lui &lt;71858203+heloiselui@users.noreply.github.com&gt;
diff --git a/actions/add-review-labels/Dockerfile b/actions/add-review-labels/Dockerfile
@@ -2,5 +2,5 @@ FROM node:slim
 
 WORKDIR /usr/src/action
 COPY . .
-RUN yarn install --production
+RUN npm install --omit=dev
 ENTRYPOINT ["node", "/usr/src/action/index.js"]
diff --git a/actions/issues/Dockerfile b/actions/issues/Dockerfile
@@ -2,5 +2,5 @@ FROM node:slim
 
 WORKDIR /usr/src/action
 COPY . .
-RUN yarn install --production
+RUN npm install --omit=dev
 ENTRYPOINT ["node", "/usr/src/action/src/run.js"]
diff --git a/actions/promote/Dockerfile b/actions/promote/Dockerfile
@@ -2,5 +2,5 @@ FROM node:slim
 
 WORKDIR /usr/src/action
 COPY . .
-RUN yarn install --production
+RUN npm install --omit=dev
 ENTRYPOINT ["node", "/usr/src/action/index.js"]
diff --git a/actions/release-notifications/Dockerfile b/actions/release-notifications/Dockerfile
@@ -2,5 +2,5 @@ FROM node:slim
 
 WORKDIR /usr/src/action
 COPY . .
-RUN yarn install --production
+RUN npm install --omit=dev
 ENTRYPOINT ["node", "/usr/src/action/index.js"]
diff --git a/actions/wait-for-it/Dockerfile b/actions/wait-for-it/Dockerfile
@@ -2,6 +2,6 @@ FROM node:slim
 
 WORKDIR /usr/src/action
 COPY . .
-RUN yarn install --production
+RUN npm install --omit=dev
 ENTRYPOINT ["node", "/usr/src/action/src/index.js"]
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -13,6 +13,10 @@ import OverflowMenuItem from '../OverflowMenuItem';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
+const MenuDivider = React.forwardRef(function MenuDivider(_props, ref) {
+  return <li ref={ref} data-testid="menu-divider" role="separator" />;
+});
+
 describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
     const closeMenuMock = jest.fn();
@@ -250,6 +254,18 @@ describe('OverflowMenu', () => {
       // Check that the click handler was called only once
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
+
+    it('should render custom child components alongside OverflowMenuItem children', () => {
+      render(
+        <OverflowMenu open aria-label="Overflow menu" className="extra-class">
+          <OverflowMenuItem itemText="one" />
+          <MenuDivider />
+          <OverflowMenuItem itemText="two" />
+        </OverflowMenu>
+      );
+
+      expect(screen.getByTestId('menu-divider')).toBeInTheDocument();
+    });
   });
   it('should not open menu when disabled', async () => {
     render(
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -9,6 +9,7 @@ import React, {
   Children,
   cloneElement,
   forwardRef,
+  isValidElement,
   RefObject,
   useCallback,
   useContext,
@@ -18,6 +19,7 @@ import React, {
   type ElementType,
   type KeyboardEvent,
   type MouseEvent,
+  type ReactElement,
   type ReactNode,
   type Ref,
 } from 'react';
@@ -39,13 +41,10 @@ import { deprecate } from '../../prop-types/deprecate';
 import { mergeRefs } from '../../tools/mergeRefs';
 import { setupGetInstanceId } from '../../tools/setupGetInstanceId';
 import { IconButton, IconButtonProps } from '../IconButton';
-import OverflowMenuItem, {
-  OverflowMenuItemProps,
-} from '../OverflowMenuItem/OverflowMenuItem';
+import { OverflowMenuItemProps } from '../OverflowMenuItem/OverflowMenuItem';
 import { useOutsideClick } from '../../internal/useOutsideClick';
 import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign';
-import { isComponentElement } from '../../internal';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -532,9 +531,10 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
     );
 
     const childrenWithProps = Children.toArray(children).map((child, index) => {
-      if (isComponentElement(child, OverflowMenuItem)) {
-        return cloneElement(child, {
-          closeMenu: child.props.closeMenu || closeMenuAndFocus,
+      if (isValidElement(child)) {
+        const childElement = child as ReactElement<OverflowMenuItemProps>;
+        return cloneElement(childElement, {
+          closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
           handleOverflowMenuItemFocus,
           ref: (el: HTMLElement) => {
             menuItemRefs.current[index] = el;
