@octanejs/base-ui 0.1.14 → 0.1.16

package/src/utils/floating/safePolygon.ts

@@ -0,0 +1,448 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/safePolygon.ts (v1.6.0).
+// Builds the "safe" triangle between the cursor's exit point and the popup so the user can move
+// diagonally toward the popup without it closing under the pointer. Pure geometry plus a mousemove
+// handler; no React/octane API is involved, so this is a straight transcription.
+import { isElement } from '../dom';
+import { Timeout } from '../useTimeout';
+import { contains, getTarget } from './element';
+import { getNodeChildren } from './nodes';
+import type { HandleClose, HandleCloseOptions } from './useHoverShared';
+
+const CURSOR_SPEED_THRESHOLD = 0.1;
+const CURSOR_SPEED_THRESHOLD_SQUARED = CURSOR_SPEED_THRESHOLD * CURSOR_SPEED_THRESHOLD;
+const POLYGON_BUFFER = 0.5;
+
+interface Rect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+function hasIntersectingEdge(
+	pointX: number,
+	pointY: number,
+	xi: number,
+	yi: number,
+	xj: number,
+	yj: number,
+): boolean {
+	return yi >= pointY !== yj >= pointY && pointX <= ((xj - xi) * (pointY - yi)) / (yj - yi) + xi;
+}
+
+function isPointInQuadrilateral(
+	pointX: number,
+	pointY: number,
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+	x3: number,
+	y3: number,
+	x4: number,
+	y4: number,
+): boolean {
+	let isInsideValue = false;
+
+	if (hasIntersectingEdge(pointX, pointY, x1, y1, x2, y2)) {
+		isInsideValue = !isInsideValue;
+	}
+	if (hasIntersectingEdge(pointX, pointY, x2, y2, x3, y3)) {
+		isInsideValue = !isInsideValue;
+	}
+	if (hasIntersectingEdge(pointX, pointY, x3, y3, x4, y4)) {
+		isInsideValue = !isInsideValue;
+	}
+	if (hasIntersectingEdge(pointX, pointY, x4, y4, x1, y1)) {
+		isInsideValue = !isInsideValue;
+	}
+
+	return isInsideValue;
+}
+
+function isInsideRect(pointX: number, pointY: number, rect: Rect): boolean {
+	return (
+		pointX >= rect.x &&
+		pointX <= rect.x + rect.width &&
+		pointY >= rect.y &&
+		pointY <= rect.y + rect.height
+	);
+}
+
+function isInsideAxisAlignedRect(
+	pointX: number,
+	pointY: number,
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+): boolean {
+	const minX = Math.min(x1, x2);
+	const maxX = Math.max(x1, x2);
+	const minY = Math.min(y1, y2);
+	const maxY = Math.max(y1, y2);
+
+	return pointX >= minX && pointX <= maxX && pointY >= minY && pointY <= maxY;
+}
+
+export interface SafePolygonOptions extends HandleCloseOptions {}
+
+/**
+ * Generates a safe polygon area that the user can traverse without closing the floating element
+ * once leaving the reference element.
+ */
+export function safePolygon(options: SafePolygonOptions = {}): HandleClose {
+	const { blockPointerEvents = false } = options;
+	const timeout = new Timeout();
+
+	const fn: HandleClose = ({ x, y, placement, elements, onClose, nodeId, tree }) => {
+		const side = placement?.split('-')[0] as Side | undefined;
+		let hasLanded = false;
+		let lastX: number | null = null;
+		let lastY: number | null = null;
+		let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
+
+		function isCursorMovingSlowly(nextX: number, nextY: number): boolean {
+			const currentTime = performance.now();
+			const elapsedTime = currentTime - lastCursorTime;
+
+			if (lastX === null || lastY === null || elapsedTime === 0) {
+				lastX = nextX;
+				lastY = nextY;
+				lastCursorTime = currentTime;
+				return false;
+			}
+
+			const deltaX = nextX - lastX;
+			const deltaY = nextY - lastY;
+			const distanceSquared = deltaX * deltaX + deltaY * deltaY;
+			const thresholdSquared = elapsedTime * elapsedTime * CURSOR_SPEED_THRESHOLD_SQUARED;
+
+			lastX = nextX;
+			lastY = nextY;
+			lastCursorTime = currentTime;
+
+			return distanceSquared < thresholdSquared;
+		}
+
+		function close(): void {
+			timeout.clear();
+			onClose();
+		}
+
+		return function onMouseMove(event: MouseEvent): undefined {
+			timeout.clear();
+
+			const domReference = elements.domReference;
+			const floating = elements.floating;
+			if (!domReference || !floating || side == null || x == null || y == null) {
+				return undefined;
+			}
+
+			const { clientX, clientY } = event;
+			const target = getTarget(event) as Element | null;
+			const isLeave = event.type === 'mouseleave';
+			const isOverFloatingEl = contains(floating, target);
+			const isOverReferenceEl = contains(domReference, target);
+
+			if (isOverFloatingEl) {
+				hasLanded = true;
+				if (!isLeave) {
+					return undefined;
+				}
+			}
+
+			if (isOverReferenceEl) {
+				hasLanded = false;
+				if (!isLeave) {
+					hasLanded = true;
+					return undefined;
+				}
+			}
+
+			// Prevent an overlapping floating element from getting stuck in an open-close loop.
+			if (isLeave && isElement(event.relatedTarget) && contains(floating, event.relatedTarget)) {
+				return undefined;
+			}
+
+			function hasOpenChildNode(): boolean {
+				return Boolean(tree && getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+			}
+
+			function closeIfNoOpenChild(): void {
+				if (!hasOpenChildNode()) {
+					close();
+				}
+			}
+
+			// If any nested child is open, abort.
+			if (hasOpenChildNode()) {
+				return undefined;
+			}
+
+			const refRect = domReference.getBoundingClientRect();
+			const rect = floating.getBoundingClientRect();
+			const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+			const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+			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 the pointer is leaving from the opposite side, the "buffer" logic creates a point
+			// where the floating element remains open, but should be ignored. A constant of 1
+			// handles floating point rounding errors.
+			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)
+			) {
+				closeIfNoOpenChild();
+				return undefined;
+			}
+
+			// Ignore when the cursor is within the rectangular trough between the two elements.
+			// Since the triangle is created from the cursor point, which can start beyond the ref
+			// element's edge, traversing back and forth from the ref to the floating element can
+			// cause it to close. This ensures it always remains open in that case.
+			let isInsideTroughRect = false;
+
+			switch (side) {
+				case 'top':
+					isInsideTroughRect = isInsideAxisAlignedRect(
+						clientX,
+						clientY,
+						left,
+						refRect.top + 1,
+						right,
+						rect.bottom - 1,
+					);
+					break;
+				case 'bottom':
+					isInsideTroughRect = isInsideAxisAlignedRect(
+						clientX,
+						clientY,
+						left,
+						rect.top + 1,
+						right,
+						refRect.bottom - 1,
+					);
+					break;
+				case 'left':
+					isInsideTroughRect = isInsideAxisAlignedRect(
+						clientX,
+						clientY,
+						rect.right - 1,
+						bottom,
+						refRect.left + 1,
+						top,
+					);
+					break;
+				case 'right':
+					isInsideTroughRect = isInsideAxisAlignedRect(
+						clientX,
+						clientY,
+						refRect.right - 1,
+						bottom,
+						rect.left + 1,
+						top,
+					);
+					break;
+				default:
+			}
+
+			if (isInsideTroughRect) {
+				return undefined;
+			}
+
+			if (hasLanded && !isInsideRect(clientX, clientY, refRect)) {
+				closeIfNoOpenChild();
+				return undefined;
+			}
+
+			if (!isLeave && isCursorMovingSlowly(clientX, clientY)) {
+				closeIfNoOpenChild();
+				return undefined;
+			}
+
+			let isInsidePolygon = false;
+
+			switch (side) {
+				case 'top': {
+					const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+					const cursorPointOneX = isFloatingWider
+						? x + cursorXOffset
+						: cursorLeaveFromRight
+							? x + cursorXOffset
+							: x - cursorXOffset;
+					const cursorPointTwoX = isFloatingWider
+						? x - cursorXOffset
+						: cursorLeaveFromRight
+							? x + cursorXOffset
+							: x - cursorXOffset;
+					const cursorPointY = y + POLYGON_BUFFER + 1;
+
+					const commonYLeft = cursorLeaveFromRight
+						? rect.bottom - POLYGON_BUFFER
+						: isFloatingWider
+							? rect.bottom - POLYGON_BUFFER
+							: rect.top;
+					const commonYRight = cursorLeaveFromRight
+						? isFloatingWider
+							? rect.bottom - POLYGON_BUFFER
+							: rect.top
+						: rect.bottom - POLYGON_BUFFER;
+
+					isInsidePolygon = isPointInQuadrilateral(
+						clientX,
+						clientY,
+						cursorPointOneX,
+						cursorPointY,
+						cursorPointTwoX,
+						cursorPointY,
+						rect.left,
+						commonYLeft,
+						rect.right,
+						commonYRight,
+					);
+					break;
+				}
+				case 'bottom': {
+					const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+					const cursorPointOneX = isFloatingWider
+						? x + cursorXOffset
+						: cursorLeaveFromRight
+							? x + cursorXOffset
+							: x - cursorXOffset;
+					const cursorPointTwoX = isFloatingWider
+						? x - cursorXOffset
+						: cursorLeaveFromRight
+							? x + cursorXOffset
+							: x - cursorXOffset;
+					const cursorPointY = y - POLYGON_BUFFER;
+
+					const commonYLeft = cursorLeaveFromRight
+						? rect.top + POLYGON_BUFFER
+						: isFloatingWider
+							? rect.top + POLYGON_BUFFER
+							: rect.bottom;
+					const commonYRight = cursorLeaveFromRight
+						? isFloatingWider
+							? rect.top + POLYGON_BUFFER
+							: rect.bottom
+						: rect.top + POLYGON_BUFFER;
+
+					isInsidePolygon = isPointInQuadrilateral(
+						clientX,
+						clientY,
+						cursorPointOneX,
+						cursorPointY,
+						cursorPointTwoX,
+						cursorPointY,
+						rect.left,
+						commonYLeft,
+						rect.right,
+						commonYRight,
+					);
+					break;
+				}
+				case 'left': {
+					const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+					const cursorPointOneY = isFloatingTaller
+						? y + cursorYOffset
+						: cursorLeaveFromBottom
+							? y + cursorYOffset
+							: y - cursorYOffset;
+					const cursorPointTwoY = isFloatingTaller
+						? y - cursorYOffset
+						: cursorLeaveFromBottom
+							? y + cursorYOffset
+							: y - cursorYOffset;
+					const cursorPointX = x + POLYGON_BUFFER + 1;
+
+					const commonXTop = cursorLeaveFromBottom
+						? rect.right - POLYGON_BUFFER
+						: isFloatingTaller
+							? rect.right - POLYGON_BUFFER
+							: rect.left;
+					const commonXBottom = cursorLeaveFromBottom
+						? isFloatingTaller
+							? rect.right - POLYGON_BUFFER
+							: rect.left
+						: rect.right - POLYGON_BUFFER;
+
+					isInsidePolygon = isPointInQuadrilateral(
+						clientX,
+						clientY,
+						commonXTop,
+						rect.top,
+						commonXBottom,
+						rect.bottom,
+						cursorPointX,
+						cursorPointOneY,
+						cursorPointX,
+						cursorPointTwoY,
+					);
+					break;
+				}
+				case 'right': {
+					const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+					const cursorPointOneY = isFloatingTaller
+						? y + cursorYOffset
+						: cursorLeaveFromBottom
+							? y + cursorYOffset
+							: y - cursorYOffset;
+					const cursorPointTwoY = isFloatingTaller
+						? y - cursorYOffset
+						: cursorLeaveFromBottom
+							? y + cursorYOffset
+							: y - cursorYOffset;
+					const cursorPointX = x - POLYGON_BUFFER;
+
+					const commonXTop = cursorLeaveFromBottom
+						? rect.left + POLYGON_BUFFER
+						: isFloatingTaller
+							? rect.left + POLYGON_BUFFER
+							: rect.right;
+					const commonXBottom = cursorLeaveFromBottom
+						? isFloatingTaller
+							? rect.left + POLYGON_BUFFER
+							: rect.right
+						: rect.left + POLYGON_BUFFER;
+
+					isInsidePolygon = isPointInQuadrilateral(
+						clientX,
+						clientY,
+						cursorPointX,
+						cursorPointOneY,
+						cursorPointX,
+						cursorPointTwoY,
+						commonXTop,
+						rect.top,
+						commonXBottom,
+						rect.bottom,
+					);
+					break;
+				}
+				default:
+			}
+
+			if (!isInsidePolygon) {
+				closeIfNoOpenChild();
+			} else if (!hasLanded) {
+				timeout.start(40, closeIfNoOpenChild);
+			}
+
+			return undefined;
+		};
+	};
+
+	fn.__options = { ...options, blockPointerEvents };
+
+	return fn;
+}

