@react-spectrum/menu 3.22.8 → 3.22.9

package/dist/Menu.main.js

@@ -72,7 +72,7 @@ const $63a7dff9cbe2d046$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, ($parcel$int
         left: 0
     });
     let prevPopoverContainer = (0, $hl8gx$react.useRef)(null);
-    (0, $hl8gx$react.useEffect)(()=>{
+    (0, $hl8gx$reactariautils.useLayoutEffect)(()=>{
         if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
             prevPopoverContainer.current = popoverContainer;
             let { left: left } = popoverContainer.getBoundingClientRect();

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, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n  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 nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.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, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.main.js.map"}

package/dist/Menu.mjs

@@ -8,7 +8,7 @@ import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
 import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
 import {useDOMRef as $4oXwn$useDOMRef, useStyleProps as $4oXwn$useStyleProps, classNames as $4oXwn$classNames, useIsMobileDevice as $4oXwn$useIsMobileDevice} from "@react-spectrum/utils";
 import {FocusScope as $4oXwn$FocusScope} from "@react-aria/focus";
-import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useSlotId as $4oXwn$useSlotId, useLayoutEffect as $4oXwn$useLayoutEffect} from "@react-aria/utils";
+import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useLayoutEffect as $4oXwn$useLayoutEffect, useSlotId as $4oXwn$useSlotId} from "@react-aria/utils";
 import $4oXwn$react, {useContext as $4oXwn$useContext, useState as $4oXwn$useState, useRef as $4oXwn$useRef, useEffect as $4oXwn$useEffect} from "react";
 import {useTreeState as $4oXwn$useTreeState} from "@react-stately/tree";
 import {useLocalizedStringFormatter as $4oXwn$useLocalizedStringFormatter, useLocale as $4oXwn$useLocale} from "@react-aria/i18n";
@@ -65,7 +65,7 @@ const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react
         left: 0
     });
     let prevPopoverContainer = (0, $4oXwn$useRef)(null);
