@react-spectrum/menu 3.16.1-nightly.4321 → 3.17.0

package/src/ContextualHelpTrigger.tsx

@@ -10,15 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useIsMobileDevice} from '@react-spectrum/utils';
-import {DismissButton} from '@react-aria/overlays';
+import {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {FocusScope} from '@react-aria/focus';
+import {getInteractionModality} from '@react-aria/interactions';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
 import {ItemProps, Key} from '@react-types/shared';
-import {MenuDialogContext, useMenuStateContext} from './context';
-import {Modal, Popover} from '@react-spectrum/overlays';
-import React, {ReactElement, useRef} from 'react';
+import {Popover} from '@react-spectrum/overlays';
+import React, {JSX, ReactElement, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useOverlayTriggerState} from '@react-stately/overlays';
+import {SubmenuTriggerContext, useMenuStateContext} from './context';
+import {TrayHeaderWrapper} from './Menu';
+import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
+import {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';
+import {useLayoutEffect} from '@react-aria/utils';
 
 interface MenuDialogTriggerProps {
   /** Whether the menu item is currently unavailable. */
@@ -34,23 +39,40 @@ interface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {
 export interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}
 
 function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {
-  let {isUnavailable} = props;
+  let {isUnavailable = false, targetKey} = props;
 
   let triggerRef = useRef<HTMLLIElement>(null);
   let popoverRef = useRef(null);
-  let {state: menuState, container, menu} = useMenuStateContext();
-  let state = useOverlayTriggerState({isOpen: menuState.expandedKeys.has(props.targetKey), onOpenChange: (val) => {
-    if (!val) {
-      if (menuState.expandedKeys.has(props.targetKey)) {
-        menuState.toggleKey(props.targetKey);
-      }
-    }
-  }});
+  let {popoverContainerRef, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
+  let triggerNode = state.collection.getItem(targetKey);
+  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
+  let submenuRef = unwrapDOMRef(popoverRef);
+  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
+    node: triggerNode,
+    parentMenuRef,
+    submenuRef,
+    type: 'dialog',
+    isDisabled: !isUnavailable
+  }, submenuTriggerState, triggerRef);
   let isMobile = useIsMobileDevice();
   let slots = {};
   if (isUnavailable) {
     slots = {
-      dialog: {UNSAFE_className: classNames(helpStyles, 'react-spectrum-ContextualHelp-dialog', classNames(styles, !isMobile ? 'spectrum-Menu-subdialog' : ''))},
+      dialog: {
+        UNSAFE_className: classNames(
+          helpStyles,
+          'react-spectrum-ContextualHelp-dialog',
+          {
+            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile
+          },
+          classNames(
+            styles,
+            {
+              'spectrum-Menu-subdialog': !isMobile
+            }
+          )
+        )
+      },
       content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},
       footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
     };
@@ -58,62 +80,110 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let [trigger] = React.Children.toArray(props.children);
   let [, content] = props.children as [ReactElement, ReactElement];
 
-  let onExit = () => {
-    // if focus was already moved back to a menu item, don't need to do anything
-    if (!menu.current.contains(document.activeElement)) {
-      // need to return focus to the trigger because hitting Esc causes focus to go to the subdialog, which is then unmounted
-      // this leads to blur never being fired nor focus on the body
-      triggerRef.current.focus();
-    }
-  };
   let onBlurWithin = (e) => {
-    if (e.relatedTarget && popoverRef.current && !popoverRef.current?.UNSAFE_getDOMNode().contains(e.relatedTarget)) {
-      if (menuState.expandedKeys.has(props.targetKey)) {
-        menuState.toggleKey(props.targetKey);
+    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
+      if (submenuTriggerState.isOpen) {
+        submenuTriggerState.close();
       }
     }
   };
+
+  let overlay;
+  let tray;
+  let onBackButtonPress = () => {
+    submenuTriggerState.close();
+    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {
+      parentMenuRef.current.focus();
+    }
+  };
+  let [offset, setOffset] = useState(0);
+  useLayoutEffect(() => {
+    if (parentMenuRef.current) {
+      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');
+      if (offset !== '') {
+        setOffset(-1 * parseInt(offset, 10));
+      }
+    }
+  }, [parentMenuRef]);
+
+  if (isMobile) {
+    delete submenuTriggerProps.onBlur;
+    delete submenuTriggerProps.onHoverChange;
+    if (trayContainerRef.current && submenuTriggerState.isOpen) {
+      let subDialogKeyDown = (e: KeyboardEvent) => {
+        switch (e.key) {
+          case 'Escape':
+            e.stopPropagation();
+            onBackButtonPress();
+            break;
+        }
+      };
+
+      tray = (
+        <TrayHeaderWrapper
+          isSubmenu
+          parentMenuTreeState={state}
+          rootMenuTriggerState={rootMenuTriggerState}
+          wrapperKeyDown={subDialogKeyDown}
+          onBackButtonPress={onBackButtonPress}>
+          {content}
+        </TrayHeaderWrapper>
+      );
+
+      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);
+    }
+  } else {
+    let onDismissButtonPress = () => {
+      submenuTriggerState.close();
+      parentMenuRef.current?.focus();
+    };
+
+    overlay = (
+      <Popover
+        {...popoverProps}
+        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
+        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
+        onDismissButtonPress={onDismissButtonPress}
+        onBlurWithin={onBlurWithin}
+        container={popoverContainerRef.current}
+        state={submenuTriggerState}
+        ref={popoverRef}
+        triggerRef={triggerRef}
+        placement="end top"
+        containerPadding={0}
+        crossOffset={offset}
+        offset={offset}
+        hideArrow
+        enableBothDismissButtons>
+        <FocusScope restoreFocus>
+          {content}
+        </FocusScope>
+      </Popover>
+    );
+  }
+
   return (
     <>
-      <MenuDialogContext.Provider value={{isUnavailable, triggerRef}}>{trigger}</MenuDialogContext.Provider>
+      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>
       <SlotProvider slots={slots}>
-        {
-          isMobile ? (
-            <Modal state={state} isDismissable>
-              <DismissButton onDismiss={state.close} />
-              {content}
-              <DismissButton onDismiss={state.close} />
-            </Modal>
-          ) : (
-            <Popover
-              UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
-              onExit={onExit}
-              onBlurWithin={onBlurWithin}
-              container={container.current}
-              state={state}
-              ref={popoverRef}
-              triggerRef={triggerRef}
-              placement="end top"
-              offset={-10}
-              hideArrow
-              isNonModal
-              enableBothDismissButtons
-              disableFocusManagement>
-              {content}
-            </Popover>
-          )
-        }
+        {submenuTriggerState.isOpen && overlay}
       </SlotProvider>
     </>
   );
 }
 
 ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {
-  let [trigger] = React.Children.toArray(props.children) as ReactElement[];
+  let childArray: ReactElement[] = [];
+  React.Children.forEach(props.children, child => {
+    if (React.isValidElement(child)) {
+      childArray.push(child);
+    }
+  });
+  let [trigger] = childArray;
   let [, content] = props.children as [ReactElement, ReactElement];
 
   yield {
-    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true}),
+    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),
     wrapper: (element) => (
       <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>
         {element}
@@ -123,5 +193,5 @@ ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props:
   };
 };
 
