@octanejs/floating-ui 0.1.2

package/src/FloatingList.ts

@@ -0,0 +1,137 @@
+// Ported from @floating-ui/react FloatingList + useListItem — registers list items
+// and their DOM order so useListNavigation/useTypeahead can index them. `.ts`
+// component via createElement; useListItem is a hook (resolves its own slot).
+import {
+	createContext,
+	createElement,
+	useCallback,
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+import { useModernLayoutEffect } from './utils';
+
+function sortByDocumentPosition(a: Node, b: Node): number {
+	const position = a.compareDocumentPosition(b);
+	if (
+		position & Node.DOCUMENT_POSITION_FOLLOWING ||
+		position & Node.DOCUMENT_POSITION_CONTAINED_BY
+	) {
+		return -1;
+	}
+	if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+		return 1;
+	}
+	return 0;
+}
+
+export const FloatingListContext = createContext<any>({
+	register: () => {},
+	unregister: () => {},
+	map: new Map(),
+	elementsRef: { current: [] },
+});
+
+export function FloatingList(props: any): any {
+	const children = props.children;
+	const elementsRef = props.elementsRef;
+	const labelsRef = props.labelsRef;
+
+	const [nodes, setNodes] = useState(() => new Set<any>(), S('FloatingList:nodes'));
+	const register = useCallback(
+		(node: any) => {
+			setNodes((prevSet: Set<any>) => new Set(prevSet).add(node));
+		},
+		[],
+		S('FloatingList:register'),
+	);
+	const unregister = useCallback(
+		(node: any) => {
+			setNodes((prevSet: Set<any>) => {
+				const set = new Set(prevSet);
+				set.delete(node);
+				return set;
+			});
+		},
+		[],
+		S('FloatingList:unregister'),
+	);
+	const map = useMemo(
+		() => {
+			const newMap = new Map();
+			const sortedNodes = Array.from(nodes.keys()).sort(sortByDocumentPosition);
+			sortedNodes.forEach((node, index) => {
+				newMap.set(node, index);
+			});
+			return newMap;
+		},
+		[nodes],
+		S('FloatingList:map'),
+	);
+	const value = useMemo(
+		() => ({ register, unregister, map, elementsRef, labelsRef }),
+		[register, unregister, map, elementsRef, labelsRef],
+		S('FloatingList:value'),
+	);
+	return createElement(FloatingListContext.Provider, { value, children });
+}
+
+export function useListItem(...args: any[]): any {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useListItem');
+	const props = (user[0] as any) ?? {};
+	const label = props.label;
+
+	const { register, unregister, map, elementsRef, labelsRef } = useContext(FloatingListContext);
+	const [index, setIndex] = useState<any>(null, subSlot(slot, 'index'));
+	const componentRef = useRef<any>(null, subSlot(slot, 'ref'));
+
+	const ref = useCallback(
+		(node: any) => {
+			componentRef.current = node;
+			if (index !== null) {
+				elementsRef.current[index] = node;
+				if (labelsRef) {
+					const isLabelDefined = label !== undefined;
+					labelsRef.current[index] = isLabelDefined ? label : (node?.textContent ?? null);
+				}
+			}
+		},
+		[index, elementsRef, labelsRef, label],
+		subSlot(slot, 'cb'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			const node = componentRef.current;
+			if (node) {
+				register(node);
+				return () => {
+					unregister(node);
+				};
+			}
+		},
+		[register, unregister],
+		subSlot(slot, 'e:reg'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			const idx = componentRef.current ? map.get(componentRef.current) : null;
+			if (idx != null) {
+				setIndex(idx);
+			}
+		},
+		[map],
+		subSlot(slot, 'e:idx'),
+	);
+
+	return useMemo(
+		() => ({ ref, index: index == null ? -1 : index }),
+		[index, ref],
+		subSlot(slot, 'ret'),
+	);
+}

package/src/FloatingOverlay.ts

