@octanejs/floating-ui 0.1.2

package/src/delayGroup.ts

@@ -0,0 +1,142 @@
+// Ported from @floating-ui/react FloatingDelayGroup + useDelayGroup — share a single
+// open/close delay across a group of floating elements. `.ts` component via
+// createElement; useDelayGroup is a hook (resolves its own slot).
+import {
+	createContext,
+	createElement,
+	useCallback,
+	useContext,
+	useMemo,
+	useReducer,
+	useRef,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+import { getDelay, useModernLayoutEffect } from './utils';
+
+const NOOP = () => {};
+export const FloatingDelayGroupContext = createContext<any>({
+	delay: 0,
+	initialDelay: 0,
+	timeoutMs: 0,
+	currentId: null,
+	setCurrentId: NOOP,
+	setState: NOOP,
+	isInstantPhase: false,
+});
+
+export const useDelayGroupContext = () => useContext(FloatingDelayGroupContext);
+
+export function FloatingDelayGroup(props: any): any {
+	const children = props.children;
+	const delay = props.delay;
+	const timeoutMs = props.timeoutMs ?? 0;
+
+	const [state, setState] = useReducer(
+		(prev: any, next: any) => ({ ...prev, ...next }),
+		{
+			delay,
+			timeoutMs,
+			initialDelay: delay,
+			currentId: null,
+			isInstantPhase: false,
+		},
+		S('FloatingDelayGroup:state'),
+	);
+	const initialCurrentIdRef = useRef<any>(null, S('FloatingDelayGroup:initialId'));
+	const setCurrentId = useCallback(
+		(currentId: any) => {
+			setState({ currentId });
+		},
+		[],
+		S('FloatingDelayGroup:setId'),
+	);
+	useModernLayoutEffect(
+		() => {
+			if (state.currentId) {
+				if (initialCurrentIdRef.current === null) {
+					initialCurrentIdRef.current = state.currentId;
+				} else if (!state.isInstantPhase) {
+					setState({ isInstantPhase: true });
+				}
+			} else {
+				if (state.isInstantPhase) {
+					setState({ isInstantPhase: false });
+				}
+				initialCurrentIdRef.current = null;
+			}
+		},
+		[state.currentId, state.isInstantPhase],
+		S('FloatingDelayGroup:eff'),
+	);
+	const value = useMemo(
+		() => ({ ...state, setState, setCurrentId }),
+		[state, setCurrentId],
+		S('FloatingDelayGroup:value'),
+	);
+	return createElement(FloatingDelayGroupContext.Provider, { value, children });
+}
+
+export function useDelayGroup(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const options = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const onOpenChange = context.onOpenChange;
+	const floatingId = context.floatingId;
+	const optionId = options.id;
+	const enabled = options.enabled ?? true;
+	const id = optionId != null ? optionId : floatingId;
+	const groupContext = useDelayGroupContext();
+	const { currentId, setCurrentId, initialDelay, setState, timeoutMs } = groupContext;
+
+	useModernLayoutEffect(
+		() => {
+			if (!enabled) return;
+			if (!currentId) return;
+			setState({
+				delay: { open: 1, close: getDelay(initialDelay, 'close') },
+			});
+			if (currentId !== id) {
+				onOpenChange(false);
+			}
+		},
+		[enabled, id, onOpenChange, setState, currentId, initialDelay],
+		subSlot(slot, 'e:sync'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			function unset() {
+				onOpenChange(false);
+				setState({ delay: initialDelay, currentId: null });
+			}
+			if (!enabled) return;
+			if (!currentId) return;
+			if (!open && currentId === id) {
+				if (timeoutMs) {
+					const timeout = window.setTimeout(unset, timeoutMs);
+					return () => {
+						clearTimeout(timeout);
+					};
+				}
+				unset();
+			}
+		},
+		[enabled, open, setState, currentId, id, onOpenChange, initialDelay, timeoutMs],
+		subSlot(slot, 'e:unset'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (!enabled) return;
+			if (setCurrentId === NOOP || !open) return;
+			setCurrentId(id);
+		},
+		[enabled, open, setCurrentId, id],
+		subSlot(slot, 'e:set'),
+	);
+
+	return groupContext;
+}

package/src/index.ts

@@ -0,0 +1,79 @@
+// @octanejs/floating-ui — a port of @floating-ui/react on top of the agnostic
+// @floating-ui/dom. PHASE 1 (positioning) is in place: useFloating, useMergeRefs,
+// the ref-aware `arrow`, and the re-exported @floating-ui/dom middleware. The
+// interaction hooks (useInteractions/useHover/useClick/useDismiss/useFocus/useRole/
+// useListNavigation/useTypeahead/useClientPoint), the components (FloatingPortal/
+// Overlay/FocusManager/Arrow/List/Tree, Composite), and transitions land in
+// subsequent phases.
+
+// Agnostic positioning core, re-exported from @floating-ui/dom.
+export {
+	autoPlacement,
+	autoUpdate,
+	computePosition,
+	detectOverflow,
+	flip,
+	getOverflowAncestors,
+	hide,
+	inline,
+	limitShift,
+	offset,
+	platform,
+	shift,
+	size,
+} from '@floating-ui/dom';
+
+// Positioning + context. The public `useFloating` (from ./context) wraps the
+// positioning core and returns the interaction `context`.
+export { useFloating, useFloatingRootContext, createPubSub } from './context';
+export { arrow } from './useFloating';
+// The bare positioning core (the @floating-ui/react-dom `useFloating` shape, no
+// interaction context) — consumed by bindings that only position (e.g. @octanejs/radix's
+// Popper). Call as `usePositionFloating([options, slot])`.
+export { usePositionFloating } from './useFloating';
+export { useMergeRefs } from './useMergeRefs';
+export { useId } from './useId';
+export {
+	useFloatingTree,
+	useFloatingParentNodeId,
+	useFloatingNodeId,
+	FloatingTree,
+	FloatingNode,
+	FloatingNodeContext,
+	FloatingTreeContext,
+} from './tree';
+
+// Interaction hooks (phase 2 — in progress).
+export { useInteractions } from './useInteractions';
+export { useRole } from './useRole';
+export { useClick } from './useClick';
+export { useFocus } from './useFocus';
+export { useDismiss } from './useDismiss';
+export { useClientPoint } from './useClientPoint';
+export { useListNavigation } from './useListNavigation';
+export { useTypeahead } from './useTypeahead';
+export { useHover } from './useHover';
+export { safePolygon } from './safePolygon';
+
+// Components (phase 3 — in progress).
+export { FloatingOverlay } from './FloatingOverlay';
+export {
+	FloatingPortal,
+	FocusGuard,
+	useFloatingPortalNode,
+	usePortalContext,
+	PortalContext,
+} from './FloatingPortal';
+export { FloatingList, useListItem, FloatingListContext } from './FloatingList';
+export { FloatingArrow } from './FloatingArrow';
+export { Composite, CompositeItem, CompositeContext } from './Composite';
+export { FloatingFocusManager, VisuallyHiddenDismiss } from './FloatingFocusManager';
+
+// Transitions + delay group (phase 4).
+export { useTransitionStatus, useTransitionStyles } from './transitions';
+export {
+	FloatingDelayGroup,
+	useDelayGroup,
+	useDelayGroupContext,
+	FloatingDelayGroupContext,
+} from './delayGroup';

package/src/internal.ts

@@ -0,0 +1,46 @@
+// Slot mechanics for @octanejs/floating-ui's plain-`.ts` hooks. octane's compiler
+// injects a per-call-site Symbol slot as the trailing arg of every hook call in a
+// compiled `.tsx`/`.tsrx`. These hook files are published source (consumed from
+// node_modules, where the auto-slotting pass is skipped), so each hook receives the
+// caller's slot as its trailing argument and derives a distinct sub-slot for every
+// base hook it composes. The floating `context` threads the root slot to the
+// interaction hooks so they need no slot of their own. (Same pattern as the other
+// @octanejs bindings.)
+
+// Derive a stable, distinct sub-slot from a wrapper's slot, namespaced per hook.
+// Memoized: subSlot runs on EVERY hook call every render, and the naive form
+// pays a string concat + global symbol-registry lookup each time. The cache is
+// keyed by the slot symbol itself; the minted value is byte-identical to the
+// uncached Symbol.for result, so identity is preserved across HMR re-evals and
+// the per-package copies of this helper. Key universe is bounded: slots are
+// per-call-site module constants (never minted per render).
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+export function subSlot(slot: symbol | undefined, tag: string): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) subSlotCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined) byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':' + tag)));
+	return sym;
+}
+
+// Split the compiler-injected trailing slot off a hook's args. Needed because the
+// public hooks take optional args, so the slot can't be located positionally.
+export function splitSlot(args: any[]): [any[], symbol | undefined] {
+	const tail = args[args.length - 1];
+	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
+	return [slot !== undefined ? args.slice(0, -1) : args, slot];
+}
+
+// A stable per-call-site slot for the binding's plain-`.ts` COMPONENTS (written
+// with createElement, not compiled, so they get no auto-injected slots). A
+// component runs in its OWN per-instance scope (componentSlot), so a globally
+// stable Symbol.for(tag) resolves to a distinct slot per instance. Pass S('tag')
+// as the slot to base hooks; sub-hooks derive their own sub-slots from its
+// description.
+const sCache = new Map<string, symbol>();
+export function S(tag: string): symbol {
+	let sym = sCache.get(tag);
+	if (sym === undefined) sCache.set(tag, (sym = Symbol.for('@octanejs/floating-ui:' + tag)));
+	return sym;
+}

