@react-aria/interactions 3.0.0-nightly-641446f65-240905

package/src/useInteractOutside.ts

@@ -0,0 +1,134 @@
+/*
+ * 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.
+ */
+
+// Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+import {getOwnerDocument, useEffectEvent} from '@react-aria/utils';
+import {RefObject} from '@react-types/shared';
+import {useEffect, useRef} from 'react';
+
+export interface InteractOutsideProps {
+  ref: RefObject<Element | null>,
+  onInteractOutside?: (e: PointerEvent) => void,
+  onInteractOutsideStart?: (e: PointerEvent) => void,
+  /** Whether the interact outside events should be disabled. */
+  isDisabled?: boolean
+}
+
+/**
+ * Example, used in components like Dialogs and Popovers so they can close
+ * when a user clicks outside them.
+ */
+export function useInteractOutside(props: InteractOutsideProps) {
+  let {ref, onInteractOutside, isDisabled, onInteractOutsideStart} = props;
+  let stateRef = useRef({
+    isPointerDown: false,
+    ignoreEmulatedMouseEvents: false
+  });
+
+  let onPointerDown = useEffectEvent((e) => {
+    if (onInteractOutside && isValidEvent(e, ref)) {
+      if (onInteractOutsideStart) {
+        onInteractOutsideStart(e);
+      }
+      stateRef.current.isPointerDown = true;
+    }
+  });
+
+  let triggerInteractOutside = useEffectEvent((e: PointerEvent) => {
+    if (onInteractOutside) {
+      onInteractOutside(e);
+    }
+  });
+
+  useEffect(() => {
+    let state = stateRef.current;
+    if (isDisabled) {
+      return;
+    }
+
+    const element = ref.current;
+    const documentObject = getOwnerDocument(element);
+
+    // Use pointer events if available. Otherwise, fall back to mouse and touch events.
+    if (typeof PointerEvent !== 'undefined') {
+      let onPointerUp = (e) => {
+        if (state.isPointerDown && isValidEvent(e, ref)) {
+          triggerInteractOutside(e);
+        }
+        state.isPointerDown = false;
+      };
+
+      // changing these to capture phase fixed combobox
+      documentObject.addEventListener('pointerdown', onPointerDown, true);
+      documentObject.addEventListener('pointerup', onPointerUp, true);
+
+      return () => {
+        documentObject.removeEventListener('pointerdown', onPointerDown, true);
+        documentObject.removeEventListener('pointerup', onPointerUp, true);
+      };
+    } else {
+      let onMouseUp = (e) => {
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+        } else if (state.isPointerDown && isValidEvent(e, ref)) {
+          triggerInteractOutside(e);
+        }
+        state.isPointerDown = false;
+      };
+
+      let onTouchEnd = (e) => {
+        state.ignoreEmulatedMouseEvents = true;
+        if (state.isPointerDown && isValidEvent(e, ref)) {
+          triggerInteractOutside(e);
+        }
+        state.isPointerDown = false;
+      };
+
+      documentObject.addEventListener('mousedown', onPointerDown, true);
+      documentObject.addEventListener('mouseup', onMouseUp, true);
+      documentObject.addEventListener('touchstart', onPointerDown, true);
+      documentObject.addEventListener('touchend', onTouchEnd, true);
+
+      return () => {
+        documentObject.removeEventListener('mousedown', onPointerDown, true);
+        documentObject.removeEventListener('mouseup', onMouseUp, true);
+        documentObject.removeEventListener('touchstart', onPointerDown, true);
+        documentObject.removeEventListener('touchend', onTouchEnd, true);
+      };
+    }
+  }, [ref, isDisabled, onPointerDown, triggerInteractOutside]);
+}
+
+function isValidEvent(event, ref) {
+  if (event.button > 0) {
+    return false;
+  }
+
+  if (event.target) {
+    // if the event target is no longer in the document, ignore
+    const ownerDocument = event.target.ownerDocument;
+    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
+      return false;
+    }
+
+    // If the target is within a top layer element (e.g. toasts), ignore.
+    if (event.target.closest('[data-react-aria-top-layer]')) {
+      return false;
+    }
+  }
+
+  return ref.current && !ref.current.contains(event.target);
+}

