@octanejs/base-ui 0.1.50 → 0.1.52

package/src/menu/root/MenuRootContext.ts

@@ -0,0 +1,25 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { type MenuStore } from '../store/MenuStore';
+import type { MenuParent } from './MenuRoot.tsrx';
+
+export interface MenuRootContext<Payload = unknown> {
+	store: MenuStore<Payload>;
+	parent: MenuParent;
+}
+
+export const MenuRootContext = React.createContext<MenuRootContext | undefined>(undefined);
+
+export function useMenuRootContext(optional?: false): MenuRootContext;
+export function useMenuRootContext(optional: true): MenuRootContext | undefined;
+export function useMenuRootContext(optional?: boolean) {
+	const context = React.useContext(MenuRootContext);
+	if (context === undefined && !optional) {
+		throw new Error(
+			'Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.',
+		);
+	}
+
+	return context;
+}

package/src/menu/store/MenuHandle.ts

@@ -0,0 +1,54 @@
+import { type MenuStore, createNullMenuStore, type MenuHandleStore } from './MenuStore';
+import { BasePopupHandle } from '../../utils/popups/popupHandle';
+
+/**
+ * Controls a Menu imperatively and associates detached `Menu.Trigger` components with a `Menu.Root`.
+ * Create one with `Menu.createHandle()` and pass it to the `handle` prop of the root and of any
+ * triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+export class MenuHandle<Payload> extends BasePopupHandle<
+	MenuHandleStore<Payload>,
+	MenuStore<Payload>
+> {
+	constructor() {
+		super(createNullMenuStore<Payload>(), 'Menu');
+	}
+
+	/**
+	 * Opens the menu and associates it with the trigger with the given id.
+	 *
+	 * This method should only be called in an event handler or an effect (not during rendering).
+	 *
+	 * @param triggerId ID of the trigger to associate with the menu. The trigger must be a matching
+	 * `Menu.Trigger` with this handle passed as a prop.
+	 */
+	open(triggerId: string) {
+		this.openByTrigger(triggerId);
+	}
+
+	/**
+	 * Closes the menu.
+	 *
+	 * This method should only be called in an event handler or an effect (not during rendering).
+	 */
+	close() {
+		this.closePopup();
+	}
+
+	/**
+	 * Whether the menu is currently open. Returns `false` while no root is attached to the handle.
+	 */
+	get isOpen() {
+		return this.attachedStore?.select('open') ?? false;
+	}
+}
+
+/**
+ * Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.
+ */
+export function createMenuHandle<Payload>(): MenuHandle<Payload> {
+	return new MenuHandle<Payload>();
+}

package/src/menu/store/MenuStore.ts

