@octanejs/base-ui 0.1.50 → 0.1.52

package/src/utils/closePart.ts

@@ -1,61 +0,0 @@
-// Ported from .base-ui/packages/react/src/utils/closePart.tsx (v1.6.0), octane-adapted
-// (slot-threaded plain-`.ts`). Tracks how many "close" parts (e.g. `Popover.Close`) are mounted
-// inside a popup so the focus manager can decide whether the popup is effectively modal.
-import {
-	createContext,
-	useContext,
-	useState,
-	useMemo,
-	useLayoutEffect,
-	createElement,
-} from 'octane';
-
-import { S, subSlot } from '../internal';
-import { useStableCallback } from './useStableCallback';
-
-interface ClosePartContextValue {
-	register: () => () => void;
-}
-
-const ClosePartContext = createContext<ClosePartContextValue | undefined>(undefined);
-
-export function useClosePartCount(): { context: ClosePartContextValue; hasClosePart: boolean } {
-	const slot = S('useClosePartCount');
-	const [closePartCount, setClosePartCount] = useState(0, subSlot(slot, 'count'));
-
-	const register = useStableCallback(
-		() => {
-			setClosePartCount((count: number) => count + 1);
-			return () => {
-				setClosePartCount((count: number) => Math.max(0, count - 1));
-			};
-		},
-		subSlot(slot, 'reg'),
-	);
-
-	const context = useMemo(() => ({ register }), [register], subSlot(slot, 'ctx'));
-
-	return {
-		context,
-		hasClosePart: closePartCount > 0,
-	};
-}
-
-export function ClosePartProvider(props: { value: ClosePartContextValue; children?: any }): any {
-	return createElement(ClosePartContext.Provider, {
-		value: props.value,
-		children: props.children,
-	});
-}
-
-export function useClosePartRegistration(): void {
-	const slot = S('useClosePartRegistration');
-	const context = useContext(ClosePartContext);
-	useLayoutEffect(
-		() => {
-			return context?.register();
-		},
-		[context],
-		subSlot(slot, 'eff'),
-	);
-}

package/src/utils/composeRefs.ts

@@ -1,53 +0,0 @@
-// Ported from @radix-ui/react-compose-refs. Merges multiple refs (objects or callbacks,
-// incl. React-19 cleanup-returning callback refs) into one callback ref. octane is
-// ref-as-prop, so these compose the `ref` values a Slot/Primitive threads onto a child.
-import { useCallback } from 'octane';
-
-import { S, splitSlot, subSlot } from '../internal';
-
-type PossibleRef<T> = ((instance: T | null) => void | (() => void)) | { current: T | null } | null;
-
-function setRef<T>(ref: PossibleRef<T>, value: T | null): void | (() => void) {
-	if (typeof ref === 'function') {
-		return ref(value);
-	} else if (ref !== null && ref !== undefined) {
-		ref.current = value;
-	}
-}
-
-/**
- * Compose multiple refs into a single callback ref. Honors cleanup functions returned by
- * callback refs (React 19 semantics); falls back to calling refs with `null` on unmount.
- */
-export function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void | (() => void) {
-	return (node: T | null) => {
-		let hasCleanup = false;
-		const cleanups = refs.map((ref) => {
-			const cleanup = setRef(ref, node);
-			if (!hasCleanup && typeof cleanup === 'function') {
-				hasCleanup = true;
-			}
-			return cleanup;
-		});
-		if (hasCleanup) {
-			return () => {
-				for (let i = 0; i < cleanups.length; i++) {
-					const cleanup = cleanups[i];
-					if (typeof cleanup === 'function') {
-						cleanup();
-					} else {
-						setRef(refs[i], null);
-					}
-				}
-			};
-		}
-	};
-}
-
-/** Hook version — a stable composed callback ref over the given refs. */
-export function useComposedRefs<T>(...args: any[]): (node: T | null) => void | (() => void) {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useComposedRefs');
-	const refs = user as PossibleRef<T>[];
-	return useCallback(composeRefs(...refs), refs, subSlot(slot, 'cb'));
-}

package/src/utils/composite/CompositeItem.ts