package/src/useKeyboard.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 {createEventHandler} from './createEventHandler';
+import {DOMAttributes, KeyboardEvents} from '@react-types/shared';
+
+export interface KeyboardProps extends KeyboardEvents {
+  /** Whether the keyboard events should be disabled. */
+  isDisabled?: boolean
+}
+
+export interface KeyboardResult {
+  /** Props to spread onto the target element. */
+  keyboardProps: DOMAttributes
+}
+
+/**
+ * Handles keyboard interactions for a focusable element.
+ */
+export function useKeyboard(props: KeyboardProps): KeyboardResult {
+  return {
+    keyboardProps: props.isDisabled ? {} : {
+      onKeyDown: createEventHandler(props.onKeyDown),
+      onKeyUp: createEventHandler(props.onKeyUp)
+    }
+  };
+}

package/src/useLongPress.ts

@@ -0,0 +1,129 @@
+/*
+ * 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 {DOMAttributes, LongPressEvent} from '@react-types/shared';
+import {mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
+import {usePress} from './usePress';
+import {useRef} from 'react';
+
+export interface LongPressProps {
+  /** Whether long press events should be disabled. */
+  isDisabled?: boolean,
+  /** Handler that is called when a long press interaction starts. */
+  onLongPressStart?: (e: LongPressEvent) => void,
+  /**
+   * Handler that is called when a long press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onLongPressEnd?: (e: LongPressEvent) => void,
+  /**
+   * Handler that is called when the threshold time is met while
+   * the press is over the target.
+   */
+  onLongPress?: (e: LongPressEvent) => void,
+  /**
+   * The amount of time in milliseconds to wait before triggering a long press.
+   * @default 500ms
+   */
+  threshold?: number,
+  /**
+   * A description for assistive techology users indicating that a long press
+   * action is available, e.g. "Long press to open menu".
+   */
+  accessibilityDescription?: string
+}
+
+export interface LongPressResult {
+  /** Props to spread on the target element. */
+  longPressProps: DOMAttributes
+}
+
+const DEFAULT_THRESHOLD = 500;
+
+/**
+ * Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
+ * accessibility description, and normalizes behavior across browsers and devices.
+ */
+export function useLongPress(props: LongPressProps): LongPressResult {
+  let {
+    isDisabled,
+    onLongPressStart,
+    onLongPressEnd,
+    onLongPress,
+    threshold = DEFAULT_THRESHOLD,
+    accessibilityDescription
+  } = props;
+
+  const timeRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
+
+  let {pressProps} = usePress({
+    isDisabled,
+    onPressStart(e) {
+      e.continuePropagation();
+      if (e.pointerType === 'mouse' || e.pointerType === 'touch') {
+        if (onLongPressStart) {
+          onLongPressStart({
+            ...e,
+            type: 'longpressstart'
+          });
+        }
+
+        timeRef.current = setTimeout(() => {
+          // Prevent other usePress handlers from also handling this event.
+          e.target.dispatchEvent(new PointerEvent('pointercancel', {bubbles: true}));
+          if (onLongPress) {
+            onLongPress({
+              ...e,
+              type: 'longpress'
+            });
+          }
+          timeRef.current = undefined;
+        }, threshold);
+
+        // Prevent context menu, which may be opened on long press on touch devices
+        if (e.pointerType === 'touch') {
+          let onContextMenu = e => {
+            e.preventDefault();
+          };
+
+          addGlobalListener(e.target, 'contextmenu', onContextMenu, {once: true});
+          addGlobalListener(window, 'pointerup', () => {
+            // If no contextmenu event is fired quickly after pointerup, remove the handler
+            // so future context menu events outside a long press are not prevented.
+            setTimeout(() => {
+              removeGlobalListener(e.target, 'contextmenu', onContextMenu);
+            }, 30);
+          }, {once: true});
+        }
+      }
+    },
+    onPressEnd(e) {
+      if (timeRef.current) {
+        clearTimeout(timeRef.current);
+      }
+
+      if (onLongPressEnd && (e.pointerType === 'mouse' || e.pointerType === 'touch')) {
+        onLongPressEnd({
+          ...e,
+          type: 'longpressend'
+        });
+      }
+    }
+  });
+
+  let descriptionProps = useDescription(onLongPress && !isDisabled ? accessibilityDescription : undefined);
+
+  return {
+    longPressProps: mergeProps(pressProps, descriptionProps)
+  };
+}

package/src/useMove.ts

