@octanejs/aria 0.0.46 → 0.0.48

package/src/menu/{useSubmenuTrigger.ts → useSubmenuTrigger.tsx}

@@ -1,20 +1,22 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/menu/useSubmenuTrigger.ts).
-// octane adaptations:
-// - Handlers receive NATIVE events: `submenuKeyDown` gets the native KeyboardEvent through
-//   the menu's merged onKeyDown chain; `submenuTriggerKeyDown` gets the ported
-//   BaseEvent-wrapped KeyboardEvent (it flows through useMenuItem's useKeyboard, which
-//   supplies `continuePropagation`).
-// - The popover container types (`AriaPopoverProps` from overlays/usePopover and
-//   `OverlayProps` from overlays/Overlay) are NOT yet ported (overlay positioning/modal
-//   machinery is out of scope); `SubmenuTriggerAria.popoverProps` is a local structural
-//   equivalent of upstream's picked fields.
-// - `SubmenuTriggerState` type from the ported stately menu state.
-// - Public-hook slot threading (splitSlot/subSlot) per the binding convention; explicit
-//   dependency arrays are kept verbatim.
-import type { AriaMenuItemProps } from './useMenuItem';
-import type { AriaMenuOptions } from './useMenu';
-import type { BaseEvent } from '../interactions/createEventHandler';
-import type { FocusableElement, FocusStrategy, RefObject } from '@react-types/shared';
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/menu/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 { withSlot } from 'octane';
+import { AriaMenuOptions } from './useMenu';
+import type { AriaPopoverProps } from '../overlays/usePopover';
+import { FocusableElement, FocusStrategy, Node, PressEvent, RefObject } from '@react-types/shared';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import {
 	getActiveElement,
@@ -22,17 +24,16 @@ import {
 	isFocusWithin,
 	nodeContains,
 } from '../utils/shadowdom/DOMFunctions';
-import type { PressEvent } from '@react-types/shared';
-import type { SubmenuTriggerState } from '../stately/menu/useSubmenuTriggerState';
-import { useCallback, useRef } from 'octane';
+import type { OverlayProps } from '../overlays/Overlay';
+import type { SubmenuTriggerState } from '../upstream-exports/react-stately/useMenuTriggerState';
+import { useCallback, useRef } from '../compat/react';
 import { useEvent } from '../utils/useEvent';
 import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLayoutEffect } from '../utils/useLayoutEffect';
 import { useLocale } from '../i18n/I18nProvider';
 import { useSafelyMouseToSubmenu } from './useSafelyMouseToSubmenu';
 
