@octanejs/base-ui 0.1.14 → 0.1.16

package/src/utils/composite/useCompositeRoot.ts

@@ -141,14 +141,9 @@ export function useCompositeRoot(...args: any[]): {
 
 			if (activeIndex !== -1) {
 				onHighlightedIndexChange(activeIndex);
-			} else if (
-				isListIndexDisabled({ current: sortedElements }, highlightedIndex, disabledIndices)
-			) {
-				const firstEnabledIndex = findNonDisabledListIndex(
-					{ current: sortedElements },
-					{ disabledIndices },
-				);
-				if (!isIndexOutOfListBounds({ current: sortedElements }, firstEnabledIndex)) {
+			} else if (isListIndexDisabled(sortedElements, highlightedIndex, disabledIndices)) {
+				const firstEnabledIndex = findNonDisabledListIndex(sortedElements, { disabledIndices });
+				if (!isIndexOutOfListBounds(sortedElements, firstEnabledIndex)) {
 					onHighlightedIndexChange(firstEnabledIndex);
 				}
 			}
@@ -168,9 +163,9 @@ export function useCompositeRoot(...args: any[]): {
 				return;
 			}
 			const elements = elementsRef.current;
-			if (isListIndexDisabled(elementsRef, highlightedIndex, disabledIndices)) {
-				const firstEnabledIndex = findNonDisabledListIndex(elementsRef, { disabledIndices });
-				if (!isIndexOutOfListBounds({ current: elements }, firstEnabledIndex)) {
+			if (isListIndexDisabled(elements, highlightedIndex, disabledIndices)) {
+				const firstEnabledIndex = findNonDisabledListIndex(elements, { disabledIndices });
+				if (!isIndexOutOfListBounds(elements, firstEnabledIndex)) {
 					onHighlightedIndexChange(firstEnabledIndex);
 				}
 			}
@@ -294,7 +289,7 @@ export function useCompositeRoot(...args: any[]): {
 						nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
 					}
 				} else {
-					nextIndex = findNonDisabledListIndex(elementsRef, {
+					nextIndex = findNonDisabledListIndex(elementsRef.current, {
 						startingIndex: nextIndex,
 						decrement: backwardKeys.includes(event.key),
 						disabledIndices,
@@ -302,7 +297,10 @@ export function useCompositeRoot(...args: any[]): {
 				}
 			}
 
-			if (nextIndex !== highlightedIndex && !isIndexOutOfListBounds(elementsRef, nextIndex)) {
+			if (
+				nextIndex !== highlightedIndex &&
+				!isIndexOutOfListBounds(elementsRef.current, nextIndex)
+			) {
 				if (stopEventPropagation) {
 					event.stopPropagation();
 				}

package/src/utils/constants.ts

@@ -2,8 +2,30 @@
 // overlay/positioner layer needs. `POPUP_COLLISION_AVOIDANCE` is the default collision config
 // popups pass to `useAnchorPositioning`; `DISABLED_TRANSITIONS_STYLE` disables transitions while
 // a popup is in the `starting` transition phase (so the mount frame doesn't animate).
+
+/**
+ * Used by regular popups that usually aren't scrollable and are allowed to
+ * freely flip to any axis of placement.
+ */
 export const POPUP_COLLISION_AVOIDANCE = {
 	fallbackAxisSide: 'end',
 } as const;
 
+/**
+ * Used for dropdowns that usually strictly prefer top/bottom placements and
+ * use `var(--available-height)` to limit their height.
+ */
+export const DROPDOWN_COLLISION_AVOIDANCE = {
+	fallbackAxisSide: 'none',
+} as const;
+
 export const DISABLED_TRANSITIONS_STYLE = { style: { transition: 'none' } } as const;
+
+/** How long a typeahead buffer survives without a keystroke before it resets. */
+export const TYPEAHEAD_RESET_MS = 500;
+
+/**
+ * How long after a hover-open a click is still treated as "patient" (and therefore does not
+ * immediately close the popup it just opened).
+ */
+export const PATIENT_CLICK_THRESHOLD = 500;

package/src/utils/createChangeEventDetails.ts

@@ -22,13 +22,17 @@ export const REASONS = {
 	scrub: 'scrub',
 	trackPress: 'track-press',
 	drag: 'drag',
+	disabled: 'disabled',
 	triggerHover: 'trigger-hover',
 	triggerFocus: 'trigger-focus',
 	outsidePress: 'outside-press',
 	closePress: 'close-press',
 	focusOut: 'focus-out',
+	listNavigation: 'list-navigation',
 	escapeKey: 'escape-key',
 	imperativeAction: 'imperative-action',
+	cancelOpen: 'cancel-open',
+	siblingOpen: 'sibling-open',
 } as const;
 
 export type BaseUIEventReason = (typeof REASONS)[keyof typeof REASONS];

package/src/utils/findRootOwnerId.ts

@@ -0,0 +1,19 @@
+// Ported verbatim from .base-ui/packages/react/src/menu/utils/findRootOwnerId.ts (v1.6.0). Pure —
+// no octane adaptations needed.
+//
+// Walks up from a node to the nearest element carrying `data-rootownerid` (stamped on
+// `Menu.Popup`), so a mouseup landing in ANOTHER popup of the same menu root can be told apart
+// from a mouseup that landed outside the menu tree entirely.
+import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
+
+export function findRootOwnerId(node: Node): string | undefined {
+	if (isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
+		return node.getAttribute('data-rootownerid') ?? undefined;
+	}
+
+	if (isLastTraversableNode(node)) {
+		return undefined;
+	}
+
+	return findRootOwnerId(getParentNode(node));
+}

package/src/utils/floating/FloatingDelayGroup.ts

@@ -0,0 +1,280 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/components/FloatingDelayGroup.tsx
+// (v1.6.0). A group of tooltips that share one hover delay: once any member has opened, the others
+// open instantly until the group's `timeoutMs` window lapses. The delay lives in a ref so changing
+// it does not re-render unrelated consumers.
+//
+// octane adaptations: `createContext`/`createElement` instead of JSX; `useIsoLayoutEffect` →
+// `useLayoutEffect`; every composed hook threads an explicit slot.
+import {
+	createContext,
+	createElement,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { Timeout, useTimeout } from '../useTimeout';
+import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
+import { getDelay } from './useHoverShared';
+import type { HoverDelay } from './useHoverShared';
+
+interface DelayGroupContextValue {
+	hasProvider: boolean;
+	timeoutMs: number;
+	delayRef: { current: HoverDelay };
+	initialDelayRef: { current: HoverDelay };
+	timeout: Timeout;
+	currentIdRef: { current: any };
+	currentContextRef: {
+		current: {
+			onOpenChange: (open: boolean, eventDetails: any) => void;
+			setIsInstantPhase: (value: boolean) => void;
+		} | null;
+	};
+}
+
+const DEFAULT_CONTEXT: DelayGroupContextValue = {
+	hasProvider: false,
+	timeoutMs: 0,
+	delayRef: { current: 0 },
+	initialDelayRef: { current: 0 },
+	timeout: new Timeout(),
+	currentIdRef: { current: null },
+	currentContextRef: { current: null },
+};
+
+const FloatingDelayGroupContext = createContext<DelayGroupContextValue>(DEFAULT_CONTEXT);
+
+function resetDelayRef(
+	delayRef: { current: HoverDelay },
+	initialDelayRef: { current: HoverDelay },
+): void {
+	delayRef.current = initialDelayRef.current;
+}
+
+export interface FloatingDelayGroupProps {
+	children?: any;
+	/** The delay to use for the group when it's not in the instant phase. */
+	delay: HoverDelay;
+	/**
+	 * An explicit timeout for the group, representing when grouping logic stops being active
+	 * after the close delay completes. Useful when there is no close delay at all.
+	 */
+	timeoutMs?: number | undefined;
+}
+
+export function FloatingDelayGroup(props: FloatingDelayGroupProps): any {
+	const slot = S('FloatingDelayGroup');
+	const { children, delay, timeoutMs = 0 } = props;
+
+	const delayRef = useRef<HoverDelay>(delay, subSlot(slot, 'delay'));
+	const initialDelayRef = useRef<HoverDelay>(delay, subSlot(slot, 'initial'));
+	const currentIdRef = useRef<string | null>(null, subSlot(slot, 'id'));
+	const currentContextRef = useRef<any>(null, subSlot(slot, 'ctxRef'));
+	const timeout = useTimeout(subSlot(slot, 'to'));
+
+	useLayoutEffect(
+		() => {
+			initialDelayRef.current = delay;
+
+			if (!currentIdRef.current) {
+				delayRef.current = delay;
+				return;
+			}
+
+			// A member is already open: keep the (zeroed) open delay, adopt the new close delay.
+			delayRef.current = {
+				open: getDelay(delayRef.current, 'open'),
+				close: getDelay(delay, 'close'),
+			} as HoverDelay;
+		},
+		[delay, currentIdRef, delayRef, initialDelayRef],
+		subSlot(slot, 'l:delay'),
+	);
+
+	const contextValue = useMemo(
+		() => ({
+			hasProvider: true,
+			delayRef,
+			initialDelayRef,
+			currentIdRef,
+			timeoutMs,
+			currentContextRef,
+			timeout,
+		}),
+		[timeoutMs, timeout],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(FloatingDelayGroupContext.Provider, { value: contextValue, children });
+}
+
+export interface UseDelayGroupReturn {
+	delayRef: { current: HoverDelay };
+	isInstantPhase: boolean;
+	hasProvider: boolean;
+}
+
+export function useDelayGroup(...args: any[]): UseDelayGroupReturn {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useDelayGroup');
+	const context = user[0] as any;
+	const options = (user[1] as { open: boolean } | undefined) ?? { open: false };
+
+	const { open } = options;
+
+	const store = context != null && 'rootStore' in context ? context.rootStore : context;
+	const floatingId = store.useState('floatingId', subSlot(slot, 's:id'));
+
+	const groupContext = useContext(FloatingDelayGroupContext);
+	const {
+		currentIdRef,
+		delayRef,
+		timeoutMs,
+		initialDelayRef,
+		currentContextRef,
+		hasProvider,
+		timeout,
+	} = groupContext;
+
+	const [isInstantPhase, setIsInstantPhase] = useState(false, subSlot(slot, 'instant'));
+	const openRef = useRef(open, subSlot(slot, 'open'));
+	const isUnmountedRef = useRef(false, subSlot(slot, 'unmounted'));
+
+	useLayoutEffect(
+		() => {
+			openRef.current = open;
+		},
+		[open],
+		subSlot(slot, 'l:openRef'),
+	);
+
+	useLayoutEffect(
+		() => {
+			return () => {
+				isUnmountedRef.current = true;
+			};
+		},
+		[],
+		subSlot(slot, 'l:unmount'),
+	);
+
+	useLayoutEffect(
+		() => {
+			function unset() {
+				if (!isUnmountedRef.current) {
+					setIsInstantPhase(false);
+				}
+				currentContextRef.current?.setIsInstantPhase(false);
+				currentIdRef.current = null;
+				currentContextRef.current = null;
+				delayRef.current = initialDelayRef.current;
+				timeout.clear();
+			}
+
+			if (!currentIdRef.current) {
+				return undefined;
+			}
+
+			if (!open && currentIdRef.current === floatingId) {
+				setIsInstantPhase(false);
+
+				if (timeoutMs) {
+					const closingId = floatingId;
+					timeout.start(timeoutMs, () => {
+						// If another tooltip has taken over the group, skip resetting.
+						if (
+							store.select('open') ||
+							(currentIdRef.current && currentIdRef.current !== closingId)
+						) {
+							return;
+						}
+						unset();
+					});
+					return () => {
+						if (openRef.current || currentIdRef.current !== closingId) {
+							timeout.clear();
+						}
+					};
+				}
+
+				unset();
+			}
+
+			return undefined;
+		},
+		[
+			open,
+			floatingId,
+			currentIdRef,
+			delayRef,
+			timeoutMs,
+			initialDelayRef,
+			currentContextRef,
+			timeout,
+			store,
+		],
+		subSlot(slot, 'l:close'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (!open) {
+				return;
+			}
+
+			const prevContext = currentContextRef.current;
+			const prevId = currentIdRef.current;
+
+			// A new tooltip is opening, so cancel any pending timeout that would reset the group's
+			// delay back to the initial value.
+			timeout.clear();
+			currentContextRef.current = { onOpenChange: store.setOpen, setIsInstantPhase };
+			currentIdRef.current = floatingId;
+			delayRef.current = {
+				open: 0,
+				close: getDelay(initialDelayRef.current, 'close'),
+			} as HoverDelay;
+
+			if (prevId !== null && prevId !== floatingId) {
+				setIsInstantPhase(true);
+				prevContext?.setIsInstantPhase(true);
+				prevContext?.onOpenChange(false, createChangeEventDetails(REASONS.none));
+			} else {
+				setIsInstantPhase(false);
+				prevContext?.setIsInstantPhase(false);
+			}
+		},
+		[open, floatingId, store, currentIdRef, delayRef, initialDelayRef, currentContextRef, timeout],
+		subSlot(slot, 'l:open'),
+	);
+
+	useLayoutEffect(
+		() => {
+			return () => {
+				if (currentIdRef.current === floatingId) {
+					currentContextRef.current = null;
+
+					if (!openRef.current) {
+						return;
+					}
+
+					currentIdRef.current = null;
+					resetDelayRef(delayRef, initialDelayRef);
+					timeout.clear();
+				}
+			};
+		},
+		[currentContextRef, currentIdRef, delayRef, floatingId, initialDelayRef, timeout],
+		subSlot(slot, 'l:teardown'),
+	);
+
+	return useMemo(
+		() => ({ hasProvider, delayRef, isInstantPhase }),
+		[hasProvider, delayRef, isInstantPhase],
+		subSlot(slot, 'out'),
+	);
+}

package/src/utils/floating/element.ts

@@ -1,10 +1,44 @@
 // Ported from .base-ui/packages/react/src/floating-ui-react/utils/element.ts (v1.6.0) — the subset
 // used so far. `getTarget` is reused from the composite list utils.
-import { isHTMLElement } from '../dom';
+import { isElement, isHTMLElement } from '../dom';
+import type { PopupTriggerMap } from '../popups/popupTriggerMap';
 import { TYPEABLE_SELECTOR, FOCUSABLE_ATTRIBUTE } from './constants';
 
+import { contains } from '../contains';
+
 export { getTarget } from '../composite/list-utils';
-export { contains } from '../contains';
+export { contains };
+
+// Whether the target sits on (or inside) one of this popup's triggers, and that trigger is not
+// marked disabled. Hover uses it to keep a popup open while the cursor crosses between triggers.
+export function isTargetInsideEnabledTrigger(
+	target: EventTarget | null,
+	triggerElements: PopupTriggerMap,
+): boolean {
+	if (!isElement(target)) {
+		return false;
+	}
+	const targetElement = target as Element;
+	if (triggerElements.hasElement(targetElement)) {
+		return !targetElement.hasAttribute('data-trigger-disabled');
+	}
+	for (const [, trigger] of triggerElements.entries()) {
+		if (contains(trigger, targetElement)) {
+			return !trigger.hasAttribute('data-trigger-disabled');
+		}
+	}
+	return false;
+}
+
+// Whether the element (or an ancestor) is something the user can interact with directly — used to
+// decide whether a pointerdown inside a popup counts as a click-like open.
+export function isInteractiveElement(element: Element | null): boolean {
+	return (
+		element?.closest(
+			`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`,
+		) != null
+	);
+}
 
 // Ported from .base-ui/…/internals/shadowDom.ts — the deepest active element across shadow roots.
 export function activeElement(doc: Document): Element | null {

package/src/utils/floating/gridNavigation.ts

@@ -0,0 +1,54 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/gridNavigation.ts (v1.6.0). The
+// grid navigator `useListNavigation` injects for its own `grid` option — distinct from
+// `../composite/gridNavigation`, which builds the navigator `useCompositeRoot` takes.
+//
+// octane adaptations: the event is the NATIVE `KeyboardEvent`, and `React.RefObject<T>` is a plain
+// `{ current: T }`. Not a hook, so no slot. Upstream's `utils/composite` module is split in this
+// binding: the list algebra lives in `../composite/list-utils`, the grid algorithm in
+// `../composite/grid-utils`.
+import { getGridNavigatedIndex } from '../composite/grid-utils';
+import { isIndexOutOfListBounds, type DisabledIndices } from '../composite/list-utils';
+
+/**
+ * Positional arguments are deliberate: property names of an options object
+ * don't minify, and the signature is locked to the caller via `typeof` on the
+ * `grid` option of `useListNavigation`.
+ *
+ * The injected grid navigator only ever operates on a uniform 1x1 grid (sizes are
+ * always `1x1` and packing is never dense), so the cell-map machinery that supports
+ * multi-cell items collapses to an identity transform over the item list. Calling
+ * `getGridNavigatedIndex` directly keeps the cell-map helpers
+ * (`createGridCellMap`/`getGridCellIndexOfCorner`/`getGridCellIndices`) out of
+ * grid-combobox bundles.
+ */
+export function gridNavigation(
+	event: KeyboardEvent,
+	prevIndex: number,
+	listRef: { current: Array<HTMLElement | null> },
+	orientation: 'horizontal' | 'vertical' | 'both',
+	loopFocus: boolean,
+	rtl: boolean,
+	disabledIndices: DisabledIndices | undefined,
+	minIndex: number,
+	maxIndex: number,
+	cols = 2,
+): number | undefined {
+	const nextIndex = getGridNavigatedIndex(listRef.current, {
+		event,
+		orientation,
+		loopFocus,
+		rtl,
+		cols,
+		disabledIndices,
+		minIndex,
+		maxIndex,
+		// An out-of-range previous index falls back to the first enabled item.
+		prevIndex: prevIndex > maxIndex ? minIndex : prevIndex,
+		stopEvent: true,
+	});
+
+	// `getGridNavigatedIndex` can return an out-of-bounds sentinel (e.g. `-1` when there is no
+	// previous item to move from); surface that as `undefined` so the caller treats it as
+	// "no navigation" rather than highlighting index `-1`.
+	return isIndexOutOfListBounds(listRef.current, nextIndex) ? undefined : nextIndex;
+}