@octanejs/base-ui 0.1.1 → 0.1.3

package/src/utils/popups/useTriggerFocusGuards.ts

@@ -0,0 +1,73 @@
+// Ported from .base-ui/packages/react/src/utils/popups/useTriggerFocusGuards.ts (v1.6.0), octane-
+// adapted (native events; `ReactDOM.flushSync` → octane `flushSync`; the ref threads a slot). Focus
+// guards placed around an OPEN popup's trigger (Popover/Menu): tabbing out of the trigger closes the
+// popup and moves focus to the right neighbour.
+import { useRef, flushSync } from 'octane';
+
+import { subSlot } from '../../internal';
+import { contains } from '../floating/element';
+import {
+	getNextTabbable,
+	getTabbableAfterElement,
+	getTabbableBeforeElement,
+	isOutsideEvent,
+	type FocusableElement,
+} from '../floating/tabbable';
+import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
+
+interface TriggerFocusGuardStore {
+	setOpen(open: boolean, eventDetails: any): void;
+	select(key: 'positionerElement'): HTMLElement | null;
+	context: {
+		readonly beforeContentFocusGuardRef: { current: HTMLElement | null };
+		readonly triggerFocusTargetRef: { current: HTMLElement | null };
+	};
+}
+
+export function useTriggerFocusGuards(
+	store: TriggerFocusGuardStore,
+	triggerElementRef: { current: HTMLElement | null },
+	slot: symbol | undefined,
+) {
+	const preFocusGuardRef = useRef<HTMLElement | null>(null, subSlot(slot, 'pre'));
+
+	function handlePreFocusGuardFocus(event: any) {
+		flushSync(() => {
+			store.setOpen(
+				false,
+				createChangeEventDetails(REASONS.focusOut, event, event.currentTarget as HTMLElement),
+			);
+		});
+		const previousTabbable: FocusableElement | null = getTabbableBeforeElement(
+			preFocusGuardRef.current,
+		);
+		previousTabbable?.focus();
+	}
+
+	function handleFocusTargetFocus(event: any) {
+		const positionerElement = store.select('positionerElement');
+		if (positionerElement && isOutsideEvent(event, positionerElement)) {
+			store.context.beforeContentFocusGuardRef.current?.focus();
+		} else {
+			flushSync(() => {
+				store.setOpen(
+					false,
+					createChangeEventDetails(REASONS.focusOut, event, event.currentTarget as HTMLElement),
+				);
+			});
+			let nextTabbable = getTabbableAfterElement(
+				store.context.triggerFocusTargetRef.current || triggerElementRef.current,
+			);
+			while (nextTabbable !== null && contains(positionerElement, nextTabbable)) {
+				const prevTabbable = nextTabbable;
+				nextTabbable = getNextTabbable(nextTabbable);
+				if (nextTabbable === prevTabbable) {
+					break;
+				}
+			}
+			nextTabbable?.focus();
+		}
+	}
+
+	return { preFocusGuardRef, handlePreFocusGuardFocus, handleFocusTargetFocus };
+}

package/src/utils/store/ReactStore.ts

