@adobe/react-spectrum 3.46.1 → 3.47.0

package/dist/private/menu/Menu.cjs

@@ -0,0 +1,245 @@
+var $183c5173677598aa$exports = require("../button/ActionButton.cjs");
+var $69fd630bd812ba47$exports = require("../utils/classNames.cjs");
+var $e609f7c27f409c35$exports = require("./intlStrings.cjs");
+var $827c4fa3df3c822d$exports = require("./context.cjs");
+var $f98c72ac58c30ee0$exports = require("./MenuItem.cjs");
+var $58c7a0147e48c32f$exports = require("./MenuSection.cjs");
+require("../menu_vars.css");
+var $35d34152ff885d5c$exports = require("../menu_vars_css.cjs");
+var $65aea7b37663976b$exports = require("../utils/useDOMRef.cjs");
+var $0b97cdf6ccc1e502$exports = require("../utils/useIsMobileDevice.cjs");
+var $b8f90d51c4908137$exports = require("../utils/styleProps.cjs");
+var $gBx7q$reactariauseMenu = require("react-aria/useMenu");
+var $gBx7q$spectrumiconsuiArrowDownSmall = require("@spectrum-icons/ui/ArrowDownSmall");
+var $gBx7q$reactariaFocusScope = require("react-aria/FocusScope");
+var $gBx7q$reactariamergeProps = require("react-aria/mergeProps");
+var $gBx7q$react = require("react");
+var $gBx7q$reactstatelyuseTreeState = require("react-stately/useTreeState");
+var $gBx7q$reactariaprivateutilsuseLayoutEffect = require("react-aria/private/utils/useLayoutEffect");
+var $gBx7q$reactariaI18nProvider = require("react-aria/I18nProvider");
+var $gBx7q$reactariauseLocalizedStringFormatter = require("react-aria/useLocalizedStringFormatter");
+var $gBx7q$reactariaprivateutilsuseId = require("react-aria/private/utils/useId");
+var $gBx7q$reactariaprivateutilsuseSyncRef = require("react-aria/private/utils/useSyncRef");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Menu", function () { return $802fb5441f76e7b0$export$d9b273488cd8ce6f; });
+$parcel$export(module.exports, "TrayHeaderWrapper", function () { return $802fb5441f76e7b0$export$3dfe97b5c32d8d8c; });
+/*
+ * 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.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $802fb5441f76e7b0$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).forwardRef(function Menu(props, ref) {
+    let isSubmenu = true;
+    let contextProps = (0, $gBx7q$react.useContext)((0, $827c4fa3df3c822d$exports.MenuContext));
+    let parentMenuContext = (0, $827c4fa3df3c822d$exports.useMenuStateContext)();
+    let { rootMenuTriggerState: rootMenuTriggerState, state: parentMenuTreeState } = parentMenuContext || {
+        rootMenuTriggerState: contextProps.state
+    };
+    if (!parentMenuContext) isSubmenu = false;
+    let completeProps = {
+        ...(0, $gBx7q$reactariamergeProps.mergeProps)(contextProps, props)
+    };
+    let domRef = (0, $65aea7b37663976b$exports.useDOMRef)(ref);
+    let [popoverContainer, setPopoverContainer] = (0, $gBx7q$react.useState)(null);
+    let trayContainerRef = (0, $gBx7q$react.useRef)(null);
+    let state = (0, $gBx7q$reactstatelyuseTreeState.useTreeState)(completeProps);
+    let submenuRef = (0, $gBx7q$react.useRef)(null);
+    let { menuProps: menuProps } = (0, $gBx7q$reactariauseMenu.useMenu)(completeProps, state, domRef);
+    let { styleProps: styleProps } = (0, $b8f90d51c4908137$exports.useStyleProps)(completeProps);
+    (0, $gBx7q$reactariaprivateutilsuseSyncRef.useSyncRef)(contextProps, domRef);
+    let [leftOffset, setLeftOffset] = (0, $gBx7q$react.useState)({
+        left: 0
+    });
+    let prevPopoverContainer = (0, $gBx7q$react.useRef)(null);
+    (0, $gBx7q$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(()=>{
+        if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
+            prevPopoverContainer.current = popoverContainer;
+            let { left: left } = popoverContainer.getBoundingClientRect();
+            setLeftOffset({
+                left: -1 * left
+            });
+        }
+    }, [
+        leftOffset,
+        popoverContainer
+    ]);
+    let menuLevel = contextProps.submenuLevel ?? -1;
+    let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];
+    let hasOpenSubmenu = false;
+    if (nextMenuLevelKey != null) {
+        let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
+        hasOpenSubmenu = nextMenuLevel != null;
+    }
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, $827c4fa3df3c822d$exports.MenuStateContext).Provider, {
+        value: {
+            popoverContainer: popoverContainer,
+            trayContainerRef: trayContainerRef,
+            menu: domRef,
+            submenu: submenuRef,
+            rootMenuTriggerState: rootMenuTriggerState,
+            state: state
+        }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        style: {
+            height: hasOpenSubmenu ? '100%' : undefined
+        },
+        ref: trayContainerRef
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, $gBx7q$reactariaFocusScope.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement($802fb5441f76e7b0$export$3dfe97b5c32d8d8c, {
+        onBackButtonPress: contextProps.onBackButtonPress,
+        hasOpenSubmenu: hasOpenSubmenu,
+        isSubmenu: isSubmenu,
+        parentMenuTreeState: parentMenuTreeState,
+        rootMenuTriggerState: rootMenuTriggerState,
+        menuRef: domRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        ...menuProps,
+        style: (0, $gBx7q$reactariamergeProps.mergeProps)(styleProps.style, menuProps.style),
+        ref: domRef,
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Menu', styleProps.className)
+    }, [
+        ...state.collection
+    ].map((item)=>{
+        if (item.type === 'section') return /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, $58c7a0147e48c32f$exports.MenuSection), {
+            key: item.key,
+            item: item,
+            state: state
+        });
+        let menuItem = /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, $f98c72ac58c30ee0$exports.MenuItem), {
+            key: item.key,
+            item: item,
+            state: state
+        });
+        if (item.wrapper) menuItem = item.wrapper(menuItem);
+        return menuItem;
+    }))), rootMenuTriggerState?.isOpen && /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        ref: setPopoverContainer,
+        style: {
+            width: '100vw',
+            position: 'absolute',
+            top: -5,
+            ...leftOffset
+        }
+    })));
+});
+function $802fb5441f76e7b0$export$3dfe97b5c32d8d8c(props) {
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
+    let stringFormatter = (0, $gBx7q$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e609f7c27f409c35$exports))), '@react-spectrum/menu');
+    let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];
+    let backButtonText = '';
+    if (lastKey != null) backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';
+    let backButtonLabel = stringFormatter.format('backButton', {
+        prevMenuButton: backButtonText ?? ''
+    });
+    let headingId = (0, $gBx7q$reactariaprivateutilsuseId.useSlotId)();
+    let isMobile = (0, $0b97cdf6ccc1e502$exports.useIsMobileDevice)();
+    let { direction: direction } = (0, $gBx7q$reactariaI18nProvider.useLocale)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $gBx7q$react.useState)('');
+    (0, $gBx7q$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(()=>{
+        if (!hasOpenSubmenu) setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+    }, [
+        hasOpenSubmenu,
+        isMobile
+    ]);
+    let timeoutRef = (0, $gBx7q$react.useRef)(null);
+    let handleBackButtonPress = ()=>{
+        setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
+        timeoutRef.current = setTimeout(()=>{
+            onBackButtonPress?.();
+        }, 220); // Matches transition duration
+    };
+    (0, $gBx7q$react.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 = (0, $gBx7q$react.useRef)(null);
+    (0, $gBx7q$react.useEffect)(()=>{
+        if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') focusTimeoutRef.current = setTimeout(()=>{
+            let firstItem = menuRef?.current?.querySelector('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]');
+            firstItem?.focus();
+        }, 220);
+        return ()=>{
+            if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
+        };
+    }, [
+        hasOpenSubmenu,
+        isMobile,
+        isSubmenu,
+        menuRef,
+        traySubmenuAnimation
+    ]);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, ($parcel$interopDefault($gBx7q$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        role: headingId ? 'dialog' : undefined,
+        "aria-labelledby": headingId,
+        "aria-hidden": isMobile && hasOpenSubmenu,
+        "data-testid": "menu-wrapper",
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Menu-wrapper', {
+            'spectrum-Menu-wrapper--isMobile': isMobile,
+            'is-expanded': hasOpenSubmenu,
+            [traySubmenuAnimation]: isMobile
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        role: "presentation",
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Submenu-wrapper', {
+            'spectrum-Submenu-wrapper--isMobile': isMobile
+        }),
+        onKeyDown: wrapperKeyDown
+    }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("div", {
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Submenu-headingWrapper')
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, $183c5173677598aa$exports.ActionButton), {
+        "aria-label": backButtonLabel,
+        isQuiet: true,
+        onPress: handleBackButtonPress
+    }, direction === 'rtl' ? /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, ($parcel$interopDefault($gBx7q$spectrumiconsuiArrowDownSmall))), {
+        UNSAFE_style: {
+            rotate: '270deg'
+        }
+    }) : /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement((0, ($parcel$interopDefault($gBx7q$spectrumiconsuiArrowDownSmall))), {
+        UNSAFE_style: {
+            rotate: '90deg'
+        }
+    })), /*#__PURE__*/ (0, ($parcel$interopDefault($gBx7q$react))).createElement("h1", {
+        id: headingId,
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Submenu-heading')
+    }, backButtonText)), children)));
+}
+
+
+//# sourceMappingURL=Menu.cjs.map

