@react-spectrum/menu 3.20.5 → 3.21.1

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/menu",
-  "version": "3.20.5",
+  "version": "3.21.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,27 +36,27 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/menu": "^3.15.5",
-    "@react-aria/overlays": "^3.23.4",
-    "@react-aria/separator": "^3.4.3",
-    "@react-aria/utils": "^3.25.3",
-    "@react-spectrum/button": "^3.16.8",
-    "@react-spectrum/layout": "^3.6.9",
-    "@react-spectrum/overlays": "^5.6.5",
-    "@react-spectrum/text": "^3.5.9",
-    "@react-spectrum/utils": "^3.11.11",
-    "@react-stately/collections": "^3.11.0",
-    "@react-stately/menu": "^3.8.3",
-    "@react-stately/overlays": "^3.6.11",
-    "@react-stately/tree": "^3.8.5",
-    "@react-types/menu": "^3.9.12",
-    "@react-types/overlays": "^3.8.10",
-    "@react-types/shared": "^3.25.0",
-    "@spectrum-icons/ui": "^3.6.10",
-    "@spectrum-icons/workflow": "^4.2.15",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/menu": "^3.17.0",
+    "@react-aria/overlays": "^3.25.0",
+    "@react-aria/separator": "^3.4.5",
+    "@react-aria/utils": "^3.27.0",
+    "@react-spectrum/button": "^3.16.10",
+    "@react-spectrum/layout": "^3.6.11",
+    "@react-spectrum/overlays": "^5.7.1",
+    "@react-spectrum/text": "^3.5.11",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-stately/collections": "^3.12.1",
+    "@react-stately/menu": "^3.9.1",
+    "@react-stately/overlays": "^3.6.13",
+    "@react-stately/tree": "^3.8.7",
+    "@react-types/menu": "^3.9.14",
+    "@react-types/overlays": "^3.8.12",
+    "@react-types/shared": "^3.27.0",
+    "@spectrum-icons/ui": "^3.6.12",
+    "@spectrum-icons/workflow": "^4.2.17",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -64,11 +64,11 @@
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/ActionMenu.tsx

@@ -23,7 +23,10 @@ import {SpectrumActionMenuProps} from '@react-types/menu';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSlotProps} from '@react-spectrum/utils';
 
-function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
+ */
+export const ActionMenu = forwardRef(function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   props = useSlotProps(props, 'actionMenu');
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
   let buttonProps = filterDOMProps(props, {labelable: true});
@@ -52,10 +55,4 @@ function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: Fo
         onAction={props.onAction} />
     </MenuTrigger>
   );
-}
-
-/**
- * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
- */
-const _ActionMenu = forwardRef(ActionMenu) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;
-export {_ActionMenu as ActionMenu};
+}) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;

package/src/ContextualHelpTrigger.tsx

@@ -11,10 +11,10 @@
  */
 
 import {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {DOMRefValue, ItemProps, Key} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
-import {ItemProps, Key} from '@react-types/shared';
 import {Popover} from '@react-spectrum/overlays';
 import React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
@@ -41,9 +41,9 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let {isUnavailable = false, targetKey} = props;
 
   let triggerRef = useRef<HTMLLIElement>(null);
-  let popoverRef = useRef(null);
-  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
+  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);
+  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});
   let submenuRef = unwrapDOMRef(popoverRef);
   let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
@@ -85,7 +85,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let [, content] = props.children as [ReactElement, ReactElement];
 
   let onBlurWithin = (e) => {
-    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
+    if (e.relatedTarget && popoverRef.current && (!popoverRef.current.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
       if (submenuTriggerState.isOpen) {
         submenuTriggerState.close();
       }
@@ -143,7 +143,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
         onDismissButtonPress={onDismissButtonPress}
         onBlurWithin={onBlurWithin}
-        container={popoverContainer}
+        container={popoverContainer!}
         state={submenuTriggerState}
         ref={popoverRef}
         triggerRef={triggerRef}
@@ -151,7 +151,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
         containerPadding={0}
         hideArrow
         enableBothDismissButtons>
-        <FocusScope restoreFocus>
+        <FocusScope restoreFocus contain>
           {content}
         </FocusScope>
       </Popover>
@@ -189,5 +189,5 @@ ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props:
   };
 };
 
-let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
+let _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
 export {_Item as ContextualHelpTrigger};

package/src/Menu.tsx

@@ -24,12 +24,16 @@ import {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/ut
 import React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';
 import {SpectrumMenuProps} from '@react-types/menu';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useInteractOutside} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMenu} from '@react-aria/menu';
 import {useTreeState} from '@react-stately/tree';
 