package/src/utils/floating/useClientPoint.ts

@@ -0,0 +1,276 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useClientPoint.ts (v1.6.0).
+// Positions the popup relative to a client point (the cursor) instead of the trigger's box, by
+// installing a virtual reference element whose rect follows the pointer on the chosen axis.
+//
+// octane adaptations: handlers receive the NATIVE event; every composed hook threads an explicit
+// slot.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useEffect, useMemo, useRef, useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { addEventListener } from '../addEventListener';
+import { ownerWindow } from '../owner';
+import { useStableCallback } from '../useStableCallback';
+import { contains, getTarget } from './element';
+import { isMouseLikePointerType } from './event';
+
+function createVirtualElement(
+	domElement: Element | null | undefined,
+	data: {
+		axis: 'x' | 'y' | 'both';
+		dataRef: { current: any };
+		pointerType: string | undefined;
+		x: number | null;
+		y: number | null;
+	},
+): any {
+	let offsetX: number | null = null;
+	let offsetY: number | null = null;
+	let isAutoUpdateEvent = false;
+
+	return {
+		contextElement: domElement || undefined,
+		getBoundingClientRect() {
+			const domRect = domElement?.getBoundingClientRect() || { width: 0, height: 0, x: 0, y: 0 };
+
+			const isXAxis = data.axis === 'x' || data.axis === 'both';
+			const isYAxis = data.axis === 'y' || data.axis === 'both';
+			const canTrackCursorOnAutoUpdate =
+				['mouseenter', 'mousemove'].includes(data.dataRef.current.openEvent?.type || '') &&
+				data.pointerType !== 'touch';
+
+			let width = domRect.width;
+			let height = domRect.height;
+			let x = domRect.x;
+			let y = domRect.y;
+
+			if (offsetX == null && data.x && isXAxis) {
+				offsetX = domRect.x - data.x;
+			}
+
+			if (offsetY == null && data.y && isYAxis) {
+				offsetY = domRect.y - data.y;
+			}
+
+			x -= offsetX || 0;
+			y -= offsetY || 0;
+			width = 0;
+			height = 0;
+
+			if (!isAutoUpdateEvent || canTrackCursorOnAutoUpdate) {
+				width = data.axis === 'y' ? domRect.width : 0;
+				height = data.axis === 'x' ? domRect.height : 0;
+				x = isXAxis && data.x != null ? data.x : x;
+				y = isYAxis && data.y != null ? data.y : y;
+			} else if (isAutoUpdateEvent && !canTrackCursorOnAutoUpdate) {
+				height = data.axis === 'x' ? domRect.height : height;
+				width = data.axis === 'y' ? domRect.width : width;
+			}
+
+			isAutoUpdateEvent = true;
+
+			return { width, height, x, y, top: y, right: x + width, bottom: y + height, left: x };
+		},
+	};
+}
+
+function isMouseBasedEvent(event: Event | undefined): event is MouseEvent {
+	return event != null && (event as MouseEvent).clientX != null;
+}
+
+export interface UseClientPointProps {
+	/**
+	 * Whether the hook is enabled, including all internal effects and event handlers.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * Whether to restrict the client point to an axis and use the reference element (if it exists)
+	 * as the other axis. Useful when the floating element is also interactive.
+	 * @default 'both'
+	 */
+	axis?: 'x' | 'y' | 'both' | undefined;
+}
+
+export function useClientPoint(...args: any[]): Record<string, any> {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useClientPoint');
+	const context = user[0] as any;
+	const props = (user[1] as UseClientPointProps) ?? {};
+
+	const { enabled = true, axis = 'both' } = props;
+
+	const store = context != null && 'rootStore' in context ? context.rootStore : context;
+
+	const open = store.useState('open', subSlot(slot, 's:open'));
+	const floating = store.useState('floatingElement', subSlot(slot, 's:floating'));
+	const domReference = store.useState('domReferenceElement', subSlot(slot, 's:ref'));
+
+	const dataRef = store.context.dataRef;
+
+	const initialRef = useRef(false, subSlot(slot, 'initial'));
+	const cleanupListenerRef = useRef<null | (() => void)>(null, subSlot(slot, 'cleanup'));
+
+	const [pointerType, setPointerType] = useState<string | undefined>(
+		undefined,
+		subSlot(slot, 'ptype'),
+	);
+	const [reactive, setReactive] = useState<never[]>([], subSlot(slot, 'reactive'));
+
+	const resetReference = useStableCallback(
+		(reference: Element | null) => {
+			store.set('positionReference', reference);
+		},
+		subSlot(slot, 'reset'),
+	);
+
+	const setReference = useStableCallback(
+		(newX: number | null, newY: number | null, referenceElement?: Element | null) => {
+			if (initialRef.current) {
+				return;
+			}
+
+			// Don't set if the open event wasn't mouse-like (e.g. focus to open, then hover the
+			// reference). Only applies when the event exists.
+			if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
+				return;
+			}
+
+			store.set(
+				'positionReference',
+				createVirtualElement(referenceElement ?? domReference, {
+					x: newX,
+					y: newY,
+					axis,
+					dataRef,
+					pointerType,
+				}),
+			);
+		},
+		subSlot(slot, 'setRef'),
+	);
+
+	const handleReferenceEnterOrMove = useStableCallback(
+		(event: MouseEvent) => {
+			if (!open) {
+				setReference(event.clientX, event.clientY, event.currentTarget as Element);
+			} else if (!cleanupListenerRef.current) {
+				// With no cleanup there's no listener; re-add it for the case where the cursor landed on
+				// the floating element and then came back to the reference (an interactive popup).
+				setReference(event.clientX, event.clientY, event.currentTarget as Element);
+				setReactive([]);
+			}
+		},
+		subSlot(slot, 'enterMove'),
+	);
+
+	// For a mouse-like pointer keep following the cursor even while the popup transitions out. On
+	// touch that's undesirable — the popup would jump to the dismissal touch point.
+	const openCheck = isMouseLikePointerType(pointerType) ? floating : open;
+
+	useEffect(
+		() => {
+			if (!enabled) {
+				resetReference(domReference);
+				return undefined;
+			}
+
+			if (!openCheck) {
+				return undefined;
+			}
+
+			function cleanupListener() {
+				cleanupListenerRef.current?.();
+				cleanupListenerRef.current = null;
+			}
+
+			const win = ownerWindow(floating);
+
+			function handleMouseMove(event: MouseEvent) {
+				const target = getTarget(event) as Element | null;
+				if (!contains(floating, target)) {
+					setReference(event.clientX, event.clientY);
+				} else {
+					cleanupListener();
+				}
+			}
+
+			if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
+				cleanupListenerRef.current = addEventListener(
+					win,
+					'mousemove',
+					handleMouseMove as EventListener,
+				);
+			} else {
+				resetReference(domReference);
+			}
+
+			return cleanupListener;
+		},
+		[
+			openCheck,
+			enabled,
+			floating,
+			dataRef,
+			domReference,
+			store,
+			setReference,
+			resetReference,
+			reactive,
+		],
+		subSlot(slot, 'e:track'),
+	);
+
+	// Clear virtual cursor references when the hook unmounts. Enabled flips are handled above.
+	useEffect(
+		() => () => {
+			store.set('positionReference', null);
+		},
+		[store],
+		subSlot(slot, 'e:unmount'),
+	);
+
+	useEffect(
+		() => {
+			if (enabled && !floating) {
+				initialRef.current = false;
+			}
+		},
+		[enabled, floating],
+		subSlot(slot, 'e:reset'),
+	);
+
+	useEffect(
+		() => {
+			if (!enabled && open) {
+				initialRef.current = true;
+			}
+		},
+		[enabled, open],
+		subSlot(slot, 'e:freeze'),
+	);
+
+	const reference = useMemo(
+		() => {
+			function setPointerTypeRef(event: PointerEvent) {
+				setPointerType(event.pointerType);
+			}
+
+			return {
+				onPointerDown: setPointerTypeRef,
+				onPointerEnter: setPointerTypeRef,
+				onMouseMove: handleReferenceEnterOrMove,
+				onMouseEnter: handleReferenceEnterOrMove,
+			};
+		},
+		[handleReferenceEnterOrMove],
+		subSlot(slot, 'ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference, trigger: reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'out'),
+	);
+}