@react-spectrum/menu 3.20.5 → 3.21.1

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?.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                );\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}\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?.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"}
+{"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 {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\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  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?.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<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/MenuItem.main.js

@@ -1,5 +1,5 @@
 var $2f9ceea24fba5443$exports = require("./intlStrings.main.js");
-require("./vars.a1f9fd59.css");
+require("./vars.5486a4f0.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.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n  item: Node<T>,\n  state: TreeState<T>,\n  isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n  let {\n    item,\n    state,\n    isVirtualized\n  } = props;\n  let {\n    closeOnSelect\n  } = useMenuContext();\n  let {\n    rendered,\n    key\n  } = item;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let {direction} = useLocale();\n\n  let submenuTriggerContext = useSubmenuTriggerContext();\n  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n  let isSubmenuTrigger = !!submenuTriggerContext;\n  let isUnavailable;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n  if (isSubmenuTrigger) {\n    isUnavailable = submenuTriggerContext.isUnavailable;\n  }\n\n  let isDisabled = state.disabledKeys.has(key);\n  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n  let isSelected = isSelectable && state.selectionManager.isSelected(key);\n  let itemref = useRef<any>(null);\n  let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n  let {\n    menuItemProps,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps\n  } = useMenuItem(\n    {\n      isSelected,\n      isDisabled,\n      'aria-label': item['aria-label'],\n      key,\n      closeOnSelect,\n      isVirtualized,\n      ...submenuTriggerProps\n    },\n    state,\n    ref\n  );\n  let endId = useSlotId();\n  let endProps: DOMAttributes = {};\n  if (endId) {\n    endProps.id = endId;\n    menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n  }\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...menuItemProps}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': isSelectable,\n            'is-open': submenuTriggerProps.isOpen\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n                icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n              {\n                isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n              }\n              {\n                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"MenuItem.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n  item: Node<T>,\n  state: TreeState<T>,\n  isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n  let {\n    item,\n    state,\n    isVirtualized\n  } = props;\n  let {\n    closeOnSelect\n  } = useMenuContext();\n  let {\n    rendered,\n    key\n  } = item;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let {direction} = useLocale();\n\n  let submenuTriggerContext = useSubmenuTriggerContext();\n  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n  let isSubmenuTrigger = !!submenuTriggerContext;\n  let isUnavailable;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n  if (isSubmenuTrigger) {\n    isUnavailable = submenuTriggerContext!.isUnavailable;\n  }\n\n  let isDisabled = state.disabledKeys.has(key);\n  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n  let isSelected = isSelectable && state.selectionManager.isSelected(key);\n  let itemref = useRef<any>(null);\n  let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n  let {\n    menuItemProps,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps\n  } = useMenuItem(\n    {\n      isSelected,\n      isDisabled,\n      'aria-label': item['aria-label'],\n      key,\n      closeOnSelect,\n      isVirtualized,\n      ...submenuTriggerProps\n    },\n    state,\n    ref\n  );\n  let endId = useSlotId();\n  let endProps: DOMAttributes = {};\n  if (endId) {\n    endProps.id = endId;\n    menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n  }\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...menuItemProps}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': isSelectable,\n            'is-open': submenuTriggerProps.isOpen\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n                icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n              {\n                isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n              }\n              {\n                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"MenuItem.main.js.map"}

package/dist/MenuItem.mjs

@@ -1,5 +1,5 @@
 import $bVyMs$intlStringsmodulejs from "./intlStrings.mjs";
-import "./vars.a1f9fd59.css";
+import "./vars.5486a4f0.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.a1f9fd59.css";
+import "./vars.5486a4f0.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/MenuItem.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n  item: Node<T>,\n  state: TreeState<T>,\n  isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n  let {\n    item,\n    state,\n    isVirtualized\n  } = props;\n  let {\n    closeOnSelect\n  } = useMenuContext();\n  let {\n    rendered,\n    key\n  } = item;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let {direction} = useLocale();\n\n  let submenuTriggerContext = useSubmenuTriggerContext();\n  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n  let isSubmenuTrigger = !!submenuTriggerContext;\n  let isUnavailable;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n  if (isSubmenuTrigger) {\n    isUnavailable = submenuTriggerContext.isUnavailable;\n  }\n\n  let isDisabled = state.disabledKeys.has(key);\n  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n  let isSelected = isSelectable && state.selectionManager.isSelected(key);\n  let itemref = useRef<any>(null);\n  let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n  let {\n    menuItemProps,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps\n  } = useMenuItem(\n    {\n      isSelected,\n      isDisabled,\n      'aria-label': item['aria-label'],\n      key,\n      closeOnSelect,\n      isVirtualized,\n      ...submenuTriggerProps\n    },\n    state,\n    ref\n  );\n  let endId = useSlotId();\n  let endProps: DOMAttributes = {};\n  if (endId) {\n    endProps.id = endId;\n    menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n  }\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...menuItemProps}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': isSelectable,\n            'is-open': submenuTriggerProps.isOpen\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n                icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n              {\n                isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n              }\n              {\n                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"MenuItem.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n  item: Node<T>,\n  state: TreeState<T>,\n  isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n  let {\n    item,\n    state,\n    isVirtualized\n  } = props;\n  let {\n    closeOnSelect\n  } = useMenuContext();\n  let {\n    rendered,\n    key\n  } = item;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let {direction} = useLocale();\n\n  let submenuTriggerContext = useSubmenuTriggerContext();\n  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n  let isSubmenuTrigger = !!submenuTriggerContext;\n  let isUnavailable;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n  if (isSubmenuTrigger) {\n    isUnavailable = submenuTriggerContext!.isUnavailable;\n  }\n\n  let isDisabled = state.disabledKeys.has(key);\n  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n  let isSelected = isSelectable && state.selectionManager.isSelected(key);\n  let itemref = useRef<any>(null);\n  let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n  let {\n    menuItemProps,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps\n  } = useMenuItem(\n    {\n      isSelected,\n      isDisabled,\n      'aria-label': item['aria-label'],\n      key,\n      closeOnSelect,\n      isVirtualized,\n      ...submenuTriggerProps\n    },\n    state,\n    ref\n  );\n  let endId = useSlotId();\n  let endProps: DOMAttributes = {};\n  if (endId) {\n    endProps.id = endId;\n    menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n  }\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...menuItemProps}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': isSelectable,\n            'is-open': submenuTriggerProps.isOpen\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n                icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n              {\n                isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n              }\n              {\n                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"MenuItem.module.js.map"}