-function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Menus display a list of actions or options that a user can choose.
+ */
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+export const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {
   let isSubmenu = true;
   let contextProps = useContext(MenuContext);
   let parentMenuContext = useMenuStateContext();
@@ -41,15 +45,15 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
     ...mergeProps(contextProps, props)
   };
   let domRef = useDOMRef(ref);
-  let [popoverContainer, setPopoverContainer] = useState(null);
-  let trayContainerRef = useRef(null);
+  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);
+  let trayContainerRef = useRef<HTMLDivElement | null>(null);
   let state = useTreeState(completeProps);
   let submenuRef = useRef<HTMLDivElement>(null);
   let {menuProps} = useMenu(completeProps, state, domRef);
   let {styleProps} = useStyleProps(completeProps);
   useSyncRef(contextProps, domRef);
   let [leftOffset, setLeftOffset] = useState({left: 0});
-  let prevPopoverContainer = useRef(null);
+  let prevPopoverContainer = useRef<HTMLElement | null>(null);
   useEffect(() => {
     if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
       prevPopoverContainer.current = popoverContainer;
@@ -59,16 +63,12 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
   }, [leftOffset, popoverContainer]);
 
   let menuLevel = contextProps.submenuLevel ?? -1;
-  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;
-  useInteractOutside({
-    ref: domRef,
-    onInteractOutside: (e) => {
-      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {
-        rootMenuTriggerState.close();
-      }
-    },
-    isDisabled: isSubmenu || !hasOpenSubmenu
-  });
+  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];
+  let hasOpenSubmenu = false;
+  if (nextMenuLevelKey != null) {
+    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
+    hasOpenSubmenu = nextMenuLevel != null;
+  }
 
   return (
     <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
@@ -121,7 +121,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
       </FocusScope>
     </MenuStateContext.Provider>
   );
-}
+}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 
 export function TrayHeaderWrapper(props) {
   let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;
@@ -141,7 +141,7 @@ export function TrayHeaderWrapper(props) {
     }
   }, [hasOpenSubmenu, isMobile]);
 