@@ -0,0 +1,234 @@
+import type * as React from 'octane';
+import { ReactStore } from '@octanejs/base-ui-utils/store';
+import { EMPTY_OBJECT, NOOP } from '@octanejs/base-ui-utils/empty';
+import type { InteractionType } from '@octanejs/base-ui-utils/useEnhancedClickHandler';
+import type { MenuParent, MenuRoot } from '../root/MenuRoot.tsrx';
+import { FloatingTreeStore } from '../../floating-ui-react/components/FloatingTreeStore';
+import type { HTMLProps } from '../../internals/types';
+import { NullStore } from '../../utils/NullStore';
+import type { AdaptiveOriginMiddleware } from '../../utils/adaptiveOriginConstants';
+import {
+	createInitialPopupStoreState,
+	type PopupStoreContext,
+	popupStoreSelectors,
+	type PopupStoreState,
+	PopupTriggerMap,
+	type PopupTriggerStoreKeys,
+} from '../../utils/popups';
+
+export type State<Payload> = PopupStoreState<Payload> & {
+	disabled: boolean;
+	modal: boolean | undefined;
+	openMethod: InteractionType | null;
+	allowMouseEnter: boolean;
+	highlightItemOnHover: boolean;
+	parent: MenuParent;
+	rootId: string | undefined;
+	activeIndex: number | null;
+	hoverEnabled: boolean;
+	instantType: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
+	openChangeReason: MenuRoot.ChangeEventReason | null;
+	floatingTreeRoot: FloatingTreeStore;
+	floatingNodeId: string | undefined;
+	floatingParentNodeId: string | null;
+	itemProps: HTMLProps;
+	closeDelay: number;
+	keyboardEventRelay: ((event: React.KeyboardEvent<any>) => void) | undefined;
+	adaptiveOrigin: AdaptiveOriginMiddleware | undefined;
+};
+
+type Context = PopupStoreContext<MenuRoot.ChangeEventDetails> & {
+	readonly positionerRef: React.RefObject<HTMLElement | null>;
+	readonly popupRef: React.RefObject<HTMLElement | null>;
+	readonly typingRef: React.RefObject<boolean>;
+	readonly itemDomElements: React.RefObject<(HTMLElement | null)[]>;
+	readonly itemLabels: React.RefObject<(string | null)[]>;
+	allowMouseUpTriggerRef: React.RefObject<boolean>;
+	readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
+	readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
+};
+
+const selectors = {
+	...popupStoreSelectors,
+	disabled: (state: State<unknown>) =>
+		state.parent.type === 'menubar'
+			? state.parent.context.disabled || state.disabled
+			: state.disabled,
+	modal: (state: State<unknown>) =>
+		(state.parent.type === undefined || state.parent.type === 'context-menu') &&
+		(state.modal ?? true),
+	openMethod: (state: State<unknown>) => state.openMethod,
+
+	allowMouseEnter: (state: State<unknown>) => state.allowMouseEnter,
+	highlightItemOnHover: (state: State<unknown>) => state.highlightItemOnHover,
+	parent: (state: State<unknown>) => state.parent,
+	rootId: (state: State<unknown>): string | undefined => {
+		if (state.parent.type === 'menu') {
+			return state.parent.store.select('rootId');
+		}
+
+		return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
+	},
+	activeIndex: (state: State<unknown>) => state.activeIndex,
+	isActive: (state: State<unknown>, itemIndex: number) => state.activeIndex === itemIndex,
+	hoverEnabled: (state: State<unknown>) => state.hoverEnabled,
+	instantType: (state: State<unknown>) => state.instantType,
+	lastOpenChangeReason: (state: State<unknown>) => state.openChangeReason,
+	floatingTreeRoot: (state: State<unknown>): FloatingTreeStore => {
+		if (state.parent.type === 'menu') {
+			return state.parent.store.select('floatingTreeRoot');
+		}
+
+		return state.floatingTreeRoot;
+	},
+	floatingNodeId: (state: State<unknown>) => state.floatingNodeId,
+	floatingParentNodeId: (state: State<unknown>) => state.floatingParentNodeId,
+	itemProps: (state: State<unknown>) => state.itemProps,
+	closeDelay: (state: State<unknown>) => state.closeDelay,
+	adaptiveOrigin: (state: State<unknown>): AdaptiveOriginMiddleware | undefined =>
+		state.adaptiveOrigin,
+	keyboardEventRelay: (state: State<unknown>): React.KeyboardEventHandler<any> | undefined => {
+		if (state.keyboardEventRelay) {
+			return state.keyboardEventRelay;
+		}
+
+		if (state.parent.type === 'menu') {
+			return state.parent.store.select('keyboardEventRelay');
+		}
+
+		return undefined;
+	},
+};
+
+type Selectors = typeof selectors;
+
+/**
+ * The store view that detached handle-backed triggers read from. Both the real `MenuStore` and the
+ * inert fallback store satisfy it, so a trigger can read from whichever store the handle currently
+ * exposes. Narrowed to the members a trigger actually uses — the trigger-data members plus `setOpen`
+ * (called by the focus guards) — so the exposed surface can't bypass the open-change pipeline; on
+ * the detached fallback store every one of these mutations is a no-op.
+ */
+export type MenuHandleStore<Payload> = Pick<MenuStore<Payload>, PopupTriggerStoreKeys | 'setOpen'>;
+
+export class MenuStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
+	constructor(
+		initialState?: Partial<State<Payload>>,
+		floatingId?: string | undefined,
+		nested = false,
+	) {
+		const triggerElements = new PopupTriggerMap();
+		const state = createInitialState<Payload>(triggerElements, floatingId, nested, initialState);
+
+		super(state, createInitialContext(triggerElements), selectors);
+
+		// Set up propagation of state from parent menu if applicable.
+		this.unsubscribeParentListener = this.observe('parent', (parent) => {
+			this.unsubscribeParentListener?.();
+
+			if (parent.type === 'menu') {
+				let rootId = parent.store.select('rootId');
+				let floatingTreeRoot = parent.store.select('floatingTreeRoot');
+				let keyboardEventRelay = parent.store.select('keyboardEventRelay');
+
+				this.unsubscribeParentListener = parent.store.subscribe(() => {
+					const nextRootId = parent.store.select('rootId');
+					const nextFloatingTreeRoot = parent.store.select('floatingTreeRoot');
+					const nextKeyboardEventRelay = parent.store.select('keyboardEventRelay');
+
+					if (
+						rootId === nextRootId &&
+						floatingTreeRoot === nextFloatingTreeRoot &&
+						keyboardEventRelay === nextKeyboardEventRelay
+					) {
+						return;
+					}
+
+					rootId = nextRootId;
+					floatingTreeRoot = nextFloatingTreeRoot;
+					keyboardEventRelay = nextKeyboardEventRelay;
+					this.notifyAll();
+				});
+
+				this.context.allowMouseUpTriggerRef = parent.store.context.allowMouseUpTriggerRef;
+				return;
+			}
+
+			if (parent.type !== undefined) {
+				this.context.allowMouseUpTriggerRef = parent.context.allowMouseUpTriggerRef;
+			}
+
+			this.unsubscribeParentListener = null;
+		});
+	}
+
+	setOpen(open: boolean, eventDetails: Omit<MenuRoot.ChangeEventDetails, 'preventUnmountOnClose'>) {
+		this.state.floatingRootContext.context.events.emit('setOpen', { open, eventDetails });
+	}
+
+	private unsubscribeParentListener: (() => void) | null = null;
+}
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no `Menu.Root` is
+ * attached. It preserves a menu-specific trigger registry in context so detached triggers can
+ * register before migrating to the live root store. `setOpen` is a no-op (matching the inert
+ * reads/writes of `NullStore`), so a trigger can hand the store to focus-guard helpers that expect
+ * `setOpen` without it ever taking effect while detached.
+ */
+export function createNullMenuStore<Payload>(): MenuHandleStore<Payload> {
+	const triggerElements = new PopupTriggerMap();
+	const store = new NullStore<Readonly<State<Payload>>, Context, Selectors>(
+		Object.freeze(createInitialState<Payload>(triggerElements)),
+		Object.freeze(createInitialContext(triggerElements)),
+		selectors,
+	);
+	return Object.assign(store, { setOpen: NOOP });
+}
+
+function createInitialContext(triggerElements: PopupTriggerMap): Context {
+	return {
+		positionerRef: { current: null } as React.RefObject<HTMLElement | null | null>,
+		popupRef: { current: null } as React.RefObject<HTMLElement | null | null>,
+		typingRef: { current: false },
+		itemDomElements: { current: [] },
+		itemLabels: { current: [] },
+		allowMouseUpTriggerRef: { current: false },
+		triggerFocusTargetRef: { current: null } as React.RefObject<HTMLElement | null>,
+		beforeContentFocusGuardRef: { current: null } as React.RefObject<HTMLElement | null>,
+		onOpenChangeComplete: undefined,
+		triggerElements,
+	};
+}
+
+function createInitialState<Payload>(
+	triggerElements: PopupTriggerMap,
+	floatingId?: string | undefined,
+	nested = false,
+	initialState?: Partial<State<Payload>>,
+): State<Payload> {
+	return {
+		...createInitialPopupStoreState<Payload>(triggerElements, floatingId, nested),
+		disabled: false,
+		modal: true,
+		openMethod: null,
+		allowMouseEnter: false,
+		highlightItemOnHover: true,
+		parent: {
+			type: undefined,
+		},
+		rootId: undefined,
+		activeIndex: null,
+		hoverEnabled: true,
+		instantType: undefined,
+		openChangeReason: null,
+		floatingTreeRoot: new FloatingTreeStore(),
+		floatingNodeId: undefined,
+		floatingParentNodeId: null,
+		itemProps: EMPTY_OBJECT as HTMLProps,
+		keyboardEventRelay: undefined,
+		closeDelay: 0,
+		adaptiveOrigin: undefined,
+		...initialState,
+	};
+}