@@ -0,0 +1,85 @@
+// Ported from @floating-ui/react FloatingOverlay — a fixed <div> overlay with an
+// optional body scroll-lock. A `.ts` component (createElement, ref-as-prop). React
+// forwardRef → `props.ref`.
+import { createElement } from 'octane';
+
+import { S } from './internal';
+import { getPlatform, useModernLayoutEffect } from './utils';
+
+const scrollbarProperty = '--floating-ui-scrollbar-width';
+let lockCount = 0;
+let cleanup = () => {};
+
+function enableScrollLock() {
+	const platform = getPlatform();
+	const isIOS =
+		/iP(hone|ad|od)|iOS/.test(platform) ||
+		(platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+	const bodyStyle = document.body.style as any;
+	const scrollbarX =
+		Math.round(document.documentElement.getBoundingClientRect().left) +
+		document.documentElement.scrollLeft;
+	const paddingProp = scrollbarX ? 'paddingLeft' : 'paddingRight';
+	const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+	const scrollX = bodyStyle.left ? parseFloat(bodyStyle.left) : window.scrollX;
+	const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.scrollY;
+	bodyStyle.overflow = 'hidden';
+	bodyStyle.setProperty(scrollbarProperty, scrollbarWidth + 'px');
+	if (scrollbarWidth) {
+		bodyStyle[paddingProp] = scrollbarWidth + 'px';
+	}
+	if (isIOS) {
+		const offsetLeft = window.visualViewport?.offsetLeft || 0;
+		const offsetTop = window.visualViewport?.offsetTop || 0;
+		Object.assign(bodyStyle, {
+			position: 'fixed',
+			top: -(scrollY - Math.floor(offsetTop)) + 'px',
+			left: -(scrollX - Math.floor(offsetLeft)) + 'px',
+			right: '0',
+		});
+	}
+	return () => {
+		Object.assign(bodyStyle, { overflow: '', [paddingProp]: '' });
+		bodyStyle.removeProperty(scrollbarProperty);
+		if (isIOS) {
+			Object.assign(bodyStyle, { position: '', top: '', left: '', right: '' });
+			window.scrollTo(scrollX, scrollY);
+		}
+	};
+}
+
+export function FloatingOverlay(props: any): any {
+	const { lockScroll = false, ref, ...rest } = props;
+
+	useModernLayoutEffect(
+		() => {
+			if (!lockScroll) return;
+			lockCount++;
+			if (lockCount === 1) {
+				cleanup = enableScrollLock();
+			}
+			return () => {
+				lockCount--;
+				if (lockCount === 0) {
+					cleanup();
+				}
+			};
+		},
+		[lockScroll],
+		S('FloatingOverlay:lock'),
+	);
+
+	return createElement('div', {
+		ref,
+		...rest,
+		style: {
+			position: 'fixed',
+			overflow: 'auto',
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			...rest.style,
+		},
+	});
+}

package/src/FloatingPortal.ts

@@ -0,0 +1,257 @@
+// Ported from @floating-ui/react FloatingPortal (+ FocusGuard, useFloatingPortalNode,
+// PortalContext). `.ts` components via createElement; React forwardRef → props.ref;
+// ReactDOM.createPortal(children, node) → octane createPortal (which renders a value
+// anywhere). Focus guards only render when a non-modal FloatingFocusManager registers
+// its state, so a standalone portal just renders its children into the portal node.
+import { isNode } from '@floating-ui/utils/dom';
+import {
+	createContext,
+	createElement,
+	createPortal,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+import { useId } from './useId';
+import {
+	createAttribute,
+	disableFocusInside,
+	enableFocusInside,
+	getNextTabbable,
+	getPreviousTabbable,
+	isOutsideEvent,
+	isSafari,
+	useModernLayoutEffect,
+} from './utils';
+
+const HIDDEN_STYLES: any = {
+	border: 0,
+	clip: 'rect(0 0 0 0)',
+	height: '1px',
+	margin: '-1px',
+	overflow: 'hidden',
+	padding: 0,
+	position: 'fixed',
+	whiteSpace: 'nowrap',
+	width: '1px',
+	top: 0,
+	left: 0,
+};
+
+export function FocusGuard(props: any): any {
+	const [role, setRole] = useState<any>(undefined, S('FocusGuard:role'));
+	useModernLayoutEffect(
+		() => {
+			if (isSafari()) {
+				setRole('button');
+			}
+		},
+		[],
+		S('FocusGuard:eff'),
+	);
+	return createElement('span', {
+		...props,
+		tabIndex: 0,
+		role,
+		'aria-hidden': role ? undefined : true,
+		[createAttribute('focus-guard')]: '',
+		style: HIDDEN_STYLES,
+	});
+}
+
+const HIDDEN_OWNER_STYLES: any = {
+	clipPath: 'inset(50%)',
+	position: 'fixed',
+	top: 0,
+	left: 0,
+};
+export const PortalContext = createContext<any>(null);
+const attr = createAttribute('portal');
+
+export function useFloatingPortalNode(...args: any[]): any {
+	// Exported hook → may be called directly by consumers (compiler injects the
+	// slot) or by FloatingPortal (passes an S() slot); fall back to S() otherwise.
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useFloatingPortalNode');
+	const props = (user[0] as any) ?? {};
+	const id = props.id;
+	const root = props.root;
+
+	const uniqueId = useId(subSlot(slot, 'id'));
+	const portalContext = usePortalContext();
+	const [portalNode, setPortalNode] = useState<any>(null, subSlot(slot, 'node'));
+	const portalNodeRef = useRef<any>(null, subSlot(slot, 'noderef'));
+
+	useModernLayoutEffect(
+		() => {
+			return () => {
+				portalNode?.remove();
+				queueMicrotask(() => {
+					portalNodeRef.current = null;
+				});
+			};
+		},
+		[portalNode],
+		subSlot(slot, 'e:cleanup'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (!uniqueId) return;
+			if (portalNodeRef.current) return;
+			const existingIdRoot = id ? document.getElementById(id) : null;
+			if (!existingIdRoot) return;
+			const subRoot = document.createElement('div');
+			subRoot.id = uniqueId;
+			subRoot.setAttribute(attr, '');
+			existingIdRoot.appendChild(subRoot);
+			portalNodeRef.current = subRoot;
+			setPortalNode(subRoot);
+		},
+		[id, uniqueId],
+		subSlot(slot, 'e:id'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (root === null) return;
+			if (!uniqueId) return;
+			if (portalNodeRef.current) return;
+			let container = root || portalContext?.portalNode;
+			if (container && !isNode(container)) container = container.current;
+			container = container || document.body;
+			let idWrapper = null;
+			if (id) {
+				idWrapper = document.createElement('div');
+				idWrapper.id = id;
+				container.appendChild(idWrapper);
+			}
+			const subRoot = document.createElement('div');
+			subRoot.id = uniqueId;
+			subRoot.setAttribute(attr, '');
+			container = idWrapper || container;
+			container.appendChild(subRoot);
+			portalNodeRef.current = subRoot;
+			setPortalNode(subRoot);
+		},
+		[id, root, uniqueId, portalContext],
+		subSlot(slot, 'e:root'),
+	);
+
+	return portalNode;
+}
+
+export function FloatingPortal(props: any): any {
+	const children = props.children;
+	const id = props.id;
+	const root = props.root;
+	const preserveTabOrder = props.preserveTabOrder ?? true;
+
+	const portalNode = useFloatingPortalNode([{ id, root }, S('FloatingPortal:node')]);
+	const [focusManagerState, setFocusManagerState] = useState<any>(null, S('FloatingPortal:fms'));
+	const beforeOutsideRef = useRef<any>(null, S('FloatingPortal:bo'));
+	const afterOutsideRef = useRef<any>(null, S('FloatingPortal:ao'));
+	const beforeInsideRef = useRef<any>(null, S('FloatingPortal:bi'));
+	const afterInsideRef = useRef<any>(null, S('FloatingPortal:ai'));
+	const modal = focusManagerState?.modal;
+	const open = focusManagerState?.open;
+	const shouldRenderGuards =
+		!!focusManagerState &&
+		!focusManagerState.modal &&
+		focusManagerState.open &&
+		preserveTabOrder &&
+		!!(root || portalNode);
+
+	useEffect(
+		() => {
+			if (!portalNode || !preserveTabOrder || modal) {
+				return;
+			}
+			function onFocus(event: any) {
+				if (portalNode && isOutsideEvent(event)) {
+					const focusing = event.type === 'focusin';
+					const manageFocus = focusing ? enableFocusInside : disableFocusInside;
+					manageFocus(portalNode);
+				}
+			}
+			portalNode.addEventListener('focusin', onFocus, true);
+			portalNode.addEventListener('focusout', onFocus, true);
+			return () => {
+				portalNode.removeEventListener('focusin', onFocus, true);
+				portalNode.removeEventListener('focusout', onFocus, true);
+			};
+		},
+		[portalNode, preserveTabOrder, modal],
+		S('FloatingPortal:e:tab'),
+	);
+
+	useEffect(
+		() => {
+			if (!portalNode) return;
+			if (open) return;
+			enableFocusInside(portalNode);
+		},
+		[open, portalNode],
+		S('FloatingPortal:e:enable'),
+	);
+
+	const value = useMemo(
+		() => ({
+			preserveTabOrder,
+			beforeOutsideRef,
+			afterOutsideRef,
+			beforeInsideRef,
+			afterInsideRef,
+			portalNode,
+			setFocusManagerState,
+		}),
+		[preserveTabOrder, portalNode],
+		S('FloatingPortal:value'),
+	);
+
+	return createElement(PortalContext.Provider, {
+		value,
+		children: [
+			shouldRenderGuards &&
+				portalNode &&
+				createElement(FocusGuard, {
+					'data-type': 'outside',
+					ref: beforeOutsideRef,
+					onFocus: (event: any) => {
+						if (isOutsideEvent(event, portalNode)) {
+							beforeInsideRef.current?.focus();
+						} else {
+							const domReference = focusManagerState ? focusManagerState.domReference : null;
+							getPreviousTabbable(domReference)?.focus();
+						}
+					},
+				}),
+			shouldRenderGuards &&
+				portalNode &&
+				createElement('span', { 'aria-owns': portalNode.id, style: HIDDEN_OWNER_STYLES }),
+			portalNode && createPortal(children, portalNode),
+			shouldRenderGuards &&
+				portalNode &&
+				createElement(FocusGuard, {
+					'data-type': 'outside',
+					ref: afterOutsideRef,
+					onFocus: (event: any) => {
+						if (isOutsideEvent(event, portalNode)) {
+							afterInsideRef.current?.focus();
+						} else {
+							const domReference = focusManagerState ? focusManagerState.domReference : null;
+							getNextTabbable(domReference)?.focus();
+							focusManagerState?.closeOnFocusOut &&
+								focusManagerState?.onOpenChange(false, event, 'focus-out');
+						}
+					},
+				}),
+		],
+	});
+}
+
+export const usePortalContext = () => useContext(PortalContext);

package/src/context.ts

@@ -0,0 +1,181 @@
+// Ported from @floating-ui/react: the event emitter, useFloatingRootContext, and
+// the PUBLIC useFloating (which wraps the positioning core with the interaction
+// context that the interaction hooks consume). React hooks → octane hooks; every
+// internal hook gets a sub-slot derived from the caller's slot.
+import { isElement } from '@floating-ui/utils/dom';
+import { useCallback, useMemo, useRef, useState } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import { createPubSub } from './pubsub';
+import { useFloatingParentNodeId, useFloatingTree } from './tree';
+import { useId } from './useId';
+import { usePositionFloating } from './useFloating';
+import { useEffectEvent, useModernLayoutEffect } from './utils';
+
+export { createPubSub } from './pubsub';
+
+export function useFloatingRootContext(options: any, slot: symbol | undefined): any {
+	const open = options.open ?? false;
+	const onOpenChangeProp = options.onOpenChange;
+	const elementsProp = options.elements;
+
+	const floatingId = useId(subSlot(slot, 'id'));
+	const dataRef = useRef<any>({}, subSlot(slot, 'data'));
+	const [events] = useState(() => createPubSub(), subSlot(slot, 'events'));
+	const nested = useFloatingParentNodeId() != null;
+
+	const [positionReference, setPositionReference] = useState(
+		elementsProp.reference,
+		subSlot(slot, 'posref'),
+	);
+
+	const onOpenChange = useEffectEvent(
+		(openVal: boolean, event?: Event, reason?: string) => {
+			dataRef.current.openEvent = openVal ? event : undefined;
+			events.emit('openchange', { open: openVal, event, reason, nested });
+			onOpenChangeProp?.(openVal, event, reason);
+		},
+		subSlot(slot, 'ooc'),
+	);
+
+	const refs = useMemo(() => ({ setPositionReference }), [], subSlot(slot, 'm:refs'));
+
+	const elements = useMemo(
+		() => ({
+			reference: positionReference || elementsProp.reference || null,
+			floating: elementsProp.floating || null,
+			domReference: elementsProp.reference,
+		}),
+		[positionReference, elementsProp.reference, elementsProp.floating],
+		subSlot(slot, 'm:el'),
+	);
+
+	return useMemo(
+		() => ({ dataRef, open, onOpenChange, elements, events, floatingId, refs }),
+		[open, onOpenChange, elements, events, floatingId, refs],
+		subSlot(slot, 'm:ret'),
+	);
+}
+
+export function useFloating(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const options = (user[0] as any) ?? {};
+	const nodeId = options.nodeId;
+
+	const internalRootContext = useFloatingRootContext(
+		{
+			...options,
+			elements: {
+				reference: null,
+				floating: null,
+				...options.elements,
+			},
+		},
+		subSlot(slot, 'root'),
+	);
+	const rootContext = options.rootContext || internalRootContext;
+	const computedElements = rootContext.elements;
+
+	const [_domReference, setDomReference] = useState(null, subSlot(slot, 'domref'));
+	const [positionReference, _setPositionReference] = useState(null, subSlot(slot, 'posref'));
+	const optionDomReference = computedElements?.domReference;
+	const domReference = optionDomReference || _domReference;
+	const domReferenceRef = useRef<any>(null, subSlot(slot, 'domrefref'));
+	const tree = useFloatingTree();
+
+	useModernLayoutEffect(
+		() => {
+			if (domReference) {
+				domReferenceRef.current = domReference;
+			}
+		},
+		[domReference],
+		subSlot(slot, 'e:domref'),
+	);
+
+	const position = usePositionFloating([
+		{
+			...options,
+			elements: {
+				...computedElements,
+				...(positionReference ? { reference: positionReference } : {}),
+			},
+		},
+		subSlot(slot, 'pos'),
+	]);
+
+	const setPositionReference = useCallback(
+		(node: any) => {
+			const computedPositionReference = isElement(node)
+				? {
+						getBoundingClientRect: () => node.getBoundingClientRect(),
+						getClientRects: () => node.getClientRects(),
+						contextElement: node,
+					}
+				: node;
+			_setPositionReference(computedPositionReference);
+			position.refs.setReference(computedPositionReference);
+		},
+		[position.refs],
+		subSlot(slot, 'spr'),
+	);
+
+	const setReference = useCallback(
+		(node: any) => {
+			if (isElement(node) || node === null) {
+				domReferenceRef.current = node;
+				setDomReference(node);
+			}
+			if (
+				isElement(position.refs.reference.current) ||
+				position.refs.reference.current === null ||
+				(node !== null && !isElement(node))
+			) {
+				position.refs.setReference(node);
+			}
+		},
+		[position.refs],
+		subSlot(slot, 'sr'),
+	);
+
+	const refs = useMemo(
+		() => ({
+			...position.refs,
+			setReference,
+			setPositionReference,
+			domReference: domReferenceRef,
+		}),
+		[position.refs, setReference, setPositionReference],
+		subSlot(slot, 'm:refs'),
+	);
+
+	const elements = useMemo(
+		() => ({ ...position.elements, domReference }),
+		[position.elements, domReference],
+		subSlot(slot, 'm:el'),
+	);
+
+	const context = useMemo(
+		() => ({ ...position, ...rootContext, refs, elements, nodeId }),
+		[position, refs, elements, nodeId, rootContext],
+		subSlot(slot, 'm:ctx'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			rootContext.dataRef.current.floatingContext = context;
+			const node = tree?.nodesRef.current.find((n: any) => n.id === nodeId);
+			if (node) {
+				node.context = context;
+			}
+		},
+		undefined,
+		subSlot(slot, 'e:ctx'),
+	);
+
+	return useMemo(
+		() => ({ ...position, context, refs, elements }),
+		[position, refs, elements, context],
+		subSlot(slot, 'm:ret'),
+	);
+}