@octanejs/floating-ui 0.1.2

package/src/transitions.ts

@@ -0,0 +1,146 @@
+// Ported from @floating-ui/react useTransitionStatus / useTransitionStyles (+ the
+// internal useDelayUnmount) — placement-aware CSS-transition state/styles for a
+// floating element. ReactDOM.flushSync → octane flushSync.
+import { flushSync, useEffect, useMemo, useState } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import {
+	camelCaseToKebabCase,
+	execWithArgsOrReturn,
+	useLatestRef,
+	useModernLayoutEffect,
+} from './utils';
+
+function useDelayUnmount(open: boolean, durationMs: number, slot: symbol | undefined): boolean {
+	const [isMounted, setIsMounted] = useState(open, subSlot(slot, 'mounted'));
+	if (open && !isMounted) {
+		setIsMounted(true);
+	}
+	useEffect(
+		() => {
+			if (!open && isMounted) {
+				const timeout = setTimeout(() => setIsMounted(false), durationMs);
+				return () => clearTimeout(timeout);
+			}
+		},
+		[open, isMounted, durationMs],
+		subSlot(slot, 'eff'),
+	);
+	return isMounted;
+}
+
+export function useTransitionStatus(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const floating = context.elements.floating;
+	const duration = props.duration ?? 250;
+
+	const isNumberDuration = typeof duration === 'number';
+	const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
+	const [status, setStatus] = useState('unmounted', subSlot(slot, 'status'));
+	const isMounted = useDelayUnmount(open, closeDuration, subSlot(slot, 'unmount'));
+	if (!isMounted && status === 'close') {
+		setStatus('unmounted');
+	}
+
+	useModernLayoutEffect(
+		() => {
+			if (!floating) return;
+			if (open) {
+				setStatus('initial');
+				const frame = requestAnimationFrame(() => {
+					// Ensure it opens before paint — with `FloatingDelayGroup`, this avoids
+					// a flicker when moving between floating elements.
+					flushSync(() => {
+						setStatus('open');
+					});
+				});
+				return () => {
+					cancelAnimationFrame(frame);
+				};
+			}
+			setStatus('close');
+		},
+		[open, floating],
+		subSlot(slot, 'eff'),
+	);
+
+	return { isMounted, status };
+}
+
+export function useTransitionStyles(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const unstableInitial = props.initial ?? { opacity: 0 };
+	const unstableOpen = props.open;
+	const unstableClose = props.close;
+	const unstableCommon = props.common;
+	const duration = props.duration ?? 250;
+
+	const placement = context.placement;
+	const side = placement.split('-')[0];
+	const fnArgs = useMemo(() => ({ side, placement }), [side, placement], subSlot(slot, 'args'));
+	const isNumberDuration = typeof duration === 'number';
+	const openDuration = (isNumberDuration ? duration : duration.open) || 0;
+	const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
+
+	const [styles, setStyles] = useState(
+		() => ({
+			...execWithArgsOrReturn(unstableCommon, fnArgs),
+			...execWithArgsOrReturn(unstableInitial, fnArgs),
+		}),
+		subSlot(slot, 'styles'),
+	);
+	const { isMounted, status } = useTransitionStatus(context, { duration }, subSlot(slot, 'status'));
+	const initialRef = useLatestRef(unstableInitial, subSlot(slot, 'initialRef'));
+	const openRef = useLatestRef(unstableOpen, subSlot(slot, 'openRef'));
+	const closeRef = useLatestRef(unstableClose, subSlot(slot, 'closeRef'));
+	const commonRef = useLatestRef(unstableCommon, subSlot(slot, 'commonRef'));
+
+	useModernLayoutEffect(
+		() => {
+			const initialStyles = execWithArgsOrReturn(initialRef.current, fnArgs);
+			const closeStyles = execWithArgsOrReturn(closeRef.current, fnArgs);
+			const commonStyles = execWithArgsOrReturn(commonRef.current, fnArgs);
+			const openStyles =
+				execWithArgsOrReturn(openRef.current, fnArgs) ||
+				Object.keys(initialStyles).reduce((acc: any, key) => {
+					acc[key] = '';
+					return acc;
+				}, {});
+			if (status === 'initial') {
+				setStyles((s: any) => ({
+					transitionProperty: s.transitionProperty,
+					...commonStyles,
+					...initialStyles,
+				}));
+			}
+			if (status === 'open') {
+				setStyles({
+					transitionProperty: Object.keys(openStyles).map(camelCaseToKebabCase).join(','),
+					transitionDuration: openDuration + 'ms',
+					...commonStyles,
+					...openStyles,
+				});
+			}
+			if (status === 'close') {
+				const s = closeStyles || initialStyles;
+				setStyles({
+					transitionProperty: Object.keys(s).map(camelCaseToKebabCase).join(','),
+					transitionDuration: closeDuration + 'ms',
+					...commonStyles,
+					...s,
+				});
+			}
+		},
+		[closeDuration, closeRef, initialRef, openRef, commonRef, openDuration, status, fnArgs],
+		subSlot(slot, 'eff'),
+	);
+
+	return { isMounted, styles };
+}

