@octanejs/base-ui 0.1.14 → 0.1.15

package/src/unstable-use-media-query.ts

@@ -0,0 +1,101 @@
+// Ported from .base-ui/packages/react/src/unstable-use-media-query/index.ts (v1.6.0).
+// Subscribes to a CSS media query via `window.matchMedia`, with SSR escape hatches.
+//
+// octane adaptation: octane ships `useSyncExternalStore` natively, so Base UI's
+// `use-sync-external-store/shim` import is dropped; the dev-only `useDebugValue` call is
+// dropped with the rest of the dev-warning surface.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useCallback, useMemo, useSyncExternalStore } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+import { addEventListener } from './utils/addEventListener';
+
+export interface UseMediaQueryOptions {
+	/**
+	 * As `window.matchMedia()` is unavailable on the server, it returns a default match
+	 * during the first mount.
+	 * @default false
+	 */
+	defaultMatches?: boolean | undefined;
+	/**
+	 * You can provide your own implementation of matchMedia. This can be used for handling
+	 * an iframe content window.
+	 */
+	matchMedia?: typeof window.matchMedia | undefined;
+	/**
+	 * To perform the server-side hydration, the hook needs to render twice. A first time
+	 * with `defaultMatches`, the value of the server, and a second time with the resolved
+	 * value. This double pass rendering cycle comes with a drawback: it's slower. You can
+	 * set this option to `true` if you use the returned value **only** client-side.
+	 * @default false
+	 */
+	noSsr?: boolean | undefined;
+	/** Your own implementation of `matchMedia`, used when rendering server-side. */
+	ssrMatchMedia?: ((query: string) => { matches: boolean }) | undefined;
+}
+
+export function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+export function useMediaQuery(...args: any[]): boolean {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useMediaQuery');
+
+	const rawQuery = user[0] as string;
+	const options = (user[1] as UseMediaQueryOptions | undefined) ?? {};
+
+	// Wait for jsdom to support the match media feature. All the browsers Base UI supports
+	// have this built-in; this defensive check is here for simplicity.
+	const supportMatchMedia =
+		typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+
+	const normalizedQuery = rawQuery.replace(/^@media( ?)/m, '');
+
+	const {
+		defaultMatches = false,
+		matchMedia = supportMatchMedia ? window.matchMedia : null,
+		ssrMatchMedia = null,
+		noSsr = false,
+	} = options;
+
+	const getDefaultSnapshot = useCallback(
+		() => defaultMatches,
+		[defaultMatches],
+		subSlot(slot, 'def'),
+	);
+
+	const getServerSnapshot = useMemo(
+		() => {
+			if (noSsr && matchMedia) {
+				return () => matchMedia(normalizedQuery).matches;
+			}
+			if (ssrMatchMedia !== null) {
+				const { matches } = ssrMatchMedia(normalizedQuery);
+				return () => matches;
+			}
+			return getDefaultSnapshot;
+		},
+		[getDefaultSnapshot, normalizedQuery, ssrMatchMedia, noSsr, matchMedia],
+		subSlot(slot, 'srv'),
+	);
+
+	const [getSnapshot, subscribe] = useMemo(
+		() => {
+			if (matchMedia === null) {
+				return [getDefaultSnapshot, () => () => {}] as const;
+			}
+			const mediaQueryList = matchMedia(normalizedQuery);
+			return [
+				() => mediaQueryList.matches,
+				(notify: () => void) => addEventListener(mediaQueryList, 'change', notify),
+			] as const;
+		},
+		[getDefaultSnapshot, matchMedia, normalizedQuery],
+		subSlot(slot, 'sub'),
+	);
+
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot, subSlot(slot, 'store'));
+}
+
+export namespace useMediaQuery {
+	export type Options = UseMediaQueryOptions;
+}

package/src/utils/CSPContext.ts

@@ -0,0 +1,21 @@
+// Ported from .base-ui/packages/react/src/internals/csp-context/CSPContext.tsx (v1.6.0).
+// Carries the Content Security Policy configuration for components that need inline
+// `<style>` tags — the `nonce` to stamp on them, and whether to skip them entirely.
+import { createContext, useContext } from 'octane';
+
+export interface CSPContextValue {
+	nonce?: string | undefined;
+	disableStyleElements?: boolean | undefined;
+}
+
+export const CSPContext = createContext<CSPContextValue | undefined>(undefined);
+
+const DEFAULT_CSP_CONTEXT_VALUE: CSPContextValue = {
+	disableStyleElements: false,
+};
+
+export function useCSPContext(...args: any[]): CSPContextValue {
+	// `useContext` is slot-exempt in octane, so the caller's slot (if any) is ignored.
+	void args;
+	return useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
+}

package/src/utils/FloatingPortalLite.ts

@@ -0,0 +1,29 @@
+// Ported from .base-ui/packages/react/src/utils/FloatingPortalLite.tsx (v1.6.0). `FloatingPortal`
+// also carries the tabbable/focus-guard machinery; components that don't need it (Tooltip,
+// PreviewCard, Toast) use this thinner variant, which only creates the portal node and renders the
+// children into it.
+//
+// octane adaptations: forwardRef → ref-as-prop; `createElement` instead of JSX; `ReactDOM`'s
+// `createPortal` → octane's.
+import { createElement, createPortal, Fragment } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { useFloatingPortalNode } from './floating/FloatingPortal';
+
+export function FloatingPortalLite(componentProps: any): any {
+	const slot = S('FloatingPortalLite');
+	const { children, container, className, render, style, ref, ...elementProps } = componentProps;
+
+	const { portalNode, portalSubtree } = useFloatingPortalNode(
+		{ container, ref, componentProps: { render, className, style }, elementProps },
+		subSlot(slot, 'node'),
+	);
+
+	if (!portalSubtree && !portalNode) {
+		return null;
+	}
+
+	return createElement(Fragment, {
+		children: [portalSubtree, portalNode ? createPortal(children, portalNode) : null],
+	});
+}

package/src/utils/createChangeEventDetails.ts

@@ -22,6 +22,7 @@ export const REASONS = {
 	scrub: 'scrub',
 	trackPress: 'track-press',
 	drag: 'drag',
+	disabled: 'disabled',
 	triggerHover: 'trigger-hover',
 	triggerFocus: 'trigger-focus',
 	outsidePress: 'outside-press',

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 {