package/dist/MenuSection.main.js

@@ -1,5 +1,5 @@
 var $1d718563708db5b5$exports = require("./MenuItem.main.js");
-require("./vars.a1f9fd59.css");
+require("./vars.5486a4f0.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $3nsTP$reactspectrumutils = require("@react-spectrum/utils");
 var $3nsTP$reactstatelycollections = require("@react-stately/collections");
@@ -49,7 +49,8 @@ function $5793ff412227d2fc$export$4b1545b4f2016d26(props) {
         ...state.collection
     ].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
     let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
-    let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;
+    let lastKey = state.collection.getLastKey();
+    let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($3nsTP$react))).createElement((0, $3nsTP$react.Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, ($parcel$interopDefault($3nsTP$react))).createElement("div", {
         ...separatorProps,
         className: (0, $3nsTP$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-divider')

package/dist/MenuSection.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,OAAO,CAAC,MAAM,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK;IAEzH,qBACE,0DAAC,CAAA,GAAA,qBAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,0DAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL;sBAGN,0DAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,0DAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,0DAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,4CAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,0DAAC,CAAA,GAAA,kCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n  item: Node<T>,\n  state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n  let {item, state} = props;\n  let {itemProps, headingProps, groupProps} = useMenuSection({\n    heading: item.rendered,\n    'aria-label': item['aria-label']\n  });\n\n  let {separatorProps} = useSeparator({\n    elementType: 'div'\n  });\n\n  let firstSectionKey = state.collection.getFirstKey();\n  let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n  let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n  let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;\n\n  return (\n    <Fragment>\n      {item.key !== state.collection.getFirstKey() &&\n        <div\n          {...separatorProps}\n          className={classNames(\n            styles,\n            'spectrum-Menu-divider'\n          )} />\n      }\n      <div {...itemProps}>\n        {item.rendered &&\n          <span\n            {...headingProps}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu-sectionHeading'\n              )\n            }>\n            {item.rendered}\n          </span>\n        }\n        <div\n          {...groupProps}\n          className={\n            classNames(\n              styles,\n                'spectrum-Menu',\n              {\n                'spectrum-Menu-section--noHeading': item.rendered == null,\n                'spectrum-Menu-section--isFirst': sectionIsFirst,\n                'spectrum-Menu-section--isLast': sectionIsLast\n              }\n            )\n          }>\n          {[...getChildNodes(item, state.collection)].map(node => {\n            let item = (\n              <MenuItem\n                key={node.key}\n                item={node}\n                state={state} />\n            );\n\n            if (node.wrapper) {\n              item = node.wrapper(item);\n            }\n\n            return item;\n          })}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n"],"names":[],"version":3,"file":"MenuSection.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,UAAU,MAAM,UAAU,CAAC,UAAU;IACzC,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,WAAW,QAAQ,MAAM,UAAU,CAAC,OAAO,CAAC,SAAU,SAAS,KAAK;IAEvH,qBACE,0DAAC,CAAA,GAAA,qBAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,0DAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL;sBAGN,0DAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,0DAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,0DAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,4CAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,0DAAC,CAAA,GAAA,kCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n  item: Node<T>,\n  state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n  let {item, state} = props;\n  let {itemProps, headingProps, groupProps} = useMenuSection({\n    heading: item.rendered,\n    'aria-label': item['aria-label']\n  });\n\n  let {separatorProps} = useSeparator({\n    elementType: 'div'\n  });\n\n  let firstSectionKey = state.collection.getFirstKey();\n  let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n  let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n  let lastKey = state.collection.getLastKey();\n  let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;\n\n  return (\n    <Fragment>\n      {item.key !== state.collection.getFirstKey() &&\n        <div\n          {...separatorProps}\n          className={classNames(\n            styles,\n            'spectrum-Menu-divider'\n          )} />\n      }\n      <div {...itemProps}>\n        {item.rendered &&\n          <span\n            {...headingProps}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu-sectionHeading'\n              )\n            }>\n            {item.rendered}\n          </span>\n        }\n        <div\n          {...groupProps}\n          className={\n            classNames(\n              styles,\n                'spectrum-Menu',\n              {\n                'spectrum-Menu-section--noHeading': item.rendered == null,\n                'spectrum-Menu-section--isFirst': sectionIsFirst,\n                'spectrum-Menu-section--isLast': sectionIsLast\n              }\n            )\n          }>\n          {[...getChildNodes(item, state.collection)].map(node => {\n            let item = (\n              <MenuItem\n                key={node.key}\n                item={node}\n                state={state} />\n            );\n\n            if (node.wrapper) {\n              item = node.wrapper(item);\n            }\n\n            return item;\n          })}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n"],"names":[],"version":3,"file":"MenuSection.main.js.map"}

package/dist/MenuSection.mjs

@@ -1,5 +1,5 @@
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.mjs";
-import "./vars.a1f9fd59.css";
+import "./vars.5486a4f0.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";
@@ -43,7 +43,8 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
         ...state.collection
     ].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
     let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
-    let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;
+    let lastKey = state.collection.getLastKey();
+    let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
     return /*#__PURE__*/ (0, $9353d$react).createElement((0, $9353d$Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $9353d$react).createElement("div", {
         ...separatorProps,
         className: (0, $9353d$classNames)((0, ($parcel$interopDefault($9353d$menu_vars_cssmodulejs))), 'spectrum-Menu-divider')

package/dist/MenuSection.module.js

@@ -1,5 +1,5 @@
 import {MenuItem as $48fb8f5e1202c980$export$2ce376c2cc3355c8} from "./MenuItem.module.js";
-import "./vars.a1f9fd59.css";
+import "./vars.5486a4f0.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";
@@ -43,7 +43,8 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
         ...state.collection
     ].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
     let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
-    let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;
+    let lastKey = state.collection.getLastKey();
+    let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
     return /*#__PURE__*/ (0, $9353d$react).createElement((0, $9353d$Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $9353d$react).createElement("div", {
         ...separatorProps,
         className: (0, $9353d$classNames)((0, ($parcel$interopDefault($9353d$menu_vars_cssmodulejs))), 'spectrum-Menu-divider')

package/dist/MenuSection.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,OAAO,CAAC,MAAM,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK;IAEzH,qBACE,gCAAC,CAAA,GAAA,eAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,gCAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,sDAAK,GACL;sBAGN,gCAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,gCAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,gCAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,oBAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,gCAAC,CAAA,GAAA,yCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n  item: Node<T>,\n  state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n  let {item, state} = props;\n  let {itemProps, headingProps, groupProps} = useMenuSection({\n    heading: item.rendered,\n    'aria-label': item['aria-label']\n  });\n\n  let {separatorProps} = useSeparator({\n    elementType: 'div'\n  });\n\n  let firstSectionKey = state.collection.getFirstKey();\n  let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n  let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n  let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;\n\n  return (\n    <Fragment>\n      {item.key !== state.collection.getFirstKey() &&\n        <div\n          {...separatorProps}\n          className={classNames(\n            styles,\n            'spectrum-Menu-divider'\n          )} />\n      }\n      <div {...itemProps}>\n        {item.rendered &&\n          <span\n            {...headingProps}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu-sectionHeading'\n              )\n            }>\n            {item.rendered}\n          </span>\n        }\n        <div\n          {...groupProps}\n          className={\n            classNames(\n              styles,\n                'spectrum-Menu',\n              {\n                'spectrum-Menu-section--noHeading': item.rendered == null,\n                'spectrum-Menu-section--isFirst': sectionIsFirst,\n                'spectrum-Menu-section--isLast': sectionIsLast\n              }\n            )\n          }>\n          {[...getChildNodes(item, state.collection)].map(node => {\n            let item = (\n              <MenuItem\n                key={node.key}\n                item={node}\n                state={state} />\n            );\n\n            if (node.wrapper) {\n              item = node.wrapper(item);\n            }\n\n            return item;\n          })}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n"],"names":[],"version":3,"file":"MenuSection.module.js.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,UAAU,MAAM,UAAU,CAAC,UAAU;IACzC,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,WAAW,QAAQ,MAAM,UAAU,CAAC,OAAO,CAAC,SAAU,SAAS,KAAK;IAEvH,qBACE,gCAAC,CAAA,GAAA,eAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,gCAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,sDAAK,GACL;sBAGN,gCAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,gCAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,gCAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,oBAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,gCAAC,CAAA,GAAA,yCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n  item: Node<T>,\n  state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n  let {item, state} = props;\n  let {itemProps, headingProps, groupProps} = useMenuSection({\n    heading: item.rendered,\n    'aria-label': item['aria-label']\n  });\n\n  let {separatorProps} = useSeparator({\n    elementType: 'div'\n  });\n\n  let firstSectionKey = state.collection.getFirstKey();\n  let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n  let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n  let lastKey = state.collection.getLastKey();\n  let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;\n\n  return (\n    <Fragment>\n      {item.key !== state.collection.getFirstKey() &&\n        <div\n          {...separatorProps}\n          className={classNames(\n            styles,\n            'spectrum-Menu-divider'\n          )} />\n      }\n      <div {...itemProps}>\n        {item.rendered &&\n          <span\n            {...headingProps}\n            className={\n              classNames(\n                styles,\n                'spectrum-Menu-sectionHeading'\n              )\n            }>\n            {item.rendered}\n          </span>\n        }\n        <div\n          {...groupProps}\n          className={\n            classNames(\n              styles,\n                'spectrum-Menu',\n              {\n                'spectrum-Menu-section--noHeading': item.rendered == null,\n                'spectrum-Menu-section--isFirst': sectionIsFirst,\n                'spectrum-Menu-section--isLast': sectionIsLast\n              }\n            )\n          }>\n          {[...getChildNodes(item, state.collection)].map(node => {\n            let item = (\n              <MenuItem\n                key={node.key}\n                item={node}\n                state={state} />\n            );\n\n            if (node.wrapper) {\n              item = node.wrapper(item);\n            }\n\n            return item;\n          })}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n"],"names":[],"version":3,"file":"MenuSection.module.js.map"}

package/dist/MenuTrigger.main.js

@@ -1,5 +1,5 @@
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
-require("./vars.a1f9fd59.css");
+require("./vars.5486a4f0.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $6doGq$reactspectrumutils = require("@react-spectrum/utils");
 var $6doGq$reactspectrumoverlays = require("@react-spectrum/overlays");
@@ -36,11 +36,11 @@ $parcel$export(module.exports, "MenuTrigger", () => $e56311f7204399c7$export$27d
 
 
 
-function $e56311f7204399c7$var$MenuTrigger(props, ref) {
-    let triggerRef = (0, $6doGq$react.useRef)(undefined);
+const $e56311f7204399c7$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $6doGq$react.forwardRef)(function MenuTrigger(props, ref) {
+    let triggerRef = (0, $6doGq$react.useRef)(null);
     let domRef = (0, $6doGq$reactspectrumutils.useDOMRef)(ref);
     let menuTriggerRef = domRef || triggerRef;
-    let menuRef = (0, $6doGq$react.useRef)(undefined);
+    let menuRef = (0, $6doGq$react.useRef)(null);
     let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
     let [menuTrigger, menu] = (0, ($parcel$interopDefault($6doGq$react))).Children.toArray(children);
     let state = (0, $6doGq$reactstatelymenu.useMenuTriggerState)(props);
@@ -76,13 +76,25 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
         }),
         state: state
     };
+    // Close when clicking outside the root menu when a submenu is open.
+    let rootOverlayRef = (0, $6doGq$react.useRef)(null);
+    let rootOverlayDomRef = (0, $6doGq$reactspectrumutils.unwrapDOMRef)(rootOverlayRef);
+    (0, $6doGq$reactariainteractions.useInteractOutside)({
+        ref: rootOverlayDomRef,
+        onInteractOutside: ()=>{
+            state === null || state === void 0 ? void 0 : state.close();
+        },
+        isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
+    });
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.
     let overlay;
     if (isMobile) overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $6doGq$reactspectrumoverlays.Tray), {
         state: state,
-        isFixedHeight: true
+        isFixedHeight: true,
+        ref: rootOverlayRef
     }, menu);
     else overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $6doGq$reactspectrumoverlays.Popover), {
+        ref: rootOverlayRef,
         UNSAFE_style: {
             clipPath: 'unset',
             overflow: 'visible',
@@ -109,11 +121,7 @@ function $e56311f7204399c7$var$MenuTrigger(props, ref) {
     }, menuTrigger)), /*#__PURE__*/ (0, ($parcel$interopDefault($6doGq$react))).createElement((0, $cac834c4bc0a51d3$exports.MenuContext).Provider, {
         value: menuContext
     }, overlay));
-}
-/**
- * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
- * linking the Menu's open state with the trigger's press state.
- */ let $e56311f7204399c7$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $6doGq$react.forwardRef)($e56311f7204399c7$var$MenuTrigger);
+});
 
 
 //# sourceMappingURL=MenuTrigger.main.js.map

package/dist/MenuTrigger.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAcD,SAAS,kCAAY,KAA+B,EAAE,GAAwB;IAC5E,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAe;IACrC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,iBAAiB,UAAU;IAC/B,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAkB;IACrC,IAAI,YACF,QAAQ,SACR,QAAQ,qBACR,aAAa,iBACb,YAAY,yBACZ,aAAa,WACb,UAAU,SACX,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,QAAQ,CAAA,GAAA,2CAAkB,EAAE;IAEhC,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;iBAAC;IAAO,GAAG,OAAO;IAErE,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,MAAM,CAAC;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAC9C;IAEA,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,cAAc;QAChB,GAAG,SAAS;QACZ,KAAK;QACL,SAAS,MAAM,KAAK;uBACpB;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,cAAc,WAAW;YACvB,OAAO;YACP,WAAW;QACb,IAAI;QACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAAC,yBAAyB,CAAC;QAAQ;eACxE;IACF;IAEA,gFAAgF;IAChF,IAAI;IACJ,IAAI,UACF,wBACE,0DAAC,CAAA,GAAA,iCAAG;QAAE,OAAO;QAAO,eAAA;OACjB;SAIL,wBACE,0DAAC,CAAA,GAAA,oCAAM;QACL,cAAc;YAAC,UAAU;YAAS,UAAU;YAAW,QAAQ;YAAS,aAAa;QAAK;QAC1F,OAAO;QACP,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAA;QACA,YAAY;OACX;IAKP,qBACE,0DAAC,CAAA,GAAA,qBAAO,uBACN,0DAAC,CAAA,GAAA,sCAAW;QAAE,OAAO;YAAC,cAAc;gBAAC,gBAAgB,YAAY;YAAW;QAAC;qBAC3E,0DAAC,CAAA,GAAA,2CAAa;QAAG,GAAG,gBAAgB;QAAE,KAAK;QAAgB,WAAW,MAAM,MAAM;OAC/E,6BAGL,0DAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT;AAEA;;;CAGC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/menu/src/MenuTrigger.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, SlotProvider, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {MenuContext} from './context';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder} from '@react-aria/interactions';\nimport React, {forwardRef, Fragment, useRef} from 'react';\nimport {SpectrumMenuTriggerProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useMenuTriggerState} from '@react-stately/menu';\n\nfunction MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  let triggerRef = useRef<HTMLElement>(undefined);\n  let domRef = useDOMRef(ref);\n  let menuTriggerRef = domRef || triggerRef;\n  let menuRef = useRef<HTMLDivElement>(undefined);\n  let {\n    children,\n    align = 'start',\n    shouldFlip = true,\n    direction = 'bottom',\n    closeOnSelect,\n    trigger = 'press'\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let state = useMenuTriggerState(props);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);\n\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n\n  let isMobile = useIsMobileDevice();\n  let menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: state.focusStrategy || true,\n    UNSAFE_style: isMobile ? {\n      width: '100%',\n      maxHeight: 'inherit'\n    } : undefined,\n    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n    state\n  };\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state} isFixedHeight>\n        {menu}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        state={state}\n        triggerRef={menuTriggerRef}\n        scrollRef={menuRef}\n        placement={initialPlacement}\n        hideArrow\n        shouldFlip={shouldFlip}>\n        {menu}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>\n        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>\n          {menuTrigger}\n        </PressResponder>\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </Fragment>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\nexport {_MenuTrigger as MenuTrigger};\n"],"names":[],"version":3,"file":"MenuTrigger.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAAwB;IAClH,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAe;IACrC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,iBAAiB,UAAU;IAC/B,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAkB;IACrC,IAAI,YACF,QAAQ,SACR,QAAQ,qBACR,aAAa,iBACb,YAAY,yBACZ,aAAa,WACb,UAAU,SACX,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,QAAQ,CAAA,GAAA,2CAAkB,EAAE;IAEhC,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;iBAAC;IAAO,GAAG,OAAO;IAErE,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,GAAG,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,OAAO;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,GAAG,UAAU,CAAC,EAAE,OAAO;IAC9C;IAEA,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,cAAc;QAChB,GAAG,SAAS;QACZ,KAAK;QACL,SAAS,MAAM,KAAK;uBACpB;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,cAAc,WAAW;YACvB,OAAO;YACP,WAAW;QACb,IAAI;QACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAAC,yBAAyB,CAAC;QAAQ;eACxE;IACF;IAEA,oEAAoE;IACpE,IAAI,iBAAiB,CAAA,GAAA,mBAAK,EAAE;IAC5B,IAAI,oBAAoB,CAAA,GAAA,sCAAW,EAAE;IACrC,CAAA,GAAA,+CAAiB,EAAE;QACjB,KAAK;QACL,mBAAmB;YACjB,kBAAA,4BAAA,MAAO,KAAK;QACd;QACA,YAAY,CAAC,MAAM,MAAM,IAAI,MAAM,iBAAiB,CAAC,MAAM,KAAK;IAClE;IAEA,gFAAgF;IAChF,IAAI;IACJ,IAAI,UACF,wBACE,0DAAC,CAAA,GAAA,iCAAG;QAAE,OAAO;QAAO,eAAA;QAAc,KAAK;OACpC;SAIL,wBACE,0DAAC,CAAA,GAAA,oCAAM;QACL,KAAK;QACL,cAAc;YAAC,UAAU;YAAS,UAAU;YAAW,QAAQ;YAAS,aAAa;QAAK;QAC1F,OAAO;QACP,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAA;QACA,YAAY;OACX;IAKP,qBACE,0DAAC,CAAA,GAAA,qBAAO,uBACN,0DAAC,CAAA,GAAA,sCAAW;QAAE,OAAO;YAAC,cAAc;gBAAC,gBAAgB,YAAY;YAAW;QAAC;qBAC3E,0DAAC,CAAA,GAAA,2CAAa;QAAG,GAAG,gBAAgB;QAAE,KAAK;QAAgB,WAAW,MAAM,MAAM;OAC/E,6BAGL,0DAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT","sources":["packages/@react-spectrum/menu/src/MenuTrigger.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, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {MenuContext} from './context';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder, useInteractOutside} from '@react-aria/interactions';\nimport React, {forwardRef, Fragment, useRef} from 'react';\nimport {SpectrumMenuTriggerProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useMenuTriggerState} from '@react-stately/menu';\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nexport const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  let triggerRef = useRef<HTMLElement>(null);\n  let domRef = useDOMRef(ref);\n  let menuTriggerRef = domRef || triggerRef;\n  let menuRef = useRef<HTMLDivElement>(null);\n  let {\n    children,\n    align = 'start',\n    shouldFlip = true,\n    direction = 'bottom',\n    closeOnSelect,\n    trigger = 'press'\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let state = useMenuTriggerState(props);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);\n\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n\n  let isMobile = useIsMobileDevice();\n  let menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: state.focusStrategy || true,\n    UNSAFE_style: isMobile ? {\n      width: '100%',\n      maxHeight: 'inherit'\n    } : undefined,\n    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n    state\n  };\n\n  // Close when clicking outside the root menu when a submenu is open.\n  let rootOverlayRef = useRef(null);\n  let rootOverlayDomRef = unwrapDOMRef(rootOverlayRef);\n  useInteractOutside({\n    ref: rootOverlayDomRef,\n    onInteractOutside: () => {\n      state?.close();\n    },\n    isDisabled: !state.isOpen || state.expandedKeysStack.length === 0\n  });\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state} isFixedHeight ref={rootOverlayRef}>\n        {menu}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        ref={rootOverlayRef}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        state={state}\n        triggerRef={menuTriggerRef}\n        scrollRef={menuRef}\n        placement={initialPlacement}\n        hideArrow\n        shouldFlip={shouldFlip}>\n        {menu}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>\n        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>\n          {menuTrigger}\n        </PressResponder>\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </Fragment>\n  );\n});\n"],"names":[],"version":3,"file":"MenuTrigger.main.js.map"}

