[@mantine/core] HoverCard: Allow HoverCard.Target usage with Tooltip (#…

…1897)

src/mantine-core/src/HoverCard/HoverCard.story.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 import { HoverCard } from './HoverCard';
 
 export default { title: 'HoverCard' };
@@ -17,3 +18,29 @@ export function Usage() {
     </div>
   );
 }
+
+export function TargetWithTooltip() {
+  return (
+    <div style={{ padding: 40 }}>
+      <HoverCard>
+        <Tooltip label="Tooltip first">
+          <HoverCard.Target>
+            <Button>Tooltip first</Button>
+          </HoverCard.Target>
+        </Tooltip>
+
+        <HoverCard.Dropdown>Dropdown</HoverCard.Dropdown>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCard.Target>
+          <Tooltip label="Tooltip last">
+            <Button ml="xl">Tooltip last</Button>
+          </Tooltip>
+        </HoverCard.Target>
+
+        <HoverCard.Dropdown>Dropdown</HoverCard.Dropdown>
+      </HoverCard>
+    </div>
+  );
+}

src/mantine-core/src/HoverCard/HoverCardTarget/HoverCardTarget.tsx

@@ -1,25 +1,27 @@
-import React, { cloneElement } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { isElement, createEventHandler } from '@mantine/utils';
 import { Popover, PopoverTargetProps } from '../../Popover';
 import { useHoverCardContext } from '../HoverCard.context';
 import { HOVER_CARD_ERRORS } from '../HoverCard.errors';
 
 export interface HoverCardTargetProps extends PopoverTargetProps {}
 
-export function HoverCardTarget({ children, refProp }: HoverCardTargetProps) {
-  if (!isElement(children)) {
-    throw new Error(HOVER_CARD_ERRORS.children);
-  }
+export const HoverCardTarget = forwardRef<HTMLElement, HoverCardTargetProps>(
+  ({ children, refProp, ...others }, ref) => {
+    if (!isElement(children)) {
+      throw new Error(HOVER_CARD_ERRORS.children);
+    }
 
-  const ctx = useHoverCardContext();
-  const onMouseEnter = createEventHandler(children.props.onMouseEnter, ctx.openDropdown);
-  const onMouseLeave = createEventHandler(children.props.onMouseLeave, ctx.closeDropdown);
+    const ctx = useHoverCardContext();
+    const onMouseEnter = createEventHandler(children.props.onMouseEnter, ctx.openDropdown);
+    const onMouseLeave = createEventHandler(children.props.onMouseLeave, ctx.closeDropdown);
 
-  return (
-    <Popover.Target refProp={refProp}>
-      {cloneElement(children as React.ReactElement, { onMouseEnter, onMouseLeave })}
-    </Popover.Target>
-  );
-}
+    return (
+      <Popover.Target refProp={refProp} ref={ref} {...others}>
+        {cloneElement(children as React.ReactElement, { onMouseEnter, onMouseLeave })}
+      </Popover.Target>
+    );
+  }
+);
 
 HoverCardTarget.displayName = '@mantine/core/HoverCardTarget';

src/mantine-core/src/Popover/Popover.story.tsx

@@ -85,15 +85,15 @@ export function WithinGroup() {
 export function PopoverTargetWithTooltip() {
   return (
     <div style={{ padding: 40 }}>
-      {/* <Popover>
+      <Popover>
         <Tooltip label="Tooltip first">
           <Popover.Target>
             <Button>Tooltip first</Button>
           </Popover.Target>
         </Tooltip>
 
         <Popover.Dropdown>Dropdown</Popover.Dropdown>
-      </Popover> */}
+      </Popover>
 
       <Popover>
         <Popover.Target>

src/mantine-core/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement, forwardRef } from 'react';
-import { isElement } from '@mantine/utils';
+import { isElement, ForwardRefWithStaticComponents } from '@mantine/utils';
 import { useMergedRef } from '@mantine/hooks';
 import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
 import { TooltipGroup } from './TooltipGroup/TooltipGroup';
@@ -66,7 +66,7 @@ const defaultProps: Partial<TooltipProps> = {
   positionDependencies: [],
 };
 
-export const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
+const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
   const {
     children,
     position,
@@ -171,7 +171,12 @@ export const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
   );
 }) as any;
 
-Tooltip.Group = TooltipGroup;
-Tooltip.Floating = TooltipFloating;
+_Tooltip.Group = TooltipGroup;
+_Tooltip.Floating = TooltipFloating;
 
-Tooltip.displayName = '@mantine/core/Tooltip';
+_Tooltip.displayName = '@mantine/core/Tooltip';
+
+export const Tooltip: ForwardRefWithStaticComponents<
+  TooltipProps,
+  { Group: typeof TooltipGroup; Floating: typeof TooltipFloating }
+> = _Tooltip;