@react-aria/interactions 3.27.0 → 3.28.0

package/src/useHover.ts

@@ -1,222 +0,0 @@
-/*
- * 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 {DOMAttributes, HoverEvents} from '@react-types/shared';
-import {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
-
-export interface HoverProps extends HoverEvents {
-  /** Whether the hover events should be disabled. */
-  isDisabled?: boolean
-}
-
-export interface HoverResult {
-  /** Props to spread on the target element. */
-  hoverProps: DOMAttributes,
-  isHovered: boolean
-}
-
-// iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
-// We want to ignore these emulated events so they do not trigger hover behavior.
-// See https://bugs.webkit.org/show_bug.cgi?id=214609.
-let globalIgnoreEmulatedMouseEvents = false;
-let hoverCount = 0;
-
-function setGlobalIgnoreEmulatedMouseEvents() {
-  globalIgnoreEmulatedMouseEvents = true;
-
-  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter
-  // with pointerType="mouse" immediately after onPointerUp and before onFocus. On other
-  // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in
-  // the distant future because a user previously touched the element.
-  setTimeout(() => {
-    globalIgnoreEmulatedMouseEvents = false;
-  }, 50);
-}
-
-function handleGlobalPointerEvent(e: PointerEvent) {
-  if (e.pointerType === 'touch') {
-    setGlobalIgnoreEmulatedMouseEvents();
-  }
-}
-
-function setupGlobalTouchEvents() {
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  if (hoverCount === 0) {
-    if (typeof PointerEvent !== 'undefined') {
-      document.addEventListener('pointerup', handleGlobalPointerEvent);
-    } else if (process.env.NODE_ENV === 'test') {
-      document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
-    }
-  }
-
-  hoverCount++;
-  return () => {
-    hoverCount--;
-    if (hoverCount > 0) {
-      return;
-    }
-
-    if (typeof PointerEvent !== 'undefined') {
-      document.removeEventListener('pointerup', handleGlobalPointerEvent);
-    } else if (process.env.NODE_ENV === 'test') {
-      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
-    }
-  };
-}
-
-/**
- * Handles pointer hover interactions for an element. Normalizes behavior
- * across browsers and platforms, and ignores emulated mouse events on touch devices.
- */
-export function useHover(props: HoverProps): HoverResult {
-  let {
-    onHoverStart,
-    onHoverChange,
-    onHoverEnd,
-    isDisabled
-  } = props;
-
-  let [isHovered, setHovered] = useState(false);
-  let state = useRef({
-    isHovered: false,
-    ignoreEmulatedMouseEvents: false,
-    pointerType: '',
-    target: null
-  }).current;
-
-  useEffect(setupGlobalTouchEvents, []);
-  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
-
-  let {hoverProps, triggerHoverEnd} = useMemo(() => {
-    let triggerHoverStart = (event, pointerType) => {
-      state.pointerType = pointerType;
-      if (isDisabled || pointerType === 'touch' || state.isHovered || !nodeContains(event.currentTarget, event.target)) {
-        return;
-      }
-
-      state.isHovered = true;
-      let target = event.currentTarget;
-      state.target = target;
-
-      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
-      // even though the originally hovered target may have shrunk in size so it is no longer hovered.
-      // However, a pointerover event will be fired on the new target the mouse is over.
-      // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
-      addGlobalListener(getOwnerDocument(event.target), 'pointerover', e => {
-        if (state.isHovered && state.target && !nodeContains(state.target, e.target as Element)) {
-          triggerHoverEnd(e, e.pointerType);
-        }
-      }, {capture: true});
-
-      if (onHoverStart) {
-        onHoverStart({
-          type: 'hoverstart',
-          target,
-          pointerType
-        });
-      }
-
-      if (onHoverChange) {
-        onHoverChange(true);
-      }
-
-      setHovered(true);
-    };
-
-    let triggerHoverEnd = (event, pointerType) => {
-      let target = state.target;
-      state.pointerType = '';
-      state.target = null;
-
-      if (pointerType === 'touch' || !state.isHovered || !target) {
-        return;
-      }
-
-      state.isHovered = false;
-      removeAllGlobalListeners();
-
-      if (onHoverEnd) {
-        onHoverEnd({
-          type: 'hoverend',
-          target,
-          pointerType
-        });
-      }
-
-      if (onHoverChange) {
-        onHoverChange(false);
-      }
-
-      setHovered(false);
-    };
-
-    let hoverProps: DOMAttributes = {};
-
-    if (typeof PointerEvent !== 'undefined') {
-      hoverProps.onPointerEnter = (e) => {
-        if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {
-          return;
-        }
-
-        triggerHoverStart(e, e.pointerType);
-      };
-
-      hoverProps.onPointerLeave = (e) => {
-        if (!isDisabled && nodeContains(e.currentTarget, e.target as Element)) {
-          triggerHoverEnd(e, e.pointerType);
-        }
-      };
-    } else if (process.env.NODE_ENV === 'test') {
-      hoverProps.onTouchStart = () => {
-        state.ignoreEmulatedMouseEvents = true;
-      };
-
-      hoverProps.onMouseEnter = (e) => {
-        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
-          triggerHoverStart(e, 'mouse');
-        }
-
-        state.ignoreEmulatedMouseEvents = false;
-      };
-
-      hoverProps.onMouseLeave = (e) => {
-        if (!isDisabled && nodeContains(e.currentTarget, e.target as Element)) {
-          triggerHoverEnd(e, 'mouse');
-        }
-      };
-    }
-    return {hoverProps, triggerHoverEnd};
-  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state, addGlobalListener, removeAllGlobalListeners]);
-
-  useEffect(() => {
-    // Call the triggerHoverEnd as soon as isDisabled changes to true
-    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
-    if (isDisabled) {
-      triggerHoverEnd({currentTarget: state.target}, state.pointerType);
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDisabled]);
-
-  return {
-    hoverProps,
-    isHovered
-  };
-}

