@octanejs/base-ui 0.1.15 → 0.1.16

package/src/menubar.ts

@@ -0,0 +1,160 @@
+// Ported from .base-ui/packages/react/src/menubar/ (v1.6.0) — Phase 3f STAGE 4.
+//
+// A `Menubar` is a `CompositeRoot` of `Menu.Trigger`s that share one `FloatingTree`, plus the
+// `MenubarContext` that `Menu` has been branching on since stage 1 (`parent.type === 'menubar'`).
+// Providing it here is what activates those already-transcribed branches: triggers render as
+// `CompositeItem`s with `role="menuitem"`, sibling menus open on hover once one is open, the
+// positioner flips its default side to match the bar's orientation, and the modal backdrop moves to
+// the bar itself so the whole menubar stays clickable.
+//
+// `MenubarContext` itself lives in `./utils/MenubarContext` — it landed as a context-only module in
+// stage 1 so `Menu`'s parent-union branches could be written verbatim ahead of this component.
+//
+// octane adaptations: `createElement`, not JSX; `forwardRef` → ref-as-prop; per-call-site `S('…')`
+// slots with `subSlot` for every composed hook; `useFloatingNodeId()` takes an explicit
+// (tree, slot) pair.
+import { createElement, useState, useRef, useEffect, useMemo } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useBaseUiId } from './utils/useBaseUiId';
+import { CompositeRoot } from './utils/composite/CompositeRoot';
+import {
+	FloatingNode,
+	FloatingTree,
+	useFloatingNodeId,
+	useFloatingTree,
+} from './utils/floating/FloatingTree';
+import { MenubarContext, useMenubarContext } from './utils/MenubarContext';
+import type { MenubarContextValue } from './utils/MenubarContext';
+import type { MenuOpenEventDetails, MenuRootOrientation } from './menu';
+import type { StateAttributesMapping } from './utils/getStateAttributesProps';
+import { REASONS } from './utils/createChangeEventDetails';
+
+const menubarStateAttributesMapping: StateAttributesMapping<any> = {
+	hasSubmenuOpen(value: boolean) {
+		return value ? { 'data-has-submenu-open': '' } : null;
+	},
+};
+
+function MenubarContent(props: { children?: any }): any {
+	const slot = S('MenubarContent');
+	const nodeId = useFloatingNodeId(undefined, subSlot(slot, 'nodeId'));
+	const tree = useFloatingTree();
+	const menuEvents = (tree as any).events;
+	const rootContext = useMenubarContext();
+
+	useEffect(
+		() => {
+			function onSubmenuOpenChange(details: MenuOpenEventDetails) {
+				if (!details.nodeId || details.parentNodeId !== nodeId) {
+					return;
+				}
+
+				if (details.open) {
+					if (!rootContext.hasSubmenuOpen) {
+						rootContext.setHasSubmenuOpen(true);
+					}
+				} else if (
+					details.reason !== REASONS.siblingOpen &&
+					details.reason !== REASONS.listNavigation
+				) {
+					rootContext.setHasSubmenuOpen(false);
+				}
+			}
+
+			menuEvents.on('menuopenchange', onSubmenuOpenChange);
+
+			return () => {
+				menuEvents.off('menuopenchange', onSubmenuOpenChange);
+			};
+		},
+		[menuEvents, nodeId, rootContext],
+		subSlot(slot, 'e'),
+	);
+
+	return createElement(FloatingNode, { id: nodeId, children: props.children });
+}
+
+/**
+ * The container for menus.
+ *
+ * Documentation: [Base UI Menubar](https://base-ui.com/react/components/menubar)
+ */
+export function Menubar(props: any): any {
+	const slot = S('Menubar');
+	const {
+		orientation = 'horizontal',
+		loopFocus = true,
+		render,
+		className,
+		modal = true,
+		disabled = false,
+		id: idProp,
+		style,
+		ref: forwardedRef,
+		...elementProps
+	} = props;
+
+	const [contentElement, setContentElement] = useState<HTMLElement | null>(
+		null,
+		subSlot(slot, 'content'),
+	);
+	const [hasSubmenuOpen, setHasSubmenuOpen] = useState(false, subSlot(slot, 'hasSub'));
+
+	const id = useBaseUiId(idProp, subSlot(slot, 'id'));
+
+	const state: MenubarState = {
+		orientation,
+		modal,
+		hasSubmenuOpen,
+	};
+
+	const contentRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'contentRef'));
+	const allowMouseUpTriggerRef = useRef(false, subSlot(slot, 'amut'));
+
+	const context: MenubarContextValue = useMemo(
+		() => ({
+			contentElement,
+			setContentElement,
+			setHasSubmenuOpen,
+			hasSubmenuOpen,
+			modal,
+			disabled,
+			orientation,
+			allowMouseUpTriggerRef,
+			rootId: id,
+		}),
+		[contentElement, hasSubmenuOpen, modal, disabled, orientation, id],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(MenubarContext.Provider, {
+		value: context,
+		children: createElement(FloatingTree, {
+			children: createElement(MenubarContent, {
+				children: createElement(CompositeRoot, {
+					render,
+					className,
+					style,
+					state,
+					stateAttributesMapping: menubarStateAttributesMapping,
+					refs: [forwardedRef, setContentElement, contentRef],
+					props: [{ role: 'menubar', id, 'aria-orientation': orientation }, elementProps],
+					orientation,
+					loopFocus,
+					enableHomeAndEndKeys: true,
+					highlightItemOnHover: hasSubmenuOpen,
+				}),
+			}),
+		}),
+	});
+}
+
+export interface MenubarState {
+	/** The orientation of the menubar. */
+	orientation: MenuRootOrientation;
+	/** Whether the menubar is modal. */
+	modal: boolean;
+	/** Whether any submenu within the menubar is open. */
+	hasSubmenuOpen: boolean;
+}