-let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => React.JSX.Element;
+let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
 export {_Item as ContextualHelpTrigger};

package/src/Menu.tsx

@@ -10,40 +10,67 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton} from '@react-spectrum/button';
+import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
 import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
-import {MenuContext, MenuStateContext} from './context';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {MenuContext, MenuStateContext, useMenuStateContext} from './context';
 import {MenuItem} from './MenuItem';
 import {MenuSection} from './MenuSection';
-import {mergeProps, useSyncRef} from '@react-aria/utils';
-import React, {ReactElement, useContext, useRef} from 'react';
+import {mergeProps, useSlotId, useSyncRef} from '@react-aria/utils';
+import React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';
 import {SpectrumMenuProps} from '@react-types/menu';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMenu} from '@react-aria/menu';
 import {useTreeState} from '@react-stately/tree';
 
 function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+  let isSubmenu = true;
   let contextProps = useContext(MenuContext);
+  let parentMenuContext = useMenuStateContext();
+  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};
+  if (!parentMenuContext) {
+    isSubmenu = false;
+  }
   let completeProps = {
     ...mergeProps(contextProps, props)
   };
-
   let domRef = useDOMRef(ref);
-  let scopedRef = useRef(null);
+  let popoverContainerRef = useRef(null);
+  let trayContainerRef = useRef(null);
   let state = useTreeState(completeProps);