@@ -0,0 +1,231 @@
+/*
+ * 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 {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
+import React, {useMemo, useRef} from 'react';
+import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
+
+export interface MoveResult {
+  /** Props to spread on the target element. */
+  moveProps: DOMAttributes
+}
+
+interface EventBase {
+  shiftKey: boolean,
+  ctrlKey: boolean,
+  metaKey: boolean,
+  altKey: boolean
+}
+
+/**
+ * Handles move interactions across mouse, touch, and keyboard, including dragging with
+ * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and
+ * platforms, and ignores emulated mouse events on touch devices.
+ */
+export function useMove(props: MoveEvents): MoveResult {
+  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 move = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
+    if (deltaX === 0 && deltaY === 0) {
+      return;
+    }
+
+    if (!state.current.didMove) {
+      state.current.didMove = true;
+      onMoveStart?.({
+        type: 'movestart',
+        pointerType,
+        shiftKey: originalEvent.shiftKey,
+        metaKey: originalEvent.metaKey,
+        ctrlKey: originalEvent.ctrlKey,
+        altKey: originalEvent.altKey
+      });
+    }
+    onMove?.({
+      type: 'move',
+      pointerType,
+      deltaX: deltaX,
+      deltaY: deltaY,
+      shiftKey: originalEvent.shiftKey,
+      metaKey: originalEvent.metaKey,
+      ctrlKey: originalEvent.ctrlKey,
+      altKey: originalEvent.altKey
+    });
+  });
+
+  let end = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+    restoreTextSelection();
+    if (state.current.didMove) {
+      onMoveEnd?.({
+        type: 'moveend',
+        pointerType,
+        shiftKey: originalEvent.shiftKey,
+        metaKey: originalEvent.metaKey,
+        ctrlKey: originalEvent.ctrlKey,
+        altKey: originalEvent.altKey
+      });
+    }
+  });
+
+  let moveProps = useMemo(() => {
+    let moveProps: DOMAttributes = {};
+
+    let start = () => {
+      disableTextSelection();
+      state.current.didMove = false;
+    };
+
+    if (typeof PointerEvent === 'undefined') {
+      let onMouseMove = (e: MouseEvent) => {
+        if (e.button === 0) {
+          move(e, 'mouse', e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+        }
+      };
+      let onMouseUp = (e: MouseEvent) => {
+        if (e.button === 0) {
+          end(e, '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) => {
+        let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
+        if (touch >= 0) {
+          let {pageX, pageY} = e.changedTouches[touch];
+          move(e, 'touch', pageX - (state.current.lastPosition?.pageX ?? 0), pageY - (state.current.lastPosition?.pageY ?? 0));
+          state.current.lastPosition = {pageX, pageY};
+        }
+      };
+      let onTouchEnd = (e: TouchEvent) => {
+        let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
+        if (touch >= 0) {
+          end(e, 'touch');
+          state.current.id = null;
+          removeGlobalListener(window, 'touchmove', onTouchMove);
+          removeGlobalListener(window, 'touchend', onTouchEnd);
+          removeGlobalListener(window, 'touchcancel', onTouchEnd);
+        }
+      };
+      moveProps.onTouchStart = (e: React.TouchEvent) => {
+        if (e.changedTouches.length === 0 || state.current.id != null) {
+          return;
+        }
+
+        let {pageX, pageY, identifier} = e.changedTouches[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) {
+          let pointerType = (e.pointerType || 'mouse') as PointerType;
+
+          // 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(e, pointerType, e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+        }
+      };
+
+      let onPointerUp = (e: PointerEvent) => {
+        if (e.pointerId === state.current.id) {
+          let pointerType = (e.pointerType || 'mouse') as PointerType;
+          end(e, pointerType);
+          state.current.id = null;
+          removeGlobalListener(window, 'pointermove', onPointerMove, false);
+          removeGlobalListener(window, 'pointerup', onPointerUp, false);
+          removeGlobalListener(window, 'pointercancel', onPointerUp, false);
+        }
+      };
+
+      moveProps.onPointerDown = (e: React.PointerEvent) => {
+        if (e.button === 0 && state.current.id == null) {
+          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 triggerKeyboardMove = (e: EventBase, deltaX: number, deltaY: number) => {
+      start();
+      move(e, 'keyboard', deltaX, deltaY);
+      end(e, 'keyboard');
+    };
+
+    moveProps.onKeyDown = (e) => {
+      switch (e.key) {
+        case 'Left':
+        case 'ArrowLeft':
+          e.preventDefault();
+          e.stopPropagation();
+          triggerKeyboardMove(e, -1, 0);
+          break;
+        case 'Right':
+        case 'ArrowRight':
+          e.preventDefault();
+          e.stopPropagation();
+          triggerKeyboardMove(e, 1, 0);
+          break;
+        case 'Up':
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          triggerKeyboardMove(e, 0, -1);
+          break;
+        case 'Down':
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          triggerKeyboardMove(e, 0, 1);
+          break;
+      }
+    };
+
+    return moveProps;
+  }, [state, addGlobalListener, removeGlobalListener, move, end]);
+
+  return {moveProps};
+}