@octanejs/base-ui 0.1.11 → 0.1.15

package/src/utils/floating/useFocus.ts

@@ -0,0 +1,248 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useFocus.ts (v1.6.0). Opens the
+// popup while its trigger has focus, like CSS `:focus` — with the blocked-focus bookkeeping that
+// stops a press/Escape dismissal from immediately re-opening when focus returns to the trigger.
+//
+// octane adaptations: handlers receive the NATIVE event, so `event.nativeEvent` collapses to
+// `event`; every composed hook threads an explicit slot.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useEffect, useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { addEventListener } from '../addEventListener';
+import { mergeCleanups } from '../mergeCleanups';
+import { ownerDocument, ownerWindow } from '../owner';
+import { platform } from '../platform';
+import { useTimeout } from '../useTimeout';
+import { isElement, isHTMLElement } from '../dom';
+import { matchesFocusVisible } from '../matchesFocusVisible';
+import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
+import { createAttribute } from './createAttribute';
+import {
+	activeElement,
+	contains,
+	getTarget,
+	isTargetInsideEnabledTrigger,
+	isTypeableElement,
+} from './element';
+
+const isMacSafari = platform.os.mac && platform.engine.webkit;
+
+export interface UseFocusProps {
+	/**
+	 * Whether the hook is enabled, including all internal effects and event handlers.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * Waits for the specified time before opening.
+	 * @default undefined
+	 */
+	delay?: number | (() => number | undefined) | undefined;
+}
+
+export function useFocus(...args: any[]): Record<string, any> {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useFocus');
+	const context = user[0] as any;
+	const props = (user[1] as UseFocusProps) ?? {};
+
+	const { enabled = true, delay } = props;
+
+	const store = context != null && 'rootStore' in context ? context.rootStore : context;
+
+	const { events, dataRef } = store.context;
+
+	const blockFocusRef = useRef(false, subSlot(slot, 'block'));
+	// Track which reference should be blocked from re-opening after Escape/press dismissal.
+	const blockedReferenceRef = useRef<Element | null>(null, subSlot(slot, 'blockedRef'));
+	const keyboardModalityRef = useRef(true, subSlot(slot, 'kbd'));
+
+	const timeout = useTimeout(subSlot(slot, 'to'));
+
+	useEffect(
+		() => {
+			const domReference = store.select('domReferenceElement');
+
+			if (!enabled) {
+				return undefined;
+			}
+
+			const win = ownerWindow(domReference);
+
+			// If the reference was focused and the user left the tab/window while the popup was
+			// closed, block the focus-open when they return.
+			function onBlur() {
+				const currentDomReference = store.select('domReferenceElement');
+				if (
+					!store.select('open') &&
+					isHTMLElement(currentDomReference) &&
+					currentDomReference === activeElement(ownerDocument(currentDomReference))
+				) {
+					blockFocusRef.current = true;
+				}
+			}
+
+			function onKeyDown() {
+				keyboardModalityRef.current = true;
+			}
+
+			function onPointerDown() {
+				keyboardModalityRef.current = false;
+			}
+
+			return mergeCleanups(
+				addEventListener(win, 'blur', onBlur),
+				isMacSafari && addEventListener(win, 'keydown', onKeyDown, true),
+				isMacSafari && addEventListener(win, 'pointerdown', onPointerDown, true),
+			);
+		},
+		[store, enabled],
+		subSlot(slot, 'e:win'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) {
+				return undefined;
+			}
+
+			function onOpenChangeLocal(details: any) {
+				if (details.reason === REASONS.triggerPress || details.reason === REASONS.escapeKey) {
+					const referenceElement = store.select('domReferenceElement');
+					if (isElement(referenceElement)) {
+						blockedReferenceRef.current = referenceElement;
+						blockFocusRef.current = true;
+					}
+				}
+			}
+
+			events.on('openchange', onOpenChangeLocal);
+			return () => {
+				events.off('openchange', onOpenChangeLocal);
+			};
+		},
+		[events, enabled, store],
+		subSlot(slot, 'e:openchange'),
+	);
+
+	const reference = useMemo(
+		() => {
+			function resetBlockedFocus() {
+				blockFocusRef.current = false;
+				blockedReferenceRef.current = null;
+			}
+
+			return {
+				onMouseLeave() {
+					resetBlockedFocus();
+				},
+				onFocus(event: FocusEvent) {
+					const focusTarget = event.currentTarget as Element;
+
+					if (blockFocusRef.current) {
+						if (blockedReferenceRef.current === focusTarget) {
+							return;
+						}
+						resetBlockedFocus();
+					}
+
+					const target = getTarget(event);
+
+					if (isElement(target)) {
+						// Safari fails to match `:focus-visible` if focus was initially outside the
+						// document.
+						if (isMacSafari && !event.relatedTarget) {
+							if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+								return;
+							}
+						} else if (!matchesFocusVisible(target as Element)) {
+							return;
+						}
+					}
+
+					const movedFromOtherEnabledTrigger = isTargetInsideEnabledTrigger(
+						event.relatedTarget,
+						store.context.triggerElements,
+					);
+
+					const currentTarget = event.currentTarget;
+					const delayValue = typeof delay === 'function' ? delay() : delay;
+
+					if (
+						(store.select('open') && movedFromOtherEnabledTrigger) ||
+						delayValue === 0 ||
+						delayValue === undefined
+					) {
+						store.setOpen(
+							true,
+							createChangeEventDetails(REASONS.triggerFocus, event, currentTarget as HTMLElement),
+						);
+						return;
+					}
+
+					timeout.start(delayValue, () => {
+						if (blockFocusRef.current) {
+							return;
+						}
+						store.setOpen(
+							true,
+							createChangeEventDetails(REASONS.triggerFocus, event, currentTarget as HTMLElement),
+						);
+					});
+				},
+				onBlur(event: FocusEvent) {
+					resetBlockedFocus();
+
+					const relatedTarget = event.relatedTarget;
+
+					// Hit the non-modal focus management portal guard. Focus will be moved into the
+					// floating element immediately after.
+					const movedToFocusGuard =
+						isElement(relatedTarget) &&
+						(relatedTarget as Element).hasAttribute(createAttribute('focus-guard')) &&
+						(relatedTarget as Element).getAttribute('data-type') === 'outside';
+
+					// Wait for the window blur listener to fire.
+					timeout.start(0, () => {
+						const domReference = store.select('domReferenceElement');
+						const activeEl = activeElement(ownerDocument(domReference));
+
+						// Focus left the page — keep it open.
+						if (!relatedTarget && activeEl === domReference) {
+							return;
+						}
+
+						// When focusing the reference element (e.g. a regular click), then clicking into
+						// the floating element, prevent it from hiding. `relatedTarget` only points to
+						// the shadow host, so the active element is the reliable check.
+						if (
+							contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) ||
+							contains(domReference, activeEl) ||
+							movedToFocusGuard
+						) {
+							return;
+						}
+
+						// If the next focused element is one of the triggers, do not close: that
+						// trigger's own focus handler owns the open state.
+						const nextFocusedElement = relatedTarget ?? activeEl;
+						if (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+							return;
+						}
+
+						store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, event));
+					});
+				},
+			};
+		},
+		[dataRef, delay, store, timeout],
+		subSlot(slot, 'ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference, trigger: reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'out'),
+	);
+}