package/src/menu/submenu-root/MenuSubmenuRoot.tsrx

@@ -0,0 +1,64 @@
+'use client';
+import * as React from 'octane';
+import { MenuRoot } from '../root/MenuRoot.tsrx';
+import { useMenuRootContext } from '../root/MenuRootContext';
+import { MenuSubmenuRootContext } from './MenuSubmenuRootContext';
+
+export { useMenuSubmenuRootContext } from './MenuSubmenuRootContext';
+
+/**
+ * Groups all parts of a submenu.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export function MenuSubmenuRoot(props: MenuSubmenuRoot.Props) {
+	const parentMenu = useMenuRootContext().store;
+
+	const contextValue = React.useMemo(() => ({ parentMenu }), [parentMenu]);
+
+	return (
+		<MenuSubmenuRootContext.Provider value={contextValue}>
+			<MenuRoot {...props} />
+		</MenuSubmenuRootContext.Provider>
+	);
+}
+
+export interface MenuSubmenuRootProps extends Omit<
+	MenuRoot.Props,
+	| 'modal'
+	| 'openOnHover'
+	| 'onOpenChange'
+	| 'handle'
+	| 'triggerId'
+	| 'defaultTriggerId'
+	| 'children'
+> {
+	/**
+	 * Event handler called when the menu is opened or closed.
+	 */
+	onOpenChange?:
+		((open: boolean, eventDetails: MenuSubmenuRoot.ChangeEventDetails) => void) | undefined;
+	/**
+	 * When in a submenu, determines whether pressing the Escape key
+	 * closes the entire menu, or only the current child menu.
+	 * @default false
+	 */
+	closeParentOnEsc?: boolean | undefined;
+	/**
+	 * The content of the submenu.
+	 */
+	children?: React.OctaneNode;
+}
+
+export interface MenuSubmenuRootState {}
+
+export type MenuSubmenuRootChangeEventReason = MenuRoot.ChangeEventReason;
+export type MenuSubmenuRootChangeEventDetails = MenuRoot.ChangeEventDetails;
+
+export namespace MenuSubmenuRoot {
+	export type Props = MenuSubmenuRootProps;
+	export type State = MenuSubmenuRootState;
+	export type ChangeEventReason = MenuSubmenuRootChangeEventReason;
+	export type ChangeEventDetails = MenuSubmenuRootChangeEventDetails;
+}

