@react-aria/menu 3.21.0 → 3.22.0

package/src/useSafelyMouseToSubmenu.ts

@@ -1,178 +0,0 @@
-
-import {nodeContains, useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import {RefObject} from '@react-types/shared';
-import {useEffect, useRef, useState} from 'react';
-import {useInteractionModality} from '@react-aria/interactions';
-
-interface SafelyMouseToSubmenuOptions {
-  /** Ref for the parent menu. */
-  menuRef: RefObject<Element | null>,
-  /** Ref for the submenu. */
-  submenuRef: RefObject<Element | null>,
-  /** Whether the submenu is open. */
-  isOpen: boolean,
-  /** Whether this feature is disabled. */
-  isDisabled?: boolean
-}
-
-const ALLOWED_INVALID_MOVEMENTS = 2;
-const THROTTLE_TIME = 50;
-const TIMEOUT_TIME = 1000;
-const ANGLE_PADDING = Math.PI / 12; // 15°
-
-/**
- * Allows the user to move their pointer to the submenu without it closing when their mouse leaves the trigger element.
- * Prevents pointer events from going to the underlying menu if the user is moving their pointer towards the sub-menu.
- */
-export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions): void {
-  let {menuRef, submenuRef, isOpen, isDisabled} = options;
-  let prevPointerPos = useRef<{x: number, y: number} | undefined>(undefined);
-  let submenuRect = useRef<DOMRect | undefined>(undefined);
-  let lastProcessedTime = useRef<number>(0);
-  let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  let submenuSide = useRef<'left' | 'right' | undefined>(undefined);
-  let movementsTowardsSubmenuCount = useRef<number>(2);
-  let [preventPointerEvents, setPreventPointerEvents] = useState(false);
-
-  let updateSubmenuRect = () => {
-    if (submenuRef.current) {
-      submenuRect.current = submenuRef.current.getBoundingClientRect();
-      submenuSide.current = undefined;
-    }
-  };
-  useResizeObserver({ref: isOpen ? submenuRef : undefined, onResize: updateSubmenuRect});
-
-  let reset = () => {
-    setPreventPointerEvents(false);
-    movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;
-    prevPointerPos.current = undefined;
-  };
-
-  let modality = useInteractionModality();
-
-  // Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
-  // will cause focus to move unexpectedly since it will go to an element behind the menu.
-  let onPointerDown = useEffectEvent((e: PointerEvent) => {
-    if (preventPointerEvents) {
-      e.preventDefault();
-    }
-  });
-
-  useEffect(() => {
-    if (preventPointerEvents && menuRef.current) {
-      (menuRef.current as HTMLElement).style.pointerEvents = 'none';
-    } else {
-      (menuRef.current as HTMLElement).style.pointerEvents = '';
-    }
-  }, [menuRef, preventPointerEvents]);
-
-  useLayoutEffect(() => {
-    let submenu = submenuRef.current;
-    let menu = menuRef.current;
-
-    if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
-      reset();
-      return;
-    }
-    submenuRect.current = submenu.getBoundingClientRect();
-
-    let onPointerMove = (e: PointerEvent) => {
-      if (e.pointerType === 'touch' || e.pointerType === 'pen') {
-        return;
-      }
-
-      let currentTime = Date.now();
-
-      // Throttle
-      if (currentTime - lastProcessedTime.current < THROTTLE_TIME) {
-        return;
-      }
-      clearTimeout(timeout.current);
-      clearTimeout(autoCloseTimeout.current);
-
-      let {clientX: mouseX, clientY: mouseY} = e;
-
-      if (!prevPointerPos.current) {
-        prevPointerPos.current = {x: mouseX, y: mouseY};
-        return;
-      }
-
-      if (!submenuRect.current) {
-        return;
-      }
-
-      if (!submenuSide.current) {
-        submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';
-      }
-
-      // Pointer is outside of parent menu
-      if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
-        reset();
-        return;
-      }
-
-      /* Check if pointer is moving towards submenu.
-        Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
-          - angle between previous pointer and top of submenu
-          - angle between previous pointer and bottom of submenu
-          - angle between previous pointer and current pointer (delta)
-        If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
-      */
-      let prevMouseX = prevPointerPos.current.x;
-      let prevMouseY = prevPointerPos.current.y;
-      let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
-      let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + ANGLE_PADDING;
-      let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - ANGLE_PADDING;
-      let anglePointer = Math.atan2(prevMouseY - mouseY, (submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX));
-      let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
-
-      movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ?
-        Math.min(movementsTowardsSubmenuCount.current + 1, ALLOWED_INVALID_MOVEMENTS) :
-        Math.max(movementsTowardsSubmenuCount.current - 1, 0);
-
-      if (movementsTowardsSubmenuCount.current >= ALLOWED_INVALID_MOVEMENTS) {
-        setPreventPointerEvents(true);
-      } else {
-        setPreventPointerEvents(false);
-      }
-
-      lastProcessedTime.current = currentTime;
-      prevPointerPos.current = {x: mouseX, y: mouseY};
-
-      // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
-      if (isMovingTowardsSubmenu) {
-        timeout.current = setTimeout(() => {
-          reset();
-          autoCloseTimeout.current = setTimeout(() => {
-            // Fire a pointerover event to trigger the menu to close.
-            // Wait until pointer-events:none is no longer applied
-            let target = document.elementFromPoint(mouseX, mouseY);
-            if (target && nodeContains(menu, target)) {
-              target.dispatchEvent(new PointerEvent('pointerover', {bubbles: true, cancelable: true}));
-            }
-          }, 100);
-        }, TIMEOUT_TIME);
-      }
-    };
-
-    window.addEventListener('pointermove', onPointerMove);
-
-    // Prevent pointer down over the safe triangle. See above comment.
-    // Do not enable in tests, because JSDom doesn't do hit testing.
-    if (process.env.NODE_ENV !== 'test') {
-      window.addEventListener('pointerdown', onPointerDown, true);
-    }
-
-    return () => {
-      window.removeEventListener('pointermove', onPointerMove);
-      if (process.env.NODE_ENV !== 'test') {
-        window.removeEventListener('pointerdown', onPointerDown, true);
-      }
-      clearTimeout(timeout.current);
-      clearTimeout(autoCloseTimeout.current);
-      movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;
-    };
-
-  }, [isDisabled, isOpen, menuRef, modality, setPreventPointerEvents, submenuRef]);
-}

