@react-spectrum/menu 3.21.0 → 3.21.2

package/dist/vars.5486a4f0.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;;AAWA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;;AAQA;;;;;;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.5486a4f0.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/menu",
-  "version": "3.21.0",
+  "version": "3.21.2",
   "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.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/menu": "^3.16.0",
-    "@react-aria/overlays": "^3.24.0",
-    "@react-aria/separator": "^3.4.4",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/button": "^3.16.9",
-    "@react-spectrum/layout": "^3.6.10",
-    "@react-spectrum/overlays": "^5.7.0",
-    "@react-spectrum/text": "^3.5.10",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-stately/collections": "^3.12.0",
-    "@react-stately/menu": "^3.9.0",
-    "@react-stately/overlays": "^3.6.12",
-    "@react-stately/tree": "^3.8.6",
-    "@react-types/menu": "^3.9.13",
-    "@react-types/overlays": "^3.8.11",
-    "@react-types/shared": "^3.26.0",
-    "@spectrum-icons/ui": "^3.6.11",
-    "@spectrum-icons/workflow": "^4.2.16",
+    "@react-aria/focus": "^3.20.0",
+    "@react-aria/i18n": "^3.12.6",
+    "@react-aria/interactions": "^3.24.0",
+    "@react-aria/menu": "^3.18.0",
+    "@react-aria/overlays": "^3.26.0",
+    "@react-aria/separator": "^3.4.6",
+    "@react-aria/utils": "^3.28.0",
+    "@react-spectrum/button": "^3.16.11",
+    "@react-spectrum/layout": "^3.6.12",
+    "@react-spectrum/overlays": "^5.7.2",
+    "@react-spectrum/text": "^3.5.12",
+    "@react-spectrum/utils": "^3.12.2",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/menu": "^3.9.2",
+    "@react-stately/overlays": "^3.6.14",
+    "@react-stately/tree": "^3.8.8",
+    "@react-types/menu": "^3.9.15",
+    "@react-types/overlays": "^3.8.13",
+    "@react-types/shared": "^3.28.0",
+    "@spectrum-icons/ui": "^3.6.13",
+    "@spectrum-icons/workflow": "^4.2.18",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

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/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();
@@ -65,15 +69,6 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
     let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
     hasOpenSubmenu = nextMenuLevel != null;
   }
-  useInteractOutside({
-    ref: domRef,
-    onInteractOutside: (e) => {
-      if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {
-        rootMenuTriggerState?.close();
-      }
-    },
-    isDisabled: isSubmenu || !hasOpenSubmenu
-  });
 
   return (
     <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
@@ -126,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;
@@ -216,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/MenuTrigger.tsx

@@ -10,19 +10,23 @@
  * 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>) {
+/**
+ * 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;
@@ -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/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"}