package/src/utils/floating/useHoverFloatingInteraction.ts

@@ -1,12 +1,302 @@
-// STUB — the popup side of the open-on-hover interaction (Base UI's useHoverFloatingInteraction:
-// keep-open-while-hovering-popup + closeDelay + safePolygon, part of the ~1400-line hover system).
-// It is only active when a trigger sets `openOnHover` (off by default), so returning nothing here
-// leaves click-to-open Popover/Tooltip fully functional. TODO: port the real popup-hover keep-open
-// behavior alongside `useHoverReferenceInteraction` when hover-open tests land.
-export function useHoverFloatingInteraction(
-	_context: any,
-	_props: any,
-	_slot?: symbol | undefined,
-): void {
-	// no-op while hover-open is out of scope
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useHoverFloatingInteraction.ts
+// (v1.6.0). The popup side of open-on-hover: keeps the popup open while the cursor is inside it,
+// closes it (after `closeDelay`) on leave, defers to the safe-polygon handler when one is active,
+// and applies the pointer-events mutation that shields siblings while the cursor travels.
+//
+// octane adaptations: native events; `useIsoLayoutEffect` → `useLayoutEffect`; every composed hook
+// threads an explicit slot.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useEffect, useLayoutEffect } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { addEventListener } from '../addEventListener';
+import { mergeCleanups } from '../mergeCleanups';
+import { ownerDocument } from '../owner';
+import { useStableCallback } from '../useStableCallback';
+import { useTimeout } from '../useTimeout';
+import { isElement } from '../dom';
+import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
+import { useFloatingParentNodeId, useFloatingTree } from './FloatingTree';
+import { contains, getTarget } from './element';
+import { getNodeChildren } from './nodes';
+import {
+	applySafePolygonPointerEventsMutation,
+	clearSafePolygonPointerEventsMutation,
+	isInteractiveElement,
+	useHoverInteractionSharedState,
+} from './useHoverInteractionSharedState';
+import {
+	getDelay,
+	isClickLikeOpenEvent as isClickLikeOpenEventShared,
+	isHoverOpenEvent,
+	isInsideEnabledTrigger,
+} from './useHoverShared';
+
+export interface UseHoverFloatingInteractionProps {
+	/**
+	 * Whether the hook is enabled, including all internal effects and event handlers.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * Waits for the specified time when the event listener runs before changing the `open` state.
+	 * @default 0
+	 */
+	closeDelay?: number | (() => number) | undefined;
+	/**
+	 * Tree node id override for floating elements that participate in the tree without a
+	 * `FloatingContext`, such as inline nested navigation menus.
+	 */
+	nodeId?: string | undefined;
+}
+
+export function useHoverFloatingInteraction(...args: any[]): void {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useHoverFloatingInteraction');
+	const context = user[0] as any;
+	const parameters = (user[1] as UseHoverFloatingInteractionProps) ?? {};
+
+	const { enabled = true, closeDelay: closeDelayProp = 0, nodeId: nodeIdProp } = parameters;
+
+	const store = context != null && 'rootStore' in context ? context.rootStore : context;
+
+	const open = store.useState('open', subSlot(slot, 's:open'));
+	const floatingElement = store.useState('floatingElement', subSlot(slot, 's:floating'));
+	const domReferenceElement = store.useState('domReferenceElement', subSlot(slot, 's:ref'));
+	const dataRef = store.context.dataRef;
+
+	const tree = useFloatingTree();
+	const parentId = useFloatingParentNodeId();
+	const instance = useHoverInteractionSharedState(store, subSlot(slot, 'shared'));
+
+	const childClosedTimeout = useTimeout(subSlot(slot, 'cct'));
+
+	const isClickLikeOpenEvent = useStableCallback(
+		() => {
+			return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
+		},
+		subSlot(slot, 'iclo'),
+	);
+
+	const isHoverOpen = useStableCallback(
+		() => {
+			return isHoverOpenEvent(dataRef.current.openEvent?.type);
+		},
+		subSlot(slot, 'iho'),
+	);
+
+	const clearPointerEvents = useStableCallback(
+		() => {
+			clearSafePolygonPointerEventsMutation(instance);
+		},
+		subSlot(slot, 'cpe'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (!open) {
+				instance.pointerType = undefined;
+				instance.restTimeoutPending = false;
+				instance.interactedInside = false;
+				clearPointerEvents();
+			}
+		},
+		[open, instance, clearPointerEvents],
+		subSlot(slot, 'l:reset'),
+	);
+
+	useEffect(
+		() => {
+			return clearPointerEvents;
+		},
+		[clearPointerEvents],
+		subSlot(slot, 'e:cpe'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (!enabled) {
+				return undefined;
+			}
+
+			if (
+				open &&
+				instance.handleCloseOptions?.blockPointerEvents &&
+				isHoverOpen() &&
+				isElement(domReferenceElement) &&
+				floatingElement
+			) {
+				const ref = domReferenceElement as HTMLElement | SVGSVGElement;
+				const floatingEl = floatingElement as HTMLElement;
+				const doc = ownerDocument(floatingElement as Element);
+
+				const parentFloating = tree?.nodesRef.current.find((node: any) => node.id === parentId)
+					?.context?.elements.floating as HTMLElement | null;
+
+				if (parentFloating) {
+					parentFloating.style.pointerEvents = '';
+				}
+
+				// A keep-mounted submenu can appear in the tree before it opens, so a cached scope or
+				// parent lookup may resolve to the submenu itself. That would not shield sibling items
+				// in the parent menu.
+				const cachedScopeElement =
+					instance.pointerEventsScopeElement !== floatingEl
+						? instance.pointerEventsScopeElement
+						: null;
+				const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null;
+				const scopeElement =
+					instance.handleCloseOptions?.getScope?.() ??
+					cachedScopeElement ??
+					parentScopeElement ??
+					(ref.closest('[data-rootownerid]') as HTMLElement | SVGSVGElement | null) ??
+					doc.body;
+
+				applySafePolygonPointerEventsMutation(instance, {
+					scopeElement,
+					referenceElement: ref,
+					floatingElement: floatingEl,
+				});
+
+				return () => {
+					clearPointerEvents();
+				};
+			}
+
+			return undefined;
+		},
+		[
+			enabled,
+			open,
+			domReferenceElement,
+			floatingElement,
+			instance,
+			isHoverOpen,
+			tree,
+			parentId,
+			clearPointerEvents,
+		],
+		subSlot(slot, 'l:blockPointer'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) {
+				return undefined;
+			}
+
+			function hasParentChildren() {
+				return !!(tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0);
+			}
+
+			function closeWithDelay(event: MouseEvent) {
+				const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+				const close = () => {
+					store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+					tree?.events.emit('floating.closed', event);
+				};
+
+				if (closeDelay) {
+					instance.openChangeTimeout.start(closeDelay, close);
+				} else {
+					instance.openChangeTimeout.clear();
+					close();
+				}
+			}
+
+			function handleInteractInside(event: PointerEvent) {
+				const target = getTarget(event) as Element | null;
+				if (!isInteractiveElement(target)) {
+					instance.interactedInside = false;
+					return;
+				}
+				instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+			}
+
+			function onFloatingMouseEnter() {
+				instance.openChangeTimeout.clear();
+				childClosedTimeout.clear();
+				tree?.events.off('floating.closed', onNodeClosed);
+				clearPointerEvents();
+			}
+
+			function onFloatingMouseLeave(event: MouseEvent) {
+				if (hasParentChildren() && tree) {
+					tree.events.on('floating.closed', onNodeClosed);
+					return;
+				}
+
+				// Leaving toward another trigger of the same popup just moves it; don't close.
+				if (isInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
+					return;
+				}
+
+				const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
+				const relatedTarget = event.relatedTarget;
+				const isMovingIntoDescendantFloating =
+					tree &&
+					currentNodeId &&
+					isElement(relatedTarget) &&
+					getNodeChildren(tree.nodesRef.current, currentNodeId, false).some((node: any) =>
+						contains(node.context?.elements.floating, relatedTarget as Element),
+					);
+
+				if (isMovingIntoDescendantFloating) {
+					return;
+				}
+
+				// If the safePolygon handler is active, let it handle the close logic.
+				if (instance.handler) {
+					instance.handler(event);
+					return;
+				}
+
+				clearPointerEvents();
+				if (isHoverOpen() && !isClickLikeOpenEvent()) {
+					closeWithDelay(event);
+				}
+			}
+
+			function onNodeClosed(event: MouseEvent) {
+				if (!tree || !parentId || hasParentChildren()) {
+					return;
+				}
+				// Allow the mouseenter event to fire in case the child closed because the mouse moved
+				// into the parent.
+				childClosedTimeout.start(0, () => {
+					tree.events.off('floating.closed', onNodeClosed);
+					store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+					tree.events.emit('floating.closed', event);
+				});
+			}
+
+			const floating = floatingElement as HTMLElement | null;
+			return mergeCleanups(
+				floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter as EventListener),
+				floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave as EventListener),
+				floating &&
+					addEventListener(floating, 'pointerdown', handleInteractInside as EventListener, true),
+				() => {
+					tree?.events.off('floating.closed', onNodeClosed);
+				},
+			);
+		},
+		[
+			enabled,
+			floatingElement,
+			store,
+			dataRef,
+			closeDelayProp,
+			nodeIdProp,
+			isHoverOpen,
+			isClickLikeOpenEvent,
+			clearPointerEvents,
+			instance,
+			tree,
+			parentId,
+			childClosedTimeout,
+		],
+		subSlot(slot, 'e:listeners'),
+	);
 }