package/src/tree.ts

@@ -0,0 +1,85 @@
+// Ported from @floating-ui/react's FloatingTree / FloatingNode. The contexts + read
+// hooks let useFloating / the interaction hooks query nesting; the components +
+// useFloatingNodeId register nodes in the tree. `.ts` components via createElement.
+import {
+	createContext,
+	createElement,
+	useCallback,
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+} from 'octane';
+
+import { createPubSub } from './pubsub';
+import { S, splitSlot, subSlot } from './internal';
+import { useId } from './useId';
+import { useModernLayoutEffect } from './utils';
+
+export const FloatingNodeContext = createContext<any>(null);
+export const FloatingTreeContext = createContext<any>(null);
+
+export const useFloatingParentNodeId = (): string | null => {
+	const context = useContext(FloatingNodeContext);
+	return context ? context.id : null;
+};
+
+export const useFloatingTree = (): any => useContext(FloatingTreeContext);
+
+export function useFloatingNodeId(...args: any[]): string {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useFloatingNodeId');
+	const customParentId = user[0];
+
+	const id = useId(subSlot(slot, 'id'));
+	const tree = useFloatingTree();
+	const reactParentId = useFloatingParentNodeId();
+	const parentId = customParentId || reactParentId;
+	useModernLayoutEffect(
+		() => {
+			if (!id) return;
+			const node = { id, parentId };
+			tree?.addNode(node);
+			return () => {
+				tree?.removeNode(node);
+			};
+		},
+		[tree, id, parentId],
+		subSlot(slot, 'eff'),
+	);
+	return id;
+}
+
+export function FloatingNode(props: any): any {
+	const children = props.children;
+	const id = props.id;
+	const parentId = useFloatingParentNodeId();
+	const value = useMemo(() => ({ id, parentId }), [id, parentId], S('FloatingNode:value'));
+	return createElement(FloatingNodeContext.Provider, { value, children });
+}
+
+export function FloatingTree(props: any): any {
+	const children = props.children;
+	const nodesRef = useRef<any[]>([], S('FloatingTree:nodes'));
+	const addNode = useCallback(
+		(node: any) => {
+			nodesRef.current = [...nodesRef.current, node];
+		},
+		[],
+		S('FloatingTree:add'),
+	);
+	const removeNode = useCallback(
+		(node: any) => {
+			nodesRef.current = nodesRef.current.filter((n) => n !== node);
+		},
+		[],
+		S('FloatingTree:remove'),
+	);
+	const [events] = useState(() => createPubSub(), S('FloatingTree:events'));
+	const value = useMemo(
+		() => ({ nodesRef, addNode, removeNode, events }),
+		[addNode, removeNode, events],
+		S('FloatingTree:value'),
+	);
+	return createElement(FloatingTreeContext.Provider, { value, children });
+}

