@octanejs/base-ui 0.1.49 → 0.1.51

package/src/utils/floating/useSyncedFloatingRootContext.ts

@@ -1,93 +0,0 @@
-// 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/floating/useTypeahead.ts

@@ -1,287 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useTypeahead.ts (v1.6.0). Matches
-// list items as the user types, the way a native `<select>` does — usually paired with
-// `useListNavigation`. Returns an `ElementProps` bag whose `onKeyDown`/`onBlur` the reference and
-// the floating element both merge.
-//
-// octane adaptations: handlers receive the NATIVE event, so `event.nativeEvent` collapses to
-// `event`; `useIsoLayoutEffect` is octane's `useLayoutEffect`; every composed hook threads an
-// explicit slot.
-//
-// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
-import { useLayoutEffect, useMemo, useRef } from 'octane';
-
-import { S, splitSlot, subSlot } from '../../internal';
-import { EMPTY_ARRAY } from '../empty';
-import { useStableCallback } from '../useStableCallback';
-import { useTimeout } from '../useTimeout';
-import { isListIndexDisabled, stopEvent, type DisabledIndices } from '../composite/list-utils';
-import { isElementVisible } from './composite';
-import { contains } from './element';
-import type { ElementProps, FloatingContext, FloatingRootContext } from './types';
-
-export interface UseTypeaheadProps {
-	/**
-	 * A ref which contains an array of strings whose indices match the HTML
-	 * elements of the list.
-	 * @default empty list
-	 */
-	listRef: { current: Array<string | null> };
-	/**
-	 * The index of the active (focused or highlighted) item in the list.
-	 * @default null
-	 */
-	activeIndex: number | null;
-	/**
-	 * Callback invoked with the matching index if found as the user types.
-	 */
-	onMatch?: ((index: number) => void) | undefined;
-	/**
-	 * Optional list of item elements that correspond to `listRef` indices.
-	 * When an element exists for an index, typeahead skips it if it is hidden by
-	 * `display: none`, `visibility: hidden|collapse`, or other
-	 * browser-reported visibility checks.
-	 */
-	elementsRef?: { current: Array<HTMLElement | null> } | undefined;
-	/**
-	 * Indices that are disabled, either as an array or a predicate (the same shape as
-	 * `useListNavigation`'s `disabledIndices`). Disabled items are skipped while matching,
-	 * so a single keypress advances to the next selectable item (matching native `<select>`
-	 * and arrow-key navigation). The disabled check doesn't read `elementsRef`, so consumers
-	 * whose items stay mounted-but-hidden while closed can still skip disabled items without
-	 * passing `elementsRef`.
-	 */
-	disabledIndices?: DisabledIndices | undefined;
-	/**
-	 * Callback invoked with the current typing activity as the user types.
-	 */
-	onTyping?: ((isTyping: boolean) => void) | undefined;
-	/**
-	 * Whether the hook is enabled, including all internal effects and event
-	 * handlers.
-	 * @default true
-	 */
-	enabled?: boolean | undefined;
-	/**
-	 * The number of milliseconds to wait before resetting the typed string.
-	 * @default 750
-	 */
-	resetMs?: number | undefined;
-	/**
-	 * The index of the selected item in the list, if available.
-	 * @default null
-	 */
-	selectedIndex?: number | null | undefined;
-}
-
-/**
- * Provides a matching callback that can be used to focus an item as the user
- * types, often used in tandem with `useListNavigation()`.
- * @see https://floating-ui.com/docs/useTypeahead
- */
-export function useTypeahead(...args: any[]): ElementProps {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useTypeahead');
-	const context = user[0] as FloatingRootContext | FloatingContext;
-	const props = user[1] as UseTypeaheadProps;
-
-	const {
-		listRef,
-		elementsRef,
-		activeIndex,
-		onMatch: onMatchProp,
-		disabledIndices,
-		onTyping,
-		enabled = true,
-		resetMs = 750,
-		selectedIndex = null,
-	} = props;
-
-	const store = (context && 'rootStore' in context ? context.rootStore : context) as any;
-
-	const open = store.useState('open', subSlot(slot, 'open'));
-
-	const timeout = useTimeout(subSlot(slot, 'to'));
-	const stringRef = useRef('', subSlot(slot, 'str'));
-	const prevIndexRef = useRef<number | null>(
-		selectedIndex ?? activeIndex ?? -1,
-		subSlot(slot, 'prev'),
-	);
-	const matchIndexRef = useRef<number | null>(null, subSlot(slot, 'match'));
-
-	const onKeyDown = useStableCallback(
-		(event: KeyboardEvent) => {
-			function isVisible(index: number) {
-				const element = elementsRef?.current[index];
-				return !element || isElementVisible(element);
-			}
-
-			function isItemAvailable(index: number) {
-				if (!isVisible(index)) {
-					return false;
-				}
-				// Visibility is handled above; pass an empty element list so `isListIndexDisabled`
-				// resolves only the explicit `disabledIndices` (array/predicate) and skips its own
-				// visibility/attribute fallbacks. Consumers that don't opt in keep matching every
-				// visible item.
-				return disabledIndices == null || !isListIndexDisabled(EMPTY_ARRAY, index, disabledIndices);
-			}
-
-			function getMatchingIndex(list: Array<string | null>, string: string, startIndex = 0) {
-				if (list.length === 0) {
-					return -1;
-				}
-
-				const normalizedStartIndex = ((startIndex % list.length) + list.length) % list.length;
-				const lowerString = string.toLowerCase();
-
-				for (let offset = 0; offset < list.length; offset += 1) {
-					const index = (normalizedStartIndex + offset) % list.length;
-					const text = list[index];
-					if (!text?.toLowerCase().startsWith(lowerString) || !isItemAvailable(index)) {
-						continue;
-					}
-					return index;
-				}
-				return -1;
-			}
-
-			const listContent = listRef.current;
-
-			if (stringRef.current.length > 0 && event.key === ' ') {
-				// Space should continue the in-progress typeahead session.
-				stopEvent(event);
-				onTyping?.(true);
-			}
-
-			if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
-				if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
-					onTyping?.(false);
-				}
-			}
-
-			if (
-				listContent == null ||
-				// Character key.
-				event.key.length !== 1 ||
-				// Modifier key.
-				event.ctrlKey ||
-				event.metaKey ||
-				event.altKey
-			) {
-				return;
-			}
-
-			if (open && event.key !== ' ') {
-				stopEvent(event);
-				onTyping?.(true);
-			}
-
-			// Capture whether this is a new typing session before mutating the string.
-			const isNewSession = stringRef.current === '';
-			if (isNewSession) {
-				prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-			}
-
-			// Bail out if the list contains a word like "llama" or "aaron". TODO:
-			// allow it in this case, too. Unavailable items are skipped while matching, so
-			// they must be ignored here as well — otherwise a hidden or disabled double-letter
-			// label would block rapid cycling through the available items.
-			const allowRapidSuccessionOfFirstLetter = listContent.every((text, index) =>
-				text && isItemAvailable(index) ? text[0]?.toLowerCase() !== text[1]?.toLowerCase() : true,
-			);
-
-			// Allows the user to cycle through items that start with the same letter
-			// in rapid succession.
-			if (allowRapidSuccessionOfFirstLetter && stringRef.current === event.key) {
-				stringRef.current = '';
-				prevIndexRef.current = matchIndexRef.current;
-			}
-
-			stringRef.current += event.key;
-			timeout.start(resetMs, () => {
-				stringRef.current = '';
-				prevIndexRef.current = matchIndexRef.current;
-				onTyping?.(false);
-			});
-
-			// Compute the starting index for this search.
-			// If this is a new typing session (string is empty), base it on the current
-			// selection/active item; otherwise continue from the last matched index.
-			const prevIndex = isNewSession ? (selectedIndex ?? activeIndex ?? -1) : prevIndexRef.current;
-			const startIndex = (prevIndex ?? 0) + 1;
-
-			const index = getMatchingIndex(listContent, stringRef.current, startIndex);
-
-			if (index !== -1) {
-				onMatchProp?.(index);
-				matchIndexRef.current = index;
-			} else if (event.key !== ' ') {
-				stringRef.current = '';
-				onTyping?.(false);
-			}
-		},
-		subSlot(slot, 'okd'),
-	);
-
-	const onBlur = useStableCallback(
-		(event: FocusEvent) => {
-			const next = event.relatedTarget as Element | null;
-			const currentDomReferenceElement = store.select('domReferenceElement');
-			const currentFloatingElement = store.select('floatingElement');
-			const withinComposite =
-				contains(currentDomReferenceElement, next) || contains(currentFloatingElement, next);
-
-			// Keep the session if focus moves within the composite (reference <-> floating).
-			if (withinComposite) {
-				return;
-			}
-
-			// End the current typing session when focus leaves the composite entirely.
-			timeout.clear();
-			stringRef.current = '';
-			prevIndexRef.current = matchIndexRef.current;
-			onTyping?.(false);
-		},
-		subSlot(slot, 'ob'),
-	);
-
-	useLayoutEffect(
-		() => {
-			if (!open && selectedIndex !== null) {
-				return;
-			}
-
-			timeout.clear();
-			matchIndexRef.current = null;
-
-			if (stringRef.current !== '') {
-				stringRef.current = '';
-			}
-		},
-		[open, selectedIndex, timeout],
-		subSlot(slot, 'e:reset'),
-	);
-
-	useLayoutEffect(
-		() => {
-			// Sync arrow key navigation but not typeahead navigation.
-			if (open && stringRef.current === '') {
-				prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-			}
-		},
-		[open, selectedIndex, activeIndex],
-		subSlot(slot, 'e:sync'),
-	);
-
-	const sharedProps = useMemo(
-		() => ({ onKeyDown, onBlur }),
-		[onKeyDown, onBlur],
-		subSlot(slot, 'shared'),
-	);
-
-	return useMemo(
-		() => (enabled ? { reference: sharedProps, floating: sharedProps } : {}),
-		[enabled, sharedProps],
-		subSlot(slot, 'out'),
-	);
-}

