@octanejs/base-ui 0.1.1 → 0.1.2

package/src/utils/floating/useFloating.ts

@@ -0,0 +1,198 @@
+// 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

@@ -0,0 +1,81 @@
+// 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/useHoverFloatingInteraction.ts

@@ -0,0 +1,12 @@
+// STUB — the popup side of the open-on-hover interaction (Base UI's useHoverFloatingInteraction:
+// keep-open-while-hovering-popup + closeDelay + safePolygon, part of the ~1400-line hover system).
+// It is only active when a trigger sets `openOnHover` (off by default), so returning nothing here
+// leaves click-to-open Popover/Tooltip fully functional. TODO: port the real popup-hover keep-open
+// behavior alongside `useHoverReferenceInteraction` when hover-open tests land.
+export function useHoverFloatingInteraction(
+	_context: any,
+	_props: any,
+	_slot?: symbol | undefined,
+): void {
+	// no-op while hover-open is out of scope
+}

package/src/utils/floating/useHoverReferenceInteraction.ts

@@ -0,0 +1,17 @@
+// STUB — the full open-on-hover interaction (Base UI's useHoverReferenceInteraction + useHover +
+// safePolygon, ~1400 lines) is deferred. It is only active when a trigger sets `openOnHover` (off by
+// default), so returning `{}` here leaves click-to-open Popover/Tooltip fully functional. `safePolygon`
+// is a placeholder passed to `handleClose` (ignored while the hook is inert). TODO: port the real
+// hover (useHover pointer tracking + safePolygon "safe area" close intent) when hover-open tests land.
+
+export function safePolygon(): (...args: any[]) => any {
+	return () => undefined;
+}
+
+export function useHoverReferenceInteraction(
+	_context: any,
+	_props: any,
+	_slot?: symbol | undefined,
+): Record<string, any> {
+	return {};
+}

package/src/utils/floating/useSyncedFloatingRootContext.ts

@@ -0,0 +1,93 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useSyncedFloatingRootContext.ts
+// (v1.6.0), octane-adapted (slot-threaded). Keeps a FloatingRootStore in sync with a popup store:
+// reuses a provided root context, else creates one once and updates it each render from the popup
+// store's open/reference/floating state.
+import { useRef, useLayoutEffect } from 'octane';
+
+import { subSlot } from '../../internal';
+import { isElement } from '../dom';
+import type { ReactStore } from '../store/ReactStore';
+import type { PopupStoreContext, PopupStoreSelectors, PopupStoreState } from '../popups/store';
+import { FloatingRootStore, type FloatingRootState } from './FloatingRootStore';
+
+export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreState<unknown>> {
+	popupStore: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>;
+	treatPopupAsFloatingElement?: boolean | undefined;
+	floatingRootContext?: FloatingRootStore | undefined;
+	floatingId: string | undefined;
+	nested: boolean;
+	onOpenChange(open: boolean, eventDetails: any): void;
+}
+
+export function useSyncedFloatingRootContext<State extends PopupStoreState<unknown>>(
+	options: UseSyncedFloatingRootContextOptions<State>,
+	slot: symbol | undefined,
+): FloatingRootStore {
+	const {
+		popupStore,
+		treatPopupAsFloatingElement = false,
+		floatingRootContext: floatingRootContextProp,
+		floatingId,
+		nested,
+		onOpenChange,
+	} = options;
+
+	const open = popupStore.useState('open', subSlot(slot, 'open'));
+	const referenceElement = popupStore.useState('activeTriggerElement', subSlot(slot, 'ref'));
+	const floatingElement = popupStore.useState(
+		treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement',
+		subSlot(slot, 'floating'),
+	);
+	const triggerElements = popupStore.context.triggerElements;
+
+	const handleOpenChange = onOpenChange as (open: boolean, eventDetails: any) => void;
+
+	const internalStoreRef = useRef<FloatingRootStore | null>(null, subSlot(slot, 'store'));
+	if (floatingRootContextProp === undefined && internalStoreRef.current === null) {
+		internalStoreRef.current = new FloatingRootStore({
+			open,
+			transitionStatus: undefined,
+			referenceElement,
+			floatingElement,
+			triggerElements,
+			onOpenChange: handleOpenChange,
+			floatingId,
+			syncOnly: true,
+			nested,
+		});
+	}
+
+	const store = floatingRootContextProp ?? internalStoreRef.current!;
+
+	popupStore.useSyncedValue(
+		'floatingId',
+		floatingId as State['floatingId'],
+		subSlot(slot, 'syncId'),
+	);
+
+	useLayoutEffect(
+		() => {
+			const valuesToSync: Partial<FloatingRootState> = {
+				open,
+				floatingId,
+				referenceElement,
+				floatingElement,
+			};
+			if (isElement(referenceElement)) {
+				valuesToSync.domReferenceElement = referenceElement;
+			}
+			if (store.state.positionReference === store.state.referenceElement) {
+				valuesToSync.positionReference = referenceElement;
+			}
+			store.update(valuesToSync);
+		},
+		[open, floatingId, referenceElement, floatingElement, store],
+		subSlot(slot, 'e:sync'),
+	);
+
+	// Keep non-reactive context values fresh for interactions that call `store.setOpen`.
+	store.context.onOpenChange = handleOpenChange;
+	store.context.nested = nested;
+
+	return store;
+}