package/src/useInteractOutside.ts

@@ -1,142 +0,0 @@
-/*
- * 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, nodeContains, 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): void {
-  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 onClick = (e) => {
-        if (state.isPointerDown && isValidEvent(e, ref)) {
-          triggerInteractOutside(e);
-        }
-        state.isPointerDown = false;
-      };
-
-      // changing these to capture phase fixed combobox
-      // Use click instead of pointerup to avoid Android Chrome issue
-      // https://issues.chromium.org/issues/40732224
-      documentObject.addEventListener('pointerdown', onPointerDown, true);
-      documentObject.addEventListener('click', onClick, true);
-
-      return () => {
-        documentObject.removeEventListener('pointerdown', onPointerDown, true);
-        documentObject.removeEventListener('click', onClick, true);
-      };
-    } else if (process.env.NODE_ENV === 'test') {
-      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]);
-}
-
-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 || !nodeContains(ownerDocument.documentElement, 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;
-    }
-  }
-
-  if (!ref.current) {
-    return false;
-  }
-
-  // When the event source is inside a Shadow DOM, event.target is just the shadow root.
-  // Using event.composedPath instead means we can get the actual element inside the shadow root.
-  // This only works if the shadow root is open, there is no way to detect if it is closed.
-  // If the event composed path contains the ref, interaction is inside.
-  return !event.composedPath().includes(ref.current);
-}

package/src/useKeyboard.ts

@@ -1,36 +0,0 @@
-/*
- * 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

@@ -1,135 +0,0 @@
-/*
- * 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, FocusableElement, LongPressEvent} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerDocument, 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}));
-
-          // Ensure target is focused. On touch devices, browsers typically focus on pointer up.
-          if (getOwnerDocument(e.target).activeElement !== e.target) {
-            focusWithoutScrolling(e.target as FocusableElement);
-          }
-
-          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)
-  };
-}