package/src/utils/formatNumber.ts

@@ -1,44 +0,0 @@
-// Ported from .base-ui/packages/react/src/utils/formatNumber.ts. Pure `Intl.NumberFormat`
-// wrapper with a memoized formatter cache — framework-agnostic, so it ports verbatim.
-import { stringifyLocale } from './stringifyLocale';
-
-export const cache = new Map<string, Intl.NumberFormat>();
-
-export function getFormatter(
-	locale?: Intl.LocalesArgument,
-	options?: Intl.NumberFormatOptions,
-): Intl.NumberFormat {
-	const optionsString = JSON.stringify({ locale: stringifyLocale(locale), options });
-	const cachedFormatter = cache.get(optionsString);
-	if (cachedFormatter) {
-		return cachedFormatter;
-	}
-	const formatter = new Intl.NumberFormat(locale, options);
-	cache.set(optionsString, formatter);
-	return formatter;
-}
-
-export function formatNumber(
-	value: number | null,
-	locale?: Intl.LocalesArgument,
-	options?: Intl.NumberFormatOptions,
-): string {
-	if (value == null) {
-		return '';
-	}
-	return getFormatter(locale, options).format(value);
-}
-
-export function formatNumberValue(
-	value: number | null,
-	locale?: Intl.LocalesArgument,
-	format?: Intl.NumberFormatOptions,
-): string {
-	if (value == null) {
-		return '';
-	}
-	if (!format) {
-		return formatNumber(value / 100, locale, { style: 'percent' });
-	}
-	return formatNumber(value, locale, format);
-}