package/src/useClick.ts

@@ -0,0 +1,139 @@
+// Ported from @floating-ui/react useClick. octane events are NATIVE, so the React
+// `event.nativeEvent` accesses become `event`.
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { useMemo, useRef } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import { isMouseLikePointerType, isTypeableElement } from './utils';
+
+function isButtonTarget(event: any): boolean {
+	return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+}
+function isAnchorTarget(event: any): boolean {
+	return isHTMLElement(event.target) && event.target.tagName === 'A';
+}
+function isSpaceIgnored(element: any): boolean {
+	return isTypeableElement(element);
+}
+
+export function useClick(...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 domReference = context.elements.domReference;
+
+	const enabled = props.enabled ?? true;
+	const eventOption = props.event ?? 'click';
+	const toggle = props.toggle ?? true;
+	const ignoreMouse = props.ignoreMouse ?? false;
+	const keyboardHandlers = props.keyboardHandlers ?? true;
+	const stickIfOpen = props.stickIfOpen ?? true;
+
+	const pointerTypeRef = useRef<any>(undefined, subSlot(slot, 'ptype'));
+	const didKeyDownRef = useRef(false, subSlot(slot, 'kd'));
+
+	const reference = useMemo(
+		() => ({
+			onPointerDown(event: any) {
+				pointerTypeRef.current = event.pointerType;
+			},
+			onMouseDown(event: any) {
+				const pointerType = pointerTypeRef.current;
+				if (event.button !== 0) return;
+				if (eventOption === 'click') return;
+				if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
+				if (
+					open &&
+					toggle &&
+					(dataRef.current.openEvent && stickIfOpen
+						? dataRef.current.openEvent.type === 'mousedown'
+						: true)
+				) {
+					onOpenChange(false, event, 'click');
+				} else {
+					event.preventDefault();
+					onOpenChange(true, event, 'click');
+				}
+			},
+			onClick(event: any) {
+				const pointerType = pointerTypeRef.current;
+				if (eventOption === 'mousedown' && pointerTypeRef.current) {
+					pointerTypeRef.current = undefined;
+					return;
+				}
+				if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
+				if (
+					open &&
+					toggle &&
+					(dataRef.current.openEvent && stickIfOpen
+						? dataRef.current.openEvent.type === 'click'
+						: true)
+				) {
+					onOpenChange(false, event, 'click');
+				} else {
+					onOpenChange(true, event, 'click');
+				}
+			},
+			onKeyDown(event: any) {
+				pointerTypeRef.current = undefined;
+				if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+					return;
+				}
+				if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+					event.preventDefault();
+					didKeyDownRef.current = true;
+				}
+				if (isAnchorTarget(event)) {
+					return;
+				}
+				if (event.key === 'Enter') {
+					if (open && toggle) {
+						onOpenChange(false, event, 'click');
+					} else {
+						onOpenChange(true, event, 'click');
+					}
+				}
+			},
+			onKeyUp(event: any) {
+				if (
+					event.defaultPrevented ||
+					!keyboardHandlers ||
+					isButtonTarget(event) ||
+					isSpaceIgnored(domReference)
+				) {
+					return;
+				}
+				if (event.key === ' ' && didKeyDownRef.current) {
+					didKeyDownRef.current = false;
+					if (open && toggle) {
+						onOpenChange(false, event, 'click');
+					} else {
+						onOpenChange(true, event, 'click');
+					}
+				}
+			},
+		}),
+		[
+			dataRef,
+			domReference,
+			eventOption,
+			ignoreMouse,
+			keyboardHandlers,
+			onOpenChange,
+			open,
+			stickIfOpen,
+			toggle,
+		],
+		subSlot(slot, 'm:ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'm:ret'),
+	);
+}

package/src/useClientPoint.ts