@@ -1,56 +0,0 @@
-// Ported from .base-ui/packages/react/src/internals/composite/item/CompositeItem.tsx.
-// Renders a composite item, merging the roving-focus props (tabIndex/onFocus/onMouseMove)
-// UNDER the caller's own props, and composing the caller's refs with the composite ref.
-import { S, subSlot } from '../../internal';
-import { useRenderElement } from '../useRenderElement';
-import type { StateAttributesMapping } from '../getStateAttributesProps';
-import { useCompositeItem } from './useCompositeItem';
-
-const EMPTY_ARRAY: never[] = [];
-const EMPTY_OBJECT: Record<string, never> = {};
-
-export interface CompositeItemProps<Metadata, State extends Record<string, any>> {
-	render?: any;
-	className?: any;
-	style?: any;
-	children?: any;
-	metadata?: Metadata;
-	refs?: any[];
-	props?: Array<Record<string, any> | (() => Record<string, any>)>;
-	state?: State;
-	stateAttributesMapping?: StateAttributesMapping<State>;
-	tag?: string;
-	[key: string]: any;
-}
-
-export function CompositeItem<Metadata, State extends Record<string, any>>(
-	componentProps: CompositeItemProps<Metadata, State>,
-): any {
-	const slot = S('CompositeItem');
-	const {
-		render,
-		className,
-		style,
-		state = EMPTY_OBJECT as State,
-		props = EMPTY_ARRAY,
-		refs = EMPTY_ARRAY,
-		metadata,
-		stateAttributesMapping,
-		tag = 'div',
-		...elementProps
-	} = componentProps;
-
-	const { compositeProps, compositeRef } = useCompositeItem({ metadata }, subSlot(slot, 'item'));
-
-	return useRenderElement(
-		tag,
-		{ render, className, style },
-		{
-			state,
-			ref: [...refs, compositeRef],
-			props: [compositeProps, ...props, elementProps],
-			stateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-}

package/src/utils/composite/CompositeList.ts

@@ -1,190 +0,0 @@
-// Ported from .base-ui/packages/react/src/internals/composite/list/CompositeList.tsx.
-// Registers composite items in a stable Map, sorts them by document position to assign each
-// a DOM-order `index`, and notifies subscribers (`onMapChange` / `subscribeMapChange`) plus
-// keeps `elementsRef` sized. A MutationObserver re-sorts when the DOM reorders. Rendered by
-// CompositeRoot as `<CompositeListContext.Provider>{children}</Provider>`.
-import { createElement, useLayoutEffect, useMemo, useRef, useState } from 'octane';
-
-import { S, subSlot } from '../../internal';
-import { useStableCallback } from '../useStableCallback';
-import { useRefWithInit } from '../useRefWithInit';
-import { CompositeListContext } from './CompositeListContext';
-
-export type CompositeMetadata<CustomMetadata> = {
-	index?: number | null | undefined;
-} & CustomMetadata;
-
-export interface CompositeListProps<Metadata> {
-	children: any;
-	elementsRef: { current: Array<HTMLElement | null> };
-	labelsRef?: { current: Array<string | null> } | undefined;
-	onMapChange?: (newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void;
-}
-
-function createMap<Metadata>(): Map<Element, CompositeMetadata<Metadata> | null> {
-	return new Map();
-}
-
-function createListeners(): Set<Function> {
-	return new Set();
-}
-
-function sortByDocumentPosition(a: Element, b: Element): 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 function CompositeList<Metadata>(props: CompositeListProps<Metadata>): any {
-	const slot = S('CompositeList');
-	const { children, elementsRef, labelsRef, onMapChange: onMapChangeProp } = props;
-
-	const onMapChange = useStableCallback(onMapChangeProp, subSlot(slot, 'omc'));
-
-	const nextIndexRef = useRef(0, subSlot(slot, 'nextIdx'));
-	const listeners = useRefWithInit<Set<Function>>(
-		createListeners,
-		subSlot(slot, 'listeners'),
-	).current;
-
-	const map = useRefWithInit<Map<Element, CompositeMetadata<Metadata> | null>>(
-		createMap,
-		subSlot(slot, 'map'),
-	).current;
-	const [mapTick, setMapTick] = useState(0, subSlot(slot, 'tick'));
-	const lastTickRef = useRef(mapTick, subSlot(slot, 'lastTick'));
-
-	const register = useStableCallback(
-		(node: Element, metadata: Metadata) => {
-			map.set(node, (metadata ?? null) as CompositeMetadata<Metadata> | null);
-			lastTickRef.current += 1;
-			setMapTick(lastTickRef.current);
-		},
-		subSlot(slot, 'reg'),
-	);
-
-	const unregister = useStableCallback(
-		(node: Element) => {
-			map.delete(node);
-			lastTickRef.current += 1;
-			setMapTick(lastTickRef.current);
-		},
-		subSlot(slot, 'unreg'),
-	);
-
-	const sortedMap = useMemo(
-		() => {
-			const newMap = new Map<Element, CompositeMetadata<Metadata>>();
-			const sortedNodes = Array.from(map.keys())
-				.filter((node) => node.isConnected)
-				.sort(sortByDocumentPosition);
-			sortedNodes.forEach((node, index) => {
-				const metadata = map.get(node) ?? ({} as CompositeMetadata<Metadata>);
-				newMap.set(node, { ...metadata, index });
-			});
-			return newMap;
-		},
-		[map, mapTick],
-		subSlot(slot, 'sorted'),
-	);
-
-	useLayoutEffect(
-		() => {
-			if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
-				return undefined;
-			}
-			const mutationObserver = new MutationObserver((entries) => {
-				const diff = new Set<Node>();
-				const updateDiff = (node: Node) => (diff.has(node) ? diff.delete(node) : diff.add(node));
-				entries.forEach((entry) => {
-					entry.removedNodes.forEach(updateDiff);
-					entry.addedNodes.forEach(updateDiff);
-				});
-				if (diff.size === 0) {
-					lastTickRef.current += 1;
-					setMapTick(lastTickRef.current);
-				}
-			});
-			sortedMap.forEach((_, node) => {
-				if (node.parentElement) {
-					mutationObserver.observe(node.parentElement, { childList: true });
-				}
-			});
-			return () => {
-				mutationObserver.disconnect();
-			};
-		},
-		[sortedMap],
-		subSlot(slot, 'e:mo'),
-	);
-
-	useLayoutEffect(
-		() => {
-			const shouldUpdateLengths = lastTickRef.current === mapTick;
-			if (shouldUpdateLengths) {
-				if (elementsRef.current.length !== sortedMap.size) {
-					elementsRef.current.length = sortedMap.size;
-				}
-				if (labelsRef && labelsRef.current.length !== sortedMap.size) {
-					labelsRef.current.length = sortedMap.size;
-				}
-				nextIndexRef.current = sortedMap.size;
-			}
-			onMapChange(sortedMap);
-		},
-		[onMapChange, sortedMap, elementsRef, labelsRef, mapTick],
-		subSlot(slot, 'e:len'),
-	);
-
-	useLayoutEffect(
-		() => () => {
-			elementsRef.current = [];
-		},
-		[elementsRef],
-		subSlot(slot, 'e:cleanEl'),
-	);
-
-	useLayoutEffect(
-		() => () => {
-			if (labelsRef) {
-				labelsRef.current = [];
-			}
-		},
-		[labelsRef],
-		subSlot(slot, 'e:cleanLbl'),
-	);
-
-	const subscribeMapChange = useStableCallback(
-		(fn: (map: Map<Element, any>) => void) => {
-			listeners.add(fn);
-			return () => {
-				listeners.delete(fn);
-			};
-		},
-		subSlot(slot, 'sub'),
-	);
-
-	useLayoutEffect(
-		() => {
-			listeners.forEach((l) => (l as (m: any) => void)(sortedMap));
-		},
-		[listeners, sortedMap],
-		subSlot(slot, 'e:notify'),
-	);
-
-	const contextValue = useMemo(
-		() => ({ register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef }),
-		[register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef],
-		subSlot(slot, 'ctx'),
-	);
-
-	return createElement(CompositeListContext.Provider, { value: contextValue, children });
-}

package/src/utils/composite/CompositeListContext.ts

@@ -1,23 +0,0 @@
-// Ported from .base-ui/packages/react/src/internals/composite/list/CompositeListContext.ts.
-import { createContext, useContext } from 'octane';
-
-export interface CompositeListContextValue<Metadata> {
-	register: (node: Element, metadata: Metadata) => void;
-	unregister: (node: Element) => void;
-	subscribeMapChange: (fn: (map: Map<Element, Metadata | null>) => void) => () => void;
-	elementsRef: { current: Array<HTMLElement | null> };
-	labelsRef?: { current: Array<string | null> } | undefined;
-	nextIndexRef: { current: number };
-}
-
-export const CompositeListContext = createContext<CompositeListContextValue<any>>({
-	register: () => {},
-	unregister: () => {},
-	subscribeMapChange: () => () => {},
-	elementsRef: { current: [] },
-	nextIndexRef: { current: 0 },
-});
-
-export function useCompositeListContext(): CompositeListContextValue<any> {
-	return useContext(CompositeListContext);
-}

package/src/utils/composite/CompositeRoot.ts

@@ -1,132 +0,0 @@
-// Ported from .base-ui/packages/react/src/internals/composite/root/CompositeRoot.tsx.
-// Wraps a composite in the roving-focus engine (useCompositeRoot) + the item registry
-// (CompositeList), and provides CompositeRootContext to the items.
-import { createElement, useMemo } from 'octane';
-
-import { S, subSlot } from '../../internal';
-import { useRenderElement } from '../useRenderElement';
-import type { StateAttributesMapping } from '../getStateAttributesProps';
-import { useDirection } from '../DirectionContext';
-import { CompositeRootContext } from '../CompositeRootContext';
-import { CompositeList, type CompositeMetadata } from './CompositeList';
-import { useCompositeRoot } from './useCompositeRoot';
-import type { ModifierKey } from './keys';
-
-const EMPTY_ARRAY: never[] = [];
-const EMPTY_OBJECT: Record<string, never> = {};
-
-export interface CompositeRootProps<Metadata, State extends Record<string, any>> {
-	render?: any;
-	className?: any;
-	style?: any;
-	refs?: any[];
-	props?: Array<Record<string, any> | (() => Record<string, any>)>;
-	state?: State;
-	stateAttributesMapping?: StateAttributesMapping<State>;
-	highlightedIndex?: number;
-	onHighlightedIndexChange?: (index: number) => void;
-	orientation?: 'horizontal' | 'vertical' | 'both';
-	grid?: ((params: any) => number) | undefined;
-	loopFocus?: boolean;
-	onLoop?: any;
-	enableHomeAndEndKeys?: boolean;
-	onMapChange?: (newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void;
-	stopEventPropagation?: boolean;
-	rootRef?: any;
-	disabledIndices?: number[];
-	modifierKeys?: ModifierKey[];
-	highlightItemOnHover?: boolean;
-	tag?: string;
-	[key: string]: any;
-}
-
-export function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(
-	componentProps: CompositeRootProps<Metadata, State>,
-): any {
-	const slot = S('CompositeRoot');
-	const {
-		render,
-		className,
-		style,
-		refs = EMPTY_ARRAY,
-		props = EMPTY_ARRAY,
-		state = EMPTY_OBJECT as State,
-		stateAttributesMapping,
-		highlightedIndex: highlightedIndexProp,
-		onHighlightedIndexChange: onHighlightedIndexChangeProp,
-		orientation,
-		grid,
-		loopFocus,
-		onLoop,
-		enableHomeAndEndKeys,
-		onMapChange: onMapChangeProp,
-		stopEventPropagation = true,
-		rootRef,
-		disabledIndices,
-		modifierKeys,
-		highlightItemOnHover = false,
-		tag = 'div',
-		...elementProps
-	} = componentProps;
-
-	const direction = useDirection();
-
-	const {
-		props: defaultProps,
-		highlightedIndex,
-		onHighlightedIndexChange,
-		elementsRef,
-		onMapChange: onMapChangeUnwrapped,
-		relayKeyboardEvent,
-	} = useCompositeRoot(
-		{
-			grid,
-			loopFocus,
-			onLoop,
-			orientation,
-			highlightedIndex: highlightedIndexProp,
-			onHighlightedIndexChange: onHighlightedIndexChangeProp,
-			rootRef,
-			stopEventPropagation,
-			enableHomeAndEndKeys,
-			direction,
-			disabledIndices,
-			modifierKeys,
-		},
-		subSlot(slot, 'root'),
-	);
-
-	const element = useRenderElement(
-		tag,
-		{ render, className, style },
-		{
-			state,
-			ref: refs,
-			props: [defaultProps, ...props, elementProps],
-			stateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-
-	const contextValue = useMemo(
-		() => ({
-			highlightedIndex,
-			onHighlightedIndexChange,
-			highlightItemOnHover,
-			relayKeyboardEvent,
-		}),
-		[highlightedIndex, onHighlightedIndexChange, highlightItemOnHover, relayKeyboardEvent],
-		subSlot(slot, 'ctx'),
-	);
-
-	const list = createElement(CompositeList, {
-		elementsRef,
-		onMapChange: (newMap: any) => {
-			onMapChangeProp?.(newMap);
-			onMapChangeUnwrapped(newMap);
-		},
-		children: element,
-	});
-
-	return createElement(CompositeRootContext.Provider, { value: contextValue, children: list });
-}