@octanejs/floating-ui 0.1.2

package/src/useFocus.ts

@@ -0,0 +1,154 @@
+// Ported from @floating-ui/react useFocus. octane events are NATIVE, so
+// `event.nativeEvent` → `event`, and `getTarget(event)` reads the native target.
+import { getWindow, isElement, isHTMLElement } from '@floating-ui/utils/dom';
+import { useEffect, useMemo, useRef } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import {
+	activeElement,
+	clearTimeoutIfSet,
+	contains,
+	createAttribute,
+	getDocument,
+	getTarget,
+	isMacSafari,
+	isTypeableElement,
+	matchesFocusVisible,
+} from './utils';
+
+export function useFocus(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const onOpenChange = context.onOpenChange;
+	const events = context.events;
+	const dataRef = context.dataRef;
+	const elements = context.elements;
+
+	const enabled = props.enabled ?? true;
+	const visibleOnly = props.visibleOnly ?? true;
+
+	const blockFocusRef = useRef(false, subSlot(slot, 'block'));
+	const timeoutRef = useRef(-1, subSlot(slot, 'timeout'));
+	const keyboardModalityRef = useRef(true, subSlot(slot, 'kbd'));
+
+	useEffect(
+		() => {
+			if (!enabled) return;
+			const win = getWindow(elements.domReference);
+			function onBlur() {
+				if (
+					!open &&
+					isHTMLElement(elements.domReference) &&
+					elements.domReference === activeElement(getDocument(elements.domReference))
+				) {
+					blockFocusRef.current = true;
+				}
+			}
+			function onKeyDown() {
+				keyboardModalityRef.current = true;
+			}
+			function onPointerDown() {
+				keyboardModalityRef.current = false;
+			}
+			win.addEventListener('blur', onBlur);
+			if (isMacSafari()) {
+				win.addEventListener('keydown', onKeyDown, true);
+				win.addEventListener('pointerdown', onPointerDown, true);
+			}
+			return () => {
+				win.removeEventListener('blur', onBlur);
+				if (isMacSafari()) {
+					win.removeEventListener('keydown', onKeyDown, true);
+					win.removeEventListener('pointerdown', onPointerDown, true);
+				}
+			};
+		},
+		[elements.domReference, open, enabled],
+		subSlot(slot, 'e:win'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) return;
+			function onOpenChangeLocal(_ref: any) {
+				const { reason } = _ref;
+				if (reason === 'reference-press' || reason === 'escape-key') {
+					blockFocusRef.current = true;
+				}
+			}
+			events.on('openchange', onOpenChangeLocal);
+			return () => {
+				events.off('openchange', onOpenChangeLocal);
+			};
+		},
+		[events, enabled],
+		subSlot(slot, 'e:oc'),
+	);
+
+	useEffect(
+		() => {
+			return () => {
+				clearTimeoutIfSet(timeoutRef);
+			};
+		},
+		[],
+		subSlot(slot, 'e:cleanup'),
+	);
+
+	const reference = useMemo(
+		() => ({
+			onMouseLeave() {
+				blockFocusRef.current = false;
+			},
+			onFocus(event: any) {
+				if (blockFocusRef.current) return;
+				const target = getTarget(event);
+				if (visibleOnly && isElement(target)) {
+					if (isMacSafari() && !event.relatedTarget) {
+						if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+							return;
+						}
+					} else if (!matchesFocusVisible(target)) {
+						return;
+					}
+				}
+				onOpenChange(true, event, 'focus');
+			},
+			onBlur(event: any) {
+				blockFocusRef.current = false;
+				const relatedTarget = event.relatedTarget;
+
+				const movedToFocusGuard =
+					isElement(relatedTarget) &&
+					relatedTarget.hasAttribute(createAttribute('focus-guard')) &&
+					relatedTarget.getAttribute('data-type') === 'outside';
+
+				timeoutRef.current = window.setTimeout(() => {
+					const activeEl = activeElement(
+						elements.domReference ? elements.domReference.ownerDocument : document,
+					);
+					if (!relatedTarget && activeEl === elements.domReference) return;
+					if (
+						contains(dataRef.current.floatingContext?.refs.floating.current, activeEl as any) ||
+						contains(elements.domReference, activeEl as any) ||
+						movedToFocusGuard
+					) {
+						return;
+					}
+					onOpenChange(false, event, 'focus');
+				});
+			},
+		}),
+		[dataRef, elements.domReference, onOpenChange, visibleOnly],
+		subSlot(slot, 'm:ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'm:ret'),
+	);
+}