package/src/utils/generateId.ts

@@ -1,10 +0,0 @@
-// Ported verbatim from .base-ui/packages/utils/src/generateId.ts (v1.6.0). Pure.
-//
-// A non-`useId` identifier generator: toasts are created imperatively (from `toastManager.add()`,
-// outside any render), so they cannot get an id from a hook.
-let counter = 0;
-
-export function generateId(prefix: string): string {
-	counter += 1;
-	return `${prefix}-${Math.random().toString(36).slice(2, 6)}-${counter}`;
-}

package/src/utils/getDefaultFormSubmitter.ts

@@ -1,19 +0,0 @@
-// Ported verbatim from .base-ui/packages/utils/src/getDefaultFormSubmitter.ts. Returns the
-// button a browser would use for implicit (Enter-key) form submission.
-export type DefaultFormSubmitter = HTMLButtonElement | HTMLInputElement;
-
-export function getDefaultFormSubmitter(form: HTMLFormElement | null): DefaultFormSubmitter | null {
-	if (!form) {
-		return null;
-	}
-	for (const candidate of Array.from(form.elements)) {
-		const tagName = candidate.tagName;
-		if (tagName === 'BUTTON' || tagName === 'INPUT') {
-			const button = candidate as HTMLButtonElement | HTMLInputElement;
-			if (button.type === 'submit') {
-				return button;
-			}
-		}
-	}
-	return null;
-}