-  let timeoutRef = useRef(null);
+  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   let handleBackButtonPress = () => {
     setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
     timeoutRef.current = setTimeout(() => {
@@ -159,7 +159,7 @@ export function TrayHeaderWrapper(props) {
 
   // When opening submenu in tray, focus the first item in the submenu after animation completes
   // This fixes an issue with iOS VO where the closed submenu was getting focus
-  let focusTimeoutRef = useRef(null);
+  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {
       focusTimeoutRef.current = setTimeout(() => {
@@ -211,11 +211,3 @@ export function TrayHeaderWrapper(props) {
     </>
   );
 }
-
-/**
- * Menus display a list of actions or options that a user can choose.
- */
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-const _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {_Menu as Menu};

package/src/MenuItem.tsx

@@ -60,7 +60,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
   let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
 
   if (isSubmenuTrigger) {
-    isUnavailable = submenuTriggerContext.isUnavailable;
+    isUnavailable = submenuTriggerContext!.isUnavailable;
   }
 
   let isDisabled = state.disabledKeys.has(key);

package/src/MenuSection.tsx

@@ -40,7 +40,8 @@ export function MenuSection<T>(props: MenuSectionProps<T>) {
   let firstSectionKey = state.collection.getFirstKey();
   let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.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 (
     <Fragment>

package/src/MenuTrigger.tsx

@@ -10,23 +10,27 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
 import {DOMRef} from '@react-types/shared';
 import {MenuContext} from './context';
 import {Placement} from '@react-types/overlays';
 import {Popover, Tray} from '@react-spectrum/overlays';
-import {PressResponder} from '@react-aria/interactions';
+import {PressResponder, useInteractOutside} from '@react-aria/interactions';
 import React, {forwardRef, Fragment, useRef} from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {useMenuTrigger} from '@react-aria/menu';
 import {useMenuTriggerState} from '@react-stately/menu';
 
-function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
-  let triggerRef = useRef<HTMLElement>(undefined);
+/**
+ * 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.
+ */
+export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
+  let triggerRef = useRef<HTMLElement>(null);
   let domRef = useDOMRef(ref);
   let menuTriggerRef = domRef || triggerRef;
-  let menuRef = useRef<HTMLDivElement>(undefined);
+  let menuRef = useRef<HTMLDivElement>(null);
   let {
     children,
     align = 'start',
@@ -70,17 +74,29 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
     state
   };
 
+  // Close when clicking outside the root menu when a submenu is open.
+  let rootOverlayRef = useRef(null);
+  let rootOverlayDomRef = unwrapDOMRef(rootOverlayRef);
+  useInteractOutside({
+    ref: rootOverlayDomRef,
+    onInteractOutside: () => {
+      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 = (
-      <Tray state={state} isFixedHeight>
+      <Tray state={state} isFixedHeight ref={rootOverlayRef}>
         {menu}
       </Tray>
     );
   } else {
     overlay = (
       <Popover
+        ref={rootOverlayRef}
         UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
         state={state}
         triggerRef={menuTriggerRef}
@@ -105,11 +121,4 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
       </MenuContext.Provider>
     </Fragment>
   );
-}
-
-/**
- * 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 _MenuTrigger = forwardRef(MenuTrigger);
-export {_MenuTrigger as MenuTrigger};
+});

package/src/SubmenuTrigger.tsx

@@ -33,15 +33,15 @@ interface SubmenuTriggerProps {
 export interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}
 
 function SubmenuTrigger(props: SubmenuTriggerProps) {
-  let triggerRef = useRef<HTMLDivElement>(undefined);
+  let triggerRef = useRef<HTMLDivElement>(null);
   let {
     children,
     targetKey
   } = props;
 
   let [menuTrigger, menu] = React.Children.toArray(children);
-  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext();
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
+  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
     submenuRef: menuRef
@@ -59,12 +59,12 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
     switch (e.key) {
       case 'ArrowLeft':
         if (direction === 'ltr') {
-          triggerRef.current.focus();
+          triggerRef.current?.focus();
         }
         break;
       case 'ArrowRight':
         if (direction === 'rtl') {
-          triggerRef.current.focus();
+          triggerRef.current?.focus();
         }
         break;
     }
@@ -90,7 +90,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
         {...popoverProps}
         onDismissButtonPress={onDismissButtonPress}
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
-        container={popoverContainer}
+        container={popoverContainer!}
         containerPadding={0}
         enableBothDismissButtons
         UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}
@@ -150,5 +150,5 @@ SubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps
   };
 };
 
-let _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
+let _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
 export {_SubmenuTrigger as SubmenuTrigger};

package/src/context.ts

@@ -11,7 +11,7 @@
  */
 
 import {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';
-import React, {HTMLAttributes, MutableRefObject, useContext} from 'react';
+import React, {HTMLAttributes, useContext} from 'react';
 import {RootMenuTriggerState} from '@react-stately/menu';
 import {TreeState} from '@react-stately/tree';
 
@@ -20,7 +20,7 @@ export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'aut
   closeOnSelect?: boolean,
   shouldFocusWrap?: boolean,
   autoFocus?: boolean | FocusStrategy,
-  ref?: MutableRefObject<HTMLDivElement>,
+  ref?: RefObject<HTMLDivElement | null>,
   state?: RootMenuTriggerState,
   onBackButtonPress?: () => void,
   submenuLevel?: number
@@ -34,7 +34,7 @@ export function useMenuContext(): MenuContextValue {
 
 export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents, 'onPressStart' | 'onPress'>, Pick<HoverEvents, 'onHoverChange'>, Pick<KeyboardEvents, 'onKeyDown'> {
   isUnavailable?: boolean,
-  triggerRef?: MutableRefObject<HTMLElement>,
+  triggerRef?: RefObject<HTMLElement | null>,
   'aria-expanded'?: boolean | 'true' | 'false',
   'aria-controls'?: string,
   'aria-haspopup'?: 'dialog' | 'menu',
@@ -43,21 +43,21 @@ export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents,
 
 export const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
 
-export function useSubmenuTriggerContext(): SubmenuTriggerContextValue {
+export function useSubmenuTriggerContext() {
   return useContext(SubmenuTriggerContext);
 }
 
 export interface MenuStateContextValue<T> {
-  state?: TreeState<T>,
-  popoverContainer?: HTMLElement,
-  trayContainerRef?: RefObject<HTMLElement | null>,
-  menu?: RefObject<HTMLDivElement | null>,
-  submenu?: RefObject<HTMLDivElement | null>,
+  state: TreeState<T>,
+  popoverContainer: HTMLElement | null,
+  trayContainerRef: RefObject<HTMLElement | null>,
+  menu: RefObject<HTMLDivElement | null>,
+  submenu: RefObject<HTMLDivElement | null>,
   rootMenuTriggerState?: RootMenuTriggerState
 }
 
-export const MenuStateContext = React.createContext<MenuStateContextValue<any>>(undefined);
+export const MenuStateContext = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
 
-export function useMenuStateContext<T>(): MenuStateContextValue<T> {
+export function useMenuStateContext() {
   return useContext(MenuStateContext);
 }

package/dist/vars.a1f9fd59.css.map

@@ -1 +0,0 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;;AAWA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAKE;;;;AAKF;;;;;;;;AAOE;;;;;;;;AAQA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;;;;AAKE;;;;AAAA;;;;AAKF;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF","sources":["packages/@adobe/spectrum-css-temp/components/menu/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.a1f9fd59.css.map"}