package/src/useHover.ts

@@ -0,0 +1,406 @@
+// Ported from @floating-ui/react useHover — opens on hover (like CSS :hover),
+// with optional safePolygon close handling. Mouse listeners are bound directly to
+// the DOM (native), so octane's delegation isn't involved. `event.nativeEvent` →
+// `event`.
+import { isElement } from '@floating-ui/utils/dom';
+import { useCallback, useEffect, useMemo, useRef } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import { useFloatingParentNodeId, useFloatingTree } from './tree';
+import {
+	clearTimeoutIfSet,
+	contains,
+	createAttribute,
+	getDelay,
+	getDocument,
+	isMouseLikePointerType,
+	useEffectEvent,
+	useLatestRef,
+	useModernLayoutEffect,
+} from './utils';
+
+const safePolygonIdentifier = createAttribute('safe-polygon');
+
+function getRestMs(value: any): any {
+	if (typeof value === 'function') {
+		return value();
+	}
+	return value;
+}
+
+export function useHover(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const onOpenChange = context.onOpenChange;
+	const dataRef = context.dataRef;
+	const events = context.events;
+	const elements = context.elements;
+
+	const enabled = props.enabled ?? true;
+	const delay = props.delay ?? 0;
+	const handleClose = props.handleClose ?? null;
+	const mouseOnly = props.mouseOnly ?? false;
+	const restMs = props.restMs ?? 0;
+	const move = props.move ?? true;
+
+	const tree = useFloatingTree();
+	const parentId = useFloatingParentNodeId();
+	const handleCloseRef = useLatestRef(handleClose, subSlot(slot, 'hc'));
+	const delayRef = useLatestRef(delay, subSlot(slot, 'delay'));
+	const openRef = useLatestRef(open, subSlot(slot, 'open'));
+	const restMsRef = useLatestRef(restMs, subSlot(slot, 'restms'));
+
+	const pointerTypeRef = useRef<any>(undefined, subSlot(slot, 'ptype'));
+	const timeoutRef = useRef(-1, subSlot(slot, 'timeout'));
+	const handlerRef = useRef<any>(undefined, subSlot(slot, 'handler'));
+	const restTimeoutRef = useRef(-1, subSlot(slot, 'resttimeout'));
+	const blockMouseMoveRef = useRef(true, subSlot(slot, 'block'));
+	const performedPointerEventsMutationRef = useRef(false, subSlot(slot, 'ppem'));
+	const unbindMouseMoveRef = useRef<any>(() => {}, subSlot(slot, 'unbind'));
+	const restTimeoutPendingRef = useRef(false, subSlot(slot, 'rtp'));
+
+	const isHoverOpen = useEffectEvent(
+		() => {
+			const type = dataRef.current.openEvent?.type;
+			return type?.includes('mouse') && type !== 'mousedown';
+		},
+		subSlot(slot, 'ishover'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) return;
+			function onOpenChangeLocal(_ref: any) {
+				const { open: o } = _ref;
+				if (!o) {
+					clearTimeoutIfSet(timeoutRef);
+					clearTimeoutIfSet(restTimeoutRef);
+					blockMouseMoveRef.current = true;
+					restTimeoutPendingRef.current = false;
+				}
+			}
+			events.on('openchange', onOpenChangeLocal);
+			return () => {
+				events.off('openchange', onOpenChangeLocal);
+			};
+		},
+		[enabled, events],
+		subSlot(slot, 'e:oc'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) return;
+			if (!handleCloseRef.current) return;
+			if (!open) return;
+			function onLeave(event: any) {
+				if (isHoverOpen()) {
+					onOpenChange(false, event, 'hover');
+				}
+			}
+			const html = getDocument(elements.floating).documentElement;
+			html.addEventListener('mouseleave', onLeave);
+			return () => {
+				html.removeEventListener('mouseleave', onLeave);
+			};
+		},
+		[elements.floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen],
+		subSlot(slot, 'e:leave'),
+	);
+
+	const closeWithDelay = useCallback(
+		(event: any, runElseBranch = true, reason = 'hover') => {
+			const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+			if (closeDelay && !handlerRef.current) {
+				clearTimeoutIfSet(timeoutRef);
+				timeoutRef.current = window.setTimeout(
+					() => onOpenChange(false, event, reason),
+					closeDelay,
+				);
+			} else if (runElseBranch) {
+				clearTimeoutIfSet(timeoutRef);
+				onOpenChange(false, event, reason);
+			}
+		},
+		[delayRef, onOpenChange],
+		subSlot(slot, 'cwd'),
+	);
+
+	const cleanupMouseMoveHandler = useEffectEvent(
+		() => {
+			unbindMouseMoveRef.current();
+			handlerRef.current = undefined;
+		},
+		subSlot(slot, 'cleanupmm'),
+	);
+
+	const clearPointerEvents = useEffectEvent(
+		() => {
+			if (performedPointerEventsMutationRef.current) {
+				const body = getDocument(elements.floating).body;
+				body.style.pointerEvents = '';
+				body.removeAttribute(safePolygonIdentifier);
+				performedPointerEventsMutationRef.current = false;
+			}
+		},
+		subSlot(slot, 'clearpe'),
+	);
+
+	const isClickLikeOpenEvent = useEffectEvent(
+		() => {
+			return dataRef.current.openEvent
+				? ['click', 'mousedown'].includes(dataRef.current.openEvent.type)
+				: false;
+		},
+		subSlot(slot, 'isclick'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled) return;
+			function onReferenceMouseEnter(event: any) {
+				clearTimeoutIfSet(timeoutRef);
+				blockMouseMoveRef.current = false;
+				if (
+					(mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) ||
+					(getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open'))
+				) {
+					return;
+				}
+				const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+				if (openDelay) {
+					timeoutRef.current = window.setTimeout(() => {
+						if (!openRef.current) {
+							onOpenChange(true, event, 'hover');
+						}
+					}, openDelay);
+				} else if (!open) {
+					onOpenChange(true, event, 'hover');
+				}
+			}
+			function onReferenceMouseLeave(event: any) {
+				if (isClickLikeOpenEvent()) {
+					clearPointerEvents();
+					return;
+				}
+				unbindMouseMoveRef.current();
+				const doc = getDocument(elements.floating);
+				clearTimeoutIfSet(restTimeoutRef);
+				restTimeoutPendingRef.current = false;
+				if (handleCloseRef.current && dataRef.current.floatingContext) {
+					if (!open) {
+						clearTimeoutIfSet(timeoutRef);
+					}
+					handlerRef.current = handleCloseRef.current({
+						...dataRef.current.floatingContext,
+						tree,
+						x: event.clientX,
+						y: event.clientY,
+						onClose() {
+							clearPointerEvents();
+							cleanupMouseMoveHandler();
+							if (!isClickLikeOpenEvent()) {
+								closeWithDelay(event, true, 'safe-polygon');
+							}
+						},
+					});
+					const handler = handlerRef.current;
+					doc.addEventListener('mousemove', handler);
+					unbindMouseMoveRef.current = () => {
+						doc.removeEventListener('mousemove', handler);
+					};
+					return;
+				}
+				const shouldClose =
+					pointerTypeRef.current === 'touch'
+						? !contains(elements.floating, event.relatedTarget)
+						: true;
+				if (shouldClose) {
+					closeWithDelay(event);
+				}
+			}
+			function onScrollMouseLeave(event: any) {
+				if (isClickLikeOpenEvent()) return;
+				if (!dataRef.current.floatingContext) return;
+				handleCloseRef.current?.({
+					...dataRef.current.floatingContext,
+					tree,
+					x: event.clientX,
+					y: event.clientY,
+					onClose() {
+						clearPointerEvents();
+						cleanupMouseMoveHandler();
+						if (!isClickLikeOpenEvent()) {
+							closeWithDelay(event);
+						}
+					},
+				})(event);
+			}
+			function onFloatingMouseEnter() {
+				clearTimeoutIfSet(timeoutRef);
+			}
+			function onFloatingMouseLeave(event: any) {
+				if (!isClickLikeOpenEvent()) {
+					closeWithDelay(event, false);
+				}
+			}
+			if (isElement(elements.domReference)) {
+				const reference = elements.domReference;
+				const floating = elements.floating;
+				if (open) {
+					reference.addEventListener('mouseleave', onScrollMouseLeave);
+				}
+				if (move) {
+					reference.addEventListener('mousemove', onReferenceMouseEnter, { once: true });
+				}
+				reference.addEventListener('mouseenter', onReferenceMouseEnter);
+				reference.addEventListener('mouseleave', onReferenceMouseLeave);
+				if (floating) {
+					floating.addEventListener('mouseleave', onScrollMouseLeave);
+					floating.addEventListener('mouseenter', onFloatingMouseEnter);
+					floating.addEventListener('mouseleave', onFloatingMouseLeave);
+				}
+				return () => {
+					if (open) {
+						reference.removeEventListener('mouseleave', onScrollMouseLeave);
+					}
+					if (move) {
+						reference.removeEventListener('mousemove', onReferenceMouseEnter);
+					}
+					reference.removeEventListener('mouseenter', onReferenceMouseEnter);
+					reference.removeEventListener('mouseleave', onReferenceMouseLeave);
+					if (floating) {
+						floating.removeEventListener('mouseleave', onScrollMouseLeave);
+						floating.removeEventListener('mouseenter', onFloatingMouseEnter);
+						floating.removeEventListener('mouseleave', onFloatingMouseLeave);
+					}
+				};
+			}
+		},
+		[
+			elements,
+			enabled,
+			context,
+			mouseOnly,
+			move,
+			closeWithDelay,
+			cleanupMouseMoveHandler,
+			clearPointerEvents,
+			onOpenChange,
+			open,
+			openRef,
+			tree,
+			delayRef,
+			handleCloseRef,
+			dataRef,
+			isClickLikeOpenEvent,
+			restMsRef,
+		],
+		subSlot(slot, 'e:refevents'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (!enabled) return;
+			if (open && handleCloseRef.current?.__options?.blockPointerEvents && isHoverOpen()) {
+				performedPointerEventsMutationRef.current = true;
+				const floatingEl = elements.floating;
+				if (isElement(elements.domReference) && floatingEl) {
+					const body = getDocument(elements.floating).body;
+					body.setAttribute(safePolygonIdentifier, '');
+					const ref = elements.domReference;
+					const parentFloating = tree?.nodesRef.current.find((node: any) => node.id === parentId)
+						?.context?.elements.floating;
+					if (parentFloating) {
+						parentFloating.style.pointerEvents = '';
+					}
+					body.style.pointerEvents = 'none';
+					ref.style.pointerEvents = 'auto';
+					floatingEl.style.pointerEvents = 'auto';
+					return () => {
+						body.style.pointerEvents = '';
+						ref.style.pointerEvents = '';
+						floatingEl.style.pointerEvents = '';
+					};
+				}
+			}
+		},
+		[enabled, open, parentId, elements, tree, handleCloseRef, isHoverOpen],
+		subSlot(slot, 'e:blockpe'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (!open) {
+				pointerTypeRef.current = undefined;
+				restTimeoutPendingRef.current = false;
+				cleanupMouseMoveHandler();
+				clearPointerEvents();
+			}
+		},
+		[open, cleanupMouseMoveHandler, clearPointerEvents],
+		subSlot(slot, 'e:reset'),
+	);
+
+	useEffect(
+		() => {
+			return () => {
+				cleanupMouseMoveHandler();
+				clearTimeoutIfSet(timeoutRef);
+				clearTimeoutIfSet(restTimeoutRef);
+				clearPointerEvents();
+			};
+		},
+		[enabled, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents],
+		subSlot(slot, 'e:cleanup'),
+	);
+
+	const reference = useMemo(
+		() => {
+			function setPointerRef(event: any) {
+				pointerTypeRef.current = event.pointerType;
+			}
+			return {
+				onPointerDown: setPointerRef,
+				onPointerEnter: setPointerRef,
+				onMouseMove(event: any) {
+					function handleMouseMove() {
+						if (!blockMouseMoveRef.current && !openRef.current) {
+							onOpenChange(true, event, 'hover');
+						}
+					}
+					if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+						return;
+					}
+					if (open || getRestMs(restMsRef.current) === 0) {
+						return;
+					}
+					if (restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
+						return;
+					}
+					clearTimeoutIfSet(restTimeoutRef);
+					if (pointerTypeRef.current === 'touch') {
+						handleMouseMove();
+					} else {
+						restTimeoutPendingRef.current = true;
+						restTimeoutRef.current = window.setTimeout(
+							handleMouseMove,
+							getRestMs(restMsRef.current),
+						);
+					}
+				},
+			};
+		},
+		[mouseOnly, onOpenChange, open, openRef, restMsRef],
+		subSlot(slot, 'm:ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'm:ret'),
+	);
+}

