Use PressResponder in RAC overlays and document MenuTrigger long press (#5065)

Author: devongovett

packages/@react-aria/interactions/src/PressResponder.tsx

@@ -52,3 +52,11 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
     </PressResponderContext.Provider>
   );
 });
+
+export function ClearPressResponder({children}: {children: ReactNode}) {
+  return (
+    <PressResponderContext.Provider value={undefined}>
+      {children}
+    </PressResponderContext.Provider>
+  );
+}

packages/@react-aria/interactions/src/index.ts

@@ -11,7 +11,7 @@
  */
 
 export {Pressable} from './Pressable';
-export {PressResponder} from './PressResponder';
+export {PressResponder, ClearPressResponder} from './PressResponder';
 export {useFocus} from './useFocus';
 export {
   isFocusVisible,

packages/@react-aria/overlays/src/Overlay.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ClearPressResponder} from '@react-aria/interactions';
 import {FocusScope} from '@react-aria/focus';
 import React, {ReactNode, useContext, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
@@ -53,23 +54,23 @@ export function Overlay(props: OverlayProps) {
     return null;
   }
 
-  let contents;
+  let contents = props.children;
   if (!props.disableFocusManagement) {
     contents = (
-      <OverlayContext.Provider value={contextValue}>
-        <FocusScope restoreFocus contain={contain && !isExiting}>
-          {props.children}
-        </FocusScope>
-      </OverlayContext.Provider>
-    );
-  } else {
-    contents = (
-      <OverlayContext.Provider value={contextValue}>
-        {props.children}
-      </OverlayContext.Provider>
+      <FocusScope restoreFocus contain={contain && !isExiting}>
+        {contents}
+      </FocusScope>
     );
   }
 
+  contents = (
+    <OverlayContext.Provider value={contextValue}>
+      <ClearPressResponder>
+        {contents}
+      </ClearPressResponder>
+    </OverlayContext.Provider>
+  );
+
   return ReactDOM.createPortal(contents, portalContainer);
 }
 

packages/@react-aria/utils/src/useSyncRef.ts

@@ -26,5 +26,5 @@ export function useSyncRef<T>(context: ContextValue<T>, ref: RefObject<T>) {
         context.ref.current = null;
       };
     }
-  }, [context, ref]);
+  });
 }

packages/react-aria-components/docs/Menu.mdx

@@ -594,6 +594,23 @@ import {Text, Keyboard} from 'react-aria-components';
 </MyMenuButton>
 ```
 
+## Long press
+
+By default, MenuTrigger opens by pressing the trigger element or activating it via the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys. However, there may be cases in which your trigger element should perform a separate default action on press, and should only display the Menu when long pressed. This behavior can be changed by providing `"longPress"` to the `trigger` prop. With this prop, the Menu will only be opened upon pressing and holding the trigger element or by using the <Keyboard>Option</Keyboard> (<Keyboard>Alt</Keyboard> on Windows) + <Keyboard>Down Arrow</Keyboard>/<Keyboard>Up Arrow</Keyboard> keys while focusing the trigger element.
+
+```tsx example
+<MenuTrigger trigger="longPress">
+  <Button onPress={() => alert('crop')}>Crop</Button>
+  <Popover>
+    <Menu onAction={alert}>
+      <Item id="rotate">Rotate</Item>
+      <Item id="slice">Slice</Item>
+      <Item id="clone-stamp">Clone stamp</Item>
+    </Menu>
+  </Popover>
+</MenuTrigger>
+```
+
 ## Disabled items
 
 `Menu` supports marking items as disabled using the `disabledKeys` prop. Each key in this list

packages/react-aria-components/src/Dialog.tsx

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDialogProps, useDialog, useOverlayTrigger} from 'react-aria';
-import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef} from 'react';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
@@ -48,10 +48,11 @@ export function DialogTrigger(props: DialogTriggerProps) {
       values={[
         [OverlayTriggerStateContext, state],
         [DialogContext, overlayProps],
-        [ButtonContext, {...triggerProps, isPressed: state.isOpen, ref: buttonRef}],
         [PopoverContext, {triggerRef: buttonRef}]
       ]}>
-      {props.children}
+      <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
+        {props.children}
+      </PressResponder>
     </Provider>
   );
 }
@@ -78,7 +79,6 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
       className={props.className ?? 'react-aria-Dialog'}>
       <Provider
         values={[
-          [ButtonContext, undefined],
           // TODO: clear context within dialog content?
           [HeadingContext, {...titleProps, level: 2}]
         ]}>

packages/react-aria-components/src/Menu.tsx

@@ -14,13 +14,13 @@
 import {AriaMenuProps, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
 import {BaseCollection, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
-import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {Header} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
@@ -45,11 +45,12 @@ export function MenuTrigger(props: MenuTriggerProps) {
     <Provider
       values={[
         [MenuContext, menuProps],
-        [ButtonContext, {...menuTriggerProps, ref, isPressed: state.isOpen}],
         [OverlayTriggerStateContext, state],
         [PopoverContext, {triggerRef: ref, placement: 'bottom start'}]
       ]}>
-      {props.children}
+      <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
+        {props.children}
+      </PressResponder>
     </Provider>
   );
 }