package/dist/MenuTrigger.mjs

@@ -1,10 +1,10 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.mjs";
-import "./vars.a1f9fd59.css";
+import "./vars.5486a4f0.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 {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, unwrapDOMRef as $5R0iF$unwrapDOMRef, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
 import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";
-import {PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
-import $5R0iF$react, {useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment, forwardRef as $5R0iF$forwardRef} from "react";
+import {useInteractOutside as $5R0iF$useInteractOutside, PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
+import $5R0iF$react, {forwardRef as $5R0iF$forwardRef, useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment} from "react";
 import {useMenuTrigger as $5R0iF$useMenuTrigger} from "@react-aria/menu";
 import {useMenuTriggerState as $5R0iF$useMenuTriggerState} from "@react-stately/menu";
 
@@ -30,11 +30,11 @@ function $parcel$interopDefault(a) {
 
 
 
-function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
-    let triggerRef = (0, $5R0iF$useRef)(undefined);
+const $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)(function MenuTrigger(props, ref) {
+    let triggerRef = (0, $5R0iF$useRef)(null);
     let domRef = (0, $5R0iF$useDOMRef)(ref);
     let menuTriggerRef = domRef || triggerRef;
-    let menuRef = (0, $5R0iF$useRef)(undefined);
+    let menuRef = (0, $5R0iF$useRef)(null);
     let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
     let [menuTrigger, menu] = (0, $5R0iF$react).Children.toArray(children);
     let state = (0, $5R0iF$useMenuTriggerState)(props);
@@ -70,13 +70,25 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
         }),
         state: state
     };
+    // Close when clicking outside the root menu when a submenu is open.
+    let rootOverlayRef = (0, $5R0iF$useRef)(null);
+    let rootOverlayDomRef = (0, $5R0iF$unwrapDOMRef)(rootOverlayRef);
+    (0, $5R0iF$useInteractOutside)({
+        ref: rootOverlayDomRef,
+        onInteractOutside: ()=>{
+            state === null || state === void 0 ? void 0 : state.close();
+        },
+        isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
+    });
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.
     let overlay;
     if (isMobile) overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Tray), {
         state: state,
-        isFixedHeight: true
+        isFixedHeight: true,
+        ref: rootOverlayRef
     }, menu);
     else overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Popover), {
+        ref: rootOverlayRef,
         UNSAFE_style: {
             clipPath: 'unset',
             overflow: 'visible',
@@ -103,11 +115,7 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
     }, menuTrigger)), /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
         value: menuContext
     }, overlay));
