useSubmenuTrigger.ts

/*
 * 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
    }
  };
}