package/src/utils/getDisabledMountTransitionStyles.ts

@@ -0,0 +1,12 @@
+// Ported from .base-ui/packages/react/src/utils/getDisabledMountTransitionStyles.ts (v1.6.0).
+// Returns a `{ style: { transition: 'none' } }` prop entry while a popup is in the `starting`
+// transition phase so the initial mount frame doesn't animate; an empty object otherwise.
+import { EMPTY_OBJECT } from './empty';
+import { DISABLED_TRANSITIONS_STYLE } from './constants';
+import type { TransitionStatus } from './useTransitionStatus';
+
+export function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
+	style?: Record<string, any> | undefined;
+} {
+	return transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT;
+}

package/src/utils/hideMiddleware.ts

@@ -0,0 +1,22 @@
+// Ported from .base-ui/packages/react/src/utils/hideMiddleware.ts (v1.6.0). Base UI imports the
+// native `hide` from `@floating-ui/react-dom`; octane's `@octanejs/floating-ui` re-exports the same
+// `@floating-ui/dom` `hide`, so we wrap that. Adds an extra "anchor hidden" heuristic: a reference
+// rect that is fully zeroed (width/height/x/y all 0) is treated as hidden even if native `hide`
+// doesn't flag it.
+import { hide as nativeHide } from '@octanejs/floating-ui';
+
+const nativeHideFn = (nativeHide() as any).fn;
+
+export const hide: any = {
+	name: 'hide',
+	async fn(state: any) {
+		const { width, height, x, y } = state.rects.reference;
+		const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
+		const nativeHideResult = await nativeHideFn(state);
+		return {
+			data: {
+				referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden,
+			},
+		};
+	},
+};

package/src/utils/inertValue.ts

@@ -0,0 +1,5 @@
+// Ported from @base-ui/utils/inertValue. octane targets React-19 semantics, where `inert` is a
+// real boolean attribute, so the value passes through unchanged.
+export function inertValue(value?: boolean): boolean | undefined {
+	return value;
+}

package/src/utils/mergeCleanups.ts

@@ -0,0 +1,13 @@
+// Ported verbatim from @base-ui/utils/mergeCleanups. Combines cleanup fns (dropping falsy) into one.
+type Cleanup = false | null | undefined | (() => void);
+
+export function mergeCleanups(...cleanups: Cleanup[]): () => void {
+	return () => {
+		for (let i = 0; i < cleanups.length; i += 1) {
+			const cleanup = cleanups[i];
+			if (cleanup) {
+				cleanup();
+			}
+		}
+	};
+}

package/src/utils/platform.ts

