@react-spectrum/menu 3.18.2-nightly.4564 → 3.18.2-nightly.4578

package/dist/ContextualHelpTrigger.main.js

@@ -1,6 +1,6 @@
 require("./vars.c9740d19.css");
 var $a10e565ec42bcf96$exports = require("./contextualhelp_vars_css.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
 var $63a7dff9cbe2d046$exports = require("./Menu.main.js");
@@ -12,7 +12,6 @@ var $hdb2e$react = require("react");
 var $hdb2e$reactdom = require("react-dom");
 var $hdb2e$reactariamenu = require("@react-aria/menu");
 var $hdb2e$reactstatelymenu = require("@react-stately/menu");
-var $hdb2e$reactariautils = require("@react-aria/utils");
 
 
 function $parcel$interopDefault(a) {
@@ -46,7 +45,6 @@ $parcel$export(module.exports, "ContextualHelpTrigger", () => $db380858d398b658$
 
 
 
-
 function $db380858d398b658$var$ContextualHelpTrigger(props) {
     let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
     let triggerRef = (0, $hdb2e$react.useRef)(null);
@@ -108,16 +106,6 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
             if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
         }, 220); // Matches transition duration
     };
-    let [offset, setOffset] = (0, $hdb2e$react.useState)(0);
-    (0, $hdb2e$reactariautils.useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         delete submenuTriggerProps.onBlur;
         delete submenuTriggerProps.onHoverChange;
@@ -162,8 +150,6 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
             triggerRef: triggerRef,
             placement: "end top",
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             hideArrow: true,
             enableBothDismissButtons: true
         }, /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, $hdb2e$reactariafocus.FocusScope), {

package/dist/ContextualHelpTrigger.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean,\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef(null);\n  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef,\n    type: 'dialog',\n    isDisabled: !isUnavailable\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(\n            styles,\n            {\n              'spectrum-Menu-subdialog': !isMobile,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = (e) => {\n    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n  let [offset, setOffset] = useState(0);\n  useLayoutEffect(() => {\n    if (parentMenuRef.current) {\n      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');\n      if (offset !== '') {\n        setOffset(-1 * parseInt(offset, 10));\n      }\n    }\n  }, [parentMenuRef]);\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        crossOffset={offset}\n        offset={offset}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>\n        {submenuTriggerState.isOpen && overlay}\n      </SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean,\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef(null);\n  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef,\n    type: 'dialog',\n    isDisabled: !isUnavailable\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(\n            styles,\n            {\n              'spectrum-Menu-subdialog': !isMobile,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = (e) => {\n    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>\n        {submenuTriggerState.isOpen && overlay}\n      </SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.main.js.map"}

package/dist/ContextualHelpTrigger.mjs

@@ -1,6 +1,6 @@
 import "./vars.c9740d19.css";
 import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
 import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./Menu.mjs";
@@ -12,7 +12,6 @@ import $7Y1uy$react, {useRef as $7Y1uy$useRef, useState as $7Y1uy$useState, useE
 import $7Y1uy$reactdom from "react-dom";
 import {UNSTABLE_useSubmenuTrigger as $7Y1uy$UNSTABLE_useSubmenuTrigger} from "@react-aria/menu";
 import {UNSTABLE_useSubmenuTriggerState as $7Y1uy$UNSTABLE_useSubmenuTriggerState} from "@react-stately/menu";
-import {useLayoutEffect as $7Y1uy$useLayoutEffect} from "@react-aria/utils";
 
 
 function $parcel$interopDefault(a) {
@@ -40,7 +39,6 @@ function $parcel$interopDefault(a) {
 
 
 
-
 function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
     let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
     let triggerRef = (0, $7Y1uy$useRef)(null);
@@ -102,16 +100,6 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
             if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
         }, 220); // Matches transition duration
     };
-    let [offset, setOffset] = (0, $7Y1uy$useState)(0);
-    (0, $7Y1uy$useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         delete submenuTriggerProps.onBlur;
         delete submenuTriggerProps.onHoverChange;
@@ -156,8 +144,6 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
             triggerRef: triggerRef,
             placement: "end top",
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             hideArrow: true,
             enableBothDismissButtons: true
         }, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$FocusScope), {

package/dist/ContextualHelpTrigger.module.js

@@ -1,6 +1,6 @@
 import "./vars.c9740d19.css";
 import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
 import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./Menu.module.js";
@@ -12,7 +12,6 @@ import $7Y1uy$react, {useRef as $7Y1uy$useRef, useState as $7Y1uy$useState, useE
 import $7Y1uy$reactdom from "react-dom";
 import {UNSTABLE_useSubmenuTrigger as $7Y1uy$UNSTABLE_useSubmenuTrigger} from "@react-aria/menu";
 import {UNSTABLE_useSubmenuTriggerState as $7Y1uy$UNSTABLE_useSubmenuTriggerState} from "@react-stately/menu";
-import {useLayoutEffect as $7Y1uy$useLayoutEffect} from "@react-aria/utils";
 
 
 function $parcel$interopDefault(a) {
@@ -40,7 +39,6 @@ function $parcel$interopDefault(a) {
 
 
 
-
 function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
     let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
     let triggerRef = (0, $7Y1uy$useRef)(null);
@@ -102,16 +100,6 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
             if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
         }, 220); // Matches transition duration
     };
-    let [offset, setOffset] = (0, $7Y1uy$useState)(0);
-    (0, $7Y1uy$useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         delete submenuTriggerProps.onBlur;
         delete submenuTriggerProps.onHoverChange;
@@ -156,8 +144,6 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
             triggerRef: triggerRef,
             placement: "end top",
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             hideArrow: true,
             enableBothDismissButtons: true
         }, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$FocusScope), {

package/dist/ContextualHelpTrigger.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean,\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef(null);\n  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef,\n    type: 'dialog',\n    isDisabled: !isUnavailable\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(\n            styles,\n            {\n              'spectrum-Menu-subdialog': !isMobile,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = (e) => {\n    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n  let [offset, setOffset] = useState(0);\n  useLayoutEffect(() => {\n    if (parentMenuRef.current) {\n      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');\n      if (offset !== '') {\n        setOffset(-1 * parseInt(offset, 10));\n      }\n    }\n  }, [parentMenuRef]);\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        crossOffset={offset}\n        offset={offset}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>\n        {submenuTriggerState.isOpen && overlay}\n      </SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean,\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef(null);\n  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef,\n    type: 'dialog',\n    isDisabled: !isUnavailable\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(\n            styles,\n            {\n              'spectrum-Menu-subdialog': !isMobile,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = (e) => {\n    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>\n        {submenuTriggerState.isOpen && overlay}\n      </SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.module.js.map"}

package/dist/Menu.main.js

@@ -2,7 +2,7 @@ var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
 var $1d718563708db5b5$exports = require("./MenuItem.main.js");
 var $5793ff412227d2fc$exports = require("./MenuSection.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $hl8gx$reactspectrumbutton = require("@react-spectrum/button");
 var $hl8gx$spectrumiconsuiArrowDownSmall = require("@spectrum-icons/ui/ArrowDownSmall");
@@ -116,7 +116,8 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
         hasOpenSubmenu: hasOpenSubmenu,
         isSubmenu: isSubmenu,
         parentMenuTreeState: parentMenuTreeState,
-        rootMenuTriggerState: rootMenuTriggerState
+        rootMenuTriggerState: rootMenuTriggerState,
+        menuRef: domRef
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement("div", {
         ...menuProps,
         style: (0, $hl8gx$reactariautils.mergeProps)(styleProps.style, menuProps.style),
@@ -151,7 +152,7 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
 }
 function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
     var _parentMenuTreeState_collection_getItem;
-    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown } = props;
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
     let stringFormatter = (0, $hl8gx$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($2f9ceea24fba5443$exports))), "@react-spectrum/menu");
     let backButtonText = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.UNSTABLE_expandedKeysStack.slice(-1)[0])) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue;
     let backButtonLabel = stringFormatter.format("backButton", {
@@ -179,6 +180,24 @@ function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
             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, $hl8gx$react.useRef)(null);
+    (0, $hl8gx$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 === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }, 220);
+        return ()=>{
+            if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
+        };
+    }, [
+        hasOpenSubmenu,
+        isMobile,
+        isSubmenu,
+        menuRef,
+        traySubmenuAnimation
+    ]);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement((0, ($parcel$interopDefault($hl8gx$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement("div", {
         role: headingId ? "dialog" : undefined,
         "aria-labelledby": headingId,

package/dist/Menu.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/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 '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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(null);\n  let trayContainerRef = useRef(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(null);\n  useEffect(() => {\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 hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;\n  useInteractOutside({\n    ref: domRef,\n    onInteractOutside: (e) => {\n      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n        rootMenuTriggerState.close();\n      }\n    },\n    isDisabled: isSubmenu || !hasOpenSubmenu\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          <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                    onAction={completeProps.onAction} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state}\n                  onAction={completeProps.onAction} />\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}\n\nexport function TrayHeaderWrapper(props) {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;\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(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  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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/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 '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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(null);\n  let trayContainerRef = useRef(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(null);\n  useEffect(() => {\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 hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;\n  useInteractOutside({\n    ref: domRef,\n    onInteractOutside: (e) => {\n      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n        rootMenuTriggerState.close();\n      }\n    },\n    isDisabled: isSubmenu || !hasOpenSubmenu\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                    onAction={completeProps.onAction} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state}\n                  onAction={completeProps.onAction} />\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}\n\nexport function TrayHeaderWrapper(props) {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;\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(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(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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.main.js.map"}

package/dist/Menu.mjs

@@ -2,7 +2,7 @@ import $4oXwn$intlStringsmodulejs from "./intlStrings.mjs";
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, MenuStateContext as $d94604d52c3e3feb$export$24aad8519b95b41b, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
 import {MenuSection as $b966e606890cc5ca$export$4b1545b4f2016d26} from "./MenuSection.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $4oXwn$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
 import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
@@ -109,7 +109,8 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
         hasOpenSubmenu: hasOpenSubmenu,
         isSubmenu: isSubmenu,
         parentMenuTreeState: parentMenuTreeState,
-        rootMenuTriggerState: rootMenuTriggerState
+        rootMenuTriggerState: rootMenuTriggerState,
+        menuRef: domRef
     }, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
         ...menuProps,
         style: (0, $4oXwn$mergeProps)(styleProps.style, menuProps.style),
@@ -144,7 +145,7 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
 }
 function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
     var _parentMenuTreeState_collection_getItem;
-    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown } = props;
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
     let stringFormatter = (0, $4oXwn$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4oXwn$intlStringsmodulejs))), "@react-spectrum/menu");
     let backButtonText = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.UNSTABLE_expandedKeysStack.slice(-1)[0])) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue;
     let backButtonLabel = stringFormatter.format("backButton", {
@@ -172,6 +173,24 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
             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, $4oXwn$useRef)(null);
+    (0, $4oXwn$useEffect)(()=>{
+        if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === "spectrum-TraySubmenu-enter") focusTimeoutRef.current = setTimeout(()=>{
+            let firstItem = 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, $4oXwn$react).createElement((0, $4oXwn$react).Fragment, null, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
         role: headingId ? "dialog" : undefined,
         "aria-labelledby": headingId,

package/dist/Menu.module.js

@@ -2,7 +2,7 @@ import $4oXwn$intlStringsmodulejs from "./intlStrings.module.js";
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, MenuStateContext as $d94604d52c3e3feb$export$24aad8519b95b41b, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
 import {MenuSection as $b966e606890cc5ca$export$4b1545b4f2016d26} from "./MenuSection.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $4oXwn$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
 import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
@@ -109,7 +109,8 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
         hasOpenSubmenu: hasOpenSubmenu,
         isSubmenu: isSubmenu,
         parentMenuTreeState: parentMenuTreeState,
-        rootMenuTriggerState: rootMenuTriggerState
+        rootMenuTriggerState: rootMenuTriggerState,
+        menuRef: domRef
     }, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
         ...menuProps,
         style: (0, $4oXwn$mergeProps)(styleProps.style, menuProps.style),
@@ -144,7 +145,7 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
 }
 function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
     var _parentMenuTreeState_collection_getItem;
-    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown } = props;
+    let { children: children, isSubmenu: isSubmenu, hasOpenSubmenu: hasOpenSubmenu, parentMenuTreeState: parentMenuTreeState, rootMenuTriggerState: rootMenuTriggerState, onBackButtonPress: onBackButtonPress, wrapperKeyDown: wrapperKeyDown, menuRef: menuRef } = props;
     let stringFormatter = (0, $4oXwn$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4oXwn$intlStringsmodulejs))), "@react-spectrum/menu");
     let backButtonText = parentMenuTreeState === null || parentMenuTreeState === void 0 ? void 0 : (_parentMenuTreeState_collection_getItem = parentMenuTreeState.collection.getItem(rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.UNSTABLE_expandedKeysStack.slice(-1)[0])) === null || _parentMenuTreeState_collection_getItem === void 0 ? void 0 : _parentMenuTreeState_collection_getItem.textValue;
     let backButtonLabel = stringFormatter.format("backButton", {
@@ -172,6 +173,24 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
             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, $4oXwn$useRef)(null);
+    (0, $4oXwn$useEffect)(()=>{
+        if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === "spectrum-TraySubmenu-enter") focusTimeoutRef.current = setTimeout(()=>{
+            let firstItem = 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, $4oXwn$react).createElement((0, $4oXwn$react).Fragment, null, /*#__PURE__*/ (0, $4oXwn$react).createElement("div", {
         role: headingId ? "dialog" : undefined,
         "aria-labelledby": headingId,

package/dist/Menu.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/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 '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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(null);\n  let trayContainerRef = useRef(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(null);\n  useEffect(() => {\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 hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;\n  useInteractOutside({\n    ref: domRef,\n    onInteractOutside: (e) => {\n      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n        rootMenuTriggerState.close();\n      }\n    },\n    isDisabled: isSubmenu || !hasOpenSubmenu\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          <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                    onAction={completeProps.onAction} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state}\n                  onAction={completeProps.onAction} />\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}\n\nexport function TrayHeaderWrapper(props) {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;\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(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  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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/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 '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction 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(null);\n  let trayContainerRef = useRef(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(null);\n  useEffect(() => {\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 hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;\n  useInteractOutside({\n    ref: domRef,\n    onInteractOutside: (e) => {\n      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n        rootMenuTriggerState.close();\n      }\n    },\n    isDisabled: isSubmenu || !hasOpenSubmenu\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                    onAction={completeProps.onAction} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state}\n                  onAction={completeProps.onAction} />\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}\n\nexport function TrayHeaderWrapper(props) {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;\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(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(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\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\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.module.js.map"}

package/dist/MenuItem.main.js

@@ -1,5 +1,5 @@
 var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
 var $8PAEC$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");

package/dist/MenuItem.mjs

@@ -1,5 +1,5 @@
 import $bVyMs$intlStringsmodulejs from "./intlStrings.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $bVyMs$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {useMenuContext as $d94604d52c3e3feb$export$21c7ab35b39f78ec, useSubmenuTriggerContext as $d94604d52c3e3feb$export$dc2161044aa0b36d} from "./context.mjs";
 import $bVyMs$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";

package/dist/MenuItem.module.js

@@ -1,5 +1,5 @@
 import $bVyMs$intlStringsmodulejs from "./intlStrings.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $bVyMs$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {useMenuContext as $d94604d52c3e3feb$export$21c7ab35b39f78ec, useSubmenuTriggerContext as $d94604d52c3e3feb$export$dc2161044aa0b36d} from "./context.module.js";
 import $bVyMs$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";

package/dist/MenuSection.main.js

@@ -1,5 +1,5 @@
 var $1d718563708db5b5$exports = require("./MenuItem.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $3nsTP$reactspectrumutils = require("@react-spectrum/utils");
 var $3nsTP$reactstatelycollections = require("@react-stately/collections");

package/dist/MenuSection.mjs

@@ -1,5 +1,5 @@
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $9353d$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {classNames as $9353d$classNames} from "@react-spectrum/utils";
 import {getChildNodes as $9353d$getChildNodes} from "@react-stately/collections";

package/dist/MenuSection.module.js

@@ -1,5 +1,5 @@
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $9353d$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {classNames as $9353d$classNames} from "@react-spectrum/utils";
 import {getChildNodes as $9353d$getChildNodes} from "@react-stately/collections";

package/dist/MenuTrigger.main.js

@@ -1,5 +1,5 @@
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $6doGq$reactspectrumutils = require("@react-spectrum/utils");
 var $6doGq$reactspectrumoverlays = require("@react-spectrum/overlays");

package/dist/MenuTrigger.mjs

@@ -1,5 +1,5 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $5R0iF$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
 import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";

package/dist/MenuTrigger.module.js

@@ -1,5 +1,5 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $5R0iF$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
 import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";

package/dist/SubmenuTrigger.main.js

@@ -1,5 +1,5 @@
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
-require("./vars.b6dfdac4.css");
+require("./vars.426580e3.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $esjnM$reactspectrumutils = require("@react-spectrum/utils");
 var $esjnM$reactariautils = require("@react-aria/utils");
@@ -71,16 +71,6 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
         }
     };
     let overlay;
-    let [offset, setOffset] = (0, $esjnM$react.useState)(0);
-    (0, $esjnM$reactariautils.useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         var _submenuProps;
         delete submenuTriggerProps.onBlur;
@@ -100,8 +90,6 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
             UNSAFE_className: (0, $esjnM$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-popover"),
             container: popoverContainer,
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             enableBothDismissButtons: true,
             UNSAFE_style: {
                 clipPath: "unset",

package/dist/SubmenuTrigger.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface SubmenuTriggerProps {\n  /**\n   * The contents of the SubmenuTrigger - an Item and a Menu.\n   */\n  children: ReactElement[],\n  targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n  let triggerRef = useRef<HTMLDivElement>();\n  let {\n    children,\n    targetKey\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);\n  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef: menuRef\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let onBackButtonPress = () => {\n    submenuTriggerState.close();\n    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n      parentMenuRef.current.focus();\n    }\n  };\n\n  let {direction} = useLocale();\n  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        if (direction === 'ltr') {\n          triggerRef.current.focus();\n        }\n        break;\n      case 'ArrowRight':\n        if (direction === 'rtl') {\n          triggerRef.current.focus();\n        }\n        break;\n    }\n  };\n\n  let overlay;\n  let [offset, setOffset] = useState(0);\n  useLayoutEffect(() => {\n    if (parentMenuRef.current) {\n      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');\n      if (offset !== '') {\n        setOffset(-1 * parseInt(offset, 10));\n      }\n    }\n  }, [parentMenuRef]);\n\n  if (isMobile)  {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    submenuProps.autoFocus ??= true;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        onDismissButtonPress={onDismissButtonPress}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        container={popoverContainer}\n        containerPadding={0}\n        crossOffset={offset}\n        offset={offset}\n        enableBothDismissButtons\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n        state={submenuTriggerState}\n        triggerRef={triggerRef}\n        scrollRef={menuRef}\n        placement=\"end top\"\n        hideArrow>\n        {menu}\n      </Popover>\n    );\n  }\n\n  let menuContext = {\n    ...mergeProps(submenuProps, {\n      ref: menuRef,\n      UNSAFE_style: isMobile ? {\n        width: '100%',\n        maxHeight: 'inherit'\n      } : undefined,\n      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n      ...(isMobile && {\n        onBackButtonPress,\n        onKeyDown: mobileSubmenuKeyDown\n      })\n    })\n  };\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </>\n  );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </SubmenuTrigger>\n    )\n  };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,SAAS,qCAAe,KAA0B;IAChD,IAAI,aAAa,CAAA,GAAA,mBAAK;IACtB,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,EAAE,MAAM,aAAa,EAAE,SAAS,OAAO,wBAAE,oBAAoB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,6CAAkB;IACjI,IAAI,cAAc,MAAM,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,sBAAsB,CAAA,GAAA,uDAA8B,EAAE;QAAC,YAAY;IAAS,GAAG;IACnF,IAAI,uBAAC,mBAAmB,gBAAE,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,+CAAyB,EAAE;QACjF,MAAM;uBACN;QACA,YAAY;IACd,GAAG,qBAAqB;IACxB,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,oBAAoB;QACtB,oBAAoB,KAAK;QACzB,IAAI,cAAc,OAAO,IAAI,CAAC,cAAc,OAAO,CAAC,QAAQ,CAAC,SAAS,aAAa,GACjF,cAAc,OAAO,CAAC,KAAK;IAE/B;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,uBAAuB,CAAC;QAC1B,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,IAAI,cAAc,OAChB,WAAW,OAAO,CAAC,KAAK;gBAE1B;YACF,KAAK;gBACH,IAAI,cAAc,OAChB,WAAW,OAAO,CAAC,KAAK;gBAE1B;QACJ;IACF;IAEA,IAAI;IAEJ,IAAI,UAAW;YAGb;QAFA,OAAO,oBAAoB,MAAM;QACjC,OAAO,oBAAoB,aAAa;;QACxC,eAAA,gBAAA,cAAa,4DAAb,cAAa,YAAc;QAC3B,IAAI,iBAAiB,OAAO,IAAI,oBAAoB,MAAM,EACxD,wBAAU,CAAA,GAAA,yCAAO,EAAE,YAAY,CAAC,MAAM,iBAAiB,OAAO;IAElE,OAAO;QACL,IAAI,uBAAuB;gBAEzB;YADA,oBAAoB,KAAK;aACzB,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,KAAK;QAC9B;QAEA,wBACE,0DAAC,CAAA,GAAA,oCAAM;YACJ,GAAG,YAAY;YAChB,sBAAsB;YACtB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACrC,WAAW;YACX,kBAAkB;YAClB,0BAAA;YACA,cAAc;gBAAC,UAAU;gBAAS,UAAU;gBAAW,aAAa;YAAK;YACzE,OAAO;YACP,YAAY;YACZ,WAAW;YACX,WAAU;YACV,WAAA;WACC;IAGP;IAEA,IAAI,cAAc;QAChB,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc;YAC1B,KAAK;YACL,cAAc,WAAW;gBACvB,OAAO;gBACP,WAAW;YACb,IAAI;YACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAAC,yBAAyB,CAAC;YAAQ;YACxE,GAAI,YAAY;mCACd;gBACA,WAAW;YACb,CAAC;QACH,EAAE;IACJ;IAEA,qBACE,oIACE,0DAAC,CAAA,GAAA,+CAAoB,EAAE,QAAQ;QAAC,OAAO;wBAAC;YAAY,GAAG,mBAAmB;QAAA;OAAI,4BAC9E,0DAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT;AAEA,qCAAe,iBAAiB,GAAG,UAAW,KAAkC;IAC9E,IAAI,aAA6B,EAAE;IACnC,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,CAAA;QACrC,kBAAI,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC,QACvB,WAAW,IAAI,CAAC;IAEpB;IACA,IAAI,CAAC,QAAQ,GAAG;IAChB,IAAI,GAAG,QAAQ,GAAG,MAAM,QAAQ;IAEhC,MAAM;QACJ,uBAAS,CAAA,GAAA,sCAAI,EAAE,YAAY,CAAC,SAAS;YAAC,GAAG,QAAQ,KAAK;YAAE,eAAe;YAAM,WAAW;QAAI;QAC5F,SAAS,CAAC,wBACR,0DAAC;gBAAe,KAAK,QAAQ,GAAG;gBAAE,WAAW,QAAQ,GAAG;gBAAG,GAAG,KAAK;eAChE,SACA;IAGP;AACF;AAEA,IAAI,4CAAkB","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps} from '@react-aria/utils';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface SubmenuTriggerProps {\n  /**\n   * The contents of the SubmenuTrigger - an Item and a Menu.\n   */\n  children: ReactElement[],\n  targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n  let triggerRef = useRef<HTMLDivElement>();\n  let {\n    children,\n    targetKey\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);\n  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef: menuRef\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let onBackButtonPress = () => {\n    submenuTriggerState.close();\n    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n      parentMenuRef.current.focus();\n    }\n  };\n\n  let {direction} = useLocale();\n  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        if (direction === 'ltr') {\n          triggerRef.current.focus();\n        }\n        break;\n      case 'ArrowRight':\n        if (direction === 'rtl') {\n          triggerRef.current.focus();\n        }\n        break;\n    }\n  };\n\n  let overlay;\n\n  if (isMobile)  {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    submenuProps.autoFocus ??= true;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        onDismissButtonPress={onDismissButtonPress}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        container={popoverContainer}\n        containerPadding={0}\n        enableBothDismissButtons\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n        state={submenuTriggerState}\n        triggerRef={triggerRef}\n        scrollRef={menuRef}\n        placement=\"end top\"\n        hideArrow>\n        {menu}\n      </Popover>\n    );\n  }\n\n  let menuContext = {\n    ...mergeProps(submenuProps, {\n      ref: menuRef,\n      UNSAFE_style: isMobile ? {\n        width: '100%',\n        maxHeight: 'inherit'\n      } : undefined,\n      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n      ...(isMobile && {\n        onBackButtonPress,\n        onKeyDown: mobileSubmenuKeyDown\n      })\n    })\n  };\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </>\n  );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </SubmenuTrigger>\n    )\n  };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.main.js.map"}

package/dist/SubmenuTrigger.mjs

@@ -1,10 +1,10 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
 import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
-import {useLayoutEffect as $byZ4r$useLayoutEffect, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
+import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
 import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
-import $byZ4r$react, {useRef as $byZ4r$useRef, useState as $byZ4r$useState} from "react";
+import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
 import $byZ4r$reactdom from "react-dom";
 import {UNSTABLE_useSubmenuTrigger as $byZ4r$UNSTABLE_useSubmenuTrigger} from "@react-aria/menu";
 import {UNSTABLE_useSubmenuTriggerState as $byZ4r$UNSTABLE_useSubmenuTriggerState} from "@react-stately/menu";
@@ -65,16 +65,6 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
         }
     };
     let overlay;
-    let [offset, setOffset] = (0, $byZ4r$useState)(0);
-    (0, $byZ4r$useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         var _submenuProps;
         delete submenuTriggerProps.onBlur;
@@ -94,8 +84,6 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
             UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), "spectrum-Submenu-popover"),
             container: popoverContainer,
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             enableBothDismissButtons: true,
             UNSAFE_style: {
                 clipPath: "unset",

package/dist/SubmenuTrigger.module.js

@@ -1,10 +1,10 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
-import "./vars.b6dfdac4.css";
+import "./vars.426580e3.css";
 import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
-import {useLayoutEffect as $byZ4r$useLayoutEffect, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
+import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
 import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
-import $byZ4r$react, {useRef as $byZ4r$useRef, useState as $byZ4r$useState} from "react";
+import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
 import $byZ4r$reactdom from "react-dom";
 import {UNSTABLE_useSubmenuTrigger as $byZ4r$UNSTABLE_useSubmenuTrigger} from "@react-aria/menu";
 import {UNSTABLE_useSubmenuTriggerState as $byZ4r$UNSTABLE_useSubmenuTriggerState} from "@react-stately/menu";
@@ -65,16 +65,6 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
         }
     };
     let overlay;
-    let [offset, setOffset] = (0, $byZ4r$useState)(0);
-    (0, $byZ4r$useLayoutEffect)(()=>{
-        if (parentMenuRef.current) {
-            var _window_getComputedStyle, _window;
-            let offset = (_window = window) === null || _window === void 0 ? void 0 : (_window_getComputedStyle = _window.getComputedStyle(parentMenuRef === null || parentMenuRef === void 0 ? void 0 : parentMenuRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.getPropertyValue("--spectrum-submenu-offset-distance");
-            if (offset !== "") setOffset(-1 * parseInt(offset, 10));
-        }
-    }, [
-        parentMenuRef
-    ]);
     if (isMobile) {
         var _submenuProps;
         delete submenuTriggerProps.onBlur;
@@ -94,8 +84,6 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
             UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), "spectrum-Submenu-popover"),
             container: popoverContainer,
             containerPadding: 0,
-            crossOffset: offset,
-            offset: offset,
             enableBothDismissButtons: true,
             UNSAFE_style: {
                 clipPath: "unset",

package/dist/SubmenuTrigger.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface SubmenuTriggerProps {\n  /**\n   * The contents of the SubmenuTrigger - an Item and a Menu.\n   */\n  children: ReactElement[],\n  targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n  let triggerRef = useRef<HTMLDivElement>();\n  let {\n    children,\n    targetKey\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);\n  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef: menuRef\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let onBackButtonPress = () => {\n    submenuTriggerState.close();\n    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n      parentMenuRef.current.focus();\n    }\n  };\n\n  let {direction} = useLocale();\n  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        if (direction === 'ltr') {\n          triggerRef.current.focus();\n        }\n        break;\n      case 'ArrowRight':\n        if (direction === 'rtl') {\n          triggerRef.current.focus();\n        }\n        break;\n    }\n  };\n\n  let overlay;\n  let [offset, setOffset] = useState(0);\n  useLayoutEffect(() => {\n    if (parentMenuRef.current) {\n      let offset = window?.getComputedStyle(parentMenuRef?.current)?.getPropertyValue('--spectrum-submenu-offset-distance');\n      if (offset !== '') {\n        setOffset(-1 * parseInt(offset, 10));\n      }\n    }\n  }, [parentMenuRef]);\n\n  if (isMobile)  {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    submenuProps.autoFocus ??= true;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        onDismissButtonPress={onDismissButtonPress}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        container={popoverContainer}\n        containerPadding={0}\n        crossOffset={offset}\n        offset={offset}\n        enableBothDismissButtons\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n        state={submenuTriggerState}\n        triggerRef={triggerRef}\n        scrollRef={menuRef}\n        placement=\"end top\"\n        hideArrow>\n        {menu}\n      </Popover>\n    );\n  }\n\n  let menuContext = {\n    ...mergeProps(submenuProps, {\n      ref: menuRef,\n      UNSAFE_style: isMobile ? {\n        width: '100%',\n        maxHeight: 'inherit'\n      } : undefined,\n      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n      ...(isMobile && {\n        onBackButtonPress,\n        onKeyDown: mobileSubmenuKeyDown\n      })\n    })\n  };\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </>\n  );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </SubmenuTrigger>\n    )\n  };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps} from '@react-aria/utils';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';\nimport {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface SubmenuTriggerProps {\n  /**\n   * The contents of the SubmenuTrigger - an Item and a Menu.\n   */\n  children: ReactElement[],\n  targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n  let triggerRef = useRef<HTMLDivElement>();\n  let {\n    children,\n    targetKey\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();\n  let triggerNode = state.collection.getItem(targetKey);\n  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);\n  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({\n    node: triggerNode,\n    parentMenuRef,\n    submenuRef: menuRef\n  }, submenuTriggerState, triggerRef);\n  let isMobile = useIsMobileDevice();\n  let onBackButtonPress = () => {\n    submenuTriggerState.close();\n    if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n      parentMenuRef.current.focus();\n    }\n  };\n\n  let {direction} = useLocale();\n  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        if (direction === 'ltr') {\n          triggerRef.current.focus();\n        }\n        break;\n      case 'ArrowRight':\n        if (direction === 'rtl') {\n          triggerRef.current.focus();\n        }\n        break;\n    }\n  };\n\n  let overlay;\n\n  if (isMobile)  {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    submenuProps.autoFocus ??= true;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        onDismissButtonPress={onDismissButtonPress}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        container={popoverContainer}\n        containerPadding={0}\n        enableBothDismissButtons\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n        state={submenuTriggerState}\n        triggerRef={triggerRef}\n        scrollRef={menuRef}\n        placement=\"end top\"\n        hideArrow>\n        {menu}\n      </Popover>\n    );\n  }\n\n  let menuContext = {\n    ...mergeProps(submenuProps, {\n      ref: menuRef,\n      UNSAFE_style: isMobile ? {\n        width: '100%',\n        maxHeight: 'inherit'\n      } : undefined,\n      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n      ...(isMobile && {\n        onBackButtonPress,\n        onKeyDown: mobileSubmenuKeyDown\n      })\n    })\n  };\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </>\n  );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {...trigger.props, hasChildItems: true, isTrigger: true}),\n    wrapper: (element) => (\n      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </SubmenuTrigger>\n    )\n  };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AC6GA;;;GAGG;AACH,OAAA,IAAI,sHAAsC,CAAC;ACzF3C;IACE;;OAEG;IACH,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AAqI9F,OAAA,IAAI,wBAA4C,2BAA2B,KAAK,WAAW,CAAC;AGiC5F;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACnJ1H;;GAEG;AACH,OAAA,MAAM;UAAuF,aAAa,iBAAiB,CAAC;MAAM,YAAY,CAAC;AChC/I;IACE,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CACvC;AAMD,+CAAgD,SAAQ,sBAAsB;CAAG;AAuKjF,OAAA,IAAI,+BAAyC,8BAA8B,KAAK,WAAW,CAAC;AC1L5F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/context.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuItem.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuSection.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Menu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ActionMenu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/index.ts","packages/@react-spectrum/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {MenuTrigger} from './MenuTrigger';\nexport {SubmenuTrigger} from './SubmenuTrigger';\nexport {Menu} from './Menu';\nexport {ActionMenu} from './ActionMenu';\nexport {ContextualHelpTrigger} from './ContextualHelpTrigger';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu';\nexport type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger';\nexport type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AC6GA;;;GAGG;AACH,OAAA,IAAI,sHAAsC,CAAC;ACzF3C;IACE;;OAEG;IACH,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AA0H9F,OAAA,IAAI,wBAA4C,2BAA2B,KAAK,WAAW,CAAC;AG8D5F;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACrK1H;;GAEG;AACH,OAAA,MAAM;UAAuF,aAAa,iBAAiB,CAAC;MAAM,YAAY,CAAC;ACjC/I;IACE,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CACvC;AAMD,+CAAgD,SAAQ,sBAAsB;CAAG;AA4JjF,OAAA,IAAI,+BAAyC,8BAA8B,KAAK,WAAW,CAAC;AC9K5F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/context.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuItem.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuSection.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Menu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ActionMenu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/index.ts","packages/@react-spectrum/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {MenuTrigger} from './MenuTrigger';\nexport {SubmenuTrigger} from './SubmenuTrigger';\nexport {Menu} from './Menu';\nexport {ActionMenu} from './ActionMenu';\nexport {ContextualHelpTrigger} from './ContextualHelpTrigger';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu';\nexport type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger';\nexport type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/{vars.b6dfdac4.css → vars.426580e3.css}

@@ -92,6 +92,10 @@
   max-width: 320px;
 }
 
+.Q7FggG_spectrum-Submenu-popover {
+  margin: calc(var(--spectrum-global-dimension-size-65) * -1);
+}
+
 .Q7FggG_spectrum-Menu {
   --spectrum-submenu-offset-distance: var(--spectrum-global-dimension-size-65);
   text-align: start;
@@ -367,7 +371,7 @@
   color: var(--spectrum-global-color-gray-700);
 }
 
-.Q7FggG_spectrum-Submenu-popover {
+.Q7FggG_spectrum-Submenu-popover.Q7FggG_spectrum-Submenu-popover {
   -webkit-filter: unset;
   transition: opacity var(--spectrum-global-animation-duration-100, .13s) ease-in-out, visibility 0s linear var(--spectrum-global-animation-duration-100, .13s);
   transform: none;
@@ -560,4 +564,4 @@
     background-color: var(--spectrum-selectlist-option-background-color-key-focus, var(--spectrum-alias-background-color-hover-overlay));
   }
 }
-/*# sourceMappingURL=vars.b6dfdac4.css.map */
+/*# sourceMappingURL=vars.426580e3.css.map */

package/dist/vars.426580e3.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;AAUA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAKE;;;;AAKF;;;;;;;;AAOE;;;;;;;;AAQA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;;;;AAKE;;;;AAAA;;;;AAKF;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF","sources":["packages/@adobe/spectrum-css-temp/components/menu/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.426580e3.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/menu",
-  "version": "3.18.2-nightly.4564+315950cef",
+  "version": "3.18.2-nightly.4578+b09a14eb1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,31 +36,31 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/i18n": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/interactions": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/menu": "3.13.2-nightly.4564+315950cef",
-    "@react-aria/overlays": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/separator": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/utils": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/button": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/layout": "3.6.4-nightly.4564+315950cef",
-    "@react-spectrum/overlays": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/text": "3.5.4-nightly.4564+315950cef",
-    "@react-spectrum/utils": "3.0.0-nightly.2852+315950cef",
-    "@react-stately/collections": "3.0.0-nightly.2852+315950cef",
-    "@react-stately/menu": "3.6.2-nightly.4564+315950cef",
-    "@react-stately/overlays": "3.6.6-nightly.4564+315950cef",
-    "@react-stately/tree": "3.0.0-nightly.2852+315950cef",
-    "@react-types/menu": "3.9.8-nightly.4564+315950cef",
-    "@react-types/overlays": "3.8.6-nightly.4564+315950cef",
-    "@react-types/shared": "3.0.0-nightly.2852+315950cef",
-    "@spectrum-icons/ui": "3.0.0-nightly.2852+315950cef",
-    "@spectrum-icons/workflow": "3.0.0-nightly.2852+315950cef",
+    "@react-aria/focus": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/i18n": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/interactions": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/menu": "3.13.2-nightly.4578+b09a14eb1",
+    "@react-aria/overlays": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/separator": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/utils": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/button": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/layout": "3.6.4-nightly.4578+b09a14eb1",
+    "@react-spectrum/overlays": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/text": "3.5.4-nightly.4578+b09a14eb1",
+    "@react-spectrum/utils": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-stately/collections": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-stately/menu": "3.6.2-nightly.4578+b09a14eb1",
+    "@react-stately/overlays": "3.6.6-nightly.4578+b09a14eb1",
+    "@react-stately/tree": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-types/menu": "3.9.8-nightly.4578+b09a14eb1",
+    "@react-types/overlays": "3.8.6-nightly.4578+b09a14eb1",
+    "@react-types/shared": "3.0.0-nightly.2866+b09a14eb1",
+    "@spectrum-icons/ui": "3.0.0-nightly.2866+b09a14eb1",
+    "@spectrum-icons/workflow": "3.0.0-nightly.2866+b09a14eb1",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2852+315950cef"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2866+b09a14eb1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "315950cef7952de30220661f62ab79ba6dcb59cc"
+  "gitHead": "b09a14eb1854d9d52e08739e30aa8fae51f1595a"
 }

package/src/ContextualHelpTrigger.tsx

@@ -23,7 +23,6 @@ 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. */
@@ -106,15 +105,6 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
       }
     }, 220); // Matches transition duration
   };
-  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;
@@ -161,8 +151,6 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
         triggerRef={triggerRef}
         placement="end top"
         containerPadding={0}
-        crossOffset={offset}
-        offset={offset}
         hideArrow
         enableBothDismissButtons>
         <FocusScope restoreFocus>

package/src/Menu.tsx

@@ -79,7 +79,8 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
           hasOpenSubmenu={hasOpenSubmenu}
           isSubmenu={isSubmenu}
           parentMenuTreeState={parentMenuTreeState}
-          rootMenuTriggerState={rootMenuTriggerState}>
+          rootMenuTriggerState={rootMenuTriggerState}
+          menuRef={domRef}>
           <div
             {...menuProps}
             style={mergeProps(styleProps.style, menuProps.style)}
@@ -125,7 +126,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
 }
 
 export function TrayHeaderWrapper(props) {
-  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown} = props;
+  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = 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', {
@@ -158,6 +159,23 @@ export function TrayHeaderWrapper(props) {
     };
   }, []);
 
+  // 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

package/src/SubmenuTrigger.tsx

@@ -13,9 +13,9 @@
 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 {mergeProps} from '@react-aria/utils';
 import {Popover} from '@react-spectrum/overlays';
-import React, {ReactElement, useRef, useState} from 'react';
+import React, {ReactElement, useRef} 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';
@@ -73,15 +73,6 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
   };
 
   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;
@@ -103,8 +94,6 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
         container={popoverContainer}
         containerPadding={0}
-        crossOffset={offset}
-        offset={offset}
         enableBothDismissButtons
         UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}
         state={submenuTriggerState}

package/dist/vars.b6dfdac4.css.map

@@ -1 +0,0 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;AAUA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAKE;;;;AAKF;;;;;;;;AAOE;;;;;;;;AAQA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;;;;AAKE;;;;AAAA;;;;AAKF;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF","sources":["packages/@adobe/spectrum-css-temp/components/menu/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.b6dfdac4.css.map"}