fix ContextualHelpTrigger dialog offset and hover behavior when entered via a open submenu

this unfortunately breaks another interaction case but to handle later

Author: LFDanLu

packages/@react-aria/menu/src/useSubMenuTrigger.ts

@@ -15,7 +15,6 @@ import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps} from '@react-aria/overlays';
 import {FocusableElement, FocusStrategy, PressEvent, Node as RSNode} from '@react-types/shared';
-import {isElementInChildOfActiveScope} from '@react-aria/focus';
 import {RefObject, useCallback, useRef} from 'react';
 import type {SubMenuTriggerState} from '@react-stately/menu';
 import {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';
@@ -180,7 +179,10 @@ export function useSubMenuTrigger<T>(props: AriaSubMenuTriggerProps, state: SubM
   };
 
   let onBlur = (e) => {
-    if (state.isOpen && (!isElementInChildOfActiveScope(e.relatedTarget) || parentMenuRef.current.contains(e.relatedTarget))) {
+    // TODO: getting rid of the (!isElementInChildOfActiveScope(e.relatedTarget) part of the check below fixes hovering to open a root unavailable menu item when focus is on a submenu
+    // but breaks the case where the user is hovering over a submenu's submenu trigger child item and then hovers a root menu item (eg hover lvl 1 item 2 -> hover lvl 2 item 3 -> hover lvl 1 item 3)
+    // Ideally we'd be able to track the full menu tree and then check if focus has moved to an element that isn't part of the current submenu tree and close it then
+    if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {
       onSubMenuClose();
     }
   };

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -86,6 +86,8 @@ function ContextualHelpTrigger<T>(props: MenuDialogTriggerProps<T>): ReactElemen
               ref={popoverRef}
               triggerRef={triggerRef}
               placement="end top"
+              containerPadding={0}
+              crossOffset={-5}
               offset={-10}
               hideArrow
               enableBothDismissButtons>

packages/@react-spectrum/menu/stories/SubMenu.stories.tsx

@@ -15,9 +15,11 @@ import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
 import AnnotatePen from '@spectrum-icons/workflow/AnnotatePen';
+import {Content} from '@react-spectrum/view';
+import {ContextualHelpTrigger, Item, Menu, Section, SubMenuTrigger} from '../';
 import defaultConfig, {render as renderMenuTrigger} from './MenuTrigger.stories';
-import {Item, Menu, Section, SubMenuTrigger} from '../';
-import {Keyboard, Text} from '@react-spectrum/text';
+import {Dialog} from '@react-spectrum/dialog';
+import {Heading, Keyboard, Text} from '@react-spectrum/text';
 import React from 'react';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
@@ -388,6 +390,53 @@ export const Complex = {
   name: 'complex'
 };
 
+export const UnavailableWithSubMenu = {
+  render: (args) => (
+    renderMenuTrigger(
+      <Menu onAction={action('lvl 1 menu onAction')} {...args}>
+        <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
+        <SubMenuTrigger>
+          <Item key="Lvl 1 Item 2">Lvl 1 Item 2</Item>
+          <Menu onAction={action('lvl 2.2 menu onAction')} {...args.subMenu1Props}>
+            <ContextualHelpTrigger isUnavailable>
+              <Item key="Lvl 2 Item 1">Lvl 2.2 Item 1</Item>
+              <Dialog>
+                <Heading>another one</Heading>
+                <Content>try hovering on other items</Content>
+              </Dialog>
+            </ContextualHelpTrigger>
+            <Item key="Lvl 2 Item 2">Lvl 2.2 Item 2</Item>
+            <SubMenuTrigger>
+              <Item key="Lvl 2 Item 3">Lvl 2.2 Item 3</Item>
+              <Menu onAction={action('lvl 3 menu onAction')} {...args.subMenu2Props}>
+                <Item key="Lvl 3 Item 1">Lvl 3 Item 1</Item>
+                <Item key="Lvl 3 Item 2">Lvl 3 Item 2</Item>
+                <Item key="Lvl 3 Item 3">Lvl 3 Item 3</Item>
+              </Menu>
+            </SubMenuTrigger>
+          </Menu>
+        </SubMenuTrigger>
+        <ContextualHelpTrigger isUnavailable>
+          <Item key="Lvl 1 Item 3">Lvl 1 Item 3</Item>
+          <Dialog>
+            <Heading>hello</Heading>
+            <Content>Is it me you're looking for?</Content>
+          </Dialog>
+        </ContextualHelpTrigger>
+        <SubMenuTrigger>
+          <Item key="Lvl 1 Item 4">Lvl 1 Item 4</Item>
+          <Menu onAction={action('lvl 2.4 menu onAction')} {...args.subMenu1Props}>
+            <Item key="Lvl 2.4 Item 1">Lvl 2.4 Item 1</Item>
+            <Item key="Lvl 2.4 Item 2">Lvl 2.4 Item 2</Item>
+            <Item key="Lvl 2.4 Item 3">Lvl 2.4 Item 3</Item>
+          </Menu>
+        </SubMenuTrigger>
+      </Menu>
+    )
+  ),
+  name: 'with unavailable menu item'
+};
+
 export const SubMenuActions = {
   render: (args) => renderMenuTrigger(
     <Menu onAction={action('onAction lvl 1 menu')} onClose={action('onClose lvl 1 menu')} {...args}>