fix(tooltips): prevent Tooltip from interfering with a popup (menu, dialog, etc.) trigger (#2023)

Author: jzempel

package-lock.json

@@ -0,0 +1,28 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { MenuStory } from './stories/MenuStory';
+
+<Meta title="Packages/Tooltips/[patterns]" component={Tooltip} />
+
+# Patterns
+
+## Menu
+
+The following example demonstrates `Tooltip` behavior together with a popup
+menu. The tooltip is designed to hide when the popup is expanded.
+
+<Canvas>
+  <Story
+    name="Menu"
+    parameters={{ controls: { include: ['appendToNode', 'placement'] } }}
+    args={{
+      appendToNode: false,
+      placement: 'bottom'
+    }}
+    argTypes={{
+      appendToNode: { control: 'boolean' }
+    }}
+  >
+    {args => <MenuStory {...args} />}
+  </Story>
+</Canvas>

packages/tooltips/demo/~patterns/patterns.stories.mdx

@@ -0,0 +1,62 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { forwardRef } from 'react';
+import { useTheme } from 'styled-components';
+import { StoryFn } from '@storybook/react';
+import Icon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
+import { useDocument } from '@zendeskgarden/react-theming';
+import { Grid } from '@zendeskgarden/react-grid';
+import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns';
+import { ITooltipProps, Tooltip } from '@zendeskgarden/react-tooltips';
+import { IButtonProps, IconButton } from '@zendeskgarden/react-buttons';
+
+interface IMenuButtonProps extends IButtonProps {
+  appendToNode: boolean;
+  placement: IMenuProps['placement'];
+}
+
+const MenuButton = forwardRef<HTMLButtonElement, IMenuButtonProps>(
+  ({ appendToNode, placement, ...props }, ref) => {
+    const theme = useTheme();
+    const body = useDocument(theme)?.body;
+
+    return (
+      <Tooltip content="Menu" placement={placement} appendToNode={appendToNode ? body : undefined}>
+        <IconButton {...props} ref={ref}>
+          <Icon />
+        </IconButton>
+      </Tooltip>
+    );
+  }
+);
+
+MenuButton.displayName = 'MenuButton';
+
+interface IArgs extends Omit<ITooltipProps, 'appendToNode'> {
+  appendToNode: boolean;
+}
+
+export const MenuStory: StoryFn<IArgs> = ({ appendToNode, placement }) => (
+  <Grid>
+    <Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
+      <Grid.Col textAlign="center" alignSelf="center">
+        <Menu
+          button={
+            /* eslint-disable-next-line react/no-unstable-nested-components */
+            props => <MenuButton appendToNode={appendToNode} placement={placement} {...props} />
+          }
+          placement={placement}
+        >
+          <Item value="One" />
+          <Item value="Two" />
+          <Item value="Three" />
+        </Menu>
+      </Grid.Col>
+    </Grid.Row>
+  </Grid>
+);

packages/tooltips/demo/~patterns/stories/MenuStory.tsx

@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-tooltip": "^1.0.16",
+    "@zendeskgarden/container-tooltip": "^2.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -35,6 +35,9 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
+    "@zendeskgarden/react-buttons": "^9.7.0",
+    "@zendeskgarden/react-dropdowns": "^9.7.0",
+    "@zendeskgarden/react-grid": "^9.7.0",
     "@zendeskgarden/react-theming": "^9.7.0"
   },
   "keywords": [

packages/tooltips/package.json

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { cloneElement, useRef, useEffect, useContext } from 'react';
+import React, { cloneElement, useRef, useEffect, useContext, HTMLAttributes } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
@@ -48,7 +48,8 @@ export const TooltipComponent = ({
   const { isVisible, getTooltipProps, getTriggerProps, openTooltip, closeTooltip } = useTooltip({
     id,
     delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
+    isVisible: isInitialVisible,
+    triggerRef
   });
 
   const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
@@ -98,16 +99,16 @@ export const TooltipComponent = ({
       aria-hidden={!controlledIsVisible}
     >
       <StyledTooltip
+        $hasArrow={hasArrow}
+        $placement={placement}
+        $size={toSize(size, type)}
+        $type={type}
         {...(getTooltipProps({
           'aria-hidden': !controlledIsVisible,
-          $hasArrow: hasArrow,
-          $placement: placement,
-          $size: toSize(size, type),
-          $type: type,
           onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
           onFocus: composeEventHandlers(onFocus, openTooltip),
           ...props
-        }) as any)}
+        }) as HTMLAttributes<HTMLDivElement>)}
       >
         {content}
       </StyledTooltip>

packages/tooltips/src/elements/Tooltip.tsx

@@ -24,7 +24,7 @@ interface IStyledTooltipProps {
   $hasArrow: ITooltipProps['hasArrow'];
   $placement: Placement;
   $size: NonNullable<ITooltipProps['size']>;
-  $type: NonNullable<ITooltipProps['type']>;
+  $type: ITooltipProps['type'];
 }
 
 const sizeStyles = ({