+  let submenuRef = useRef<HTMLDivElement>(null);
   let {menuProps} = useMenu(completeProps, state, domRef);
   let {styleProps} = useStyleProps(completeProps);
   useSyncRef(contextProps, domRef);
-  let isMobile = useIsMobileDevice();
+  let [leftOffset, setLeftOffset] = useState({left: 0});
+  useEffect(() => {
+    if (popoverContainerRef.current) {
+      let {left} = popoverContainerRef.current.getBoundingClientRect();
+      setLeftOffset({left: -1 * left});
+    }
+  }, []);
 
+  let menuLevel = contextProps.submenuLevel ?? -1;
+  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;
+  // TODO: add slide transition
   return (
-    <MenuStateContext.Provider value={{state, container: scopedRef, menu: domRef}}>
-      <FocusScope contain={state.expandedKeys.size > 0}>
-        <div className={classNames(styles, !isMobile ? 'spectrum-Menu-wrapper' : '')}>
+    <MenuStateContext.Provider value={{popoverContainerRef, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
+      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />
+      <FocusScope>
+        <TrayHeaderWrapper
+          onBackButtonPress={contextProps.onBackButtonPress}
+          hasOpenSubmenu={hasOpenSubmenu}
+          isSubmenu={isSubmenu}
+          parentMenuTreeState={parentMenuTreeState}
+          rootMenuTriggerState={rootMenuTriggerState}>
           <div
             {...menuProps}
-            {...styleProps}
+            style={mergeProps(styleProps.style, menuProps.style)}
             ref={domRef}
             className={
               classNames(
@@ -78,13 +105,61 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
               return menuItem;
             })}
           </div>
-        </div>
-        <div ref={scopedRef} />
+        </TrayHeaderWrapper>
+        {rootMenuTriggerState?.isOpen && <div ref={popoverContainerRef} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }
       </FocusScope>
     </MenuStateContext.Provider>
   );
 }
 
+export function TrayHeaderWrapper(props) {
+  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
+  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;
+  let backButtonLabel = stringFormatter.format('backButton', {
+    prevMenuButton: backButtonText
+  });
+  let headingId = useSlotId();
+  let isMobile = useIsMobileDevice();
+  let {direction} = useLocale();
+
+  return (
+    <>
+      <div
+        role={headingId ? 'dialog' : undefined}
+        aria-labelledby={headingId}
+        aria-hidden={isMobile && hasOpenSubmenu}
+        data-testid="menu-wrapper"
+        className={
+          classNames(
+            styles,
+            'spectrum-Menu-wrapper',
+            {
+              'spectrum-Menu-wrapper--isMobile': isMobile,
+              'is-expanded': hasOpenSubmenu
+            }
+          )
+        }>
+        <div role="presentation" className={classNames(styles, 'spectrum-Submenu-wrapper')} onKeyDown={wrapperKeyDown}>
+          {isMobile && isSubmenu && !hasOpenSubmenu && (
+            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>
+              <ActionButton
+                aria-label={backButtonLabel}
+                isQuiet
+                onPress={onBackButtonPress}>
+                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}
+                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}
+              </ActionButton>
+              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>
+            </div>
+          )}
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
+
 /**
  * Menus display a list of actions or options that a user can choose.
  */

