feat(tooltip)!: prevent a tooltip from interfering with a trigger's expanded popup (#697)

BREAKING CHANGE: a `triggerRef` parameter is now required by `useTooltip({ triggerRef })` and used to observe updates to the trigger's `aria-expanded` state

Author: jzempel

package-lock.json

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { StoryFn } from '@storybook/react';
 import classNames from 'classnames';
 import {
@@ -60,12 +60,14 @@ interface IArgs extends ITooltipContainerProps {
 }
 
 export const TooltipStory: StoryFn<IArgs> = ({ as, ...props }) => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
   switch (as) {
     case 'container':
-      return <Container {...props} />;
+      return <Container {...props} triggerRef={triggerRef} />;
 
     case 'hook':
     default:
-      return <Hook {...props} />;
+      return <Hook {...props} triggerRef={triggerRef} />;
   }
 };

packages/tooltip/demo/stories/TooltipStory.tsx

@@ -12,3 +12,9 @@ Demonstrate `openTooltip` and `closeTooltip` overrides.
 <Canvas>
   <Story of={PatternsStories.Focus} />
 </Canvas>
+
+## Menu
+
+<Canvas>
+  <Story of={PatternsStories.Menu} />
+</Canvas>

packages/tooltip/demo/~patterns/patterns.mdx

@@ -8,12 +8,18 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FocusStory } from './stories/FocusStory';
+import { MenuStory } from './stories/MenuStory';
 
-const meta: Meta<typeof FocusStory> = { title: 'Packages/Tooltip/[patterns]' };
+const meta: Meta = { title: 'Packages/Tooltip/[patterns]' };
 
 export default meta;
 
 export const Focus: StoryObj<typeof FocusStory> = {
   render: args => <FocusStory {...args} />,
   name: 'Focus'
 };
+
+export const Menu: StoryObj<typeof MenuStory> = {
+  render: args => <MenuStory {...args} />,
+  name: 'Menu'
+};