@react-spectrum/menu 3.0.0-alpha.1 → 3.0.0-nightly-4980928d3-240906

package/dist/zh-TW.module.js

@@ -0,0 +1,10 @@
+var $56f3d9ca2967952d$exports = {};
+$56f3d9ca2967952d$exports = {
+    "backButton": (args)=>`\u{8FD4}\u{56DE} ${args.prevMenuButton}`,
+    "moreActions": `\u{66F4}\u{591A}\u{52D5}\u{4F5C}`,
+    "unavailable": `\u{7121}\u{6CD5}\u{4F7F}\u{7528}\u{FF0C}\u{5C55}\u{958B}\u{4EE5}\u{53D6}\u{5F97}\u{8A73}\u{7D30}\u{8CC7}\u{6599}`
+};
+
+
+export {$56f3d9ca2967952d$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,cAAc,CAAC,OAAS,CAAC,iBAAG,EAAE,KAAK,cAAc,CAAC,CAAC;IACrE,eAAe,CAAC,gCAAI,CAAC;IACrB,eAAe,CAAC,gHAAc,CAAC;AACjC","sources":["packages/@react-spectrum/menu/intl/zh-TW.json"],"sourcesContent":["{\n  \"backButton\": \"返回 {prevMenuButton}\",\n  \"moreActions\": \"更多動作\",\n  \"unavailable\": \"無法使用，展開以取得詳細資料\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@react-spectrum/menu",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-nightly-4980928d3-240906",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
   ],
-  "sideEffects": false,
   "targets": {
     "main": {
       "includeNodeModules": [
@@ -25,41 +33,42 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/adobe-private/react-spectrum-v3"
+    "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/collections": "^3.0.0-alpha.1",
-    "@react-aria/focus": "^3.0.0-rc.2",
-    "@react-aria/interactions": "^3.0.0-rc.2",
-    "@react-aria/menu": "^3.0.0-alpha.1",
-    "@react-aria/overlays": "^3.0.0-alpha.1",
-    "@react-aria/selection": "^3.0.0-alpha.1",
-    "@react-aria/separator": "^3.0.0-rc.2",
-    "@react-aria/utils": "^3.0.0-rc.2",
-    "@react-spectrum/checkbox": "^3.0.0-rc.2",
-    "@react-spectrum/divider": "^3.0.0-rc.2",
-    "@react-spectrum/layout": "^3.0.0-alpha.1",
-    "@react-spectrum/overlays": "^3.0.0-alpha.1",
-    "@react-spectrum/typography": "^3.0.0-alpha.1",
-    "@react-spectrum/utils": "^3.0.0-rc.2",
-    "@react-stately/collections": "^3.0.0-alpha.1",
-    "@react-stately/menu": "^3.0.0-alpha.1",
-    "@react-stately/tree": "^3.0.0-alpha.1",
-    "@react-stately/utils": "^3.0.0-rc.2",
-    "@react-types/menu": "^3.0.0-alpha.1",
-    "@react-types/shared": "^3.0.0-rc.2",
-    "@spectrum-icons/ui": "^3.0.0-rc.2"
+    "@react-aria/focus": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/i18n": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/interactions": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/menu": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/separator": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/button": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/layout": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/text": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/collections": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/menu": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/tree": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/menu": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
+    "@spectrum-icons/ui": "^3.0.0-nightly-4980928d3-240906",
+    "@spectrum-icons/workflow": "^3.0.0-nightly-4980928d3-240906",
+    "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@react-spectrum/provider": "^3.0.0-rc.1",
-    "react": "^16.8.0"
+    "@react-spectrum/provider": "^3.0.0-nightly-4980928d3-240906",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
-}
+  "stableVersion": "3.20.3"
+}

package/src/ActionMenu.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2021 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 {ActionButton} from '@react-spectrum/button';
+import {filterDOMProps} from '@react-aria/utils';
+import {FocusableRef} from '@react-types/shared';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {Menu} from './Menu';
+import {MenuTrigger} from './MenuTrigger';
+import More from '@spectrum-icons/workflow/More';
+import React, {forwardRef, ReactElement} from 'react';
+import {SpectrumActionMenuProps} from '@react-types/menu';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSlotProps} from '@react-spectrum/utils';
+
+function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  props = useSlotProps(props, 'actionMenu');
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
+  let buttonProps = filterDOMProps(props, {labelable: true});
+  if (buttonProps['aria-label'] === undefined) {
+    buttonProps['aria-label'] = stringFormatter.format('moreActions');
+  }
+
+  return (
+    <MenuTrigger
+      isOpen={props.isOpen}
+      defaultOpen={props.defaultOpen}
+      onOpenChange={props.onOpenChange}
+      align={props.align}
+      direction={props.direction}
+      shouldFlip={props.shouldFlip}>
+      <ActionButton
+        ref={ref}
+        {...props}
+        {...buttonProps}>
+        <More />
+      </ActionButton>
+      <Menu
+        children={props.children}
+        items={props.items}
+        disabledKeys={props.disabledKeys}
+        onAction={props.onAction} />
+    </MenuTrigger>
+  );
+}
+
+/**
+ * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
+ */
+const _ActionMenu = forwardRef(ActionMenu) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;
+export {_ActionMenu as ActionMenu};