@@ -0,0 +1,168 @@
+// Ported from .base-ui/packages/utils/src/store/ReactStore.ts (v1.6.0), octane-adapted. A Store
+// with controlled-state keys, non-reactive `context`, and named `selectors`. octane adaptations:
+// every hook-bearing method threads an explicit slot (octane hooks are slot-keyed); the fiber
+// "fastHooks" path is dropped for the plain `useStore`; React dev-warning/`useDebugValue` blocks
+// are dropped (functional outcomes only). `useIsoLayoutEffect` → octane `useLayoutEffect`.
+import { useLayoutEffect, useRef } from 'octane';
+import { subSlot } from '../../internal';
+import { useStableCallback } from '../useStableCallback';
+import { NOOP } from '../noop';
+import { Store } from './Store';
+import { useStore } from './useStore';
+
+type SelectorFunction<State> = (state: State, a1?: any, a2?: any, a3?: any) => any;
+
+export class ReactStore<
+	State extends object,
+	Context = Record<string, never>,
+	Selectors extends Record<string, SelectorFunction<State>> = Record<string, never>,
+> extends Store<State> {
+	readonly context: Context;
+
+	private selectors: Selectors | undefined;
+
+	constructor(state: State, context: Context = {} as Context, selectors?: Selectors) {
+		super(state);
+		this.context = context;
+		this.selectors = selectors;
+	}
+
+	/** Sync a single external value into the store (in a layout effect). */
+	useSyncedValue<Key extends keyof State>(
+		key: Key,
+		value: State[Key],
+		slot: symbol | undefined,
+	): void {
+		const store = this;
+		useLayoutEffect(
+			() => {
+				if (store.state[key] !== value) {
+					store.set(key, value);
+				}
+			},
+			[store, key, value],
+			slot,
+		);
+	}
+
+	/** Sync a single external value into the store; reset to `undefined` on unmount. */
+	useSyncedValueWithCleanup<Key extends keyof State>(
+		key: Key,
+		value: State[Key],
+		slot: symbol | undefined,
+	): void {
+		const store = this;
+		useLayoutEffect(
+			() => {
+				if (store.state[key] !== value) {
+					store.set(key, value);
+				}
+				return () => {
+					store.set(key, undefined as State[Key]);
+				};
+			},
+			[store, key, value],
+			slot,
+		);
+	}
+
+	/** Sync multiple external values into the store. */
+	useSyncedValues(statePart: Partial<State>, slot: symbol | undefined): void {
+		const store = this;
+		const dependencies = Object.values(statePart);
+		useLayoutEffect(
+			() => {
+				store.update(statePart);
+			},
+			[store, ...dependencies],
+			slot,
+		);
+	}
+
+	/** Register a controllable prop: when `controlled` is defined, the store key tracks it. */
+	useControlledProp<Key extends keyof State>(
+		key: Key,
+		controlled: State[Key] | undefined,
+		slot: symbol | undefined,
+	): void {
+		const store = this;
+		const isControlled = controlled !== undefined;
+		useLayoutEffect(
+			() => {
+				if (isControlled && !Object.is(store.state[key], controlled)) {
+					store.setState({ ...store.state, [key]: controlled });
+				}
+			},
+			[store, key, controlled, isControlled],
+			slot,
+		);
+	}
+
+	/** Non-hook: read a selector's current value synchronously. */
+	select<Key extends keyof Selectors>(
+		key: Key,
+		a1?: unknown,
+		a2?: unknown,
+		a3?: unknown,
+	): ReturnType<Selectors[Key]> {
+		const selector = this.selectors![key];
+		return selector(this.state, a1, a2, a3);
+	}
+
+	/** Subscribe to a selector's value (re-renders on change). */
+	useState<Key extends keyof Selectors>(
+		key: Key,
+		slot: symbol | undefined,
+		a1?: unknown,
+		a2?: unknown,
+		a3?: unknown,
+	): ReturnType<Selectors[Key]> {
+		return useStore(this, this.selectors![key] as any, slot, a1, a2, a3);
+	}
+
+	/** Wrap a callback with `useStableCallback` and assign it to `context[key]`. */
+	useContextCallback<Key extends keyof Context>(
+		key: Key,
+		fn: ((...args: any[]) => any) | undefined,
+		slot: symbol | undefined,
+	): void {
+		const stableFunction = useStableCallback(fn ?? (NOOP as (...args: any[]) => any), slot);
+		(this.context as Record<any, any>)[key] = stableFunction;
+	}
+
+	/** A stable ref-callback setter for a state key (commonly passed as a `ref`). */
+	useStateSetter<Key extends keyof State>(
+		key: Key,
+		slot: symbol | undefined,
+	): (value: State[Key]) => void {
+		const store = this;
+		const ref = useRef<((v: State[Key]) => void) | undefined>(undefined, slot);
+		if (ref.current === undefined) {
+			ref.current = (value: State[Key]) => {
+				store.set(key, value);
+			};
+		}
+		return ref.current;
+	}
+
+	/** Non-hook: observe a selector; call `listener` when its value changes (fires once now). */
+	observe(
+		selector: keyof Selectors | ((state: State) => any),
+		listener: (newValue: any, oldValue: any, store: this) => void,
+	): () => void {
+		const selectFn: (state: State) => any =
+			typeof selector === 'function' ? selector : (this.selectors![selector] as any);
+
+		let prevValue = selectFn(this.state);
+		listener(prevValue, prevValue, this);
+
+		return this.subscribe((nextState) => {
+			const nextValue = selectFn(nextState);
+			if (!Object.is(prevValue, nextValue)) {
+				const oldValue = prevValue;
+				prevValue = nextValue;
+				listener(nextValue, oldValue, this);
+			}
+		});
+	}
+}