package/src/useId.ts

@@ -0,0 +1,6 @@
+// @floating-ui/react's useId, backed by octane's SSR-stable useId.
+import { useId as octaneUseId } from 'octane';
+
+export function useId(slot: symbol | undefined): string {
+	return octaneUseId(slot);
+}

package/src/useInteractions.ts

@@ -0,0 +1,94 @@
+// Ported from @floating-ui/react useInteractions + mergeProps. mergeProps is pure
+// JS (composes prop getters, chaining `on*` handlers so none overwrite another).
+import { useCallback, useMemo } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import { FOCUSABLE_ATTRIBUTE } from './utils';
+
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+
+function mergeProps(userProps: any, propsList: any[], elementKey: string): any {
+	const map = new Map<string, any[]>();
+	const isItem = elementKey === 'item';
+	let domUserProps = userProps;
+	if (isItem && userProps) {
+		const { [ACTIVE_KEY]: _a, [SELECTED_KEY]: _s, ...validProps } = userProps;
+		domUserProps = validProps;
+	}
+	return {
+		...(elementKey === 'floating' && {
+			tabIndex: -1,
+			[FOCUSABLE_ATTRIBUTE]: '',
+		}),
+		...domUserProps,
+		...propsList
+			.map((value) => {
+				const propsOrGetProps = value ? value[elementKey] : null;
+				if (typeof propsOrGetProps === 'function') {
+					return userProps ? propsOrGetProps(userProps) : null;
+				}
+				return propsOrGetProps;
+			})
+			.concat(userProps)
+			.reduce((acc: any, props: any) => {
+				if (!props) {
+					return acc;
+				}
+				Object.entries(props).forEach((_ref) => {
+					const [key, value] = _ref as [string, any];
+					if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+						return;
+					}
+					if (key.indexOf('on') === 0) {
+						if (!map.has(key)) {
+							map.set(key, []);
+						}
+						if (typeof value === 'function') {
+							map.get(key)?.push(value);
+							acc[key] = function (...args: any[]) {
+								return map
+									.get(key)
+									?.map((fn) => fn(...args))
+									.find((val) => val !== undefined);
+							};
+						}
+					} else {
+						acc[key] = value;
+					}
+				});
+				return acc;
+			}, {}),
+	};
+}
+
+export function useInteractions(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const propsList = (user[0] as any[]) ?? [];
+
+	const referenceDeps = propsList.map((key) => (key == null ? undefined : key.reference));
+	const floatingDeps = propsList.map((key) => (key == null ? undefined : key.floating));
+	const itemDeps = propsList.map((key) => (key == null ? undefined : key.item));
+
+	const getReferenceProps = useCallback(
+		(userProps: any) => mergeProps(userProps, propsList, 'reference'),
+		referenceDeps,
+		subSlot(slot, 'ref'),
+	);
+	const getFloatingProps = useCallback(
+		(userProps: any) => mergeProps(userProps, propsList, 'floating'),
+		floatingDeps,
+		subSlot(slot, 'flo'),
+	);
+	const getItemProps = useCallback(
+		(userProps: any) => mergeProps(userProps, propsList, 'item'),
+		itemDeps,
+		subSlot(slot, 'item'),
+	);
+
+	return useMemo(
+		() => ({ getReferenceProps, getFloatingProps, getItemProps }),
+		[getReferenceProps, getFloatingProps, getItemProps],
+		subSlot(slot, 'ret'),
+	);
+}