package/dist/private/menu/Menu.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from '../button/ActionButton';\n\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\n// @ts-ignore\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.cjs.map"}

package/dist/private/menu/Menu.js

@@ -0,0 +1,243 @@
+import {ActionButton as $c265dbb41bfd0210$export$cfc7921d29ef7b80} from "../button/ActionButton.js";
+import {classNames as $512ba93e663f149c$export$ce4ab0c55987d1ff} from "../utils/classNames.js";
+import $aDee0$intlStringsjs from "./intlStrings.js";
+import {MenuContext as $a4d1910f0ff9d033$export$c7e742effb1c51e2, MenuStateContext as $a4d1910f0ff9d033$export$24aad8519b95b41b, useMenuStateContext as $a4d1910f0ff9d033$export$efa3856fc0e85e7f} from "./context.js";
+import {MenuItem as $53bbb287499fadf8$export$2ce376c2cc3355c8} from "./MenuItem.js";
+import {MenuSection as $0dc60032e766c118$export$4b1545b4f2016d26} from "./MenuSection.js";
+import "../menu_vars.css";
+import $aDee0$menu_vars_cssmjs from "../menu_vars_css.mjs";
+import {useDOMRef as $c234463e9ef56637$export$c2c55ef9111cafd8} from "../utils/useDOMRef.js";
+import {useIsMobileDevice as $196ab9279fe71c29$export$736bf165441b18c7} from "../utils/useIsMobileDevice.js";
+import {useStyleProps as $120fbea2d95e11ed$export$b8e6fb9d2dff3f41} from "../utils/styleProps.js";
+import {useMenu as $aDee0$useMenu} from "react-aria/useMenu";
+import $aDee0$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
+import {FocusScope as $aDee0$FocusScope} from "react-aria/FocusScope";
+import {mergeProps as $aDee0$mergeProps} from "react-aria/mergeProps";
+import $aDee0$react, {useContext as $aDee0$useContext, useState as $aDee0$useState, useRef as $aDee0$useRef, useEffect as $aDee0$useEffect} from "react";
+import {useTreeState as $aDee0$useTreeState} from "react-stately/useTreeState";
+import {useLayoutEffect as $aDee0$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
+import {useLocale as $aDee0$useLocale} from "react-aria/I18nProvider";
+import {useLocalizedStringFormatter as $aDee0$useLocalizedStringFormatter} from "react-aria/useLocalizedStringFormatter";
+import {useSlotId as $aDee0$useSlotId} from "react-aria/private/utils/useId";
+import {useSyncRef as $aDee0$useSyncRef} from "react-aria/private/utils/useSyncRef";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * 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.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $79ddee63a726ea3d$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $aDee0$react).forwardRef(function Menu(props, ref) {
+    let isSubmenu = true;
+    let contextProps = (0, $aDee0$useContext)((0, $a4d1910f0ff9d033$export$c7e742effb1c51e2));
+    let parentMenuContext = (0, $a4d1910f0ff9d033$export$efa3856fc0e85e7f)();
+    let { rootMenuTriggerState: rootMenuTriggerState, state: parentMenuTreeState } = parentMenuContext || {
+        rootMenuTriggerState: contextProps.state
+    };
+    if (!parentMenuContext) isSubmenu = false;
+    let completeProps = {
+        ...(0, $aDee0$mergeProps)(contextProps, props)
+    };
+    let domRef = (0, $c234463e9ef56637$export$c2c55ef9111cafd8)(ref);
+    let [popoverContainer, setPopoverContainer] = (0, $aDee0$useState)(null);
+    let trayContainerRef = (0, $aDee0$useRef)(null);
+    let state = (0, $aDee0$useTreeState)(completeProps);
+    let submenuRef = (0, $aDee0$useRef)(null);
+    let { menuProps: menuProps } = (0, $aDee0$useMenu)(completeProps, state, domRef);
+    let { styleProps: styleProps } = (0, $120fbea2d95e11ed$export$b8e6fb9d2dff3f41)(completeProps);
+    (0, $aDee0$useSyncRef)(contextProps, domRef);
+    let [leftOffset, setLeftOffset] = (0, $aDee0$useState)({
+        left: 0
+    });
+    let prevPopoverContainer = (0, $aDee0$useRef)(null);
+    (0, $aDee0$useLayoutEffect)(()=>{
+        if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
+            prevPopoverContainer.current = popoverContainer;
+            let { left: left } = popoverContainer.getBoundingClientRect();
+            setLeftOffset({
+                left: -1 * left
+            });
+        }
+    }, [
+        leftOffset,
+        popoverContainer
+    ]);
+    var _contextProps_submenuLevel;
+    let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
+    let nextMenuLevelKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack[menuLevel + 1];
+    let hasOpenSubmenu = false;
+    if (nextMenuLevelKey != null) {
+        let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
+        hasOpenSubmenu = nextMenuLevel != null;
+    }
+    return /*#__PURE__*/ (0, $aDee0$react).createElement((0, $a4d1910f0ff9d033$export$24aad8519b95b41b).Provider, {
+        value: {
+            popoverContainer: popoverContainer,
+            trayContainerRef: trayContainerRef,
+            menu: domRef,
+            submenu: submenuRef,
+            rootMenuTriggerState: rootMenuTriggerState,
+            state: state
+        }
+    }, /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        style: {
+            height: hasOpenSubmenu ? '100%' : undefined
+        },
+        ref: trayContainerRef
+    }), /*#__PURE__*/ (0, $aDee0$react).createElement((0, $aDee0$FocusScope), null, /*#__PURE__*/ (0, $aDee0$react).createElement($79ddee63a726ea3d$export$3dfe97b5c32d8d8c, {
+        onBackButtonPress: contextProps.onBackButtonPress,
+        hasOpenSubmenu: hasOpenSubmenu,
+        isSubmenu: isSubmenu,
+        parentMenuTreeState: parentMenuTreeState,
+        rootMenuTriggerState: rootMenuTriggerState,
+        menuRef: domRef
+    }, /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        ...menuProps,
+        style: (0, $aDee0$mergeProps)(styleProps.style, menuProps.style),
+        ref: domRef,
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($aDee0$menu_vars_cssmjs))), 'spectrum-Menu', styleProps.className)
+    }, [
+        ...state.collection
+    ].map((item)=>{
+        if (item.type === 'section') return /*#__PURE__*/ (0, $aDee0$react).createElement((0, $0dc60032e766c118$export$4b1545b4f2016d26), {
+            key: item.key,
+            item: item,
+            state: state
+        });
+        let menuItem = /*#__PURE__*/ (0, $aDee0$react).createElement((0, $53bbb287499fadf8$export$2ce376c2cc3355c8), {
+            key: item.key,
+            item: item,
+            state: state
+        });
+        if (item.wrapper) menuItem = item.wrapper(menuItem);
+        return menuItem;
+    }))), (rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.isOpen) && /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        ref: setPopoverContainer,
+        style: {
+            width: '100vw',
+            position: 'absolute',
+            top: -5,
+            ...leftOffset
+        }
+    })));
+});
+function $79ddee63a726ea3d$export$3dfe97b5c32d8d8c(props) {
+    var _parentMenuTreeState_collection_getItem;
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
+    let stringFormatter = (0, $aDee0$useLocalizedStringFormatter)((0, ($parcel$interopDefault($aDee0$intlStringsjs))), '@react-spectrum/menu');
+    let lastKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack.slice(-1)[0];
+    let backButtonText = '';
+    var _parentMenuTreeState_collection_getItem_textValue;
+    if (lastKey != null) backButtonText = (_parentMenuTreeState_collection_getItem_textValue = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(lastKey)) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue) !== null && _parentMenuTreeState_collection_getItem_textValue !== void 0 ? _parentMenuTreeState_collection_getItem_textValue : '';
+    let backButtonLabel = stringFormatter.format('backButton', {
+        prevMenuButton: backButtonText !== null && backButtonText !== void 0 ? backButtonText : ''
+    });
+    let headingId = (0, $aDee0$useSlotId)();
+    let isMobile = (0, $196ab9279fe71c29$export$736bf165441b18c7)();
+    let { direction: direction } = (0, $aDee0$useLocale)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $aDee0$useState)('');
+    (0, $aDee0$useLayoutEffect)(()=>{
+        if (!hasOpenSubmenu) setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+    }, [
+        hasOpenSubmenu,
+        isMobile
+    ]);
+    let timeoutRef = (0, $aDee0$useRef)(null);
+    let handleBackButtonPress = ()=>{
+        setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
+        timeoutRef.current = setTimeout(()=>{
+            onBackButtonPress === null || onBackButtonPress === void 0 ? void 0 : onBackButtonPress();
+        }, 220); // Matches transition duration
+    };
+    (0, $aDee0$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 = (0, $aDee0$useRef)(null);
+    (0, $aDee0$useEffect)(()=>{
+        if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') focusTimeoutRef.current = setTimeout(()=>{
+            var _menuRef_current;
+            let firstItem = menuRef === null || menuRef === void 0 ? void 0 : (_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.querySelector('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }, 220);
+        return ()=>{
+            if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
+        };
+    }, [
+        hasOpenSubmenu,
+        isMobile,
+        isSubmenu,
+        menuRef,
+        traySubmenuAnimation
+    ]);
+    return /*#__PURE__*/ (0, $aDee0$react).createElement((0, $aDee0$react).Fragment, null, /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        role: headingId ? 'dialog' : undefined,
+        "aria-labelledby": headingId,
+        "aria-hidden": isMobile && hasOpenSubmenu,
+        "data-testid": "menu-wrapper",
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($aDee0$menu_vars_cssmjs))), 'spectrum-Menu-wrapper', {
+            'spectrum-Menu-wrapper--isMobile': isMobile,
+            'is-expanded': hasOpenSubmenu,
+            [traySubmenuAnimation]: isMobile
+        })
+    }, /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        role: "presentation",
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($aDee0$menu_vars_cssmjs))), 'spectrum-Submenu-wrapper', {
+            'spectrum-Submenu-wrapper--isMobile': isMobile
+        }),
+        onKeyDown: wrapperKeyDown
+    }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, $aDee0$react).createElement("div", {
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($aDee0$menu_vars_cssmjs))), 'spectrum-Submenu-headingWrapper')
+    }, /*#__PURE__*/ (0, $aDee0$react).createElement((0, $c265dbb41bfd0210$export$cfc7921d29ef7b80), {
+        "aria-label": backButtonLabel,
+        isQuiet: true,
+        onPress: handleBackButtonPress
+    }, direction === 'rtl' ? /*#__PURE__*/ (0, $aDee0$react).createElement((0, $aDee0$spectrumiconsuiArrowDownSmall), {
+        UNSAFE_style: {
+            rotate: '270deg'
+        }
+    }) : /*#__PURE__*/ (0, $aDee0$react).createElement((0, $aDee0$spectrumiconsuiArrowDownSmall), {
+        UNSAFE_style: {
+            rotate: '90deg'
+        }
+    })), /*#__PURE__*/ (0, $aDee0$react).createElement("h1", {
+        id: headingId,
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($aDee0$menu_vars_cssmjs))), 'spectrum-Submenu-heading')
+    }, backButtonText)), children)));
+}
+
+
+export {$79ddee63a726ea3d$export$d9b273488cd8ce6f as Menu, $79ddee63a726ea3d$export$3dfe97b5c32d8d8c as TrayHeaderWrapper};
+//# sourceMappingURL=Menu.js.map

package/dist/private/menu/Menu.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from '../button/ActionButton';\n\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\n// @ts-ignore\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.js.map"}