@@ -1,15 +1,59 @@
-// Minimal port of @base-ui/utils/platform — only the `os.ios` check NumberField needs.
-// (jsdom is not iOS, so the iOS input-mode branch is inert in tests.)
+// Minimal port of @base-ui/utils/platform — the checks the ported components need: `os.ios`
+// (NumberField input mode), `engine.webkit` (useDismiss IME timing), `screenReader.voiceOver`
+// (FocusGuard). All derive from the UA string; under jsdom they resolve to `false`, so the
+// UA-specific branches stay inert in tests.
+function ua(): string {
+	return typeof navigator === 'undefined' ? '' : (navigator.userAgent ?? '');
+}
+
 function isIOS(): boolean {
 	if (typeof navigator === 'undefined') {
 		return false;
 	}
 	return /iP(ad|hone|od)/.test(navigator.platform ?? '');
 }
+
+function isWebKit(): boolean {
+	const s = ua();
+	// WebKit but not Chromium/Blink (which also report "AppleWebKit").
+	return /AppleWebKit/.test(s) && !/Chrome|Chromium|Edg\//.test(s);
+}
+
+function isVoiceOver(): boolean {
+	// VoiceOver isn't directly detectable; Base UI infers it from Apple platforms. jsdom → false.
+	return /Mac OS X|iPhone|iPad/.test(ua());
+}
+
+function isAndroid(): boolean {
+	return /Android/.test(ua());
+}
+
+function isJsdom(): boolean {
+	return /jsdom/i.test(ua());
+}
+
 export const platform = {
 	os: {
 		get ios() {
 			return isIOS();
 		},
+		get android() {
+			return isAndroid();
+		},
+	},
+	engine: {
+		get webkit() {
+			return isWebKit();
+		},
+	},
+	env: {
+		get jsdom() {
+			return isJsdom();
+		},
+	},
+	screenReader: {
+		get voiceOver() {
+			return isVoiceOver();
+		},
 	},
 };

package/src/utils/popupStateMapping.ts

@@ -0,0 +1,48 @@
+// Ported from .base-ui/packages/react/src/utils/popupStateMapping.ts (v1.6.0). Maps popup/trigger
+// `open` (+ transition/anchor) state → the shared `data-*` attributes. Pure.
+import type { StateAttributesMapping } from './getStateAttributesProps';
+
+export const CommonPopupDataAttributes = {
+	open: 'data-open',
+	closed: 'data-closed',
+	startingStyle: 'data-starting-style',
+	endingStyle: 'data-ending-style',
+	anchorHidden: 'data-anchor-hidden',
+	side: 'data-side',
+	align: 'data-align',
+} as const;
+
+export const CommonTriggerDataAttributes = {
+	popupOpen: 'data-popup-open',
+	pressed: 'data-pressed',
+} as const;
+
+const TRIGGER_HOOK = { [CommonTriggerDataAttributes.popupOpen]: '' };
+const PRESSABLE_TRIGGER_HOOK = {
+	[CommonTriggerDataAttributes.popupOpen]: '',
+	[CommonTriggerDataAttributes.pressed]: '',
+};
+const POPUP_OPEN_HOOK = { [CommonPopupDataAttributes.open]: '' };
+const POPUP_CLOSED_HOOK = { [CommonPopupDataAttributes.closed]: '' };
+const ANCHOR_HIDDEN_HOOK = { [CommonPopupDataAttributes.anchorHidden]: '' };
+
+export const triggerOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
+	open(value: boolean) {
+		return value ? TRIGGER_HOOK : null;
+	},
+};
+
+export const pressableTriggerOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
+	open(value: boolean) {
+		return value ? PRESSABLE_TRIGGER_HOOK : null;
+	},
+};
+
+export const popupStateMapping: StateAttributesMapping<{ open: boolean; anchorHidden: boolean }> = {
+	open(value: boolean) {
+		return value ? POPUP_OPEN_HOOK : POPUP_CLOSED_HOOK;
+	},
+	anchorHidden(value: boolean) {
+		return value ? ANCHOR_HIDDEN_HOOK : null;
+	},
+};

package/src/utils/popups/index.ts

@@ -0,0 +1,4 @@
+// Mirrors .base-ui/packages/react/src/utils/popups/index.ts — the popup store engine barrel.
+export * from './store';
+export * from './popupStoreUtils';
+export * from './popupTriggerMap';