package/src/popover.ts

@@ -58,7 +58,7 @@ import { InternalBackdrop } from './utils/InternalBackdrop';
 import { useAnimationsFinished } from './utils/useAnimationsFinished';
 import { useOpenChangeComplete } from './utils/useOpenChangeComplete';
 import { getDisabledMountTransitionStyles } from './utils/getDisabledMountTransitionStyles';
-import { POPUP_COLLISION_AVOIDANCE } from './utils/constants';
+import { POPUP_COLLISION_AVOIDANCE, PATIENT_CLICK_THRESHOLD } from './utils/constants';
 import { ClosePartProvider, useClosePartCount, useClosePartRegistration } from './utils/closePart';
 import { popupStateMapping } from './utils/popupStateMapping';
 import { transitionStatusMapping } from './utils/useTransitionStatus';
@@ -98,7 +98,6 @@ import { PopupTriggerMap } from './utils/popups/popupTriggerMap';
 import type { InteractionType } from './utils/useEnhancedClickHandler';
 
 const OPEN_DELAY = 300;
-const PATIENT_CLICK_THRESHOLD = 500;
 const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
 
 // --- Store -------------------------------------------------------------------
@@ -533,7 +532,12 @@ function PopoverRootComponent<Payload>(props: any): any {
 	});
 }
 
