@octanejs/base-ui 0.1.14 → 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

@@ -1,16 +1,16 @@
 // Ported from .base-ui/packages/react/src/popover/ (v1.6.0): store (PopoverStore/PopoverHandle),
-// root (context/PopoverRoot/PopoverInteractions), trigger. The CLOSED-state path (Root + Trigger),
-// reusing the Store + floating stack from Dialog. octane adaptations: forwardRef → ref-as-prop;
-// native events; every Store hook-method + hook threads an explicit slot; `React.createContext` →
-// octane `createContext`; `ReactDOM.flushSync` → octane `flushSync`.
+// root (context/PopoverRoot/PopoverInteractions), trigger, and the anchored open path
+// (Portal/Positioner/Popup/Arrow/Backdrop/Title/Description/Close), reusing the Store + floating
+// stack from Dialog. octane adaptations: forwardRef → ref-as-prop; native events; every Store
+// hook-method + hook threads an explicit slot; `React.createContext` → octane `createContext`;
+// `ReactDOM.flushSync` → octane `flushSync`.
 //
-// STUBBED/DEFERRED (behind off-by-default features): `useHoverReferenceInteraction` (openOnHover);
-// the Positioner + Popup + Arrow + Backdrop + Title/Description/Close parts (the open path) land next
-// with `useAnchorPositioning`. Interactions are only mounted when `open || mounted`, and — as with
-// Dialog — a stable no-DOM descriptor wraps the children (octane Provider children shape-flip bug).
+// `openOnHover` is fully wired: the trigger side runs `useHoverReferenceInteraction` (+ safePolygon)
+// and the popup side runs `useHoverFloatingInteraction`.
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useMemo,
 	useRef,
@@ -51,13 +51,14 @@ import {
 	type UseAnchorPositioningSharedParameters,
 } from './utils/useAnchorPositioning';
 import { usePositioner } from './utils/usePositioner';
+import { usePopupViewport } from './utils/usePopupViewport';
 import { useAnchoredPopupScrollLock } from './utils/useAnchoredPopupScrollLock';
 import { adaptiveOrigin } from './utils/adaptiveOriginMiddleware';
 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';
@@ -97,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 -------------------------------------------------------------------
@@ -415,11 +415,7 @@ function PopoverInteractions(props: any): any {
 		subSlot(slot, 'pip'),
 	);
 
-	return props.children ?? null;
-}
-
-function PopoverChildren(props: any): any {
-	return props.children ?? null;
+	return null;
 }
 
 // --- Root --------------------------------------------------------------------
@@ -519,12 +515,16 @@ function PopoverRootComponent<Payload>(props: any): any {
 	const resolvedChildren =
 		typeof children === 'function' && !isChildrenBlock(children) ? children({ payload }) : children;
 
-	// Stable descriptor shape (see the Dialog note / octane Provider children shape-flip bug).
-	const content = createElement(shouldRenderInteractions ? PopoverInteractions : PopoverChildren, {
-		store,
-		modal,
-		children: resolvedChildren,
-	});
+	// `PopoverInteractions` is a headless SIBLING of the children, exactly as Base UI renders it, so
+	// toggling it never disturbs them. Rendering it as a WRAPPER instead swapped the wrapper's
+	// component type on every open, which tore down and rebuilt the whole subtree — including the
+	// trigger, whose element listeners and store registration then pointed at a detached node.
+	const content = [
+		shouldRenderInteractions
+			? createElement(PopoverInteractions, { key: 'interactions', store, modal })
+			: null,
+		createElement(Fragment, { key: 'children', children: resolvedChildren }),
+	];
 
 	return createElement(PopoverRootContext.Provider, {
 		value: contextValue as PopoverRootContextValue,
@@ -532,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)) {
@@ -680,18 +685,33 @@ function PopoverTrigger(componentProps: any): any {
 		subSlot(slot, 're'),
 	);
 
+	// The trigger's children shape flips between a lone element (closed) and
+	// [guard, element, guard] (open, non-modal). Base UI keeps the trigger's identity across that
+	// flip by wrapping it in a fragment keyed on the trigger id in BOTH branches — without the key
+	// the button is torn down and rebuilt on every open, which detaches the element listeners
+	// (hover open/close) and makes the positioner see a spurious trigger change.
+	const keyedElement = createElement(Fragment, { key: thisTriggerId, children: element });
+
 	if (isMountedByThisTrigger && !focusManagerModal) {
+		// Base UI renders these as static JSX fragment children; octane reconciles a returned array
+		// as a list, so the guards carry stable keys too — otherwise the unkeyed siblings shift the
+		// keyed trigger and it is rebuilt anyway.
 		return [
-			createElement(FocusGuard, { ref: preFocusGuardRef, onFocus: handlePreFocusGuardFocus }),
-			element,
 			createElement(FocusGuard, {
+				key: `${thisTriggerId}-pre-guard`,
+				ref: preFocusGuardRef,
+				onFocus: handlePreFocusGuardFocus,
+			}),
+			keyedElement,
+			createElement(FocusGuard, {
+				key: `${thisTriggerId}-post-guard`,
 				ref: store.context.triggerFocusTargetRef,
 				onFocus: handleFocusTargetFocus,
 			}),
 		];
 	}
 
-	return element;
+	return keyedElement;
 }
 
 // --- Portal ------------------------------------------------------------------
@@ -1188,6 +1208,58 @@ function PopoverClose(componentProps: any): any {
 	);
 }
 
+// --- Viewport ----------------------------------------------------------------
+
+export const PopoverViewportCssVars = {
+	/**
+	 * The width of the parent popup when the previous content was rendered. Placed on the
+	 * 'previous' container so the popup's dimensions can be frozen while content animates.
+	 */
+	popupWidth: '--popup-width',
+	/** The height of the parent popup when the previous content was rendered. */
+	popupHeight: '--popup-height',
+} as const;
+
+const viewportStateAttributesMapping: StateAttributesMapping<any> = {
+	activationDirection: (value: string | undefined) =>
+		value ? { 'data-activation-direction': value } : null,
+};
+
+// A viewport for displaying content transitions. Only needed when one popup can be opened by
+// multiple triggers, its content changes per trigger, and switching between them is animated.
+function PopoverViewport(componentProps: any): any {
+	const slot = S('PopoverViewport');
+	const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+	const { store } = usePopoverRootContext() as PopoverRootContextValue;
+	const { side } = usePopoverPositionerContext();
+
+	const instantType = store.useState('instantType', subSlot(slot, 'instant'));
+
+	const { children: childrenToRender, state: viewportState } = usePopupViewport(
+		{ store, side, cssVars: PopoverViewportCssVars, children },
+		subSlot(slot, 'vp'),
+	);
+
+	const state = {
+		activationDirection: viewportState.activationDirection,
+		transitioning: viewportState.transitioning,
+		instant: instantType,
+	};
+
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [elementProps, { children: childrenToRender }],
+			stateAttributesMapping: viewportStateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+}
+
 // --- Namespace ---------------------------------------------------------------
 
 export const Popover = {
@@ -1196,10 +1268,12 @@ export const Popover = {
 	Portal: PopoverPortal,
 	Positioner: PopoverPositioner,
 	Popup: PopoverPopup,
+	Viewport: PopoverViewport,
 	Arrow: PopoverArrow,
 	Backdrop: PopoverBackdrop,
 	Title: PopoverTitle,
 	Description: PopoverDescription,
 	Close: PopoverClose,
 	createHandle: createPopoverHandle,
+	Handle: PopoverHandle,
 };