package/src/ContextualHelpTrigger.tsx

@@ -0,0 +1,193 @@
+/*
+ * Copyright 2023 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, 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 {Popover} from '@react-spectrum/overlays';
+import React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
+import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
+import {SubmenuTriggerContext, useMenuStateContext} from './context';
+import {TrayHeaderWrapper} from './Menu';
+import {useSubmenuTrigger} from '@react-aria/menu';
+import {useSubmenuTriggerState} from '@react-stately/menu';
+
+interface MenuDialogTriggerProps {
+  /** Whether the menu item is currently unavailable. */
+  isUnavailable?: boolean,
+  /** The triggering Item and the Dialog, respectively. */
+  children: [ReactElement, ReactElement]
+}
+
+interface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {
+  targetKey: Key
+}
+
+export interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}
+
+function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {
+  let {isUnavailable = false, targetKey} = props;
+
+  let triggerRef = useRef<HTMLLIElement>(null);
+  let popoverRef = useRef(null);
+  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
+  let submenuRef = unwrapDOMRef(popoverRef);
+  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
+    parentMenuRef,
+    submenuRef,
+    type: 'dialog',
+    isDisabled: !isUnavailable
+  }, submenuTriggerState, triggerRef);
+  let isMobile = useIsMobileDevice();
+  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');
+  useEffect(() => {
+    if (submenuTriggerState.isOpen) {
+      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+    }
+  }, [submenuTriggerState.isOpen]);
+  let slots = {};
+  if (isUnavailable) {
+    slots = {
+      dialog: {
+        UNSAFE_className: classNames(
+          helpStyles,
+          'react-spectrum-ContextualHelp-dialog',
+          {
+            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile
+          },
+          classNames(
+            styles,
+            {
+              'spectrum-Menu-subdialog': !isMobile,
+              [traySubmenuAnimation]: isMobile
+            }
+          )
+        )
+      },
+      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},
+      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
+    };
+  }
+  let [trigger] = React.Children.toArray(props.children);
+  let [, content] = props.children as [ReactElement, ReactElement];
+
+  let onBlurWithin = (e) => {
+    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 = () => {
+    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
+    setTimeout(() => {
+      submenuTriggerState.close();
+      if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {
+        parentMenuRef.current.focus();
+      }
+    }, 220); // Matches transition duration
+  };
+
+  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={popoverContainer}
+        state={submenuTriggerState}
+        ref={popoverRef}
+        triggerRef={triggerRef}
+        placement="end top"
+        containerPadding={0}
+        hideArrow
+        enableBothDismissButtons>
+        <FocusScope restoreFocus>
+          {content}
+        </FocusScope>
+      </Popover>
+    );
+  }
+
+  return (
+    <>
+      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>
+      <SlotProvider slots={slots}>
+        {submenuTriggerState.isOpen && overlay}
+      </SlotProvider>
+    </>
+  );
+}
+
+ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {
+  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 as any, hasChildItems: true, isTrigger: true}),
+    wrapper: (element) => (
+      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>
+        {element}
+        {content}
+      </ContextualHelpTrigger>
+    )
+  };
+};
+
+let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
+export {_Item as ContextualHelpTrigger};

