@octanejs/base-ui 0.1.50 → 0.1.51

package/src/utils/floating/useFloating.ts

@@ -1,198 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useFloating.ts (v1.6.0),
-// octane-adapted (slot-threaded). Base UI wraps `@floating-ui/react-dom`'s `useFloating` (imported
-// as `usePosition`) with its Store-based `FloatingRootStore`; octane swaps the react-dom wrapper for
-// `@octanejs/floating-ui`'s `usePositionFloating` (the octane port of exactly that hook), keeping
-// all of Base UI's store logic. Everything else — reference/floating element wiring, position
-// reference bridging, the `FloatingContext` shape — is faithful.
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'octane';
-import { usePositionFloating } from '@octanejs/floating-ui';
-
-import { S, subSlot } from '../../internal';
-import { isElement } from '../dom';
-import { useFloatingTree } from './FloatingTree';
-import { useFloatingRootContext } from './useFloatingRootContext';
-import type { FloatingRootStore } from './FloatingRootStore';
-
-export function useFloating(options: any = {}, slot?: symbol | undefined): any {
-	const localSlot = slot ?? S('useFloating');
-	const { nodeId, externalTree } = options;
-
-	const internalStore = useFloatingRootContext(options, subSlot(localSlot, 'internal'));
-	const store: FloatingRootStore = options.rootContext || internalStore;
-
-	const referenceElement = store.useState('referenceElement', subSlot(localSlot, 'ref'));
-	const floatingElement = store.useState('floatingElement', subSlot(localSlot, 'flo'));
-	const domReferenceElement = store.useState('domReferenceElement', subSlot(localSlot, 'dref'));
-	const open = store.useState('open', subSlot(localSlot, 'open'));
-	const floatingId = store.useState('floatingId', subSlot(localSlot, 'fid'));
-
-	const [positionReference, setPositionReferenceRaw] = useState<any>(
-		null,
-		subSlot(localSlot, 'posref'),
-	);
-	const [localDomReference, setLocalDomReference] = useState<any>(
-		undefined,
-		subSlot(localSlot, 'ldref'),
-	);
-	const [localFloatingElement, setLocalFloatingElement] = useState<any>(
-		undefined,
-		subSlot(localSlot, 'lflo'),
-	);
-
-	const domReferenceRef = useRef<any>(null, subSlot(localSlot, 'drefref'));
-
-	const tree = useFloatingTree(externalTree);
-
-	const storeElements = useMemo(
-		() => ({
-			reference: referenceElement,
-			floating: floatingElement,
-			domReference: domReferenceElement,
-		}),
-		[referenceElement, floatingElement, domReferenceElement],
-		subSlot(localSlot, 'm:se'),
-	);
-
-	const position = usePositionFloating([
-		{
-			...options,
-			elements: {
-				...storeElements,
-				...(positionReference && { reference: positionReference }),
-			},
-		},
-		subSlot(localSlot, 'pos'),
-	]);
-
-	const localDomReferenceElement = isElement(localDomReference)
-		? (localDomReference as Element)
-		: null;
-
-	const syncedFloatingElement =
-		localFloatingElement === undefined ? store.state.floatingElement : localFloatingElement;
-
-	store.useSyncedValue('referenceElement', localDomReference ?? null, subSlot(localSlot, 's:ref'));
-	store.useSyncedValue(
-		'domReferenceElement',
-		localDomReference === undefined ? domReferenceElement : localDomReferenceElement,
-		subSlot(localSlot, 's:dref'),
-	);
-	store.useSyncedValue('floatingElement', syncedFloatingElement, subSlot(localSlot, 's:flo'));
-
-	const setPositionReference = useCallback(
-		(node: any) => {
-			const computedPositionReference = isElement(node)
-				? {
-						getBoundingClientRect: () => node.getBoundingClientRect(),
-						getClientRects: () => node.getClientRects(),
-						contextElement: node,
-					}
-				: node;
-			setPositionReferenceRaw(computedPositionReference);
-			position.refs.setReference(computedPositionReference);
-		},
-		[position.refs],
-		subSlot(localSlot, 'spr'),
-	);
-
-	const setReference = useCallback(
-		(node: any) => {
-			if (isElement(node) || node === null) {
-				domReferenceRef.current = node;
-				setLocalDomReference(node);
-			}
-
-			if (
-				isElement(position.refs.reference.current) ||
-				position.refs.reference.current === null ||
-				(node !== null && !isElement(node))
-			) {
-				position.refs.setReference(node);
-			}
-		},
-		[position.refs],
-		subSlot(localSlot, 'sr'),
-	);
-
-	const setFloating = useCallback(
-		(node: any) => {
-			setLocalFloatingElement(node);
-			position.refs.setFloating(node);
-		},
-		[position.refs],
-		subSlot(localSlot, 'sf'),
-	);
-
-	const refs = useMemo(
-		() => ({
-			...position.refs,
-			setReference,
-			setFloating,
-			setPositionReference,
-			domReference: domReferenceRef,
-		}),
-		[position.refs, setReference, setFloating, setPositionReference],
-		subSlot(localSlot, 'm:refs'),
-	);
-
-	const elements = useMemo(
-		() => ({
-			...position.elements,
-			domReference: domReferenceElement,
-		}),
-		[position.elements, domReferenceElement],
-		subSlot(localSlot, 'm:el'),
-	);
-
-	const context = useMemo(
-		() => ({
-			...position,
-			dataRef: store.context.dataRef,
-			open,
-			onOpenChange: store.setOpen,
-			events: store.context.events,
-			floatingId,
-			refs,
-			elements,
-			nodeId,
-			rootStore: store,
-		}),
-		[position, refs, elements, nodeId, store, open, floatingId],
-		subSlot(localSlot, 'm:ctx'),
-	);
-
-	useLayoutEffect(
-		() => {
-			if (domReferenceElement) {
-				domReferenceRef.current = domReferenceElement;
-			}
-		},
-		[domReferenceElement],
-		subSlot(localSlot, 'e:dref'),
-	);
-
-	useLayoutEffect(
-		() => {
-			store.context.dataRef.current.floatingContext = context;
-
-			const node = tree?.nodesRef.current.find((n: any) => n.id === nodeId);
-			if (node) {
-				node.context = context;
-			}
-		},
-		undefined,
-		subSlot(localSlot, 'e:ctx'),
-	);
-
-	return useMemo(
-		() => ({
-			...position,
-			context,
-			refs,
-			elements,
-			rootStore: store,
-		}),
-		[position, refs, elements, context, store],
-		subSlot(localSlot, 'm:ret'),
-	);
-}