-}
-/**
- * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
- * linking the Menu's open state with the trigger's press state.
- */ let $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)($aa0b855f135b86e3$var$MenuTrigger);
+});
 
 
 export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger};

package/dist/MenuTrigger.module.js

@@ -1,10 +1,10 @@
 import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2} from "./context.module.js";
-import "./vars.a1f9fd59.css";
+import "./vars.5486a4f0.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 {useDOMRef as $5R0iF$useDOMRef, useIsMobileDevice as $5R0iF$useIsMobileDevice, classNames as $5R0iF$classNames, unwrapDOMRef as $5R0iF$unwrapDOMRef, SlotProvider as $5R0iF$SlotProvider} from "@react-spectrum/utils";
 import {Tray as $5R0iF$Tray, Popover as $5R0iF$Popover} from "@react-spectrum/overlays";
-import {PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
-import $5R0iF$react, {useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment, forwardRef as $5R0iF$forwardRef} from "react";
+import {useInteractOutside as $5R0iF$useInteractOutside, PressResponder as $5R0iF$PressResponder} from "@react-aria/interactions";
+import $5R0iF$react, {forwardRef as $5R0iF$forwardRef, useRef as $5R0iF$useRef, Fragment as $5R0iF$Fragment} from "react";
 import {useMenuTrigger as $5R0iF$useMenuTrigger} from "@react-aria/menu";
 import {useMenuTriggerState as $5R0iF$useMenuTriggerState} from "@react-stately/menu";
 
@@ -30,11 +30,11 @@ function $parcel$interopDefault(a) {
 
 
 
-function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
-    let triggerRef = (0, $5R0iF$useRef)(undefined);
+const $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)(function MenuTrigger(props, ref) {
+    let triggerRef = (0, $5R0iF$useRef)(null);
     let domRef = (0, $5R0iF$useDOMRef)(ref);
     let menuTriggerRef = domRef || triggerRef;
-    let menuRef = (0, $5R0iF$useRef)(undefined);
+    let menuRef = (0, $5R0iF$useRef)(null);
     let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
     let [menuTrigger, menu] = (0, $5R0iF$react).Children.toArray(children);
     let state = (0, $5R0iF$useMenuTriggerState)(props);
@@ -70,13 +70,25 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
         }),
         state: state
     };