package/src/Menu.tsx

@@ -0,0 +1,221 @@
+/*
+ * 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 {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';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {MenuContext, MenuStateContext, useMenuStateContext} from './context';
+import {MenuItem} from './MenuItem';
+import {MenuSection} from './MenuSection';
+import {mergeProps, useLayoutEffect, 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 {useInteractOutside} from '@react-aria/interactions';
+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 [popoverContainer, setPopoverContainer] = useState(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 [leftOffset, setLeftOffset] = useState({left: 0});
+  let prevPopoverContainer = useRef(null);
+  useEffect(() => {
+    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
+      prevPopoverContainer.current = popoverContainer;
+      let {left} = popoverContainer.getBoundingClientRect();
+      setLeftOffset({left: -1 * left});
+    }
+  }, [leftOffset, popoverContainer]);
+
+  let menuLevel = contextProps.submenuLevel ?? -1;
+  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;
+  useInteractOutside({
+    ref: domRef,
+    onInteractOutside: (e) => {
+      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {
+        rootMenuTriggerState.close();
+      }
+    },
+    isDisabled: isSubmenu || !hasOpenSubmenu
+  });
+
+  return (
+    <MenuStateContext.Provider value={{popoverContainer, 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}
+          menuRef={domRef}>
+          <div
+            {...menuProps}
+            style={mergeProps(styleProps.style, menuProps.style)}
+            ref={domRef}
+            className={
+              classNames(
+                styles,
+                'spectrum-Menu',
+                styleProps.className
+              )
+            }>
+            {[...state.collection].map(item => {
+              if (item.type === 'section') {
+                return (
+                  <MenuSection
+                    key={item.key}
+                    item={item}
+                    state={state} />
+                );
+              }
+
+              let menuItem = (
+                <MenuItem
+                  key={item.key}
+                  item={item}
+                  state={state} />
+              );
+
+              if (item.wrapper) {
+                menuItem = item.wrapper(menuItem);
+              }
+
+              return menuItem;
+            })}
+          </div>
+        </TrayHeaderWrapper>
+        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }
+      </FocusScope>
+    </MenuStateContext.Provider>
+  );
+}
+
+export function TrayHeaderWrapper(props) {
+  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
+  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;
+  let backButtonLabel = stringFormatter.format('backButton', {
+    prevMenuButton: backButtonText
+  });
+  let headingId = useSlotId();
+  let isMobile = useIsMobileDevice();
+  let {direction} = useLocale();
+
+  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');
+  useLayoutEffect(() => {
+    if (!hasOpenSubmenu) {
+      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+    }
+  }, [hasOpenSubmenu, isMobile]);
+
+  let timeoutRef = useRef(null);
+  let handleBackButtonPress = () => {
+    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
+    timeoutRef.current = setTimeout(() => {
+      onBackButtonPress();
+    }, 220); // Matches transition duration
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // When opening submenu in tray, focus the first item in the submenu after animation completes
+  // This fixes an issue with iOS VO where the closed submenu was getting focus
+  let focusTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {
+      focusTimeoutRef.current = setTimeout(() => {
+        let firstItem = menuRef.current.querySelector('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]') as HTMLElement;
+        firstItem?.focus();
+      }, 220);
+    }
+    return () => {
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+      }
+    };
+  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);
+
+  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,
+              [traySubmenuAnimation]: isMobile
+            }
+          )
+        }>
+        <div role="presentation" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>
+          {isMobile && isSubmenu && !hasOpenSubmenu && (
+            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>
+              <ActionButton
+                aria-label={backButtonLabel}
+                isQuiet
+                onPress={handleBackButtonPress}>
+                {/* 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.
+ */
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+const _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+export {_Menu as Menu};