-function PopoverRoot<Payload = unknown>(props: any): any {
+interface PopoverRootProps<Payload> {
+	handle?: PopoverHandle<Payload>;
+	[key: string]: unknown;
+}
+
+function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>): any {
 	const slot = S('PopoverRootWrapper');
 	// Top-level popovers establish a FloatingTree; nested ones reuse the parent's.
 	if (usePopoverRootContext(true)) {

package/src/utils/ContextMenuRootContext.ts

@@ -0,0 +1,44 @@
+// Ported from .base-ui/packages/react/src/context-menu/root/ContextMenuRootContext.ts (v1.6.0),
+// octane-adapted (`React.createContext` → octane `createContext`; `React.RefObject` → plain ref
+// shapes; `React.Dispatch<SetStateAction<T>>` → octane's updater signature).
+//
+// STAGING: only the CONTEXT lands here, ahead of the `ContextMenu` components themselves
+// (Phase 3f stage 4). `Menu.Root`/`Menu.Trigger`/`Menu.Positioner`/`Menu.Popup` branch on
+// `parent.type === 'context-menu'` in several places; having the context now lets those branches
+// be transcribed verbatim instead of being stubbed out and re-added later. Until `ContextMenu.Root`
+// lands nothing provides this context, so `useContextMenuRootContext()` always returns `undefined`.
+import { createContext, useContext } from 'octane';
+
+export interface ContextMenuRootContextValue {
+	anchor: { getBoundingClientRect: () => DOMRect };
+	setAnchor: (value: ContextMenuRootContextValue['anchor']) => void;
+	backdropRef: { current: HTMLDivElement | null };
+	internalBackdropRef: { current: HTMLDivElement | null };
+	actionsRef: {
+		current: {
+			setOpen: (nextOpen: boolean, eventDetails: any) => void;
+		} | null;
+	};
+	positionerRef: { current: HTMLElement | null };
+	allowMouseUpTriggerRef: { current: boolean };
+	initialCursorPointRef: { current: { x: number; y: number } | null };
+	rootId: string | undefined;
+}
+
+export const ContextMenuRootContext = createContext<ContextMenuRootContextValue | undefined>(
+	undefined,
+);
+
+export function useContextMenuRootContext(optional: false): ContextMenuRootContextValue;
+export function useContextMenuRootContext(optional?: true): ContextMenuRootContextValue | undefined;
+export function useContextMenuRootContext(
+	optional = true,
+): ContextMenuRootContextValue | undefined {
+	const context = useContext(ContextMenuRootContext);
+	if (context === undefined && !optional) {
+		throw new Error(
+			'Base UI: ContextMenuRootContext is missing. ContextMenu parts must be placed within <ContextMenu.Root>.',
+		);
+	}
+	return context;
+}

package/src/utils/MenubarContext.ts

@@ -0,0 +1,38 @@
+// Ported from .base-ui/packages/react/src/menubar/MenubarContext.ts (v1.6.0), octane-adapted
+// (`React.createContext` → octane `createContext`; `React.RefObject` → a plain ref shape).
+//
+// STAGING: only the CONTEXT lands here, ahead of the `Menubar` component itself (Phase 3f stage 4).
+// `Menu.Root`/`Menu.Trigger`/`Menu.Positioner` branch on `parent.type === 'menubar'` in several
+// places; having the context now lets those branches be transcribed verbatim instead of being
+// stubbed out and re-added later. Until `Menubar` lands nothing provides this context, so
+// `useMenubarContext(true)` always returns `null`.
+import { createContext, useContext } from 'octane';
+
+import type { MenuRootOrientation } from '../menu';
+
+export interface MenubarContextValue {
+	modal: boolean;
+	disabled: boolean;
+	contentElement: HTMLElement | null;
+	setContentElement: (element: HTMLElement | null) => void;
+	hasSubmenuOpen: boolean;
+	setHasSubmenuOpen: (open: boolean) => void;
+	orientation: MenuRootOrientation;
+	allowMouseUpTriggerRef: { current: boolean };
+	rootId: string | undefined;
+}
+
+export const MenubarContext = createContext<MenubarContextValue | null>(null);
+
+export function useMenubarContext(optional?: false): MenubarContextValue;
+export function useMenubarContext(optional: true): MenubarContextValue | null;
+export function useMenubarContext(optional?: boolean): MenubarContextValue | null {
+	const context = useContext(MenubarContext);
+	if (context === null && !optional) {
+		throw new Error(
+			'Base UI: MenubarContext is missing. Menubar parts must be placed within <Menubar>.',
+		);
+	}
+
+	return context;
+}

package/src/utils/RequestQueue.ts

@@ -0,0 +1,132 @@
+// Ported from .base-ui/packages/react/src/internals/RequestQueue.ts (v1.6.0). Manages concurrent
+// fetching with a queue: tracks each key's lifecycle through queued → pending and caps the number
+// of in-flight requests so the server is not overwhelmed. Subclasses override `pickEntries` to
+// change the ordering (the default is FIFO).
+//
+// Pure — no renderer API is involved, so this is a straight transcription.
+export type RequestStatus = 'queued' | 'pending' | 'unknown';
+
+export interface RequestQueueOptions<TKey> {
+	/**
+	 * The function to call when a queued key is ready to be fetched.
+	 */
+	fetchFn: (key: TKey) => Promise<void>;
+	/**
+	 * The maximum number of concurrent requests.
+	 * @default Infinity
+	 */
+	maxConcurrentRequests?: number | undefined;
+	/**
+	 * Serialize a key to a string for use as a map key.
+	 * Required for complex key types (e.g., objects).
+	 * @default String(key)
+	 */
+	getKeyId?: ((key: TKey) => string) | undefined;
+}
+
+/**
+ * Manages concurrent fetching with a queue system.
+ * Tracks request lifecycle through queued → pending states
+ * and limits concurrency to prevent overwhelming the server.
+ */
+export class RequestQueue<TKey> {
+	protected pendingRequests = new Map<string, TKey>();
+
+	protected queuedRequests = new Map<string, TKey>();
+
+	protected fetchFn: (key: TKey) => Promise<void>;
+
+	protected maxConcurrentRequests: number;
+
+	protected getKeyId: (key: TKey) => string;
+
+	constructor(options: RequestQueueOptions<TKey>) {
+		this.fetchFn = options.fetchFn;
+		this.maxConcurrentRequests = options.maxConcurrentRequests ?? Infinity;
+		this.getKeyId = options.getKeyId ?? String;
+	}
+
+	/**
+	 * Returns the next `count` entries to process from the queue.
+	 * Default is FIFO (oldest first). Subclasses can override for different ordering.
+	 */
+	protected pickEntries(count: number): [string, TKey][] {
+		const result: [string, TKey][] = [];
+		const iterator = this.queuedRequests.entries();
+		for (let i = 0; i < count; i += 1) {
+			const { value } = iterator.next() as IteratorYieldResult<[string, TKey]>;
+			result.push(value);
+		}
+		return result;
+	}
+
+	protected processQueue = async () => {
+		if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+			return;
+		}
+
+		const loopLength = Math.min(
+			this.maxConcurrentRequests - this.pendingRequests.size,
+			this.queuedRequests.size,
+		);
+		if (loopLength === 0) {
+			return;
+		}
+
+		const fetchPromises: Promise<void>[] = [];
+
+		for (const [keyId, key] of this.pickEntries(loopLength)) {
+			this.queuedRequests.delete(keyId);
+			this.pendingRequests.set(keyId, key);
+
+			fetchPromises.push(
+				this.fetchFn(key).catch(() => {
+					this.pendingRequests.delete(keyId);
+				}),
+			);
+		}
+
+		await Promise.all(fetchPromises);
+		if (this.queuedRequests.size > 0) {
+			await this.processQueue();
+		}
+	};
+
+	public queue = async (keys: TKey[]) => {
+		for (const key of keys) {
+			const keyId = this.getKeyId(key);
+			if (!this.pendingRequests.has(keyId)) {
+				this.queuedRequests.set(keyId, key);
+			}
+		}
+		await this.processQueue();
+	};
+
+	public setRequestSettled = async (key: TKey) => {
+		const keyId = this.getKeyId(key);
+		this.pendingRequests.delete(keyId);
+		await this.processQueue();
+	};
+
+	public clear = () => {
+		this.queuedRequests.clear();
+		this.pendingRequests.clear();
+	};
+
+	public clearPendingRequest = async (key: TKey) => {
+		const keyId = this.getKeyId(key);
+		this.pendingRequests.delete(keyId);
+		await this.processQueue();
+	};
+
+	public getRequestStatus = (key: TKey): RequestStatus => {
+		const keyId = this.getKeyId(key);
+		if (this.pendingRequests.has(keyId)) {
+			return 'pending';
+		}
+		if (this.queuedRequests.has(keyId)) {
+			return 'queued';
+		}
+		return 'unknown';
+	};
+}

package/src/utils/TimeoutManager.ts

@@ -0,0 +1,32 @@
+// Ported from .base-ui/packages/react/src/internals/TimeoutManager.ts (v1.6.0). Several keyed
+// timeouts behind one handle, so a caller can start/replace/cancel each independently and drop them
+// all on teardown. Distinct from `utils/useTimeout`'s `Timeout`, which owns exactly one.
+//
+// Pure — no renderer API is involved, so this is a straight transcription.
+export class TimeoutManager {
+	private ids: Map<string, number> = new Map();
+
+	/** Starts `fn` after `delay`, replacing any timeout already running under `key`. */
+	start = (key: string, delay: number, fn: () => void): void => {
+		this.clear(key);
+		const id = setTimeout(() => {
+			this.ids.delete(key);
+			fn();
+		}, delay) as unknown as number;
+
+		this.ids.set(key, id);
+	};
+
+	clear = (key: string): void => {
+		const id = this.ids.get(key);
+		if (id != null) {
+			clearTimeout(id);
+			this.ids.delete(key);
+		}
+	};
+
+	clearAll = (): void => {
+		this.ids.forEach(clearTimeout);
+		this.ids.clear();
+	};
+}