-import { S, splitSlot, subSlot } from '../internal';
-
 export interface AriaSubmenuTriggerProps {
 	/**
 	 * An object representing the submenu trigger menu item. Contains all the relevant information
@@ -40,7 +41,7 @@ export interface AriaSubmenuTriggerProps {
 	 *
 	 * @deprecated
 	 */
-	node?: any;
+	node?: Node<unknown>;
 	/** Whether the submenu trigger is disabled. */
 	isDisabled?: boolean;
 	/** The type of the contents that the submenu trigger opens. */
@@ -74,18 +75,9 @@ export interface SubmenuTriggerAria<T> {
 	submenuTriggerProps: SubmenuTriggerProps;
 	/** Props for the submenu controlled by the submenu trigger menu item. */
 	submenuProps: SubmenuProps<T>;
-	/**
-	 * Props for the submenu's popover container.
-	 *
-	 * octane adaptation: a structural equivalent of upstream's
-	 * `Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> &
-	 * Pick<OverlayProps, 'disableFocusManagement'>` (the overlays area is not yet ported).
-	 */
-	popoverProps: {
-		isNonModal?: boolean;
-		shouldCloseOnInteractOutside?: (element: Element) => boolean;
-		disableFocusManagement?: boolean;
-	};
+	/** Props for the submenu's popover container. */
+	popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> &
+		Pick<OverlayProps, 'disableFocusManagement'>;
 }
 
 /**
@@ -100,20 +92,11 @@ export function useSubmenuTrigger<T>(
 	props: AriaSubmenuTriggerProps,
 	state: SubmenuTriggerState,
 	ref: RefObject<FocusableElement | null>,
-): SubmenuTriggerAria<T>;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
-export function useSubmenuTrigger<T>(
-	props: AriaSubmenuTriggerProps,
-	state: SubmenuTriggerState,
-	ref: RefObject<FocusableElement | null>,
-	slot: symbol | undefined,
-): SubmenuTriggerAria<T>;
-export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useSubmenuTrigger');
-	const props = user[0] as AriaSubmenuTriggerProps;
-	const state = user[1] as SubmenuTriggerState;
-	const ref = user[2] as RefObject<FocusableElement | null>;
+	_slot?: symbol,
+): SubmenuTriggerAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSubmenuTrigger<T>, props, state, ref);
+	}
 
 	let {
 		parentMenuRef,
@@ -123,23 +106,16 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 		delay = 200,
 		shouldUseVirtualFocus,
 	} = props;
-	let submenuTriggerId = useId(subSlot(slot, 'triggerId'));
-	let overlayId = useId(subSlot(slot, 'overlayId'));
-	let { direction } = useLocale(subSlot(slot, 'locale'));
-	let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
-		undefined,
-		subSlot(slot, 'openTimeout'),
-	);
-	let cancelOpenTimeout = useCallback(
-		() => {
-			if (openTimeout.current) {
-				clearTimeout(openTimeout.current);
-				openTimeout.current = undefined;
-			}
-		},
-		[openTimeout],
-		subSlot(slot, 'cancelOpen'),
-	);
+	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) => {
@@ -147,74 +123,70 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 			state.open(focusStrategy);
 		},
 		[state, cancelOpenTimeout],
-		subSlot(slot, 'open'),
 	);
 
-	let onSubmenuClose = useCallback(
-		() => {
-			cancelOpenTimeout();
-			state.close();
-		},
-		[state, cancelOpenTimeout],
-		subSlot(slot, 'close'),
-	);
-
-	useLayoutEffect(
-		() => {
-			return () => {
-				cancelOpenTimeout();
-			};
-		},
-		[cancelOpenTimeout],
-		subSlot(slot, 'teardown'),
-	);
+	let onSubmenuClose = useCallback(() => {
+		cancelOpenTimeout();
+		state.close();
+	}, [state, 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 as Element)) {
-			return;
-		}
+	useLayoutEffect(() => {
+		return () => {
+			cancelOpenTimeout();
+		};
+	}, [cancelOpenTimeout]);
 
-		switch (e.key) {
-			case 'ArrowLeft':
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			ArrowLeft: (e) => {
+				// 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 as Element)) {
+					return false;
+				}
 				if (
 					direction === 'ltr' &&
-					nodeContains(e.currentTarget as Element, getEventTarget(e) as Element)
+					nodeContains(e.currentTarget as globalThis.Node, getEventTarget(e) as Element)
 				) {
-					e.preventDefault();
-					e.stopPropagation();
 					onSubmenuClose();
 					if (!shouldUseVirtualFocus && ref.current) {
 						focusWithoutScrolling(ref.current);
 					}
+					return;
+				}
+				return false;
+			},
+			ArrowRight: (e) => {
+				if (!isFocusWithin(e.currentTarget as Element)) {
+					return false;
 				}
-				break;
-			case 'ArrowRight':
 				if (
 					direction === 'rtl' &&
-					nodeContains(e.currentTarget as Element, getEventTarget(e) as Element)
+					nodeContains(e.currentTarget as globalThis.Node, getEventTarget(e) as Element)
 				) {
-					e.preventDefault();
-					e.stopPropagation();
 					onSubmenuClose();
 					if (!shouldUseVirtualFocus && ref.current) {
 						focusWithoutScrolling(ref.current);
 					}
+					return;
+				}
+				return false;
+			},
+			Escape: (e) => {
+				if (!isFocusWithin(e.currentTarget as Element)) {
+					return false;
 				}
-				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);
 					}
+					return;
 				}
-				break;
-		}
-	};
+				return false;
+			},
+		},
+	});
 
 	let submenuProps = {
 		id: overlayId,
@@ -223,16 +195,15 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 		...(type === 'menu' && {
 			onClose: state.closeAll,
 			autoFocus: state.focusStrategy ?? undefined,
-			onKeyDown: submenuKeyDown,
+			...keyboardProps,
 		}),
 	};
 
-	let submenuTriggerKeyDown = (e: BaseEvent<KeyboardEvent>) => {
-		switch (e.key) {
-			case 'ArrowRight':
+	let { keyboardProps: submenuTriggerKeyboardProps } = useKeyboard({
+		shortcuts: {
+			ArrowRight: () => {
 				if (!isDisabled) {
 					if (direction === 'ltr') {
-						e.preventDefault();
 						if (!state.isOpen) {
 							onSubmenuOpen('first');
 						}
@@ -240,18 +211,19 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 						if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
 							focusWithoutScrolling(submenuRef.current);
 						}
+						return;
 					} else if (state.isOpen) {
 						onSubmenuClose();
+						return;
 					} else {
-						e.continuePropagation();
+						return false;
 					}
 				}
-
-				break;
-			case 'ArrowLeft':
+				return false;
+			},
+			ArrowLeft: () => {
 				if (!isDisabled) {
 					if (direction === 'rtl') {
-						e.preventDefault();
 						if (!state.isOpen) {
 							onSubmenuOpen('first');
 						}
@@ -259,18 +231,18 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 						if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
 							focusWithoutScrolling(submenuRef.current);
 						}
+						return;
 					} else if (state.isOpen) {
 						onSubmenuClose();
+						return;
 					} else {
-						e.continuePropagation();
+						return false;
 					}
 				}
-				break;
-			default:
-				e.continuePropagation();
-				break;
-		}
-	};
+				return false;
+			},
+		},
+	});
 
 	let onPressStart = (e: PressEvent) => {
 		if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {
@@ -301,22 +273,17 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 		}
 	};
 
-	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();
-			}
-		},
-		subSlot(slot, 'focusin'),
-	);
+	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: Element) => {
 		if (target !== ref.current) {
@@ -326,18 +293,17 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 		return false;
 	};
 
-	useSafelyMouseToSubmenu(
-		{
-			menuRef: parentMenuRef,
-			submenuRef,
-			isOpen: state.isOpen,
-			isDisabled: isDisabled,
-		},
-		subSlot(slot, 'safeMouse'),
-	);
+	useSafelyMouseToSubmenu({
+		menuRef: parentMenuRef,
+		submenuRef,
+		isOpen: state.isOpen,
+		isDisabled: isDisabled,
+	});
 
 	return {
 		submenuTriggerProps: {
+			onKeyDown: submenuTriggerKeyboardProps.onKeyDown,
+			onKeyUp: submenuTriggerKeyboardProps.onKeyUp,
 			id: submenuTriggerId,
 			'aria-controls': state.isOpen ? overlayId : undefined,
 			'aria-haspopup': !isDisabled ? type : undefined,
@@ -345,7 +311,6 @@ export function useSubmenuTrigger(...args: any[]): SubmenuTriggerAria<any> {
 			onPressStart,
 			onPress,
 			onHoverChange,
-			onKeyDown: submenuTriggerKeyDown,
 			isOpen: state.isOpen,
 		},
 		submenuProps,