+    // Close when clicking outside the root menu when a submenu is open.
+    let rootOverlayRef = (0, $5R0iF$useRef)(null);
+    let rootOverlayDomRef = (0, $5R0iF$unwrapDOMRef)(rootOverlayRef);
+    (0, $5R0iF$useInteractOutside)({
+        ref: rootOverlayDomRef,
+        onInteractOutside: ()=>{
+            state === null || state === void 0 ? void 0 : state.close();
+        },
+        isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
+    });
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.
     let overlay;
     if (isMobile) overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Tray), {
         state: state,
-        isFixedHeight: true
+        isFixedHeight: true,
+        ref: rootOverlayRef
     }, menu);
     else overlay = /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $5R0iF$Popover), {
+        ref: rootOverlayRef,
         UNSAFE_style: {
             clipPath: 'unset',
             overflow: 'visible',
@@ -103,11 +115,7 @@ function $aa0b855f135b86e3$var$MenuTrigger(props, ref) {
     }, menuTrigger)), /*#__PURE__*/ (0, $5R0iF$react).createElement((0, $d94604d52c3e3feb$export$c7e742effb1c51e2).Provider, {
         value: menuContext
     }, overlay));
-}
-/**
- * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
- * linking the Menu's open state with the trigger's press state.
- */ let $aa0b855f135b86e3$export$27d2ad3c5815583e = /*#__PURE__*/ (0, $5R0iF$forwardRef)($aa0b855f135b86e3$var$MenuTrigger);
+});
 
 
 export {$aa0b855f135b86e3$export$27d2ad3c5815583e as MenuTrigger};