package/src/utils/floating/useFloatingRootContext.ts

@@ -1,81 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useFloatingRootContext.ts
-// (v1.6.0), octane-adapted (slot-threaded). Creates the internal `FloatingRootStore` used when a
-// consumer of `useFloating` doesn't pass its own `rootContext`. `floatingId` is a raw octane
-// `useId` (no prefix), matching Base UI's `@base-ui/utils/useId`, so portal/popup ids stay
-// byte-identical across the differential.
-import { useId, useLayoutEffect } from 'octane';
-
-import { S, subSlot } from '../../internal';
-import { isElement } from '../dom';
-import { useRefWithInit } from '../useRefWithInit';
-import { PopupTriggerMap } from '../popups';
-import { useFloatingParentNodeId } from './FloatingTree';
-import { FloatingRootStore, type FloatingRootState } from './FloatingRootStore';
-
-export interface UseFloatingRootContextOptions {
-	open?: boolean | undefined;
-	onOpenChange?(open: boolean, eventDetails: any): void;
-	elements?:
-		| {
-				reference?: any;
-				floating?: HTMLElement | null | undefined;
-		  }
-		| undefined;
-}
-
-export function useFloatingRootContext(
-	options: UseFloatingRootContextOptions,
-	slot: symbol | undefined,
-): FloatingRootStore {
-	const localSlot = slot ?? S('useFloatingRootContext');
-	const { open = false, onOpenChange, elements = {} } = options;
-
-	const floatingId = useId(subSlot(localSlot, 'id'));
-	const nested = useFloatingParentNodeId() != null;
-
-	const store = useRefWithInit<FloatingRootStore>(
-		() =>
-			new FloatingRootStore({
-				open,
-				transitionStatus: undefined,
-				onOpenChange,
-				referenceElement: elements.reference ?? null,
-				floatingElement: elements.floating ?? null,
-				triggerElements: new PopupTriggerMap(),
-				floatingId,
-				syncOnly: false,
-				nested,
-			}),
-		subSlot(localSlot, 'store'),
-	).current;
-
-	useLayoutEffect(
-		() => {
-			const valuesToSync: Partial<FloatingRootState> = {
-				open,
-				floatingId,
-			};
-
-			// Only sync elements that are defined to avoid overwriting existing ones
-			if (elements.reference !== undefined) {
-				valuesToSync.referenceElement = elements.reference;
-				valuesToSync.domReferenceElement = isElement(elements.reference)
-					? elements.reference
-					: null;
-			}
-
-			if (elements.floating !== undefined) {
-				valuesToSync.floatingElement = elements.floating;
-			}
-
-			store.update(valuesToSync);
-		},
-		[open, floatingId, elements.reference, elements.floating, store],
-		subSlot(localSlot, 'eff'),
-	);
-
-	store.context.onOpenChange = onOpenChange;
-	store.context.nested = nested;
-
-	return store;
-}

