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

mantinedev · Aug 12, 2022 · f285b35 · f285b35
1 parent e19d070
commit f285b35
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 29 deletions.
diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Popover } from './Popover';
 import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 import { Group } from '../Group';
 
 export default { title: 'Popover' };
@@ -80,3 +81,29 @@ export function WithinGroup() {
     </Group>
   );
 }
+
+export function PopoverTargetWithTooltip() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Popover>
+        <Tooltip label="Tooltip first">
+          <Popover.Target>
+            <Button>Tooltip first</Button>
+          </Popover.Target>
+        </Tooltip>
+
+        <Popover.Dropdown>Dropdown</Popover.Dropdown>
+      </Popover>
+
+      <Popover>
+        <Popover.Target>
+          <Tooltip label="Tooltip last">
+            <Button ml="xl">Tooltip last</Button>
+          </Tooltip>
+        </Popover.Target>
+
+        <Popover.Dropdown>Dropdown</Popover.Dropdown>
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Popover/PopoverTarget/PopoverTarget.tsx b/src/mantine-core/src/Popover/PopoverTarget/PopoverTarget.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { useMergedRef } from '@mantine/hooks';
 import { isElement } from '@mantine/utils';
 import { clsx } from '@mantine/styles';
@@ -16,34 +16,38 @@ export interface PopoverTargetProps {
   popupType?: string;
 }
 
-export function PopoverTarget({
-  children,
-  refProp = 'ref',
-  popupType = 'dialog',
-}: PopoverTargetProps) {
-  if (!isElement(children)) {
-    throw new Error(POPOVER_ERRORS.children);
+export const PopoverTarget = forwardRef<HTMLElement, PopoverTargetProps>(
+  ({ children, refProp = 'ref', popupType = 'dialog', ...others }, ref) => {
+    if (!isElement(children)) {
+      throw new Error(POPOVER_ERRORS.children);
+    }
+
+    const forwardedProps = others as any;
+    const ctx = usePopoverContext();
+    const targetRef = useMergedRef(ctx.reference, (children as any).ref, ref);
+
+    const accessibleProps = ctx.withRoles
+      ? {
+          'aria-haspopup': popupType,
+          'aria-expanded': ctx.opened,
+          'aria-controls': ctx.getDropdownId(),
+          id: ctx.getTargetId(),
+        }
+      : {};
+
+    return cloneElement(children, {
+      ...forwardedProps,
+      ...accessibleProps,
+      ...ctx.targetProps,
+      className: clsx(
+        ctx.targetProps.className,
+        forwardedProps.className,
+        children.props.className
+      ),
+      [refProp]: targetRef,
+      ...(!ctx.controlled ? { onClick: ctx.onToggle } : null),
+    });
   }
-
-  const ctx = usePopoverContext();
-  const targetRef = useMergedRef(ctx.reference, (children as any).ref);
-
-  const accessibleProps = ctx.withRoles
-    ? {
-        'aria-haspopup': popupType,
-        'aria-expanded': ctx.opened,
-        'aria-controls': ctx.getDropdownId(),
-        id: ctx.getTargetId(),
-      }
-    : {};
-
-  return cloneElement(children, {
-    ...accessibleProps,
-    ...ctx.targetProps,
-    className: clsx(ctx.targetProps.className, children.props.className),
-    [refProp]: targetRef,
-    ...(!ctx.controlled ? { onClick: ctx.onToggle } : null),
-  });
-}
+);
 
 PopoverTarget.displayName = '@mantine/core/PopoverTarget';