package/src/MenuItem.tsx

@@ -11,6 +11,8 @@
  */
 
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
+import ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {DOMAttributes, Key, Node} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
@@ -23,8 +25,8 @@ import React, {useMemo, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {Text} from '@react-spectrum/text';
 import {TreeState} from '@react-stately/tree';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useMenuContext, useMenuDialogContext} from './context';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useMenuContext, useSubmenuTriggerContext} from './context';
 import {useMenuItem} from '@react-aria/menu';
 
 interface MenuItemProps<T> {
@@ -42,33 +44,32 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
     isVirtualized,
     onAction
   } = props;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
-  let menuDialogContext = useMenuDialogContext();
-  let {triggerRef} = menuDialogContext || {};
-  let isMenuDialogTrigger = !!menuDialogContext;
-  let isUnavailable = false;
-
-  if (isMenuDialogTrigger) {
-    isUnavailable = menuDialogContext.isUnavailable;
-  }
-
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-
   let {
     closeOnSelect
   } = useMenuContext();
-
   let {
     rendered,
     key
   } = item;
 
-  let isSelected = state.selectionManager.isSelected(key);
-  let isDisabled = state.disabledKeys.has(key);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
+  let {direction} = useLocale();
 
+  let submenuTriggerContext = useSubmenuTriggerContext();
+  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};
+  let isSubmenuTrigger = !!submenuTriggerContext;
+  let isUnavailable;
+  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
+
+  if (isSubmenuTrigger) {
+    isUnavailable = submenuTriggerContext.isUnavailable;
+  }
+
+  let isDisabled = state.disabledKeys.has(key);
+  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';
+  let isSelected = isSelectable && state.selectionManager.isSelected(key);
   let itemref = useRef<any>(null);
   let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));
-
   let {
     menuItemProps,
     labelProps,
@@ -83,7 +84,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
       closeOnSelect,
       isVirtualized,
       onAction,
-      'aria-haspopup': isMenuDialogTrigger && isUnavailable ? 'dialog' : undefined
+      ...submenuTriggerProps
     },
     state,
     ref
@@ -110,8 +111,8 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
           {
             'is-disabled': isDisabled,
             'is-selected': isSelected,
-            'is-selectable': state.selectionManager.selectionMode !== 'none',
-            'is-open': state.expandedKeys.has(key)
+            'is-selectable': isSelectable,
+            'is-open': submenuTriggerProps.isOpen
           }
         )}>
         <Grid
@@ -128,7 +129,8 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
                 end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},
                 icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},
                 description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},
-                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps}
+                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},
+                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}
               }}>
               {contents}
               {isSelected &&
@@ -144,6 +146,9 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
               {
                 isUnavailable && <InfoOutline slot="end" size="XS" alignSelf="center" aria-label={stringFormatter.format('unavailable')} />
               }
+              {
+                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot="chevron" /> : <ChevronRight slot="chevron" />)
+              }
             </SlotProvider>
           </ClearSlots>
         </Grid>

package/src/MenuTrigger.tsx

@@ -58,7 +58,6 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
   let isMobile = useIsMobileDevice();
   let menuContext = {
     ...menuProps,
-    state,
     ref: menuRef,
     onClose: state.close,
     closeOnSelect,
@@ -67,14 +66,15 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
       width: '100%',
       maxHeight: 'inherit'
     } : undefined,