package/src/utils/floating/useHoverInteractionSharedState.ts

@@ -0,0 +1,139 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useHoverInteractionSharedState.ts
+// (v1.6.0). The reference-side and floating-side hover hooks act on ONE popup, so they share a
+// single mutable interaction record parked on the floating root store's `dataRef` — pointer type,
+// the live safe-polygon mousemove handler, the open/rest timers, and the pointer-events mutation
+// that keeps the cursor's path to the popup clickable.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useEffect } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { Timeout } from '../useTimeout';
+import { useRefWithInit } from '../useRefWithInit';
+import type { HandleCloseOptions } from './useHoverShared';
+
+export { isInteractiveElement } from './element';
+
+export class HoverInteraction {
+	pointerType: string | undefined = undefined;
+
+	interactedInside = false;
+
+	handler: ((event: MouseEvent) => void) | undefined = undefined;
+
+	blockMouseMove = true;
+
+	performedPointerEventsMutation = false;
+
+	pointerEventsScopeElement: HTMLElement | SVGSVGElement | null = null;
+
+	pointerEventsReferenceElement: HTMLElement | SVGSVGElement | null = null;
+
+	pointerEventsFloatingElement: HTMLElement | null = null;
+
+	restTimeoutPending = false;
+
+	openChangeTimeout: Timeout = new Timeout();
+
+	restTimeout: Timeout = new Timeout();
+
+	handleCloseOptions: HandleCloseOptions | undefined = undefined;
+
+	static create(): HoverInteraction {
+		return new HoverInteraction();
+	}
+
+	dispose = (): void => {
+		this.openChangeTimeout.clear();
+		this.restTimeout.clear();
+	};
+
+	disposeEffect = (): (() => void) => {
+		return this.dispose;
+	};
+}
+
+type PointerEventsMutationState = Pick<
+	HoverInteraction,
+	| 'performedPointerEventsMutation'
+	| 'pointerEventsScopeElement'
+	| 'pointerEventsReferenceElement'
+	| 'pointerEventsFloatingElement'
+>;
+
+// Only one interaction may own the pointer-events mutation for a given scope element, otherwise a
+// sibling popup's cleanup would strip the styles the active one still needs.
+const pointerEventsMutationOwnerByScopeElement = new WeakMap<
+	HTMLElement | SVGSVGElement,
+	PointerEventsMutationState
+>();
+
+export function clearSafePolygonPointerEventsMutation(instance: PointerEventsMutationState): void {
+	if (!instance.performedPointerEventsMutation) {
+		return;
+	}
+
+	const scopeElement = instance.pointerEventsScopeElement;
+
+	if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
+		instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
+		instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
+		instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+		pointerEventsMutationOwnerByScopeElement.delete(scopeElement);
+	}
+
+	instance.performedPointerEventsMutation = false;
+	instance.pointerEventsScopeElement = null;
+	instance.pointerEventsReferenceElement = null;
+	instance.pointerEventsFloatingElement = null;
+}
+
+export function applySafePolygonPointerEventsMutation(
+	instance: PointerEventsMutationState,
+	options: {
+		scopeElement: HTMLElement | SVGSVGElement;
+		referenceElement: HTMLElement | SVGSVGElement;
+		floatingElement: HTMLElement;
+	},
+): void {
+	const { scopeElement, referenceElement, floatingElement } = options;
+
+	const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement);
+	if (existingOwner && existingOwner !== instance) {
+		clearSafePolygonPointerEventsMutation(existingOwner);
+	}
+
+	clearSafePolygonPointerEventsMutation(instance);
+	instance.performedPointerEventsMutation = true;
+	instance.pointerEventsScopeElement = scopeElement;
+	instance.pointerEventsReferenceElement = referenceElement;
+	instance.pointerEventsFloatingElement = floatingElement;
+	pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance);
+
+	scopeElement.style.pointerEvents = 'none';
+	referenceElement.style.pointerEvents = 'auto';
+	floatingElement.style.pointerEvents = 'auto';
+}
+
+export function useHoverInteractionSharedState(...args: any[]): HoverInteraction {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useHoverInteractionSharedState');
+	const store = user[0] as any;
+
+	const data = store.context.dataRef.current as {
+		hoverInteractionState?: HoverInteraction | undefined;
+	};
+	const instance = useRefWithInit<HoverInteraction>(
+		() => data.hoverInteractionState ?? HoverInteraction.create(),
+		undefined,
+		subSlot(slot, 'inst'),
+	).current;
+
+	if (!data.hoverInteractionState) {
+		data.hoverInteractionState = instance;
+	}
+
+	useEffect(data.hoverInteractionState.disposeEffect, [], subSlot(slot, 'e:mount'));
+
+	return data.hoverInteractionState;
+}