Implement useMove, use it in Slider & SplitView

package.json

@@ -79,7 +79,7 @@
     "@storybook/react": "^5.2.1",
     "@testing-library/dom": "^7.23.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^10.4.9",
+    "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^3.4.1",
     "@testing-library/user-event": "^12.1.3",
     "@types/react": "^16.9.23",

packages/@adobe/spectrum-css-temp/components/slider/index.css

@@ -55,6 +55,7 @@ governing permissions and limitations under the License.
   display: block;
 
   user-select: none;
+  touch-action: none;
 }
 
 .spectrum-Slider-controls {

packages/@adobe/spectrum-css-temp/components/splitview/index.css

@@ -43,6 +43,8 @@ governing permissions and limitations under the License.
   width: var(--spectrum-rail-gripper-width);
   height: var(--spectrum-rail-gripper-height);
   border-width: var(--spectrum-rail-gripper-border-width-vertical) var(--spectrum-rail-gripper-border-width-horizontal);
+
+  touch-action: none;
 }
 
 .spectrum-SplitView-splitter {
@@ -52,6 +54,8 @@ governing permissions and limitations under the License.
   /* Prevent text selection while dragging */
   user-select: none;
 
+  touch-action: none;
+
   width: var(--spectrum-rail-handle-width);
   height: 100%;
   z-index: 1;

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

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './usePress';
-export * from './useInteractOutside';
 export * from './Pressable';
 export * from './PressResponder';
-export * from './useKeyboard';
 export * from './useFocus';
-export * from './useFocusWithin';
 export * from './useFocusVisible';
+export * from './useFocusWithin';
 export * from './useHover';
+export * from './useInteractOutside';
+export * from './useKeyboard';
+export * from './useMove';
+export * from './usePress';

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

@@ -0,0 +1,223 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {disableTextSelection, restoreTextSelection}  from './textSelection';
+import {HTMLAttributes, useMemo, useRef} from 'react';
+import {useGlobalListeners} from '@react-aria/utils';
+
+export interface BaseMoveEvent {
+  pointerType: 'mouse' | 'pen' | 'touch' | 'keyboard'
+}
+
+export interface MoveStartEvent extends BaseMoveEvent{
+  type: 'movestart'
+}
+
+export interface MoveMoveEvent extends BaseMoveEvent{
+  type: 'move',
+  deltaX: number,
+  deltaY: number
+}
+
+export interface MoveEndEvent extends BaseMoveEvent{
+  type: 'moveend'
+}
+
+export type MoveEvent = MoveStartEvent | MoveMoveEvent | MoveEndEvent;
+
+export interface MoveProps {
+  onMoveStart?: (e: MoveStartEvent) => void,
+  onMove: (e: MoveMoveEvent) => void,
+  onMoveEnd?: (e: MoveEndEvent) => void
+}
+
+export function useMove(props: MoveProps): HTMLAttributes<HTMLElement> {
+  let {onMoveStart, onMove, onMoveEnd} = props;
+
+  let state = useRef<{
+    didMove: boolean,
+    lastPosition: {pageX: number, pageY: number} | null,
+    id: number | null
+  }>({didMove: false, lastPosition: null, id: null});
+
+  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
+
+  let moveProps = useMemo(() => {
+    let moveProps: HTMLAttributes<HTMLElement> = {};
+
+    let start = () => {
+      disableTextSelection();
+      state.current.didMove = false;
+    };
+    let move = (pointerType: BaseMoveEvent['pointerType'], deltaX: number, deltaY: number) => {
+      if (!state.current.didMove) {
+        state.current.didMove = true;
+        onMoveStart?.({
+          type: 'movestart',
+          pointerType
+        });
+      }
+      onMove({
+        type: 'move',
+        pointerType,
+        deltaX: deltaX,
+        deltaY: deltaY
+      });
+    };
+    let end = (pointerType: BaseMoveEvent['pointerType']) => {
+      restoreTextSelection();
+      if (state.current.didMove) {
+        onMoveEnd?.({
+          type: 'moveend',
+          pointerType
+        });
+      }
+    };
+
+    if (typeof PointerEvent === 'undefined') {
+      let onMouseMove = (e: MouseEvent) => {
+        if (e.button === 0) {
+          move('mouse', e.pageX - state.current.lastPosition.pageX, e.pageY - state.current.lastPosition.pageY);
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+        }
+      };
+      let onMouseUp = (e: MouseEvent) => {
+        if (e.button === 0) {
+          end('mouse');
+          removeGlobalListener(window, 'mousemove', onMouseMove, false);
+          removeGlobalListener(window, 'mouseup', onMouseUp, false);
+        }
+      };
+      moveProps.onMouseDown = (e: React.MouseEvent) => {
+        if (e.button === 0) {
+          start();
+          e.stopPropagation();
+          e.preventDefault();
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+          addGlobalListener(window, 'mousemove', onMouseMove, false);
+          addGlobalListener(window, 'mouseup', onMouseUp, false);
+        }
+      };
+
+      let onTouchMove = (e: TouchEvent) => {
+        // @ts-ignore
+        let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
+        if (touch >= 0) {
+          let {pageX, pageY} = e.changedTouches[touch];
+          move('touch', pageX - state.current.lastPosition.pageX, pageY - state.current.lastPosition.pageY);
+          state.current.lastPosition = {pageX, pageY};
+        }
+      };
+      let onTouchEnd = (e: TouchEvent) => {
+        // @ts-ignore
+        let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
+        if (touch >= 0) {
+          end('touch');
+          removeGlobalListener(window, 'touchmove', onTouchMove);
+          removeGlobalListener(window, 'touchend', onTouchEnd);
+          removeGlobalListener(window, 'touchcancel', onTouchEnd);
+        }
+      };
+      moveProps.onTouchStart = (e: React.TouchEvent) => {
+        if (e.targetTouches.length === 0) {
+          return;
+        }
+
+        let {pageX, pageY, identifier} = e.targetTouches[0];
+        start();
+        e.stopPropagation();
+        e.preventDefault();
+        state.current.lastPosition = {pageX, pageY};
+        state.current.id = identifier;
+        addGlobalListener(window, 'touchmove', onTouchMove, false);
+        addGlobalListener(window, 'touchend', onTouchEnd, false);
+        addGlobalListener(window, 'touchcancel', onTouchEnd, false);
+      };
+    } else {
+      let onPointerMove = (e: PointerEvent) => {
+        if (e.pointerId === state.current.id) {
+          // @ts-ignore
+          let pointerType: BaseMoveEvent['pointerType'] = e.pointerType || 'mouse';
+
+          // Problems with PointerEvent#movementX/movementY:
+          // 1. it is always 0 on macOS Safari.
+          // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
+          move(pointerType, e.pageX - state.current.lastPosition.pageX, e.pageY - state.current.lastPosition.pageY);
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+        }
+      };
+
+      let onPointerUp = (e: PointerEvent) => {
+        if (e.pointerId === state.current.id) {
+            // @ts-ignore
+          let pointerType: BaseMoveEvent['pointerType'] = e.pointerType || 'mouse';
+          end(pointerType);
+          removeGlobalListener(window, 'pointermove', onPointerMove, false);
+          removeGlobalListener(window, 'pointerup', onPointerUp, false);
+          removeGlobalListener(window, 'pointercancel', onPointerUp, false);
+        }
+      };
+
+      moveProps.onPointerDown = (e: React.PointerEvent) => {
+        if (e.button === 0) {
+          start();
+          e.stopPropagation();
+          e.preventDefault();
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+          state.current.id = e.pointerId;
+          addGlobalListener(window, 'pointermove', onPointerMove, false);
+          addGlobalListener(window, 'pointerup', onPointerUp, false);
+          addGlobalListener(window, 'pointercancel', onPointerUp, false);
+        }
+      };
+    }
+
+    let triggetKeyboardMove = (deltaX: number, deltaY: number) => {
+      start();
+      move('keyboard', deltaX, deltaY);
+      end('keyboard');
+    };
+
+    moveProps.onKeyDown = (e) => {
+      switch (e.key) {
+        case 'Left':
+        case 'ArrowLeft':
+          e.preventDefault();
+          e.stopPropagation();
+          triggetKeyboardMove(-1, 0);
+          break;
+        case 'Right':
+        case 'ArrowRight':
+          e.preventDefault();
+          e.stopPropagation();
+          triggetKeyboardMove(1, 0);
+          break;
+        case 'Up':
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          triggetKeyboardMove(0, -1);
+          break;
+        case 'Down':
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          triggetKeyboardMove(0, 1);
+          break;
+      }
+    };
+
+    return moveProps;
+  }, [state, onMoveStart, onMove, onMoveEnd]);
+
+  return moveProps;
+}

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

@@ -17,10 +17,11 @@
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {focusWithoutScrolling, mergeProps} from '@react-aria/utils';
-import {HTMLAttributes, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {HTMLAttributes, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {isVirtualClick} from './utils';
 import {PointerType, PressEvents} from '@react-types/shared';
 import {PressResponderContext} from './context';
+import {useGlobalListeners} from '@react-aria/utils';
 
 export interface PressProps extends PressEvents {
   /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
@@ -112,15 +113,7 @@ export function usePress(props: PressHookProps): PressResult {
     isOverTarget: false
   });
 
-  let globalListeners = useRef(new Map());
-  let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
-    globalListeners.current.set(listener, {type, eventTarget, options});
-    eventTarget.addEventListener(type, listener, options);
-  }, []);
-  let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
-    eventTarget.removeEventListener(type, listener, options);
-    globalListeners.current.delete(listener);
-  }, []);
+  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
   let pressProps = useMemo(() => {
     let state = ref.current;
@@ -542,15 +535,6 @@ export function usePress(props: PressHookProps): PressResult {
     return pressProps;
   }, [isDisabled, onPressStart, onPressChange, onPressEnd, onPress, onPressUp, addGlobalListener, preventFocusOnPress, removeGlobalListener]);
 
-  // eslint-disable-next-line arrow-body-style
-  useEffect(() => {
-    return () => {
-      globalListeners.current.forEach((value, key) => {
-        removeGlobalListener(value.eventTarget, value.type, key, value.options);
-      });
-    };
-  }, [removeGlobalListener]);
-
   return {
     isPressed: isPressedProp || isPressed,
     pressProps: mergeProps(domProps, pressProps)