Add Support for longPress to MenuTrigger (#2678)

* add support for longpress to MenuTrigger

* add basic tests for MenuTrigger's longPress behavior

* more tests for MenuTrigger's longPress support

* more tests for MenuTrigger's longPress support

* make press a default value for trigger

* fix lint issues

* simple fix

* remove isDiabled: false

* more tests and simple fixes

* fix lint issues

* fix test

* fix lint issues

* fix lint issues

* Update packages/dev/test-utils/src/events.ts

Co-authored-by: Robert Snow <[email protected]>

* Require alt key, and add a11y description

* Add hold affordance to action button when long press is enabled

* Fix combobox tests

Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Devon Govett <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: 4 people

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -39,19 +39,16 @@ describe('useComboBox', function () {
   let props = {
     label: 'test label',
     popoverRef: {
-      current: {}
+      current: document.createElement('div')
     },
     buttonRef: {
-      current: {}
+      current: document.createElement('button')
     },
     inputRef: {
-      current: {
-        contains: jest.fn(),
-        focus: jest.fn()
-      }
+      current: document.createElement('input')
     },
     listBoxRef: {
-      current: {}
+      current: document.createElement('div')
     },
     layout: mockLayout
   };

packages/@react-aria/menu/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "longPressMessage": "Long press or press Alt + ArrowDown to open menu"
+}

packages/@react-aria/menu/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/i18n": "^3.3.4",
     "@react-aria/interactions": "^3.7.0",
     "@react-aria/overlays": "^3.7.3",
     "@react-aria/selection": "^3.7.0",

packages/@react-aria/menu/src/useMenuTrigger.ts

@@ -12,15 +12,22 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {HTMLAttributes, RefObject} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {MenuTriggerState} from '@react-stately/menu';
-import {useId} from '@react-aria/utils';
+import {MenuTriggerType} from '@react-types/menu';
+import {mergeProps, useId} from '@react-aria/utils';
+import {useLongPress} from '@react-aria/interactions';
+import {useMessageFormatter} from '@react-aria/i18n';
 import {useOverlayTrigger} from '@react-aria/overlays';
 
 interface MenuTriggerAriaProps {
   /** The type of menu that the menu trigger opens. */
   type?: 'menu' | 'listbox',
   /** Whether menu trigger is disabled. */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  /** How menu is triggered. */
+  trigger?: MenuTriggerType
 }
 
 interface MenuTriggerAria {
@@ -39,7 +46,8 @@ interface MenuTriggerAria {
 export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerState, ref: RefObject<HTMLElement>): MenuTriggerAria {
   let {
     type = 'menu' as MenuTriggerAriaProps['type'],
-    isDisabled
+    isDisabled,
+    trigger = 'press'
   } = props;
 
   let menuTriggerId = useId();
@@ -50,11 +58,19 @@ export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerSt
       return;
     }
 
+    if (trigger === 'longPress' && !e.altKey) {
+      return;
+    }
+
     if (ref && ref.current) {
       switch (e.key) {
-        case 'ArrowDown':
         case 'Enter':
         case ' ':
+          if (trigger === 'longPress') {
+            return;
+          }
+          // fallthrough
+        case 'ArrowDown':
           // Stop propagation, unless it would already be handled by useKeyboard.
           if (!('continuePropagation' in e)) {
             e.stopPropagation();
@@ -73,23 +89,39 @@ export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerSt
     }
   };
 
+  let formatMessage = useMessageFormatter(intlMessages);
+  let {longPressProps} = useLongPress({
+    accessibilityDescription: formatMessage('longPressMessage'),
+    onLongPressStart() {
+      state.close();
+    },
+    onLongPress() {
+      state.open('first');
+    }
+  });
+
+  let pressProps =  {
+    onPressStart(e) {
+      // For consistency with native, open the menu on mouse/key down, but touch up.
+      if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {
+        // If opened with a screen reader, auto focus the first item.
+        // Otherwise, the menu itself will be focused.
+        state.toggle(e.pointerType === 'virtual' ? 'first' : null);
+      }
+    },
+    onPress(e) {
+      if (e.pointerType === 'touch' && !isDisabled) {
+        state.toggle();
+      }
+    }
+  };
+
+  triggerProps = mergeProps(triggerProps, trigger === 'press' ? pressProps : longPressProps);
+
   return {
     menuTriggerProps: {
       ...triggerProps,
       id: menuTriggerId,
-      onPressStart(e) {
-        // For consistency with native, open the menu on mouse/key down, but touch up.
-        if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {
-          // If opened with a screen reader, auto focus the first item.
-          // Otherwise, the menu itself will be focused.
-          state.toggle(e.pointerType === 'virtual' ? 'first' : null);
-        }
-      },
-      onPress(e) {
-        if (e.pointerType === 'touch' && !isDisabled) {
-          state.toggle();
-        }
-      },
       onKeyDown
     },
     menuProps: {

packages/@react-spectrum/button/src/ActionButton.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
@@ -31,6 +32,8 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLBu
     staticColor,
     children,
     autoFocus,
+    // @ts-ignore (private)
+    holdAffordance,
     ...otherProps
   } = props;
 
@@ -62,6 +65,9 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLBu
             styleProps.className
           )
         }>
+        {holdAffordance &&
+          <CornerTriangle UNSAFE_className={classNames(styles, 'spectrum-ActionButton-hold')} />
+        }
         <SlotProvider
           slots={{
             icon: {

packages/@react-spectrum/menu/src/MenuTrigger.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
@@ -35,13 +35,14 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
     align = 'start',
     shouldFlip = true,
     direction = 'bottom',
-    closeOnSelect
+    closeOnSelect,
+    trigger = 'press'
   } = props;
 
   let [menuTrigger, menu] = React.Children.toArray(children);
   let state = useMenuTriggerState(props);
 
-  let {menuTriggerProps, menuProps} = useMenuTrigger({}, state, menuTriggerRef);
+  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);
 
   let initialPlacement: Placement;
   switch (direction) {
@@ -114,9 +115,11 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
 
   return (
     <Fragment>
-      <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>
-        {menuTrigger}
-      </PressResponder>
+      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>
+        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>
+          {menuTrigger}
+        </PressResponder>
+      </SlotProvider>
       <MenuContext.Provider value={menuContext}>
         {overlay}
       </MenuContext.Provider>

packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx

@@ -528,6 +528,10 @@ storiesOf('MenuTrigger', module)
       </Menu>
     )
   )
+  .add(
+    'MenuTrigger with trigger="longPress"',
+    () => render(defaultMenu, {trigger: 'longPress'})
+  )
   .add('controlled isOpen',
     () => <ControlledOpeningMenuTrigger />
   );