@react-spectrum/menu 3.20.4 → 3.21.0

package/src/Menu.tsx

@@ -41,15 +41,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,12 +59,17 @@ 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;
+  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];
+  let hasOpenSubmenu = false;
+  if (nextMenuLevelKey != null) {
+    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
+    hasOpenSubmenu = nextMenuLevel != null;
+  }
   useInteractOutside({
     ref: domRef,
     onInteractOutside: (e) => {
-      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {
-        rootMenuTriggerState.close();
+      if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {
+        rootMenuTriggerState?.close();
       }
     },
     isDisabled: isSubmenu || !hasOpenSubmenu
@@ -141,7 +146,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 +164,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(() => {

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

@@ -23,10 +23,10 @@ import {useMenuTrigger} from '@react-aria/menu';
 import {useMenuTriggerState} from '@react-stately/menu';
 
 function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
-  let triggerRef = useRef<HTMLElement>(undefined);
+  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',

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);
 }