package/src/useSubmenuTrigger.ts

@@ -1,262 +0,0 @@
-/*
- * Copyright 2023 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 {AriaMenuItemProps} from './useMenuItem';
-import {AriaMenuOptions} from './useMenu';
-import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
-import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, getActiveElement, getEventTarget, isFocusWithin, nodeContains, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
-import type {SubmenuTriggerState} from '@react-stately/menu';
-import {useCallback, useRef} from 'react';
-import {useLocale} from '@react-aria/i18n';
-import {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';
-
-export interface AriaSubmenuTriggerProps {
-  /**
-   * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.
-   * @deprecated
-   */
-  node?: Node<unknown>,
-  /** Whether the submenu trigger is disabled. */
-  isDisabled?: boolean,
-  /** The type of the contents that the submenu trigger opens. */
-  type?: 'dialog' | 'menu',
-  /** Ref of the menu that contains the submenu trigger. */
-  parentMenuRef: RefObject<HTMLElement | null>,
-  /** Ref of the submenu opened by the submenu trigger. */
-  submenuRef: RefObject<HTMLElement | null>,
-  /**
-   * The delay time in milliseconds for the submenu to appear after hovering over the trigger.
-   * @default 200
-   */
-  delay?: number,
-  /** Whether the submenu trigger uses virtual focus. */
-  shouldUseVirtualFocus?: boolean
-}
-
-interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key' | 'onAction'> {
-  /** Whether the submenu trigger is in an expanded state. */
-  isOpen: boolean
-}
-
-interface SubmenuProps<T> extends AriaMenuOptions<T> {
-  /** The level of the submenu. */
-  submenuLevel: number
-}
-
-export interface SubmenuTriggerAria<T> {
-  /** Props for the submenu trigger menu item. */
-  submenuTriggerProps: SubmenuTriggerProps,
-  /** Props for the submenu controlled by the submenu trigger menu item. */
-  submenuProps: SubmenuProps<T>,
-  /** Props for the submenu's popover container. */
-  popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.
- * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.
- * @param state - State for the submenu trigger.
- * @param ref - Ref to the submenu trigger element.
- */
-export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T> {
-  let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200, shouldUseVirtualFocus} = props;
-  let submenuTriggerId = useId();
-  let overlayId = useId();
-  let {direction} = useLocale();
-  let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  let cancelOpenTimeout = useCallback(() => {
-    if (openTimeout.current) {
-      clearTimeout(openTimeout.current);
-      openTimeout.current = undefined;
-    }
-  }, [openTimeout]);
-
-  let onSubmenuOpen = useCallback((focusStrategy?: FocusStrategy) => {
-    cancelOpenTimeout();
-    state.open(focusStrategy);
-  }, [state, cancelOpenTimeout]);
-
-  let onSubmenuClose = useCallback(() => {
-    cancelOpenTimeout();
-    state.close();
-  }, [state, cancelOpenTimeout]);
-
-  useLayoutEffect(() => {
-    return () => {
-      cancelOpenTimeout();
-    };
-  }, [cancelOpenTimeout]);
-
-  let submenuKeyDown = (e: KeyboardEvent) => {
-    // If focus is not within the menu, assume virtual focus is being used.
-    // This means some other input element is also within the popover, so we shouldn't close the menu.
-    if (!isFocusWithin(e.currentTarget)) {
-      return;
-    }
-
-    switch (e.key) {
-      case 'ArrowLeft':
-        if (direction === 'ltr' && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
-          e.preventDefault();
-          e.stopPropagation();
-          onSubmenuClose();
-          if (!shouldUseVirtualFocus && ref.current) {
-            focusWithoutScrolling(ref.current);
-          }
-        }
-        break;
-      case 'ArrowRight':
-        if (direction === 'rtl' && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
-          e.preventDefault();
-          e.stopPropagation();
-          onSubmenuClose();
-          if (!shouldUseVirtualFocus && ref.current) {
-            focusWithoutScrolling(ref.current);
-          }
-        }
-        break;
-      case 'Escape':
-        // TODO: can remove this when we fix collection event leaks
-        if (nodeContains(submenuRef.current, getEventTarget(e) as Element)) {
-          e.stopPropagation();
-          onSubmenuClose();
-          if (!shouldUseVirtualFocus && ref.current) {
-            focusWithoutScrolling(ref.current);
-          }
-        }
-        break;
-    }
-  };
-
-  let submenuProps = {
-    id: overlayId,
-    'aria-labelledby': submenuTriggerId,
-    submenuLevel: state.submenuLevel,
-    ...(type === 'menu' && {
-      onClose: state.closeAll,
-      autoFocus: state.focusStrategy ?? undefined,
-      onKeyDown: submenuKeyDown
-    })
-  };
-
-  let submenuTriggerKeyDown = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowRight':
-        if (!isDisabled) {
-          if (direction === 'ltr') {
-            e.preventDefault();
-            if (!state.isOpen) {
-              onSubmenuOpen('first');
-            }
-
-            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
-              focusWithoutScrolling(submenuRef.current);
-            }
-          } else if (state.isOpen) {
-            onSubmenuClose();
-          } else {
-            e.continuePropagation();
-          }
-        }
-
-        break;
-      case 'ArrowLeft':
-        if (!isDisabled) {
-          if (direction === 'rtl') {
-            e.preventDefault();
-            if (!state.isOpen) {
-              onSubmenuOpen('first');
-            }
-
-            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
-              focusWithoutScrolling(submenuRef.current);
-            }
-          } else if (state.isOpen) {
-            onSubmenuClose();
-          } else {
-            e.continuePropagation();
-          }
-        }
-        break;
-      default:
-        e.continuePropagation();
-        break;
-    }
-  };
-
-  let onPressStart = (e: PressEvent) => {
-    if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {
-      // If opened with a screen reader or keyboard, auto focus the first submenu item.
-      onSubmenuOpen('first');
-    }
-  };
-
-  let onPress = (e: PressEvent) => {
-    if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {
-      // For touch or on a desktop device with a small screen open on press up to possible problems with
-      // press up happening on the newly opened tray items
-      onSubmenuOpen();
-    }
-  };
-
-  let onHoverChange = (isHovered) => {
-    if (!isDisabled) {
-      if (isHovered && !state.isOpen) {
-        if (!openTimeout.current) {
-          openTimeout.current = setTimeout(() => {
-            onSubmenuOpen();
-          }, delay);
-        }
-      } else if (!isHovered) {
-        cancelOpenTimeout();
-      }
-    }
-  };
-
-  useEvent(parentMenuRef, 'focusin', (e) => {
-    // If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
-    // then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
-    if (state.isOpen && (nodeContains(parentMenuRef.current, getEventTarget(e) as HTMLElement) && getEventTarget(e) !== ref.current)) {
-      onSubmenuClose();
-    }
-  });
-
-  let shouldCloseOnInteractOutside = (target) => {
-    if (target !== ref.current) {
-      return true;
-    }
-
-    return false;
-  };
-
-  useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});
-
-  return {
-    submenuTriggerProps: {
-      id: submenuTriggerId,
-      'aria-controls': state.isOpen ? overlayId : undefined,
-      'aria-haspopup': !isDisabled ? type : undefined,
-      'aria-expanded': state.isOpen ? 'true' : 'false',
-      onPressStart,
-      onPress,
-      onHoverChange,
-      onKeyDown: submenuTriggerKeyDown,
-      isOpen: state.isOpen
-    },
-    submenuProps,
-    popoverProps: {
-      isNonModal: true,
-      shouldCloseOnInteractOutside
-    }
-  };
-}

package/src/utils.ts

@@ -1,22 +0,0 @@
-/*
- * Copyright 2024 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 {Key} from '@react-types/shared';
-import {TreeState} from '@react-stately/tree';
-
-interface MenuData {
-  onClose?: () => void,
-  onAction?: (key: Key) => void,
-  shouldUseVirtualFocus?: boolean
-}
-
-export const menuData: WeakMap<TreeState<unknown>, MenuData> = new WeakMap<TreeState<unknown>, MenuData>();