package/dist/MenuTrigger.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAcD,SAAS,kCAAY,KAA+B,EAAE,GAAwB;IAC5E,IAAI,aAAa,CAAA,GAAA,aAAK,EAAe;IACrC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,iBAAiB,UAAU;IAC/B,IAAI,UAAU,CAAA,GAAA,aAAK,EAAkB;IACrC,IAAI,YACF,QAAQ,SACR,QAAQ,qBACR,aAAa,iBACb,YAAY,yBACZ,aAAa,WACb,UAAU,SACX,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAEhC,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;iBAAC;IAAO,GAAG,OAAO;IAErE,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,MAAM,CAAC;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAC9C;IAEA,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,cAAc;QAChB,GAAG,SAAS;QACZ,KAAK;QACL,SAAS,MAAM,KAAK;uBACpB;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,cAAc,WAAW;YACvB,OAAO;YACP,WAAW;QACb,IAAI;QACJ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;YAAC,yBAAyB,CAAC;QAAQ;eACxE;IACF;IAEA,gFAAgF;IAChF,IAAI;IACJ,IAAI,UACF,wBACE,gCAAC,CAAA,GAAA,WAAG;QAAE,OAAO;QAAO,eAAA;OACjB;SAIL,wBACE,gCAAC,CAAA,GAAA,cAAM;QACL,cAAc;YAAC,UAAU;YAAS,UAAU;YAAW,QAAQ;YAAS,aAAa;QAAK;QAC1F,OAAO;QACP,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAA;QACA,YAAY;OACX;IAKP,qBACE,gCAAC,CAAA,GAAA,eAAO,uBACN,gCAAC,CAAA,GAAA,mBAAW;QAAE,OAAO;YAAC,cAAc;gBAAC,gBAAgB,YAAY;YAAW;QAAC;qBAC3E,gCAAC,CAAA,GAAA,qBAAa;QAAG,GAAG,gBAAgB;QAAE,KAAK;QAAgB,WAAW,MAAM,MAAM;OAC/E,6BAGL,gCAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT;AAEA;;;CAGC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/menu/src/MenuTrigger.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, SlotProvider, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {MenuContext} from './context';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder} from '@react-aria/interactions';\nimport React, {forwardRef, Fragment, useRef} from 'react';\nimport {SpectrumMenuTriggerProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useMenuTriggerState} from '@react-stately/menu';\n\nfunction MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  let triggerRef = useRef<HTMLElement>(undefined);\n  let domRef = useDOMRef(ref);\n  let menuTriggerRef = domRef || triggerRef;\n  let menuRef = useRef<HTMLDivElement>(undefined);\n  let {\n    children,\n    align = 'start',\n    shouldFlip = true,\n    direction = 'bottom',\n    closeOnSelect,\n    trigger = 'press'\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let state = useMenuTriggerState(props);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);\n\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n\n  let isMobile = useIsMobileDevice();\n  let menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: state.focusStrategy || true,\n    UNSAFE_style: isMobile ? {\n      width: '100%',\n      maxHeight: 'inherit'\n    } : undefined,\n    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n    state\n  };\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state} isFixedHeight>\n        {menu}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        state={state}\n        triggerRef={menuTriggerRef}\n        scrollRef={menuRef}\n        placement={initialPlacement}\n        hideArrow\n        shouldFlip={shouldFlip}>\n        {menu}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>\n        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>\n          {menuTrigger}\n        </PressResponder>\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </Fragment>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\nexport {_MenuTrigger as MenuTrigger};\n"],"names":[],"version":3,"file":"MenuTrigger.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAAwB;IAClH,IAAI,aAAa,CAAA,GAAA,aAAK,EAAe;IACrC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,iBAAiB,UAAU;IAC/B,IAAI,UAAU,CAAA,GAAA,aAAK,EAAkB;IACrC,IAAI,YACF,QAAQ,SACR,QAAQ,qBACR,aAAa,iBACb,YAAY,yBACZ,aAAa,WACb,UAAU,SACX,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAEhC,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;iBAAC;IAAO,GAAG,OAAO;IAErE,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,GAAG,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,OAAO;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,GAAG,UAAU,CAAC,EAAE,OAAO;IAC9C;IAEA,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,cAAc;QAChB,GAAG,SAAS;QACZ,KAAK;QACL,SAAS,MAAM,KAAK;uBACpB;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,cAAc,WAAW;YACvB,OAAO;YACP,WAAW;QACb,IAAI;QACJ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;YAAC,yBAAyB,CAAC;QAAQ;eACxE;IACF;IAEA,oEAAoE;IACpE,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC5B,IAAI,oBAAoB,CAAA,GAAA,mBAAW,EAAE;IACrC,CAAA,GAAA,yBAAiB,EAAE;QACjB,KAAK;QACL,mBAAmB;YACjB,kBAAA,4BAAA,MAAO,KAAK;QACd;QACA,YAAY,CAAC,MAAM,MAAM,IAAI,MAAM,iBAAiB,CAAC,MAAM,KAAK;IAClE;IAEA,gFAAgF;IAChF,IAAI;IACJ,IAAI,UACF,wBACE,gCAAC,CAAA,GAAA,WAAG;QAAE,OAAO;QAAO,eAAA;QAAc,KAAK;OACpC;SAIL,wBACE,gCAAC,CAAA,GAAA,cAAM;QACL,KAAK;QACL,cAAc;YAAC,UAAU;YAAS,UAAU;YAAW,QAAQ;YAAS,aAAa;QAAK;QAC1F,OAAO;QACP,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAA;QACA,YAAY;OACX;IAKP,qBACE,gCAAC,CAAA,GAAA,eAAO,uBACN,gCAAC,CAAA,GAAA,mBAAW;QAAE,OAAO;YAAC,cAAc;gBAAC,gBAAgB,YAAY;YAAW;QAAC;qBAC3E,gCAAC,CAAA,GAAA,qBAAa;QAAG,GAAG,gBAAgB;QAAE,KAAK;QAAgB,WAAW,MAAM,MAAM;OAC/E,6BAGL,gCAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT","sources":["packages/@react-spectrum/menu/src/MenuTrigger.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, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {MenuContext} from './context';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder, useInteractOutside} from '@react-aria/interactions';\nimport React, {forwardRef, Fragment, useRef} from 'react';\nimport {SpectrumMenuTriggerProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useMenuTriggerState} from '@react-stately/menu';\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nexport const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  let triggerRef = useRef<HTMLElement>(null);\n  let domRef = useDOMRef(ref);\n  let menuTriggerRef = domRef || triggerRef;\n  let menuRef = useRef<HTMLDivElement>(null);\n  let {\n    children,\n    align = 'start',\n    shouldFlip = true,\n    direction = 'bottom',\n    closeOnSelect,\n    trigger = 'press'\n  } = props;\n\n  let [menuTrigger, menu] = React.Children.toArray(children);\n  let state = useMenuTriggerState(props);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);\n\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n\n  let isMobile = useIsMobileDevice();\n  let menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: state.focusStrategy || true,\n    UNSAFE_style: isMobile ? {\n      width: '100%',\n      maxHeight: 'inherit'\n    } : undefined,\n    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n    state\n  };\n\n  // Close when clicking outside the root menu when a submenu is open.\n  let rootOverlayRef = useRef(null);\n  let rootOverlayDomRef = unwrapDOMRef(rootOverlayRef);\n  useInteractOutside({\n    ref: rootOverlayDomRef,\n    onInteractOutside: () => {\n      state?.close();\n    },\n    isDisabled: !state.isOpen || state.expandedKeysStack.length === 0\n  });\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state} isFixedHeight ref={rootOverlayRef}>\n        {menu}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        ref={rootOverlayRef}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        state={state}\n        triggerRef={menuTriggerRef}\n        scrollRef={menuRef}\n        placement={initialPlacement}\n        hideArrow\n        shouldFlip={shouldFlip}>\n        {menu}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>\n        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>\n          {menuTrigger}\n        </PressResponder>\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>\n        {overlay}\n      </MenuContext.Provider>\n    </Fragment>\n  );\n});\n"],"names":[],"version":3,"file":"MenuTrigger.module.js.map"}