package/src/menu/submenu-root/MenuSubmenuRootContext.ts

@@ -0,0 +1,16 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import type { MenuStore } from '../store/MenuStore';
+
+export const MenuSubmenuRootContext = React.createContext<MenuSubmenuRootContext | undefined>(
+	undefined,
+);
+
+export interface MenuSubmenuRootContext {
+	parentMenu: MenuStore<unknown>;
+}
+
+export function useMenuSubmenuRootContext(): MenuSubmenuRootContext | undefined {
+	return React.useContext(MenuSubmenuRootContext);
+}

package/src/menu/submenu-trigger/MenuSubmenuTrigger.tsrx

@@ -0,0 +1,278 @@
+'use client';
+import * as React from 'octane';
+import { isElementDisabled } from '@octanejs/base-ui-utils/isElementDisabled';
+import { warn } from '@octanejs/base-ui-utils/warn';
+import type { SafeReact } from '@octanejs/base-ui-utils/safeReact';
+import { EMPTY_OBJECT } from '@octanejs/base-ui-utils/empty';
+import { platform } from '@octanejs/base-ui-utils/platform';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { safePolygon, useClick, useHoverReferenceInteraction } from '../../floating-ui-react';
+import type { BaseUIComponentProps, NonNativeButtonProps } from '../../internals/types';
+import { useMenuRootContext } from '../root/MenuRootContext';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
+import { useCompositeListItem } from '../../internals/composite/list/useCompositeListItem';
+import { useMenuItem } from '../item/useMenuItem';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useMenuPositionerContext } from '../positioner/MenuPositionerContext';
+import { useTriggerRegistration } from '../../utils/popups';
+import { useMenuSubmenuRootContext } from '../submenu-root/MenuSubmenuRootContext';
+import { REASONS } from '../../internals/reasons';
+
+const VOICE_OVER_EXPANDED_PROPS = { 'aria-expanded': undefined };
+
+/**
+ * A menu item that opens a submenu.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export const MenuSubmenuTrigger = function MenuSubmenuTrigger(
+	componentPropsWithRef: React.PropsWithoutRef<MenuSubmenuTrigger.Props> & {
+		ref?: React.Ref<HTMLElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		render,
+		className,
+		style,
+		label,
+		id: idProp,
+		nativeButton = false,
+		openOnHover = true,
+		delay = 100,
+		closeDelay = 0,
+		disabled: disabledProp = false,
+		...elementProps
+	} = componentProps;
+
+	const submenuRootContext = useMenuSubmenuRootContext();
+	if (!submenuRootContext?.parentMenu) {
+		throw new Error('Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.');
+	}
+
+	const listItem = useCompositeListItem({ guess: true, label });
+	const menuPositionerContext = useMenuPositionerContext();
+
+	const { store } = useMenuRootContext();
+
+	const thisTriggerId = useBaseUiId(idProp);
+	const open = store.useState('open');
+	const floatingRootContext = store.useState('floatingRootContext');
+	const floatingTreeRoot = store.useState('floatingTreeRoot');
+	const popupId = store.useState('triggerPopupId', thisTriggerId);
+
+	const baseRegisterTrigger = useTriggerRegistration(thisTriggerId, store);
+	// Stable, so the merged ref on the rendered element keeps its identity for the trigger's whole
+	// lifetime; the latest `closeDelay` is read when it runs.
+	const registerTrigger = useStableCallback((element: Element | null) => {
+		baseRegisterTrigger(element);
+
+		if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
+			store.update({
+				activeTriggerId: thisTriggerId ?? null,
+				activeTriggerElement: element,
+				closeDelay,
+			});
+		}
+	});
+
+	const triggerElementRef = React.useRef<HTMLElement | null>(null);
+	const handleTriggerElementRef = React.useCallback(
+		(el: HTMLElement | null) => {
+			triggerElementRef.current = el;
+			store.set('activeTriggerElement', el);
+		},
+		[store],
+	);
+
+	// A stable ref does not re-fire when the id changes, so register the rendered element here
+	// instead. On React 17 the id also starts out `undefined`, so this is what registers the trigger
+	// at all.
+	useIsoLayoutEffect(() => {
+		registerTrigger(triggerElementRef.current);
+		return () => registerTrigger(null);
+	}, [registerTrigger, thisTriggerId, store]);
+
+	store.useSyncedValue('closeDelay', closeDelay);
+
+	const parentMenuStore = submenuRootContext.parentMenu;
+	const rootDisabled = store.useState('disabled');
+	const parentDisabled = parentMenuStore.useState('disabled');
+	const disabled = disabledProp || rootDisabled || parentDisabled;
+
+	if (process.env.NODE_ENV !== 'production') {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		React.useEffect(() => {
+			const element = triggerElementRef.current;
+			if (element && isElementDisabled(element) && !disabled) {
+				const ownerStackMessage = '';
+				warn(
+					`A disabled element was detected on <Menu.SubmenuTrigger>. To properly disable the trigger, use the \`disabled\` prop on the component instead of setting it on the rendered element.${ownerStackMessage}`,
+				);
+			}
+		});
+	}
+
+	const itemProps = parentMenuStore.useState('itemProps');
+	const highlighted = parentMenuStore.useState('isActive', listItem.index);
+
+	const itemMetadata = React.useMemo(
+		() => ({
+			type: 'submenu-trigger' as const,
+			setActive() {
+				if (parentMenuStore.select('highlightItemOnHover')) {
+					parentMenuStore.set('activeIndex', listItem.index);
+				}
+			},
+		}),
+		[parentMenuStore, listItem.index],
+	);
+
+	const { getItemProps, itemRef } = useMenuItem({
+		closeOnClick: false,
+		disabled,
+		highlighted,
+		id: thisTriggerId,
+		store,
+		typingRef: parentMenuStore.context.typingRef,
+		nativeButton,
+		itemMetadata,
+		nodeId: menuPositionerContext?.context.nodeId,
+	});
+
+	const hoverEnabled = store.useState('hoverEnabled');
+
+	const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
+		enabled: hoverEnabled && openOnHover && !disabled,
+		handleClose: safePolygon({ blockPointerEvents: true }),
+		mouseOnly: true,
+		move: true,
+		restMs: delay,
+		delay: { open: delay, close: closeDelay },
+		shouldOpen: delay > 0 ? () => parentMenuStore.select('allowMouseEnter') : undefined,
+		triggerElementRef,
+		externalTree: floatingTreeRoot,
+		isClosing: () => store.select('transitionStatus') === 'ending',
+		// Chrome can drop the trigger's `mouseleave` during a fast pointer sweep,
+		// leaving a stale submenu open (see #5152) — cancel from `mouseout` too.
+		guardStaleOpen: true,
+	});
+
+	const click = useClick(floatingRootContext, {
+		enabled: !disabled,
+		event: 'mousedown',
+		toggle: !openOnHover,
+		ignoreMouse: openOnHover,
+		stickIfOpen: false,
+	});
+
+	const localInteractionProps = click.reference ?? EMPTY_OBJECT;
+
+	const rootTriggerProps = store.useState('triggerProps', true);
+	delete rootTriggerProps.id;
+
+	const state: MenuSubmenuTriggerState = { disabled, highlighted, open };
+
+	const openMethod = store.useState('openMethod');
+	const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+	// Arrow keys open the submenu through list navigation without dispatching a click, so
+	// `openMethod` stays null there; Enter and Space do dispatch one and report `keyboard`.
+	const openedByKeyboard =
+		lastOpenChangeReason === REASONS.listNavigation || openMethod === 'keyboard';
+	const shouldOmitExpanded = open && openedByKeyboard && platform.screenReader.voiceOver;
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		stateAttributesMapping: triggerOpenStateMapping,
+		props: [
+			localInteractionProps,
+			hoverProps,
+			rootTriggerProps,
+			itemProps,
+			// Opening a submenu changes the trigger's expanded state while the trigger still holds
+			// focus, and VoiceOver announces that state change instead of the submenu item that focus
+			// moves to a moment later, so the first item is never announced. Dropping the state while
+			// the submenu is open avoids the announcement without claiming the submenu is collapsed;
+			// `aria-haspopup` still conveys that the item opens a submenu.
+			shouldOmitExpanded ? VOICE_OVER_EXPANDED_PROPS : undefined,
+			{
+				'aria-controls': popupId,
+				tabIndex: open || highlighted ? 0 : -1,
+				onBlur() {
+					if (highlighted) {
+						parentMenuStore.set('activeIndex', null);
+					}
+				},
+			},
+			elementProps,
+			getItemProps,
+		],
+		ref: [forwardedRef, listItem.ref, itemRef, registerTrigger, handleTriggerElementRef],
+	});
+
+	return element;
+};
+
+export interface MenuSubmenuTriggerState {
+	/**
+	 * Whether the component should ignore user interaction.
+	 */
+	disabled: boolean;
+	/**
+	 * Whether the item is highlighted.
+	 */
+	highlighted: boolean;
+	/**
+	 * Whether the menu is currently open.
+	 */
+	open: boolean;
+}
+
+export interface MenuSubmenuTriggerProps
+	extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuSubmenuTriggerState> {
+	onClick?: BaseUIComponentProps<'div', MenuSubmenuTriggerState>['onClick'] | undefined;
+	/**
+	 * Overrides the text label to use when the item is matched during keyboard text navigation.
+	 */
+	label?: string | undefined;
+	/**
+	 * @ignore
+	 */
+	id?: string | undefined;
+	/**
+	 * Whether the component should ignore user interaction.
+	 * @default false
+	 */
+	disabled?: boolean | undefined;
+	/**
+	 * How long to wait before the menu may be opened on hover. Specified in milliseconds.
+	 *
+	 * Requires the `openOnHover` prop.
+	 * @default 100
+	 */
+	delay?: number | undefined;
+	/**
+	 * How long to wait before closing the menu that was opened on hover.
+	 * Specified in milliseconds.
+	 *
+	 * Requires the `openOnHover` prop.
+	 * @default 0
+	 */
+	closeDelay?: number | undefined;
+	/**
+	 * Whether the menu should also open when the trigger is hovered.
+	 * @default true
+	 */
+	openOnHover?: boolean | undefined;
+}
+
+export namespace MenuSubmenuTrigger {
+	export type Props = MenuSubmenuTriggerProps;
+	export type State = MenuSubmenuTriggerState;
+}
+
+// Bundlers replace this expression; keep the build constant local to this module.
+declare const process: { env: { NODE_ENV?: string } };

package/src/menu/submenu-trigger/MenuSubmenuTriggerDataAttributes.ts

@@ -0,0 +1,14 @@
+import { CommonTriggerDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Present when the corresponding submenu is open.
+ */
+export const popupOpen = CommonTriggerDataAttributes.popupOpen;
+/**
+ * Present when the submenu trigger is highlighted.
+ */
+export const highlighted = 'data-highlighted';
+/**
+ * Present when the submenu trigger is disabled.
+ */
+export const disabled = 'data-disabled';