-    (0, $4oXwn$useEffect)(()=>{
+    (0, $4oXwn$useLayoutEffect)(()=>{
         if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
             prevPopoverContainer.current = popoverContainer;
             let { left: left } = popoverContainer.getBoundingClientRect();

package/dist/Menu.module.js

@@ -8,7 +8,7 @@ import {ActionButton as $4oXwn$ActionButton} from "@react-spectrum/button";
 import $4oXwn$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
 import {useDOMRef as $4oXwn$useDOMRef, useStyleProps as $4oXwn$useStyleProps, classNames as $4oXwn$classNames, useIsMobileDevice as $4oXwn$useIsMobileDevice} from "@react-spectrum/utils";
 import {FocusScope as $4oXwn$FocusScope} from "@react-aria/focus";
-import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useSlotId as $4oXwn$useSlotId, useLayoutEffect as $4oXwn$useLayoutEffect} from "@react-aria/utils";
+import {mergeProps as $4oXwn$mergeProps, useSyncRef as $4oXwn$useSyncRef, useLayoutEffect as $4oXwn$useLayoutEffect, useSlotId as $4oXwn$useSlotId} from "@react-aria/utils";
 import $4oXwn$react, {useContext as $4oXwn$useContext, useState as $4oXwn$useState, useRef as $4oXwn$useRef, useEffect as $4oXwn$useEffect} from "react";
 import {useTreeState as $4oXwn$useTreeState} from "@react-stately/tree";
 import {useLocalizedStringFormatter as $4oXwn$useLocalizedStringFormatter, useLocale as $4oXwn$useLocale} from "@react-aria/i18n";
@@ -65,7 +65,7 @@ const $49b26f4b606348f6$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $4oXwn$react
         left: 0
     });
     let prevPopoverContainer = (0, $4oXwn$useRef)(null);
-    (0, $4oXwn$useEffect)(()=>{
+    (0, $4oXwn$useLayoutEffect)(()=>{
         if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
             prevPopoverContainer.current = popoverContainer;
             let { left: left } = popoverContainer.getBoundingClientRect();

package/dist/Menu.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AA0BM,MAAM,0DAAO,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,KAAuB,KAA2B,EAAE,GAA2B;IAC3H,IAAI,YAAY;IAChB,IAAI,eAAe,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACxC,IAAI,oBAAoB,CAAA,GAAA,yCAAkB;IAC1C,IAAI,wBAAC,oBAAoB,EAAE,OAAO,mBAAmB,EAAC,GAAG,qBAAqB;QAAC,sBAAsB,aAAa,KAAK;IAAA;IACvH,IAAI,CAAC,mBACH,YAAY;IAEd,IAAI,gBAAgB;QAClB,GAAG,CAAA,GAAA,iBAAS,EAAE,cAAc,MAAM;IACpC;IACA,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAsB;IAC3E,IAAI,mBAAmB,CAAA,GAAA,aAAK,EAAyB;IACrD,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IACxC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE,eAAe,OAAO;IAChD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,CAAA,GAAA,iBAAS,EAAE,cAAc;IACzB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;QAAC,MAAM;IAAC;IACnD,IAAI,uBAAuB,CAAA,GAAA,aAAK,EAAsB;IACtD,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,oBAAoB,qBAAqB,OAAO,KAAK,oBAAoB,WAAW,IAAI,KAAK,GAAG;YAClG,qBAAqB,OAAO,GAAG;YAC/B,IAAI,QAAC,IAAI,EAAC,GAAG,iBAAiB,qBAAqB;YACnD,cAAc;gBAAC,MAAM,KAAK;YAAI;QAChC;IACF,GAAG;QAAC;QAAY;KAAiB;QAEjB;IAAhB,IAAI,YAAY,CAAA,6BAAA,aAAa,YAAY,cAAzB,wCAAA,6BAA6B;IAC7C,IAAI,mBAAmB,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,YAAY,EAAE;IAC7E,IAAI,iBAAiB;IACrB,IAAI,oBAAoB,MAAM;QAC5B,IAAI,gBAAgB,MAAM,UAAU,CAAC,OAAO,CAAC;QAC7C,iBAAiB,iBAAiB;IACpC;IAEA,qBACE,gCAAC,CAAA,GAAA,yCAAe,EAAE,QAAQ;QAAC,OAAO;8BAAC;8BAAkB;YAAkB,MAAM;YAAQ,SAAS;kCAAY;mBAAsB;QAAK;qBACnI,gCAAC;QAAI,OAAO;YAAC,QAAQ,iBAAiB,SAAS;QAAS;QAAG,KAAK;sBAChE,gCAAC,CAAA,GAAA,iBAAS,uBACR,gCAAC;QACC,mBAAmB,aAAa,iBAAiB;QACjD,gBAAgB;QAChB,WAAW;QACX,qBAAqB;QACrB,sBAAsB;QACtB,SAAS;qBACT,gCAAC;QACE,GAAG,SAAS;QACb,OAAO,CAAA,GAAA,iBAAS,EAAE,WAAW,KAAK,EAAE,UAAU,KAAK;QACnD,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL,iBACA,WAAW,SAAS;OAGvB;WAAI,MAAM,UAAU;KAAC,CAAC,GAAG,CAAC,CAAA;QACzB,IAAI,KAAK,IAAI,KAAK,WAChB,qBACE,gCAAC,CAAA,GAAA,yCAAU;YACT,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAIb,IAAI,yBACF,gCAAC,CAAA,GAAA,yCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,WAAW,KAAK,OAAO,CAAC;QAG1B,OAAO;IACT,MAGH,CAAA,iCAAA,2CAAA,qBAAsB,MAAM,mBAAI,gCAAC;QAAI,KAAK;QAAqB,OAAO;YAAC,OAAO;YAAS,UAAU;YAAY,KAAK;YAAI,GAAG,UAAU;QAAA;;AAI5I;AAEO,SAAS,0CAAkB,KASjC;QAMoB;IALnB,IAAI,YAAC,QAAQ,aAAE,SAAS,kBAAE,cAAc,uBAAE,mBAAmB,wBAAE,oBAAoB,qBAAE,iBAAiB,kBAAE,cAAc,WAAE,OAAO,EAAC,GAAG;IACnI,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,UAAU,iCAAA,2CAAA,qBAAsB,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE;IAClE,IAAI,iBAAiB;QAEF;IADnB,IAAI,WAAW,MACb,iBAAiB,CAAA,oDAAA,gCAAA,2CAAA,0CAAA,oBAAqB,UAAU,CAAC,OAAO,CAAC,sBAAxC,8DAAA,wCAAkD,SAAS,cAA3D,+DAAA,oDAA+D;IAElF,IAAI,kBAAkB,gBAAgB,MAAM,CAAC,cAAc;QACzD,gBAAgB,2BAAA,4BAAA,iBAAkB;IACpC;IACA,IAAI,YAAY,CAAA,GAAA,gBAAQ;IACxB,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,CAAC,sBAAsB,wBAAwB,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/D,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,CAAC,gBACH,wBAAwB;IAE5B,GAAG;QAAC;QAAgB;KAAS;IAE7B,IAAI,aAAa,CAAA,GAAA,aAAK,EAAwC;IAC9D,IAAI,wBAAwB;QAC1B,wBAAwB;QACxB,WAAW,OAAO,GAAG,WAAW;YAC9B,8BAAA,wCAAA;QACF,GAAG,MAAM,8BAA8B;IACzC;IAEA,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,WAAW,OAAO,EACpB,aAAa,WAAW,OAAO;QAEnC;IACF,GAAG,EAAE;IAEL,8FAA8F;IAC9F,6EAA6E;IAC7E,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAAwC;IACnE,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,YAAY,aAAa,CAAC,kBAAkB,yBAAyB,8BACvE,gBAAgB,OAAO,GAAG,WAAW;gBACnB;YAAhB,IAAI,YAAY,oBAAA,+BAAA,mBAAA,QAAS,OAAO,cAAhB,uCAAA,iBAAkB,aAAa,CAAC;YAChD,sBAAA,gCAAA,UAAW,KAAK;QAClB,GAAG;QAEL,OAAO;YACL,IAAI,gBAAgB,OAAO,EACzB,aAAa,gBAAgB,OAAO;QAExC;IACF,GAAG;QAAC;QAAgB;QAAU;QAAW;QAAS;KAAqB;IAEvE,qBACE,gFACE,gCAAC;QACC,MAAM,YAAY,WAAW;QAC7B,mBAAiB;QACjB,eAAa,YAAY;QACzB,eAAY;QACZ,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL,yBACA;YACE,mCAAmC;YACnC,eAAe;YACf,CAAC,qBAAqB,EAAE;QAC1B;qBAGJ,gCAAC;QAAI,MAAK;QAAe,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG,4BAA4B;YAAC,sCAAsC;QAAQ;QAAI,WAAW;OAC9I,YAAY,aAAa,CAAC,gCACzB,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,mBAAW;QACV,cAAY;QACZ,SAAA;QACA,SAAS;OAER,cAAc,sBAAQ,gCAAC,CAAA,GAAA,oCAAa;QAAE,cAAc;YAAC,QAAQ;QAAQ;uBAAQ,gCAAC,CAAA,GAAA,oCAAa;QAAE,cAAc;YAAC,QAAQ;QAAO;uBAE9H,gCAAC;QAAG,IAAI;QAAW,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAA8B,kBAGlF;AAKX","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, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n  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 nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.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, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu',\n                styleProps.className\n              )\n            }>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return (\n                  <MenuSection\n                    key={item.key}\n                    item={item}\n                    state={state} />\n                );\n              }\n\n              let menuItem = (\n                <MenuItem\n                  key={item.key}\n                  item={item}\n                  state={state} />\n              );\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode,\n  isSubmenu?: boolean,\n  hasOpenSubmenu?: boolean,\n  parentMenuTreeState?: TreeState<any>,\n  rootMenuTriggerState?: RootMenuTriggerState,\n  onBackButtonPress?: (() => void),\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,\n  menuRef?: RefObject<HTMLDivElement | null>\n}): ReactNode {\n  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={\n          classNames(\n            styles,\n            'spectrum-Menu-wrapper',\n            {\n              'spectrum-Menu-wrapper--isMobile': isMobile,\n              'is-expanded': hasOpenSubmenu,\n              [traySubmenuAnimation]: isMobile\n            }\n          )\n        }>\n        <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton\n                aria-label={backButtonLabel}\n                isQuiet\n                onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.module.js.map"}

package/dist/Popover.main.js

@@ -0,0 +1,196 @@
+require("./menu.57b3a408.css");
+var $d77aa5d771e2d5f7$exports = require("./overlays_css.main.js");
+require("./menu.2259a533.css");
+var $16e1dca4664d0b1c$exports = require("./popover_vars_css.main.js");
+var $986adbd937b58c55$exports = require("./Underlay.main.js");
+var $1092bc18146aeaca$exports = require("./usePopover.main.js");
+var $a8zXR$reactariaoverlays = require("@react-aria/overlays");
+var $a8zXR$reactspectrumutils = require("@react-spectrum/utils");
+var $a8zXR$reactariainteractions = require("@react-aria/interactions");
+var $a8zXR$reactariautils = require("@react-aria/utils");
+var $a8zXR$reactspectrumoverlays = require("@react-spectrum/overlays");
+var $a8zXR$react = require("react");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Popover", () => $25179ade6a3f679b$export$5b6b19405a83ff9d);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+/**
+ * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
+ * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
+ * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
+ * the path always starts at 0 so that it perfectly overlaps the popover's border.
+ * See bottom of file for more explanation.
+ */ let $25179ade6a3f679b$var$arrowPlacement = {
+    left: 'right',
+    right: 'right',
+    top: 'bottom',
+    bottom: 'bottom'
+};
+const $25179ade6a3f679b$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $a8zXR$react.forwardRef)(function Popover(props, ref) {
+    let { children: children, state: state, ...otherProps } = props;
+    let domRef = (0, $a8zXR$reactspectrumutils.useDOMRef)(ref);
+    let wrapperRef = (0, $a8zXR$react.useRef)(null);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement((0, $a8zXR$reactspectrumoverlays.Overlay), {
+        ...otherProps,
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement($25179ade6a3f679b$var$PopoverWrapper, {
+        ref: domRef,
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
+});
+const $25179ade6a3f679b$var$PopoverWrapper = /*#__PURE__*/ (0, $a8zXR$react.forwardRef)((props, ref)=>{
+    let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
+    let { styleProps: styleProps } = (0, $a8zXR$reactspectrumutils.useStyleProps)(props);
+    let objRef = (0, $a8zXR$reactariautils.useObjectRef)(ref);
+    let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $25179ade6a3f679b$var$useArrowSize();
+    const borderRadius = $25179ade6a3f679b$var$usePopoverBorderRadius(objRef);
+    let borderDiagonal = borderWidth * Math.SQRT2;
+    let primary = size + borderDiagonal;
+    let secondary = primary * 2;
+    let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $1092bc18146aeaca$exports.usePopover)({
+        ...props,
+        popoverRef: objRef,
+        maxHeight: undefined,
+        arrowSize: hideArrow ? 0 : secondary,
+        arrowBoundaryOffset: borderRadius
+    }, state);
+    let { focusWithinProps: focusWithinProps } = (0, $a8zXR$reactariainteractions.useFocusWithin)(props);
+    // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement("div", {
+        ref: wrapperRef
+    }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement((0, $986adbd937b58c55$exports.Underlay), {
+        isTransparent: true,
+        ...(0, $a8zXR$reactariautils.mergeProps)(underlayProps),
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement("div", {
+        ...styleProps,
+        ...(0, $a8zXR$reactariautils.mergeProps)(popoverProps, focusWithinProps),
+        style: {
+            ...styleProps.style,
+            ...popoverProps.style
+        },
+        ref: objRef,
+        className: (0, $a8zXR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
+            'spectrum-Popover--withTip': !hideArrow,
+            'is-open': isOpen,
+            [`is-open--${placement}`]: isOpen
+        }, (0, $a8zXR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d77aa5d771e2d5f7$exports))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
+        role: "presentation",
+        "data-testid": "popover"
+    }, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement((0, $a8zXR$reactariaoverlays.DismissButton), {
+        onDismiss: onDismissButtonPress
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement($25179ade6a3f679b$var$Arrow, {
+        arrowProps: arrowProps,
+        isLandscape: placement != null ? $25179ade6a3f679b$var$arrowPlacement[placement] === 'bottom' : false,
+        arrowRef: arrowRef,
+        primary: primary,
+        secondary: secondary,
+        borderDiagonal: borderDiagonal
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement((0, $a8zXR$reactariaoverlays.DismissButton), {
+        onDismiss: onDismissButtonPress
+    })));
+});
+function $25179ade6a3f679b$var$usePopoverBorderRadius(popoverRef) {
+    let [borderRadius, setBorderRadius] = (0, $a8zXR$react.useState)(0);
+    (0, $a8zXR$reactariautils.useLayoutEffect)(()=>{
+        if (popoverRef.current) {
+            let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
+            if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        popoverRef
+    ]);
+    return borderRadius;
+}
+function $25179ade6a3f679b$var$useArrowSize() {
+    let [size, setSize] = (0, $a8zXR$react.useState)(20);
+    let [borderWidth, setBorderWidth] = (0, $a8zXR$react.useState)(1);
+    let arrowRef = (0, $a8zXR$react.useRef)(null);
+    // get the css value for the tip size and divide it by 2 for this arrow implementation
+    (0, $a8zXR$reactariautils.useLayoutEffect)(()=>{
+        if (arrowRef.current) {
+            let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
+            if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
+            let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
+            if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
+        }
+    }, []);
+    return {
+        size: size,
+        borderWidth: borderWidth,
+        arrowRef: arrowRef
+    };
+}
+function $25179ade6a3f679b$var$Arrow(props) {
+    let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
+    let halfBorderDiagonal = borderDiagonal / 2;
+    let primaryStart = 0;
+    let primaryEnd = primary - halfBorderDiagonal;
+    let secondaryStart = halfBorderDiagonal;
+    let secondaryMiddle = secondary / 2;
+    let secondaryEnd = secondary - halfBorderDiagonal;
+    let pathData = isLandscape ? [
+        'M',
+        secondaryStart,
+        primaryStart,
+        'L',
+        secondaryMiddle,
+        primaryEnd,
+        'L',
+        secondaryEnd,
+        primaryStart
+    ] : [
+        'M',
+        primaryStart,
+        secondaryStart,
+        'L',
+        primaryEnd,
+        secondaryMiddle,
+        'L',
+        primaryStart,
+        secondaryEnd
+    ];
+    /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement("svg", {
+        xmlns: "http://www.w3.org/svg/2000",
+        width: Math.ceil(isLandscape ? secondary : primary),
+        height: Math.ceil(isLandscape ? primary : secondary),
+        className: (0, $a8zXR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip'),
+        ref: arrowRef,
+        ...arrowProps
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($a8zXR$react))).createElement("path", {
+        className: (0, $a8zXR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip-triangle'),
+        d: pathData.join(' ')
+    }));
+}
+
+
+//# sourceMappingURL=Popover.main.js.map

package/dist/Popover.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Popover.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 {AriaPopoverProps, DismissButton, PopoverAria} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';\nimport {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport {Overlay} from '@react-spectrum/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {usePopover} from './usePopover';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, FocusWithinProps, StyleProps {\n  children: ReactNode,\n  hideArrow?: boolean,\n  state: OverlayTriggerState,\n  shouldContainFocus?: boolean,\n  onEntering?: () => void,\n  onEnter?: () => void,\n  onEntered?: () => void,\n  onExiting?: () => void,\n  onExited?: () => void,\n  onExit?: () => void,\n  container?: HTMLElement,\n  disableFocusManagement?: boolean,\n  enableBothDismissButtons?: boolean,\n  onDismissButtonPress?: () => void\n}\n\ninterface PopoverWrapperProps extends PopoverProps, FocusWithinProps {\n  isOpen?: boolean,\n  wrapperRef: RefObject<HTMLDivElement | null>\n}\n\ninterface ArrowProps {\n  arrowProps: PopoverAria['arrowProps'],\n  isLandscape: boolean,\n  arrowRef?: RefObject<SVGSVGElement | null>,\n  primary: number,\n  secondary: number,\n  borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n  left: 'right',\n  right: 'right',\n  top: 'bottom',\n  bottom: 'bottom'\n};\n\nexport const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    children,\n    state,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let wrapperRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n      <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n        {children}\n      </PopoverWrapper>\n    </Overlay>\n  );\n});\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {\n  let {\n    children,\n    isOpen,\n    hideArrow,\n    isNonModal,\n    enableBothDismissButtons,\n    state,\n    wrapperRef,\n    onDismissButtonPress = () => state.close()\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let objRef = useObjectRef(ref);\n\n  let {size, borderWidth, arrowRef} = useArrowSize();\n  const borderRadius = usePopoverBorderRadius(objRef);\n  let borderDiagonal = borderWidth * Math.SQRT2;\n  let primary = size + borderDiagonal;\n  let secondary = primary * 2;\n  let {\n    popoverProps,\n    arrowProps,\n    underlayProps,\n    placement\n  } = usePopover({\n    ...props,\n    popoverRef: objRef,\n    maxHeight: undefined,\n    arrowSize: hideArrow ? 0 : secondary,\n    arrowBoundaryOffset: borderRadius\n  }, state);\n  let {focusWithinProps} = useFocusWithin(props);\n\n  // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n  return (\n    <div ref={wrapperRef}>\n      {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps)} isOpen={isOpen} /> }\n      <div\n        {...styleProps}\n        {...mergeProps(popoverProps, focusWithinProps)}\n        style={{\n          ...styleProps.style,\n          ...popoverProps.style\n        }}\n        ref={objRef}\n        className={\n          classNames(\n            styles,\n            'spectrum-Popover',\n            `spectrum-Popover--${placement}`,\n            {\n              'spectrum-Popover--withTip': !hideArrow,\n              'is-open': isOpen,\n              [`is-open--${placement}`]: isOpen\n            },\n            classNames(\n              overrideStyles,\n              'spectrum-Popover',\n              'react-spectrum-Popover'\n            ),\n            styleProps.className\n          )\n        }\n        role=\"presentation\"\n        data-testid=\"popover\">\n        {(!isNonModal || enableBothDismissButtons) && <DismissButton onDismiss={onDismissButtonPress} />}\n        {children}\n        {hideArrow ? null : (\n          <Arrow\n            arrowProps={arrowProps}\n            isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}\n            arrowRef={arrowRef}\n            primary={primary}\n            secondary={secondary}\n            borderDiagonal={borderDiagonal} />\n        )}\n        <DismissButton onDismiss={onDismissButtonPress} />\n      </div>\n    </div>\n  );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {\n  let [borderRadius, setBorderRadius] = useState(0);\n  useLayoutEffect(() => {\n    if (popoverRef.current) {\n      let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n      if (spectrumBorderRadius !== '') {\n        setBorderRadius(parseInt(spectrumBorderRadius, 10));\n      }\n    }\n  }, [popoverRef]);\n  return borderRadius;\n}\n\nfunction useArrowSize() {\n  let [size, setSize] = useState(20);\n  let [borderWidth, setBorderWidth] = useState(1);\n  let arrowRef = useRef<SVGSVGElement>(null);\n  // get the css value for the tip size and divide it by 2 for this arrow implementation\n  useLayoutEffect(() => {\n    if (arrowRef.current) {\n      let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n        .getPropertyValue('--spectrum-popover-tip-size');\n      if (spectrumTipWidth !== '') {\n        setSize(parseInt(spectrumTipWidth, 10) / 2);\n      }\n\n      let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n        .getPropertyValue('--spectrum-popover-tip-borderWidth');\n      if (spectrumBorderWidth !== '') {\n        setBorderWidth(parseInt(spectrumBorderWidth, 10));\n      }\n    }\n  }, []);\n  return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n  let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n  let halfBorderDiagonal = borderDiagonal / 2;\n\n  let primaryStart = 0;\n  let primaryEnd = primary - halfBorderDiagonal;\n\n  let secondaryStart = halfBorderDiagonal;\n  let secondaryMiddle = secondary / 2;\n  let secondaryEnd = secondary - halfBorderDiagonal;\n\n  let pathData = isLandscape ? [\n    'M', secondaryStart, primaryStart,\n    'L', secondaryMiddle, primaryEnd,\n    'L', secondaryEnd, primaryStart\n  ] : [\n    'M', primaryStart, secondaryStart,\n    'L', primaryEnd, secondaryMiddle,\n    'L', primaryStart, secondaryEnd\n  ];\n\n  /* use ceil because the svg needs to always accommodate the path inside it */\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/svg/2000\"\n      width={Math.ceil(isLandscape ? secondary : primary)}\n      height={Math.ceil(isLandscape ? primary : secondary)}\n      className={classNames(styles, 'spectrum-Popover-tip')}\n      ref={arrowRef}\n      {...arrowProps}>\n      <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n    </svg>\n  );\n}\n"],"names":[],"version":3,"file":"Popover.main.js.map"}

package/dist/Popover.mjs

@@ -0,0 +1,191 @@
+import "./menu.57b3a408.css";
+import $g5w4B$overlays_cssmodulejs from "./overlays_css.mjs";
+import "./menu.2259a533.css";
+import $g5w4B$popover_vars_cssmodulejs from "./popover_vars_css.mjs";
+import {Underlay as $274a838403463b67$export$f360afc887607b02} from "./Underlay.mjs";
+import {usePopover as $87eca3bd2e28ca01$export$542a6fd13ac93354} from "./usePopover.mjs";
+import {DismissButton as $g5w4B$DismissButton} from "@react-aria/overlays";
+import {useDOMRef as $g5w4B$useDOMRef, useStyleProps as $g5w4B$useStyleProps, classNames as $g5w4B$classNames} from "@react-spectrum/utils";
+import {useFocusWithin as $g5w4B$useFocusWithin} from "@react-aria/interactions";
+import {useObjectRef as $g5w4B$useObjectRef, mergeProps as $g5w4B$mergeProps, useLayoutEffect as $g5w4B$useLayoutEffect} from "@react-aria/utils";
+import {Overlay as $g5w4B$Overlay} from "@react-spectrum/overlays";
+import $g5w4B$react, {forwardRef as $g5w4B$forwardRef, useRef as $g5w4B$useRef, useState as $g5w4B$useState} from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+/**
+ * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
+ * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
+ * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
+ * the path always starts at 0 so that it perfectly overlaps the popover's border.
+ * See bottom of file for more explanation.
+ */ let $bf810f3fb07f8592$var$arrowPlacement = {
+    left: 'right',
+    right: 'right',
+    top: 'bottom',
+    bottom: 'bottom'
+};
+const $bf810f3fb07f8592$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $g5w4B$forwardRef)(function Popover(props, ref) {
+    let { children: children, state: state, ...otherProps } = props;
+    let domRef = (0, $g5w4B$useDOMRef)(ref);
+    let wrapperRef = (0, $g5w4B$useRef)(null);
+    return /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$Overlay), {
+        ...otherProps,
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$PopoverWrapper, {
+        ref: domRef,
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
+});
+const $bf810f3fb07f8592$var$PopoverWrapper = /*#__PURE__*/ (0, $g5w4B$forwardRef)((props, ref)=>{
+    let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
+    let { styleProps: styleProps } = (0, $g5w4B$useStyleProps)(props);
+    let objRef = (0, $g5w4B$useObjectRef)(ref);
+    let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $bf810f3fb07f8592$var$useArrowSize();
+    const borderRadius = $bf810f3fb07f8592$var$usePopoverBorderRadius(objRef);
+    let borderDiagonal = borderWidth * Math.SQRT2;
+    let primary = size + borderDiagonal;
+    let secondary = primary * 2;
+    let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $87eca3bd2e28ca01$export$542a6fd13ac93354)({
+        ...props,
+        popoverRef: objRef,
+        maxHeight: undefined,
+        arrowSize: hideArrow ? 0 : secondary,
+        arrowBoundaryOffset: borderRadius
+    }, state);
+    let { focusWithinProps: focusWithinProps } = (0, $g5w4B$useFocusWithin)(props);
+    // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
+    return /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
+        ref: wrapperRef
+    }, !isNonModal && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $274a838403463b67$export$f360afc887607b02), {
+        isTransparent: true,
+        ...(0, $g5w4B$mergeProps)(underlayProps),
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
+        ...styleProps,
+        ...(0, $g5w4B$mergeProps)(popoverProps, focusWithinProps),
+        style: {
+            ...styleProps.style,
+            ...popoverProps.style
+        },
+        ref: objRef,
+        className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
+            'spectrum-Popover--withTip': !hideArrow,
+            'is-open': isOpen,
+            [`is-open--${placement}`]: isOpen
+        }, (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
+        role: "presentation",
+        "data-testid": "popover"
+    }, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
+        onDismiss: onDismissButtonPress
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$Arrow, {
+        arrowProps: arrowProps,
+        isLandscape: placement != null ? $bf810f3fb07f8592$var$arrowPlacement[placement] === 'bottom' : false,
+        arrowRef: arrowRef,
+        primary: primary,
+        secondary: secondary,
+        borderDiagonal: borderDiagonal
+    }), /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
+        onDismiss: onDismissButtonPress
+    })));
+});
+function $bf810f3fb07f8592$var$usePopoverBorderRadius(popoverRef) {
+    let [borderRadius, setBorderRadius] = (0, $g5w4B$useState)(0);
+    (0, $g5w4B$useLayoutEffect)(()=>{
+        if (popoverRef.current) {
+            let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
+            if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        popoverRef
+    ]);
+    return borderRadius;
+}
+function $bf810f3fb07f8592$var$useArrowSize() {
+    let [size, setSize] = (0, $g5w4B$useState)(20);
+    let [borderWidth, setBorderWidth] = (0, $g5w4B$useState)(1);
+    let arrowRef = (0, $g5w4B$useRef)(null);
+    // get the css value for the tip size and divide it by 2 for this arrow implementation
+    (0, $g5w4B$useLayoutEffect)(()=>{
+        if (arrowRef.current) {
+            let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
+            if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
+            let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
+            if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
+        }
+    }, []);
+    return {
+        size: size,
+        borderWidth: borderWidth,
+        arrowRef: arrowRef
+    };
+}
+function $bf810f3fb07f8592$var$Arrow(props) {
+    let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
+    let halfBorderDiagonal = borderDiagonal / 2;
+    let primaryStart = 0;
+    let primaryEnd = primary - halfBorderDiagonal;
+    let secondaryStart = halfBorderDiagonal;
+    let secondaryMiddle = secondary / 2;
+    let secondaryEnd = secondary - halfBorderDiagonal;
+    let pathData = isLandscape ? [
+        'M',
+        secondaryStart,
+        primaryStart,
+        'L',
+        secondaryMiddle,
+        primaryEnd,
+        'L',
+        secondaryEnd,
+        primaryStart
+    ] : [
+        'M',
+        primaryStart,
+        secondaryStart,
+        'L',
+        primaryEnd,
+        secondaryMiddle,
+        'L',
+        primaryStart,
+        secondaryEnd
+    ];
+    /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $g5w4B$react).createElement("svg", {
+        xmlns: "http://www.w3.org/svg/2000",
+        width: Math.ceil(isLandscape ? secondary : primary),
+        height: Math.ceil(isLandscape ? primary : secondary),
+        className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
+        ref: arrowRef,
+        ...arrowProps
+    }, /*#__PURE__*/ (0, $g5w4B$react).createElement("path", {
+        className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
+        d: pathData.join(' ')
+    }));
+}
+
+
+export {$bf810f3fb07f8592$export$5b6b19405a83ff9d as Popover};
+//# sourceMappingURL=Popover.module.js.map