@octanejs/base-ui 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -41,10 +41,10 @@
     "@floating-ui/utils": "^0.2.12",
     "aria-hidden": "^1.2.6",
     "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.15"
+    "@octanejs/floating-ui": "0.1.16"
   },
   "peerDependencies": {
-    "octane": "0.1.16"
+    "octane": "0.1.17"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
@@ -53,7 +53,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.16"
+    "octane": "0.1.17"
   },
   "scripts": {
     "test": "vitest run"

package/src/alert-dialog.ts

@@ -40,8 +40,10 @@ export const AlertDialog = {
 	Portal: Dialog.Portal,
 	Backdrop: Dialog.Backdrop,
 	Popup: Dialog.Popup,
+	Viewport: Dialog.Viewport,
 	Title: Dialog.Title,
 	Description: Dialog.Description,
 	Close: Dialog.Close,
 	createHandle: createAlertDialogHandle,
+	Handle: AlertDialogHandle,
 };

package/src/button.ts

@@ -0,0 +1,63 @@
+// Ported from .base-ui/packages/react/src/button/Button.tsx (v1.6.0). A button that can be
+// used to trigger actions. Renders a `<button>` element.
+import { S, subSlot } from './internal';
+import { useButton } from './utils/useButton';
+import { useRenderElement } from './utils/useRenderElement';
+
+export interface ButtonState {
+	/** Whether the button should ignore user interaction. */
+	disabled: boolean;
+}
+
+export interface ButtonProps {
+	disabled?: boolean;
+	/**
+	 * Whether the button should be focusable when disabled.
+	 * @default false
+	 */
+	focusableWhenDisabled?: boolean;
+	/**
+	 * Whether the component renders a native `<button>` element when replacing it via the
+	 * `render` prop.
+	 * @default true
+	 */
+	nativeButton?: boolean;
+	className?: string | ((state: ButtonState) => string | undefined);
+	render?: import('./utils/useRenderElement').RenderProp<ButtonState>;
+	ref?: any;
+	[key: string]: any;
+}
+
+// octane: forwardRef → ref-as-prop.
+export function Button(props: ButtonProps): any {
+	const slot = S('Button');
+	const {
+		render,
+		className,
+		disabled = false,
+		focusableWhenDisabled = false,
+		nativeButton = true,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const { getButtonProps, buttonRef } = useButton(
+		{ disabled, focusableWhenDisabled, native: nativeButton },
+		subSlot(slot, 'btn'),
+	);
+
+	const state: ButtonState = { disabled };
+
+	return useRenderElement(
+		'button',
+		{ className, render, style },
+		{ state, ref: [ref, buttonRef], props: [elementProps, getButtonProps] },
+		subSlot(slot, 're'),
+	);
+}
+
+export namespace Button {
+	export type Props = ButtonProps;
+	export type State = ButtonState;
+}

package/src/csp-provider.ts

@@ -0,0 +1,37 @@
+// Ported from .base-ui/packages/react/src/csp-provider/CSPProvider.tsx (v1.6.0). Provides a
+// default Content Security Policy configuration for Base UI components that require inline
+// `<style>` or `<script>` tags.
+import { createElement, useMemo } from 'octane';
+
+import { S, subSlot } from './internal';
+import { CSPContext } from './utils/CSPContext';
+import type { CSPContextValue } from './utils/CSPContext';
+
+export interface CSPProviderProps {
+	children?: any;
+	/** The nonce value to apply to inline `<style>` and `<script>` tags. */
+	nonce?: string;
+	/**
+	 * Whether inline `<style>` elements created by Base UI components should not be rendered.
+	 * Instead, components must specify the CSS styles via custom class names or other methods.
+	 * @default false
+	 */
+	disableStyleElements?: boolean;
+}
+
+export function CSPProvider(props: CSPProviderProps): any {
+	const slot = S('CSPProvider');
+	const { children, nonce, disableStyleElements } = props;
+
+	const contextValue: CSPContextValue = useMemo(
+		() => ({ nonce, disableStyleElements }),
+		[nonce, disableStyleElements],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(CSPContext.Provider, { value: contextValue, children });
+}
+
+export namespace CSPProvider {
+	export type Props = CSPProviderProps;
+}

package/src/dialog.ts

@@ -9,6 +9,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useMemo,
 	useRef,
@@ -33,7 +34,11 @@ import { useDismiss } from './utils/floating/useDismiss';
 import { useScrollLock } from './utils/useScrollLock';
 import { useOpenChangeComplete } from './utils/useOpenChangeComplete';
 import { useOpenMethodTriggerProps } from './utils/useOpenInteractionType';
-import { triggerOpenStateMapping, popupStateMapping } from './utils/popupStateMapping';
+import {
+	triggerOpenStateMapping,
+	popupStateMapping,
+	CommonPopupDataAttributes,
+} from './utils/popupStateMapping';
 import { transitionStatusMapping } from './utils/useTransitionStatus';
 import type { StateAttributesMapping } from './utils/getStateAttributesProps';
 import { EMPTY_OBJECT } from './utils/empty';
@@ -404,14 +409,7 @@ function DialogInteractions(props: any): any {
 		subSlot(slot, 'pip'),
 	);
 
-	// Renders the Dialog's children (see the note at the `content` call site). No DOM of its own.
-	return props.children ?? null;
-}
-
-// Passthrough used when the interactions aren't mounted, to keep the Provider's children a stable
-// element-descriptor shape (see the note at the `content` call site).
-function DialogChildren(props: any): any {
-	return props.children ?? null;
+	return null;
 }
 
 export function useRenderDialogRoot<Payload>(
@@ -482,19 +480,19 @@ export function useRenderDialogRoot<Payload>(
 	const resolvedChildren =
 		typeof children === 'function' && !isChildrenBlock(children) ? children({ payload }) : children;
 
-	// The Provider's `children` must stay a STABLE shape (always an element descriptor) across
-	// renders: octane's `childrenAsBody` runs a render-FUNCTION child directly in the Provider scope
-	// (owning `scope.slots`) but routes a DESCRIPTOR child through `childSlot(scope, 0)` — alternating
-	// the two across renders (a raw children-block when closed vs a component when open) collides those
-	// slot namespaces and crashes octane's reconciler (see octane bug note). So a no-DOM component
-	// wraps the children in BOTH states: `DialogInteractions` (runs the open-state hooks) when
-	// open/mounted, else `DialogChildren` (a passthrough). Both just render `props.children`.
-	const content = createElement(shouldRenderInteractions ? DialogInteractions : DialogChildren, {
-		store,
-		parentContext: parentDialogRootContext?.store.context,
-		isDrawer,
-		children: resolvedChildren,
-	});
+	// `DialogInteractions` is a headless SIBLING of the children, exactly as Base UI renders it, so
+	// toggling it never disturbs them.
+	const content = [
+		shouldRenderInteractions
+			? createElement(DialogInteractions, {
+					key: 'interactions',
+					store,
+					parentContext: parentDialogRootContext?.store.context,
+					isDrawer,
+				})
+			: null,
+		createElement(Fragment, { key: 'children', children: resolvedChildren }),
+	];
 
 	return createElement(IsDrawerContext.Provider, {
 		value: false,
@@ -844,6 +842,73 @@ function DialogClose(componentProps: any): any {
 	);
 }
 
+// --- Viewport ----------------------------------------------------------------
+
+export const DialogViewportDataAttributes = {
+	open: CommonPopupDataAttributes.open,
+	closed: CommonPopupDataAttributes.closed,
+	startingStyle: CommonPopupDataAttributes.startingStyle,
+	endingStyle: CommonPopupDataAttributes.endingStyle,
+	nested: 'data-nested',
+	nestedDialogOpen: 'data-nested-dialog-open',
+} as const;
+
+const viewportStateAttributesMapping: StateAttributesMapping<any> = {
+	...(popupStateMapping as StateAttributesMapping<any>),
+	...(transitionStatusMapping as StateAttributesMapping<any>),
+	nested(value: boolean) {
+		return value ? { [DialogViewportDataAttributes.nested]: '' } : null;
+	},
+	nestedDialogOpen(value: boolean) {
+		return value ? { [DialogViewportDataAttributes.nestedDialogOpen]: '' } : null;
+	},
+};
+
+// A positioning container for the dialog popup that can be made scrollable.
+function DialogViewport(componentProps: any): any {
+	const slot = S('DialogViewport');
+	const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+	const keepMounted = useDialogPortalContext();
+	const { store } = useDialogRootContext() as DialogRootContextValue;
+
+	const open = store.useState('open', subSlot(slot, 'open'));
+	const nested = store.useState('nested', subSlot(slot, 'nested'));
+	const transitionStatus = store.useState('transitionStatus', subSlot(slot, 'ts'));
+	const nestedOpenDialogCount = store.useState('nestedOpenDialogCount', subSlot(slot, 'nodc'));
+	const mounted = store.useState('mounted', subSlot(slot, 'mounted'));
+
+	const setViewportElement = store.useStateSetter('viewportElement', subSlot(slot, 'sve'));
+
+	const state = {
+		open,
+		nested,
+		transitionStatus,
+		nestedDialogOpen: nestedOpenDialogCount > 0,
+	};
+
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			enabled: keepMounted || mounted,
+			state,
+			ref: [ref, setViewportElement],
+			stateAttributesMapping: viewportStateAttributesMapping,
+			props: [
+				{
+					role: 'presentation',
+					hidden: !mounted,
+					style: { pointerEvents: !open ? 'none' : undefined },
+					children,
+				},
+				elementProps,
+			],
+		},
+		subSlot(slot, 're'),
+	);
+}
+
 // --- Namespace ---------------------------------------------------------------
 
 export const Dialog = {
@@ -852,8 +917,10 @@ export const Dialog = {
 	Portal: DialogPortal,
 	Backdrop: DialogBackdrop,
 	Popup: DialogPopup,
+	Viewport: DialogViewport,
 	Title: DialogTitle,
 	Description: DialogDescription,
 	Close: DialogClose,
 	createHandle: createDialogHandle,
+	Handle: DialogHandle,
 };

package/src/direction-provider.ts

@@ -0,0 +1,32 @@
+// Ported from .base-ui/packages/react/src/direction-provider/DirectionProvider.tsx (v1.6.0).
+// Enables RTL behavior for Base UI components.
+//
+// octane adaptation: `utils/DirectionContext` carries the `TextDirection` string DIRECTLY
+// rather than Base UI's `{ direction }` wrapper object, so the provider needs no `useMemo`
+// to stay referentially stable. The context value is never observable in the DOM, and every
+// consumer reads it through `useDirection()`.
+import { createElement } from 'octane';
+
+import { DirectionContext, useDirection } from './utils/DirectionContext';
+import type { TextDirection } from './utils/DirectionContext';
+
+export type { TextDirection };
+export { useDirection };
+
+export interface DirectionProviderProps {
+	children?: any;
+	/**
+	 * The reading direction of the text.
+	 * @default 'ltr'
+	 */
+	direction?: TextDirection;
+}
+
+export function DirectionProvider(props: DirectionProviderProps): any {
+	const { direction = 'ltr' } = props;
+	return createElement(DirectionContext.Provider, { value: direction, children: props.children });
+}
+
+export namespace DirectionProvider {
+	export type Props = DirectionProviderProps;
+}

package/src/index.ts

@@ -5,6 +5,11 @@
 export { Separator } from './separator';
 export { AlertDialog } from './alert-dialog';
 export { Avatar } from './avatar';
+export { Button } from './button';
+export { CSPProvider } from './csp-provider';
+export { DirectionProvider, useDirection } from './direction-provider';
+export type { TextDirection } from './direction-provider';
+export { useMediaQuery } from './unstable-use-media-query';
 export { Checkbox } from './checkbox';
 export { CheckboxGroup } from './checkbox-group';
 export { Dialog } from './dialog';
@@ -18,6 +23,8 @@ export { Progress } from './progress';
 export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
 export { Popover } from './popover';
+export { PreviewCard } from './preview-card';
+export { Tooltip } from './tooltip';
 export { Slider } from './slider';
 export { Switch } from './switch';
 export { Toggle } from './toggle';

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,6 +51,7 @@ 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';
@@ -415,11 +416,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 +516,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,
@@ -680,18 +681,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 +1204,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 +1264,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,
 };