package/src/pubsub.ts

@@ -0,0 +1,19 @@
+// The tiny event emitter shared by useFloatingRootContext and FloatingTree. Kept
+// in its own module so context.ts and tree.ts don't form an import cycle.
+export function createPubSub(): any {
+	const map = new Map<string, Set<(data: any) => void>>();
+	return {
+		emit(event: string, data: any) {
+			map.get(event)?.forEach((listener) => listener(data));
+		},
+		on(event: string, listener: (data: any) => void) {
+			if (!map.has(event)) {
+				map.set(event, new Set());
+			}
+			map.get(event)!.add(listener);
+		},
+		off(event: string, listener: (data: any) => void) {
+			map.get(event)?.delete(listener);
+		},
+	};
+}

package/src/safePolygon.ts

@@ -0,0 +1,339 @@
+// Ported from @floating-ui/react safePolygon — the "safe triangle" close handler
+// that keeps a hover floating element open while the cursor traverses toward it.
+// Pure geometry; the only framework touchpoints are the shared dom helpers.
+import { isElement } from '@floating-ui/utils/dom';
+
+import { clearTimeoutIfSet, contains, getNodeChildren, getTarget } from './utils';
+
+function isPointInPolygon(point: number[], polygon: number[][]): boolean {
+	const [x, y] = point;
+	let isInsideResult = false;
+	const length = polygon.length;
+	for (let i = 0, j = length - 1; i < length; j = i++) {
+		const [xi, yi] = polygon[i] || [0, 0];
+		const [xj, yj] = polygon[j] || [0, 0];
+		const intersect = yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+		if (intersect) {
+			isInsideResult = !isInsideResult;
+		}
+	}
+	return isInsideResult;
+}
+function isInside(point: number[], rect: any): boolean {
+	return (
+		point[0] >= rect.x &&
+		point[0] <= rect.x + rect.width &&
+		point[1] >= rect.y &&
+		point[1] <= rect.y + rect.height
+	);
+}
+
+export function safePolygon(options: any = {}): any {
+	const { buffer = 0.5, blockPointerEvents = false, requireIntent = true } = options;
+
+	const timeoutRef = { current: -1 };
+	let hasLanded = false;
+	let lastX: number | null = null;
+	let lastY: number | null = null;
+	let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
+
+	function getCursorSpeed(x: number, y: number): number | null {
+		const currentTime = performance.now();
+		const elapsedTime = currentTime - lastCursorTime;
+		if (lastX === null || lastY === null || elapsedTime === 0) {
+			lastX = x;
+			lastY = y;
+			lastCursorTime = currentTime;
+			return null;
+		}
+		const deltaX = x - lastX;
+		const deltaY = y - lastY;
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+		const speed = distance / elapsedTime;
+		lastX = x;
+		lastY = y;
+		lastCursorTime = currentTime;
+		return speed;
+	}
+
+	const fn = (_ref: any) => {
+		const { x, y, placement, elements, onClose, nodeId, tree } = _ref;
+		return function onMouseMove(event: any) {
+			function close() {
+				clearTimeoutIfSet(timeoutRef);
+				onClose();
+			}
+			clearTimeoutIfSet(timeoutRef);
+			if (
+				!elements.domReference ||
+				!elements.floating ||
+				placement == null ||
+				x == null ||
+				y == null
+			) {
+				return;
+			}
+			const { clientX, clientY } = event;
+			const clientPoint = [clientX, clientY];
+			const target = getTarget(event);
+			const isLeave = event.type === 'mouseleave';
+			const isOverFloatingEl = contains(elements.floating, target as any);
+			const isOverReferenceEl = contains(elements.domReference, target as any);
+			const refRect = elements.domReference.getBoundingClientRect();
+			const rect = elements.floating.getBoundingClientRect();
+			const side = placement.split('-')[0];
+			const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+			const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+			const isOverReferenceRect = isInside(clientPoint, refRect);
+			const isFloatingWider = rect.width > refRect.width;
+			const isFloatingTaller = rect.height > refRect.height;
+			const left = (isFloatingWider ? refRect : rect).left;
+			const right = (isFloatingWider ? refRect : rect).right;
+			const top = (isFloatingTaller ? refRect : rect).top;
+			const bottom = (isFloatingTaller ? refRect : rect).bottom;
+
+			if (isOverFloatingEl) {
+				hasLanded = true;
+				if (!isLeave) {
+					return;
+				}
+			}
+			if (isOverReferenceEl) {
+				hasLanded = false;
+			}
+			if (isOverReferenceEl && !isLeave) {
+				hasLanded = true;
+				return;
+			}
+			if (
+				isLeave &&
+				isElement(event.relatedTarget) &&
+				contains(elements.floating, event.relatedTarget)
+			) {
+				return;
+			}
+			if (tree && getNodeChildren(tree.nodesRef.current, nodeId).length) {
+				return;
+			}
+			if (
+				(side === 'top' && y >= refRect.bottom - 1) ||
+				(side === 'bottom' && y <= refRect.top + 1) ||
+				(side === 'left' && x >= refRect.right - 1) ||
+				(side === 'right' && x <= refRect.left + 1)
+			) {
+				return close();
+			}
+
+			let rectPoly: number[][] = [];
+			switch (side) {
+				case 'top':
+					rectPoly = [
+						[left, refRect.top + 1],
+						[left, rect.bottom - 1],
+						[right, rect.bottom - 1],
+						[right, refRect.top + 1],
+					];
+					break;
+				case 'bottom':
+					rectPoly = [
+						[left, rect.top + 1],
+						[left, refRect.bottom - 1],
+						[right, refRect.bottom - 1],
+						[right, rect.top + 1],
+					];
+					break;
+				case 'left':
+					rectPoly = [
+						[rect.right - 1, bottom],
+						[rect.right - 1, top],
+						[refRect.left + 1, top],
+						[refRect.left + 1, bottom],
+					];
+					break;
+				case 'right':
+					rectPoly = [
+						[refRect.right - 1, bottom],
+						[refRect.right - 1, top],
+						[rect.left + 1, top],
+						[rect.left + 1, bottom],
+					];
+					break;
+			}
+
+			function getPolygon([px, py]: number[]): number[][] {
+				switch (side) {
+					case 'top': {
+						const cursorPointOne = [
+							isFloatingWider
+								? px + buffer / 2
+								: cursorLeaveFromRight
+									? px + buffer * 4
+									: px - buffer * 4,
+							py + buffer + 1,
+						];
+						const cursorPointTwo = [
+							isFloatingWider
+								? px - buffer / 2
+								: cursorLeaveFromRight
+									? px + buffer * 4
+									: px - buffer * 4,
+							py + buffer + 1,
+						];
+						const commonPoints = [
+							[
+								rect.left,
+								cursorLeaveFromRight
+									? rect.bottom - buffer
+									: isFloatingWider
+										? rect.bottom - buffer
+										: rect.top,
+							],
+							[
+								rect.right,
+								cursorLeaveFromRight
+									? isFloatingWider
+										? rect.bottom - buffer
+										: rect.top
+									: rect.bottom - buffer,
+							],
+						];
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+					case 'bottom': {
+						const cursorPointOne = [
+							isFloatingWider
+								? px + buffer / 2
+								: cursorLeaveFromRight
+									? px + buffer * 4
+									: px - buffer * 4,
+							py - buffer,
+						];
+						const cursorPointTwo = [
+							isFloatingWider
+								? px - buffer / 2
+								: cursorLeaveFromRight
+									? px + buffer * 4
+									: px - buffer * 4,
+							py - buffer,
+						];
+						const commonPoints = [
+							[
+								rect.left,
+								cursorLeaveFromRight
+									? rect.top + buffer
+									: isFloatingWider
+										? rect.top + buffer
+										: rect.bottom,
+							],
+							[
+								rect.right,
+								cursorLeaveFromRight
+									? isFloatingWider
+										? rect.top + buffer
+										: rect.bottom
+									: rect.top + buffer,
+							],
+						];
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+					case 'left': {
+						const cursorPointOne = [
+							px + buffer + 1,
+							isFloatingTaller
+								? py + buffer / 2
+								: cursorLeaveFromBottom
+									? py + buffer * 4
+									: py - buffer * 4,
+						];
+						const cursorPointTwo = [
+							px + buffer + 1,
+							isFloatingTaller
+								? py - buffer / 2
+								: cursorLeaveFromBottom
+									? py + buffer * 4
+									: py - buffer * 4,
+						];
+						const commonPoints = [
+							[
+								cursorLeaveFromBottom
+									? rect.right - buffer
+									: isFloatingTaller
+										? rect.right - buffer
+										: rect.left,
+								rect.top,
+							],
+							[
+								cursorLeaveFromBottom
+									? isFloatingTaller
+										? rect.right - buffer
+										: rect.left
+									: rect.right - buffer,
+								rect.bottom,
+							],
+						];
+						return [...commonPoints, cursorPointOne, cursorPointTwo];
+					}
+					case 'right': {
+						const cursorPointOne = [
+							px - buffer,
+							isFloatingTaller
+								? py + buffer / 2
+								: cursorLeaveFromBottom
+									? py + buffer * 4
+									: py - buffer * 4,
+						];
+						const cursorPointTwo = [
+							px - buffer,
+							isFloatingTaller
+								? py - buffer / 2
+								: cursorLeaveFromBottom
+									? py + buffer * 4
+									: py - buffer * 4,
+						];
+						const commonPoints = [
+							[
+								cursorLeaveFromBottom
+									? rect.left + buffer
+									: isFloatingTaller
+										? rect.left + buffer
+										: rect.right,
+								rect.top,
+							],
+							[
+								cursorLeaveFromBottom
+									? isFloatingTaller
+										? rect.left + buffer
+										: rect.right
+									: rect.left + buffer,
+								rect.bottom,
+							],
+						];
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+				}
+				return [];
+			}
+
+			if (isPointInPolygon([clientX, clientY], rectPoly)) {
+				return;
+			}
+			if (hasLanded && !isOverReferenceRect) {
+				return close();
+			}
+			if (!isLeave && requireIntent) {
+				const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);
+				const cursorSpeedThreshold = 0.1;
+				if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
+					return close();
+				}
+			}
+			if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) {
+				close();
+			} else if (!hasLanded && requireIntent) {
+				timeoutRef.current = window.setTimeout(close, 40);
+			}
+		};
+	};
+	fn.__options = { blockPointerEvents };
+	return fn;
+}