package/src/utils/store/Store.ts

@@ -0,0 +1,84 @@
+// Ported from .base-ui/packages/utils/src/store/Store.ts (v1.6.0). The observer-pattern data
+// store used by every Base UI popup (Dialog/Popover/Tooltip/Menu/…). Pure state management —
+// the ONLY octane adaptation is the `.use()` hook method, which forwards an explicit slot to the
+// slot-based `useStore` (octane hooks are keyed by compiler/threaded slot, not call order).
+import { useStore } from './useStore';
+
+type Listener<T> = (state: T) => void;
+
+export class Store<State> {
+	state: State;
+
+	private listeners: Set<Listener<State>>;
+
+	// Internal state to handle recursive `setState()` calls.
+	private updateTick: number;
+
+	constructor(state: State) {
+		this.state = state;
+		this.listeners = new Set();
+		this.updateTick = 0;
+	}
+
+	subscribe = (fn: Listener<State>) => {
+		this.listeners.add(fn);
+		return () => {
+			this.listeners.delete(fn);
+		};
+	};
+
+	getSnapshot = () => {
+		return this.state;
+	};
+
+	setState(newState: State) {
+		if (this.state === newState) {
+			return;
+		}
+
+		this.state = newState;
+		this.updateTick += 1;
+
+		const currentTick = this.updateTick;
+		for (const listener of this.listeners) {
+			if (currentTick !== this.updateTick) {
+				// A recursive `setState` already notified all listeners.
+				return;
+			}
+			listener(newState);
+		}
+	}
+
+	update(changes: Partial<State>) {
+		for (const key in changes) {
+			if (!Object.is(this.state[key], changes[key])) {
+				this.setState({ ...this.state, ...changes });
+				return;
+			}
+		}
+	}
+
+	set<T>(key: keyof State, value: T) {
+		if (!Object.is(this.state[key], value)) {
+			this.setState({ ...this.state, [key]: value });
+		}
+	}
+
+	notifyAll() {
+		const newState = { ...this.state };
+		this.setState(newState);
+	}
+
+	// octane: slot is threaded explicitly (was `use(selector, ...args)` in React).
+	use<F extends (...args: any) => any>(
+		selector: F,
+		slot: symbol | undefined,
+		a1?: unknown,
+		a2?: unknown,
+		a3?: unknown,
+	): ReturnType<F> {
+		return useStore(this, selector as any, slot, a1, a2, a3) as ReturnType<F>;
+	}
+}
+
+export type ReadonlyStore<State> = Pick<Store<State>, 'getSnapshot' | 'subscribe' | 'state'>;

package/src/utils/store/createSelector.ts