@@ -0,0 +1,193 @@
+// Ported from @floating-ui/react useClientPoint — positions the floating element
+// relative to a client point (e.g. the mouse). octane events are native.
+import { getWindow } from '@floating-ui/utils/dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import {
+	contains,
+	getTarget,
+	isMouseLikePointerType,
+	useEffectEvent,
+	useModernLayoutEffect,
+} from './utils';
+
+function createVirtualElement(domElement: any, data: any): 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: any): boolean {
+	return event != null && event.clientX != null;
+}
+
+export function useClientPoint(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const dataRef = context.dataRef;
+	const floating = context.elements.floating;
+	const domReference = context.elements.domReference;
+	const refs = context.refs;
+
+	const enabled = props.enabled ?? true;
+	const axis = props.axis ?? 'both';
+	const x = props.x ?? null;
+	const y = props.y ?? null;
+
+	const initialRef = useRef(false, subSlot(slot, 'init'));
+	const cleanupListenerRef = useRef<any>(null, subSlot(slot, 'cleanup'));
+	const [pointerType, setPointerType] = useState<any>(undefined, subSlot(slot, 'ptype'));
+	const [reactive, setReactive] = useState<any[]>([], subSlot(slot, 'reactive'));
+
+	const setReference = useEffectEvent(
+		(px: number, py: number) => {
+			if (initialRef.current) return;
+			if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
+				return;
+			}
+			refs.setPositionReference(
+				createVirtualElement(domReference, { x: px, y: py, axis, dataRef, pointerType }),
+			);
+		},
+		subSlot(slot, 'setref'),
+	);
+
+	const handleReferenceEnterOrMove = useEffectEvent(
+		(event: any) => {
+			if (x != null || y != null) return;
+			if (!open) {
+				setReference(event.clientX, event.clientY);
+			} else if (!cleanupListenerRef.current) {
+				setReactive([]);
+			}
+		},
+		subSlot(slot, 'enter'),
+	);
+
+	const openCheck = isMouseLikePointerType(pointerType) ? floating : open;
+	const addListener = useCallback(
+		() => {
+			if (!openCheck || !enabled || x != null || y != null) return;
+			const win = getWindow(floating);
+			function handleMouseMove(event: any) {
+				const target = getTarget(event);
+				if (!contains(floating, target as any)) {
+					setReference(event.clientX, event.clientY);
+				} else {
+					win.removeEventListener('mousemove', handleMouseMove);
+					cleanupListenerRef.current = null;
+				}
+			}
+			if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
+				win.addEventListener('mousemove', handleMouseMove);
+				const cleanup = () => {
+					win.removeEventListener('mousemove', handleMouseMove);
+					cleanupListenerRef.current = null;
+				};
+				cleanupListenerRef.current = cleanup;
+				return cleanup;
+			}
+			refs.setPositionReference(domReference);
+		},
+		[openCheck, enabled, x, y, floating, dataRef, refs, domReference, setReference],
+		subSlot(slot, 'add'),
+	);
+
+	useEffect(
+		() => {
+			return addListener();
+		},
+		[addListener, reactive],
+		subSlot(slot, 'e:add'),
+	);
+	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:block'),
+	);
+	useModernLayoutEffect(
+		() => {
+			if (enabled && (x != null || y != null)) {
+				initialRef.current = false;
+				setReference(x, y);
+			}
+		},
+		[enabled, x, y, setReference],
+		subSlot(slot, 'e:explicit'),
+	);
+
+	const reference = useMemo(
+		() => {
+			function setPointerTypeRef(_ref: any) {
+				const { pointerType: pt } = _ref;
+				setPointerType(pt);
+			}
+			return {
+				onPointerDown: setPointerTypeRef,
+				onPointerEnter: setPointerTypeRef,
+				onMouseMove: handleReferenceEnterOrMove,
+				onMouseEnter: handleReferenceEnterOrMove,
+			};
+		},
+		[handleReferenceEnterOrMove],
+		subSlot(slot, 'm:ref'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference } : {}),
+		[enabled, reference],
+		subSlot(slot, 'm:ret'),
+	);
+}