-    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile})
+    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),
+    state
   };
 
   // On small screen devices, the menu is rendered in a tray, otherwise a popover.
   let overlay;
   if (isMobile) {
     overlay = (
-      <Tray state={state}>
+      <Tray state={state} isFixedHeight>
         {menu}
       </Tray>
     );

package/src/SubmenuTrigger.tsx

@@ -0,0 +1,167 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames, useIsMobileDevice} from '@react-spectrum/utils';
+import {Key} from '@react-types/shared';
+import {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {Popover} from '@react-spectrum/overlays';
+import React, {ReactElement, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
+import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
+import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
+import {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';
+import {useLocale} from '@react-aria/i18n';
+
+interface SubmenuTriggerProps {
+  /**
+   * The contents of the SubmenuTrigger - a Item and a Menu.
+   */
+  children: ReactElement[],
+  targetKey: Key
+}
+
+export interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}
+
+function SubmenuTrigger(props: SubmenuTriggerProps) {
+  let triggerRef = useRef<HTMLDivElement>();
+  let {
+    children,
+    targetKey
+  } = props;
+
+  let [menuTrigger, menu] = React.Children.toArray(children);
+  let {popoverContainerRef, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();
+  let triggerNode = state.collection.getItem(targetKey);
+  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
+  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
+    node: triggerNode,
+    parentMenuRef,
+    submenuRef: menuRef
+  }, submenuTriggerState, triggerRef);
+  let isMobile = useIsMobileDevice();
+  let onBackButtonPress = () => {
+    submenuTriggerState.close();
+    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {
+      parentMenuRef.current.focus();
+    }
+  };
+
+  let {direction} = useLocale();
+  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowLeft':
+        if (direction === 'ltr') {
+          triggerRef.current.focus();
+        }
+        break;
+      case 'ArrowRight':
+        if (direction === 'rtl') {
+          triggerRef.current.focus();
+        }
+        break;
+    }
+  };
+
+  let overlay;
+  let [offset, setOffset] = useState(0);
+  useLayoutEffect(() => {
+    if (parentMenuRef.current) {
+      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');
+      if (offset !== '') {
+        setOffset(-1 * parseInt(offset, 10));
+      }
+    }
+  }, [parentMenuRef]);
+
+  if (isMobile)  {
+    delete submenuTriggerProps.onBlur;
+    delete submenuTriggerProps.onHoverChange;
+    submenuProps.autoFocus ??= true;
+    if (trayContainerRef.current && submenuTriggerState.isOpen) {
+      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);
+    }
+  } else {
+    let onDismissButtonPress = () => {
+      submenuTriggerState.close();
+      parentMenuRef.current?.focus();
+    };
+
+    overlay = (
+      <Popover
+        {...popoverProps}
+        onDismissButtonPress={onDismissButtonPress}
+        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
+        container={popoverContainerRef.current}
+        containerPadding={0}
+        crossOffset={offset}
+        offset={offset}
+        enableBothDismissButtons
+        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}
+        state={submenuTriggerState}
+        triggerRef={triggerRef}
+        scrollRef={menuRef}
+        placement="end top"
+        hideArrow>
+        {menu}
+      </Popover>
+    );
+  }
+
+  let menuContext = {
+    ...mergeProps(submenuProps, {
+      ref: menuRef,
+      UNSAFE_style: isMobile ? {
+        width: '100%',
+        maxHeight: 'inherit'
+      } : undefined,
+      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),
+      ...(isMobile && {
+        onBackButtonPress,
+        onKeyDown: mobileSubmenuKeyDown
+      })
+    })
+  };
+
+  return (
+    <>
+      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>
+      <MenuContext.Provider value={menuContext}>
+        {overlay}
+      </MenuContext.Provider>
+    </>
+  );
+}
+
+SubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {
+  let childArray: ReactElement[] = [];
+  React.Children.forEach(props.children, child => {
+    if (React.isValidElement(child)) {
+      childArray.push(child);
+    }
+  });
+  let [trigger] = childArray;
+  let [, content] = props.children as [ReactElement, ReactElement];
+
+  yield {
+    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),
+    wrapper: (element) => (
+      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>
+        {element}
+        {content}
+      </SubmenuTrigger>
+    )
+  };
+};
+
+let _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
+export {_SubmenuTrigger as SubmenuTrigger};