package/dist/SubmenuTrigger.main.js

@@ -1,5 +1,5 @@
 var $cac834c4bc0a51d3$exports = require("./context.main.js");
-require("./vars.a1f9fd59.css");
+require("./vars.5486a4f0.css");
 var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
 var $esjnM$reactspectrumutils = require("@react-spectrum/utils");
 var $esjnM$reactariautils = require("@react-aria/utils");
@@ -41,7 +41,7 @@ $parcel$export(module.exports, "SubmenuTrigger", () => $86ed235c4695ff3f$export$
 
 
 function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
-    let triggerRef = (0, $esjnM$react.useRef)(undefined);
+    let triggerRef = (0, $esjnM$react.useRef)(null);
     let { children: children, targetKey: targetKey } = props;
     let [menuTrigger, menu] = (0, ($parcel$interopDefault($esjnM$react))).Children.toArray(children);
     let { popoverContainer: popoverContainer, trayContainerRef: trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState: rootMenuTriggerState } = (0, $cac834c4bc0a51d3$exports.useMenuStateContext)();
@@ -61,10 +61,12 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
     let mobileSubmenuKeyDown = (e)=>{
         switch(e.key){
             case 'ArrowLeft':
-                if (direction === 'ltr') triggerRef.current.focus();
+                var _triggerRef_current;
+                if (direction === 'ltr') (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
                 break;
             case 'ArrowRight':
-                if (direction === 'rtl') triggerRef.current.focus();
+                var _triggerRef_current1;
+                if (direction === 'rtl') (_triggerRef_current1 = triggerRef.current) === null || _triggerRef_current1 === void 0 ? void 0 : _triggerRef_current1.focus();
                 break;
         }
     };