@@ -0,0 +1,66 @@
+// Ported from .base-ui/packages/utils/src/store/createSelector.ts (v1.6.0). Combines up to six
+// selector functions into one. Pure — the elaborate reselect-based generic types are simplified
+// (the runtime is unchanged); the memoized variant (`createSelectorMemoized`, reselect-backed) is
+// only ported if/when a component needs it.
+export type CreateSelectorFunction = (...items: any[]) => (...args: any[]) => any;
+
+/* eslint-disable id-denylist */
+export const createSelector = ((
+	a: Function,
+	b?: Function,
+	c?: Function,
+	d?: Function,
+	e?: Function,
+	f?: Function,
+	...other: any[]
+) => {
+	if (other.length > 0) {
+		throw new Error('Unsupported number of selectors');
+	}
+
+	let selector: any;
+
+	if (a && b && c && d && e && f) {
+		selector = (state: any, a1: any, a2: any, a3: any) => {
+			const va = a(state, a1, a2, a3);
+			const vb = b(state, a1, a2, a3);
+			const vc = c(state, a1, a2, a3);
+			const vd = d(state, a1, a2, a3);
+			const ve = e(state, a1, a2, a3);
+			return f(va, vb, vc, vd, ve, a1, a2, a3);
+		};
+	} else if (a && b && c && d && e) {
+		selector = (state: any, a1: any, a2: any, a3: any) => {
+			const va = a(state, a1, a2, a3);
+			const vb = b(state, a1, a2, a3);
+			const vc = c(state, a1, a2, a3);
+			const vd = d(state, a1, a2, a3);
+			return e(va, vb, vc, vd, a1, a2, a3);
+		};
+	} else if (a && b && c && d) {
+		selector = (state: any, a1: any, a2: any, a3: any) => {
+			const va = a(state, a1, a2, a3);
+			const vb = b(state, a1, a2, a3);
+			const vc = c(state, a1, a2, a3);
+			return d(va, vb, vc, a1, a2, a3);
+		};
+	} else if (a && b && c) {
+		selector = (state: any, a1: any, a2: any, a3: any) => {
+			const va = a(state, a1, a2, a3);
+			const vb = b(state, a1, a2, a3);
+			return c(va, vb, a1, a2, a3);
+		};
+	} else if (a && b) {
+		selector = (state: any, a1: any, a2: any, a3: any) => {
+			const va = a(state, a1, a2, a3);
+			return b(va, a1, a2, a3);
+		};
+	} else if (a) {
+		selector = a;
+	} else {
+		throw new Error('Missing arguments');
+	}
+
+	return selector;
+}) as unknown as CreateSelectorFunction;
+/* eslint-enable id-denylist */

package/src/utils/store/useStore.ts

@@ -0,0 +1,49 @@
+// Ported from .base-ui/packages/utils/src/store/useStore.ts, octane-adapted. React's version has
+// a fiber-instance "fastHooks" optimization + a legacy `useSyncExternalStoreWithSelector` shim for
+// concurrent rendering. octane renders synchronously (a render always commits), so — exactly like
+// `@octanejs/zustand/traditional` — we build directly on octane's real `useSyncExternalStore`: a
+// ref caches the last selection and `getSnapshot` returns that SAME reference while the selection
+// is Object.is-equal, so useSyncExternalStore's own equality check bails out the re-render.
+//
+// SLOT: plain-`.ts` hook; the caller threads a slot (the ref + the store subscription each derive
+// a distinct sub-slot).
+import { useSyncExternalStore, useRef } from 'octane';
+import { subSlot } from '../../internal';
+import type { ReadonlyStore } from './Store';
+
+interface SelectionCell<U> {
+	hasValue: boolean;
+	value: U | undefined;
+}
+
+export function useStore<State, Value>(
+	store: ReadonlyStore<State>,
+	selector: (state: State, a1?: unknown, a2?: unknown, a3?: unknown) => Value,
+	slot: symbol | undefined,
+	a1?: unknown,
+	a2?: unknown,
+	a3?: unknown,
+): Value {
+	const cache = useRef<SelectionCell<Value>>(
+		{ hasValue: false, value: undefined },
+		subSlot(slot, 'sel'),
+	);
+
+	const select = (state: State): Value => {
+		const next = selector(state, a1, a2, a3);
+		const c = cache.current;
+		if (c.hasValue && Object.is(c.value as Value, next)) {
+			return c.value as Value;
+		}
+		c.hasValue = true;
+		c.value = next;
+		return next;
+	};
+
+	return useSyncExternalStore(
+		store.subscribe,
+		() => select(store.getSnapshot()),
+		() => select(store.getSnapshot()),
+		subSlot(slot, 'uses'),
+	);
+}