fix(#16882) Menu's target prop fix

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4759,6 +4759,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "menuTarget": Object {
+        "args": Array [
+          [Function],
+        ],
+        "type": "instanceOf",
+      },
       "size": Object {
         "args": Array [
           Array [

packages/react/src/components/Menu/Menu.stories.js

@@ -92,3 +92,11 @@ Playground.args = {
   onClose: action('onClose'),
   open: true,
 };
+
+Playground.argTypes = {
+  target: {
+    table: {
+      disable: true,
+    },
+  },
+};

packages/react/src/components/MenuButton/MenuButton.mdx

@@ -41,6 +41,14 @@ to display the Menu in case the provided `menuAlignment` obscures it.
 We encourage you to play around in the Storybook playground to better understand
 the `menuAlignment` prop.
 
+
+## menuTarget Prop
+
+The `menuTarget` prop specifies where the `Menu` should render, which is particularly useful when using `MenuButton` inside a modal. By default, the menu renders in `document.body`, but this can disrupt focus order in modals or other components with focus management.
+
+Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific element where you want it to render:
+
+
 ## Component API
 
 <ArgTypes />

packages/react/src/components/MenuButton/MenuButton.stories.js

@@ -161,4 +161,9 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  menuTarget: {
+    table: {
+      disable: true,
+    },
+  },
 };

packages/react/src/components/MenuButton/index.tsx

@@ -81,6 +81,11 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
    * Specify the tabIndex of the button.
    */
   tabIndex?: number;
+
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget?: Element;
 }
 
 const MenuButton = forwardRef<HTMLDivElement, MenuButtonProps>(
@@ -94,6 +99,7 @@ const MenuButton = forwardRef<HTMLDivElement, MenuButtonProps>(
       size = 'lg',
       menuAlignment = 'bottom',
       tabIndex = 0,
+      menuTarget,
       ...rest
     },
     forwardRef
@@ -203,7 +209,8 @@ const MenuButton = forwardRef<HTMLDivElement, MenuButtonProps>(
           mode="basic"
           size={size}
           open={open}
-          onClose={handleClose}>
+          onClose={handleClose}
+          target={menuTarget}>
           {children}
         </Menu>
       </div>
@@ -262,6 +269,14 @@ MenuButton.propTypes = {
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number,
+
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+
+  menuTarget: PropTypes.instanceOf(
+    typeof Element !== 'undefined' ? Element : Object
+  ) as React.Validator<Element | null | undefined>,
 };
 
 export { MenuButton };

packages/react/src/components/Modal/Modal.stories.js

@@ -19,6 +19,8 @@ import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
 import ComboBox from '../ComboBox';
 import mdx from './Modal.mdx';
+import { MenuButton } from '../MenuButton';
+import { MenuItem } from '../Menu';
 import {
   StructuredListWrapper,
   StructuredListHead,
@@ -43,6 +45,7 @@ export default {
 
 export const Default = () => {
   const [open, setOpen] = useState(true);
+  const menuTargetref = useRef(null);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Launch modal</Button>
@@ -58,6 +61,7 @@ export const Default = () => {
           organization to a URL that you own. A custom domain can be a shared
           domain, a shared subdomain, or a shared domain and host.
         </p>
+
         <TextInput
           data-modal-primary-focus
           id="text-input-1"
@@ -78,6 +82,16 @@ export const Default = () => {
             { id: 'two', label: 'two', name: 'two' },
           ]}
         />
+        <br />
+        <div ref={menuTargetref}>
+          <MenuButton label="Actions" menuTarget={menuTargetref.current}>
+            <MenuItem label="First action" />
+            <MenuItem label="Second action" />
+            <MenuItem label="Third action" />
+            <MenuItem label="Danger action" kind="danger" />
+          </MenuButton>
+        </div>
+        <br />
         <MultiSelect
           id="test"
           label="Multiselect"

packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js

@@ -222,4 +222,9 @@ Playground.argTypes = {
       'Specify how the menu should align with the button element `bottom-start` `bottom-end` `top-start` `top-end`',
     default: 'bottom-start',
   },
+  menuTarget: {
+    table: {
+      disable: true,
+    },
+  },
 };

packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx

@@ -45,6 +45,14 @@ to display the Menu in case the provided `menuAlignment` obscures it.
 We encourage you to play around in the Storybook playground to better understand
 the `menuAlignment` prop.
 
+## menuTarget Prop
+
+The `menuTarget` prop specifies where the `OverflowMenu` should render, which is particularly useful when using `OverflowMenu` inside a modal. By default, the menu renders in `document.body`, but this can disrupt focus order in modals or other components with focus management.
+
+Pass the `menuTarget` prop to render the `OverflowMenu` inside the modal or any specific element where you want it to render:
+
+
+
 ## Component API
 
 <ArgTypes />

packages/react/src/components/OverflowMenu/next/index.tsx

@@ -75,6 +75,11 @@ interface OverflowMenuProps {
     | 'bottom-right'
     | 'left'
     | 'right';
+
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget?: Element;
 }
 
 const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
@@ -88,6 +93,7 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
       size = defaultSize,
       menuAlignment = 'bottom-start',
       tooltipAlignment,
+      menuTarget,
       ...rest
     },
     forwardRef
@@ -216,7 +222,8 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
           onClose={handleClose}
           x={x}
           y={y}
-          label={label}>
+          label={label}
+          target={menuTarget}>
           {children}
         </Menu>
       </div>
@@ -277,6 +284,13 @@ OverflowMenu.propTypes = {
     'left',
     'right',
   ]),
+
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget: PropTypes.instanceOf(
+    typeof Element !== 'undefined' ? Element : Object
+  ) as React.Validator<Element | null | undefined>,
 };
 
 export { OverflowMenu };