package/src/utils/floating/useFocus.ts

@@ -1,248 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useFocus.ts (v1.6.0). Opens the
-// popup while its trigger has focus, like CSS `:focus` — with the blocked-focus bookkeeping that
-// stops a press/Escape dismissal from immediately re-opening when focus returns to the trigger.
-//
-// octane adaptations: handlers receive the NATIVE event, so `event.nativeEvent` collapses to
-// `event`; every composed hook threads an explicit slot.
-//
-// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
-import { useEffect, useMemo, useRef } from 'octane';
-
-import { S, splitSlot, subSlot } from '../../internal';
-import { addEventListener } from '../addEventListener';
-import { mergeCleanups } from '../mergeCleanups';
-import { ownerDocument, ownerWindow } from '../owner';
-import { platform } from '../platform';
-import { useTimeout } from '../useTimeout';
-import { isElement, isHTMLElement } from '../dom';
-import { matchesFocusVisible } from '../matchesFocusVisible';
-import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
-import { createAttribute } from './createAttribute';
-import {
-	activeElement,
-	contains,
-	getTarget,
-	isTargetInsideEnabledTrigger,
-	isTypeableElement,
-} from './element';
-
-const isMacSafari = platform.os.mac && platform.engine.webkit;
-
-export interface UseFocusProps {
-	/**
-	 * Whether the hook is enabled, including all internal effects and event handlers.
-	 * @default true
-	 */
-	enabled?: boolean | undefined;
-	/**
-	 * Waits for the specified time before opening.
-	 * @default undefined
-	 */
-	delay?: number | (() => number | undefined) | undefined;
-}
-
-export function useFocus(...args: any[]): Record<string, any> {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useFocus');
-	const context = user[0] as any;
-	const props = (user[1] as UseFocusProps) ?? {};
-
-	const { enabled = true, delay } = props;
-
-	const store = context != null && 'rootStore' in context ? context.rootStore : context;
-
-	const { events, dataRef } = store.context;
-
-	const blockFocusRef = useRef(false, subSlot(slot, 'block'));
-	// Track which reference should be blocked from re-opening after Escape/press dismissal.
-	const blockedReferenceRef = useRef<Element | null>(null, subSlot(slot, 'blockedRef'));
-	const keyboardModalityRef = useRef(true, subSlot(slot, 'kbd'));
-
-	const timeout = useTimeout(subSlot(slot, 'to'));
-
-	useEffect(
-		() => {
-			const domReference = store.select('domReferenceElement');
-
-			if (!enabled) {
-				return undefined;
-			}
-
-			const win = ownerWindow(domReference);
-
-			// If the reference was focused and the user left the tab/window while the popup was
-			// closed, block the focus-open when they return.
-			function onBlur() {
-				const currentDomReference = store.select('domReferenceElement');
-				if (
-					!store.select('open') &&
-					isHTMLElement(currentDomReference) &&
-					currentDomReference === activeElement(ownerDocument(currentDomReference))
-				) {
-					blockFocusRef.current = true;
-				}
-			}
-
-			function onKeyDown() {
-				keyboardModalityRef.current = true;
-			}
-
-			function onPointerDown() {
-				keyboardModalityRef.current = false;
-			}
-
-			return mergeCleanups(
-				addEventListener(win, 'blur', onBlur),
-				isMacSafari && addEventListener(win, 'keydown', onKeyDown, true),
-				isMacSafari && addEventListener(win, 'pointerdown', onPointerDown, true),
-			);
-		},
-		[store, enabled],
-		subSlot(slot, 'e:win'),
-	);
-
-	useEffect(
-		() => {
-			if (!enabled) {
-				return undefined;
-			}
-
-			function onOpenChangeLocal(details: any) {
-				if (details.reason === REASONS.triggerPress || details.reason === REASONS.escapeKey) {
-					const referenceElement = store.select('domReferenceElement');
-					if (isElement(referenceElement)) {
-						blockedReferenceRef.current = referenceElement;
-						blockFocusRef.current = true;
-					}
-				}
-			}
-
-			events.on('openchange', onOpenChangeLocal);
-			return () => {
-				events.off('openchange', onOpenChangeLocal);
-			};
-		},
-		[events, enabled, store],
-		subSlot(slot, 'e:openchange'),
-	);
-
-	const reference = useMemo(
-		() => {
-			function resetBlockedFocus() {
-				blockFocusRef.current = false;
-				blockedReferenceRef.current = null;
-			}
-
-			return {
-				onMouseLeave() {
-					resetBlockedFocus();
-				},
-				onFocus(event: FocusEvent) {
-					const focusTarget = event.currentTarget as Element;
-
-					if (blockFocusRef.current) {
-						if (blockedReferenceRef.current === focusTarget) {
-							return;
-						}
-						resetBlockedFocus();
-					}
-
-					const target = getTarget(event);
-
-					if (isElement(target)) {
-						// Safari fails to match `:focus-visible` if focus was initially outside the
-						// document.
-						if (isMacSafari && !event.relatedTarget) {
-							if (!keyboardModalityRef.current && !isTypeableElement(target)) {
-								return;
-							}
-						} else if (!matchesFocusVisible(target as Element)) {
-							return;
-						}
-					}
-
-					const movedFromOtherEnabledTrigger = isTargetInsideEnabledTrigger(
-						event.relatedTarget,
-						store.context.triggerElements,
-					);
-
-					const currentTarget = event.currentTarget;
-					const delayValue = typeof delay === 'function' ? delay() : delay;
-
-					if (
-						(store.select('open') && movedFromOtherEnabledTrigger) ||
-						delayValue === 0 ||
-						delayValue === undefined
-					) {
-						store.setOpen(
-							true,
-							createChangeEventDetails(REASONS.triggerFocus, event, currentTarget as HTMLElement),
-						);
-						return;
-					}
-
-					timeout.start(delayValue, () => {
-						if (blockFocusRef.current) {
-							return;
-						}
-						store.setOpen(
-							true,
-							createChangeEventDetails(REASONS.triggerFocus, event, currentTarget as HTMLElement),
-						);
-					});
-				},
-				onBlur(event: FocusEvent) {
-					resetBlockedFocus();
-
-					const relatedTarget = event.relatedTarget;
-
-					// Hit the non-modal focus management portal guard. Focus will be moved into the
-					// floating element immediately after.
-					const movedToFocusGuard =
-						isElement(relatedTarget) &&
-						(relatedTarget as Element).hasAttribute(createAttribute('focus-guard')) &&
-						(relatedTarget as Element).getAttribute('data-type') === 'outside';
-
-					// Wait for the window blur listener to fire.
-					timeout.start(0, () => {
-						const domReference = store.select('domReferenceElement');
-						const activeEl = activeElement(ownerDocument(domReference));
-
-						// Focus left the page — keep it open.
-						if (!relatedTarget && activeEl === domReference) {
-							return;
-						}
-
-						// When focusing the reference element (e.g. a regular click), then clicking into
-						// the floating element, prevent it from hiding. `relatedTarget` only points to
-						// the shadow host, so the active element is the reliable check.
-						if (
-							contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) ||
-							contains(domReference, activeEl) ||
-							movedToFocusGuard
-						) {
-							return;
-						}
-
-						// If the next focused element is one of the triggers, do not close: that
-						// trigger's own focus handler owns the open state.
-						const nextFocusedElement = relatedTarget ?? activeEl;
-						if (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
-							return;
-						}
-
-						store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, event));
-					});
-				},
-			};
-		},
-		[dataRef, delay, store, timeout],
-		subSlot(slot, 'ref'),
-	);
-
-	return useMemo(
-		() => (enabled ? { reference, trigger: reference } : {}),
-		[enabled, reference],
-		subSlot(slot, 'out'),
-	);
-}