package/src/utils/getDisabledMountTransitionStyles.ts

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

@@ -1,13 +0,0 @@
-// octane analogue of @base-ui/utils/getReactElementRef
-// (.base-ui/packages/utils/src/getReactElementRef.ts). octane is ref-as-prop
-// (React-19 shape), so a descriptor's ref lives in `props.ref`. Returns null for
-// a non-element (function render prop, text, null).
-import { isValidElement } from 'octane';
-
-export function getElementRef(element: unknown): any {
-	if (!isValidElement(element)) {
-		return null;
-	}
-	const props = (element as any).props as { ref?: any } | undefined;
-	return props?.ref ?? null;
-}

package/src/utils/getStateAttributesProps.ts

@@ -1,34 +0,0 @@
-// Ported from .base-ui/packages/react/src/utils/getStateAttributesProps.ts.
-// Turns a component's `state` object into `data-*` attributes: `true` → `data-key=""`,
-// any other truthy value → `data-key="<value>"`, falsy → omitted. A `customMapping`
-// entry overrides the default for a given state key.
-export type StateAttributesMapping<State> = {
-	[Property in keyof State]?: (state: State[Property]) => Record<string, string> | null;
-};
-
-export function getStateAttributesProps<State extends Record<string, any>>(
-	state: State,
-	customMapping?: StateAttributesMapping<State>,
-): Record<string, string> {
-	const props: Record<string, string> = {};
-
-	for (const key in state) {
-		const value = state[key];
-
-		if (customMapping?.hasOwnProperty(key)) {
-			const customProps = customMapping[key]!(value);
-			if (customProps != null) {
-				Object.assign(props, customProps);
-			}
-			continue;
-		}
-
-		if (value === true) {
-			props[`data-${key.toLowerCase()}`] = '';
-		} else if (value) {
-			props[`data-${key.toLowerCase()}`] = value.toString();
-		}
-	}
-
-	return props;
-}

package/src/utils/inertValue.ts

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

@@ -1,16 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/utils/element.ts (matchesFocusVisible).
-// jsdom doesn't match `:focus-visible` reliably (it stays matched while `:focus` is set), so —
-// exactly as Base UI does — return `true` under jsdom to avoid the focus-restore dance. Both the
-// octane and React trees run in the SAME jsdom in the differential rig, so this must agree.
-const isJSDOM = typeof navigator !== 'undefined' && /jsdom/i.test(navigator.userAgent);
-
-export function matchesFocusVisible(element: Element | null): boolean {
-	if (!element || isJSDOM) {
-		return true;
-	}
-	try {
-		return element.matches(':focus-visible');
-	} catch {
-		return true;
-	}
-}

package/src/utils/mergeCleanups.ts

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

@@ -1,18 +0,0 @@
-// Ported from @base-ui/utils/mergeObjects
-// (.base-ui/packages/utils/src/mergeObjects.ts). Shallow object merge that
-// avoids allocating when only one side is present.
-export function mergeObjects<A extends object | undefined, B extends object | undefined>(
-	a: A,
-	b: B,
-): A | B | (A & B) | undefined {
-	if (a && !b) {
-		return a;
-	}
-	if (!a && b) {
-		return b;
-	}
-	if (a || b) {
-		return { ...a, ...b } as A & B;
-	}
-	return undefined;
-}