[@mantine/core] Menu: Allow usage of Menu.Target with Tooltip (#1897)

mantinedev · Aug 12, 2022 · 4652d8f · 4652d8f
1 parent 9644db4
commit 4652d8f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 33 deletions.
diff --git a/src/mantine-core/src/Menu/Menu.story.tsx b/src/mantine-core/src/Menu/Menu.story.tsx
@@ -3,6 +3,7 @@ import { IconTable, IconSearch } from '@tabler/icons';
 import { WithinOverlays } from '@mantine/storybook';
 import { Menu } from './Menu';
 import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 import { Text } from '../Text';
 
 export default { title: 'Menu' };
@@ -54,3 +55,35 @@ export function _WithinOverlays() {
     </WithinOverlays>
   );
 }
+
+export function MenuTargetWithTooltip() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Menu>
+        <Tooltip label="Tooltip first">
+          <Menu.Target>
+            <Button>Tooltip first</Button>
+          </Menu.Target>
+        </Tooltip>
+
+        <Menu.Dropdown>
+          <Menu.Item>Item 1</Menu.Item>
+          <Menu.Item>Item 2</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+
+      <Menu>
+        <Menu.Target>
+          <Tooltip label="Tooltip last">
+            <Button ml="xl">Tooltip last</Button>
+          </Tooltip>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item>Item 1</Menu.Item>
+          <Menu.Item>Item 2</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx b/src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { isElement, createEventHandler } from '@mantine/utils';
 import { useMenuContext } from '../Menu.context';
 import { Popover } from '../../Popover';
@@ -12,38 +12,40 @@ export interface MenuTargetProps {
   refProp?: string;
 }
 
-export function MenuTarget({ children, refProp = 'ref' }: MenuTargetProps) {
-  if (!isElement(children)) {
-    throw new Error(MENU_ERRORS.children);
+export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>(
+  ({ children, refProp = 'ref', ...others }, ref) => {
+    if (!isElement(children)) {
+      throw new Error(MENU_ERRORS.children);
+    }
+
+    const ctx = useMenuContext();
+
+    const onClick = createEventHandler(
+      children.props.onClick,
+      () => ctx.trigger === 'click' && ctx.toggleDropdown()
+    );
+
+    const onMouseEnter = createEventHandler(
+      children.props.onMouseEnter,
+      () => ctx.trigger === 'hover' && ctx.openDropdown()
+    );
+
+    const onMouseLeave = createEventHandler(
+      children.props.onMouseLeave,
+      () => ctx.trigger === 'hover' && ctx.closeDropdown()
+    );
+
+    return (
+      <Popover.Target refProp={refProp} popupType="menu" ref={ref} {...others}>
+        {cloneElement(children, {
+          onClick,
+          onMouseEnter,
+          onMouseLeave,
+          'data-expanded': ctx.opened ? true : undefined,
+        })}
+      </Popover.Target>
+    );
   }
-
-  const ctx = useMenuContext();
-
-  const onClick = createEventHandler(
-    children.props.onClick,
-    () => ctx.trigger === 'click' && ctx.toggleDropdown()
-  );
-
-  const onMouseEnter = createEventHandler(
-    children.props.onMouseEnter,
-    () => ctx.trigger === 'hover' && ctx.openDropdown()
-  );
-
-  const onMouseLeave = createEventHandler(
-    children.props.onMouseLeave,
-    () => ctx.trigger === 'hover' && ctx.closeDropdown()
-  );
-
-  return (
-    <Popover.Target refProp={refProp} popupType="menu">
-      {cloneElement(children, {
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        'data-expanded': ctx.opened ? true : undefined,
-      })}
-    </Popover.Target>
-  );
-}
+);
 
 MenuTarget.displayName = '@mantine/core/MenuTarget';