@octanejs/base-ui 0.1.1 → 0.1.2

package/src/radio.ts

@@ -4,8 +4,8 @@
 //
 // A radio renders a `<span role="radio">` + a hidden `<input type="radio">` (a CompositeItem
 // for roving focus when inside a <RadioGroup>). octane adaptations mirror Switch/Checkbox:
-// native events; the uncontrolled-input pattern (initial checked → attribute, live
-// `input.checked` PROPERTY via the native setter, native click/change dispatch).
+// native events; the hidden input takes the live `checked` prop (octane inputs are CONTROLLED
+// exactly like React's) with native click dispatch.
 import { createContext, createElement, useContext, useLayoutEffect, useMemo, useRef } from 'octane';
 
 import { S, subSlot } from './internal';
@@ -138,9 +138,6 @@ function RadioRoot(props: RadioRootProps): any {
 	const radioRef = useRef<HTMLElement | null>(null, subSlot(slot, 'radioRef'));
 	const inputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'inputRef'));
 
-	// octane: reflect the INITIAL checked as the `checked` ATTRIBUTE (see Switch).
-	const initialCheckedRef = useRef(checked, subSlot(slot, 'initialChecked'));
-
 	const handleControlRef = useStableCallback(
 		(element: HTMLElement | null) => {
 			if (!element) {
@@ -168,23 +165,6 @@ function RadioRoot(props: RadioRootProps): any {
 		subSlot(slot, 'e:filled'),
 	);
 
-	// octane: drive `input.checked` PROPERTY imperatively (matches React's controlled input).
-	useLayoutEffect(
-		() => {
-			const input = inputRef.current;
-			if (!input) {
-				return;
-			}
-			const setNativeChecked = Object.getOwnPropertyDescriptor(
-				ownerWindow(input).HTMLInputElement.prototype,
-				'checked',
-			)?.set;
-			setNativeChecked?.call(input, checked);
-		},
-		[checked],
-		subSlot(slot, 'e:syncChecked'),
-	);
-
 	useLayoutEffect(
 		() => {
 			if (!inputRef.current) {
@@ -275,8 +255,7 @@ function RadioRoot(props: RadioRootProps): any {
 		'aria-hidden': true,
 		...(value !== undefined ? { value: serializeValue(value) } : {}),
 		disabled,
-		// octane: initial checked → attribute; live value via the property sync effect.
-		checked: initialCheckedRef.current || undefined,
+		checked,
 		required,
 		readOnly,
 		onChange(event: any) {

package/src/slider.ts

@@ -1441,11 +1441,10 @@ function SliderThumb(componentProps: any): any {
 			},
 			tabIndex: tabIndexProp ?? undefined,
 			type: 'range',
-			// octane: a controlled range input reflects its live value to the `value` ATTRIBUTE
-			// (verified vs React) — octane's native attribute write matches, so no freeze/property
-			// adaptation is needed here (unlike a controlled TEXT input). Base UI prevents native
-			// range interaction (keydown → preventDefault), so the input stays pristine and the
-			// attribute drives the property/position.
+			// octane: `value` is live CONTROLLED (React parity) — the runtime drives the
+			// `.value` property, mirrors it to the attribute, and reasserts after commits and
+			// discrete events. Base UI prevents native range interaction (keydown →
+			// preventDefault), so `thumbValue` stays the single source of truth, as on React.
 			value: thumbValue ?? '',
 		},
 		(props: any) => validation.getValidationProps(disabled, props),

package/src/switch.ts

@@ -4,10 +4,9 @@
 //
 // A switch renders a `<span role="switch">` plus a hidden `<input type="checkbox">`. octane
 // adaptations: (1) events are NATIVE — the handlers read the event directly (Base UI's
-// `event.nativeEvent`); (2) octane inputs are UNCONTROLLED (a `checked` prop would write a
-// `checked` ATTRIBUTE, which React's controlled input never does), so we DON'T pass `checked`
-// to the input and instead drive `input.checked` imperatively through the native property
-// setter in a layout effect — matching React's property-only controlled behavior. Field/Form
+// `event.nativeEvent`); (2) the hidden input takes the live `checked` prop — octane inputs
+// are CONTROLLED exactly like React's (property-driven, reasserted on every commit and after
+// discrete events; only the INITIAL checked reflects to the attribute). Field/Form
 // integration is inert when standalone (default contexts).
 import { createContext, createElement, useContext, useLayoutEffect, useMemo, useRef } from 'octane';
 
@@ -155,11 +154,6 @@ function SwitchRoot(props: SwitchRootProps): any {
 		subSlot(slot, 'checked'),
 	);
 
-	// octane: React's controlled `<input checked>` reflects the INITIAL checked to the
-	// `checked` ATTRIBUTE (its default-state), then updates only the property. Capture that
-	// initial value so the attribute matches; the property is driven by the sync effect below.
-	const initialCheckedRef = useRef(checked, subSlot(slot, 'initialChecked'));
-
 	useRegisterFieldControl(
 		switchRef,
 		id,
@@ -180,24 +174,6 @@ function SwitchRoot(props: SwitchRootProps): any {
 		subSlot(slot, 'e:filled'),
 	);
 
-	// octane uncontrolled-input adaptation: drive the hidden input's `checked` PROPERTY (never
-	// the attribute) through the native setter, so the DOM matches React's controlled input.
-	useLayoutEffect(
-		() => {
-			const input = inputRef.current;
-			if (!input) {
-				return;
-			}
-			const setNativeChecked = Object.getOwnPropertyDescriptor(
-				ownerWindow(input).HTMLInputElement.prototype,
-				'checked',
-			)?.set;
-			setNativeChecked?.call(input, checked);
-		},
-		[checked],
-		subSlot(slot, 'e:syncChecked'),
-	);
-
 	useValueChanged(
 		checked,
 		() => {
@@ -268,9 +244,7 @@ function SwitchRoot(props: SwitchRootProps): any {
 
 	const inputProps: Record<string, any> = mergeProps(
 		{
-			// octane: the INITIAL checked state is the `checked` ATTRIBUTE (React's
-			// default-state); the live value is driven via the property in the sync effect.
-			checked: initialCheckedRef.current || undefined,
+			checked,
 			disabled,
 			form,
 			id: hiddenInputId,

package/src/utils/InternalBackdrop.ts

@@ -0,0 +1,28 @@
+// Ported from .base-ui/packages/react/src/utils/InternalBackdrop.tsx. The always-present backdrop a
+// modal popup renders so Floating UI's outside-press detection sees an element that existed when the
+// popup opened. octane: `createElement`; ref-as-prop.
+import { createElement } from 'octane';
+
+export function InternalBackdrop(props: any): any {
+	const { cutout, ref, ...otherProps } = props;
+
+	let clipPath: string | undefined;
+	if (cutout) {
+		const rect = cutout.getBoundingClientRect();
+		clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
+	}
+
+	return createElement('div', {
+		ref,
+		role: 'presentation',
+		['data-base-ui-inert']: '',
+		...otherProps,
+		style: {
+			position: 'fixed',
+			inset: 0,
+			userSelect: 'none',
+			WebkitUserSelect: 'none',
+			clipPath,
+		},
+	});
+}

package/src/utils/adaptiveOriginMiddleware.ts

@@ -0,0 +1,82 @@
+// Ported verbatim from .base-ui/packages/react/src/utils/adaptiveOriginMiddleware.ts (v1.6.0).
+// Pure @floating-ui middleware (no React) — used only when a popup is anchored to a viewport
+// (`hasViewport`). Rewrites the resolved x/y into `right`/`bottom` origins on the sides that need
+// it so CSS transforms scale from the correct corner. `DEFAULT_SIDES` is the fallback used when the
+// middleware doesn't run (no transition, or `adaptiveOrigin` disabled).
+import { getSide } from '@floating-ui/utils';
+
+import { ownerDocument, ownerWindow } from './owner';
+
+export const DEFAULT_SIDES = {
+	sideX: 'left',
+	sideY: 'top',
+} as const;
+
+export const adaptiveOrigin: any = {
+	name: 'adaptiveOrigin',
+	async fn(state: any) {
+		const {
+			x: rawX,
+			y: rawY,
+			rects: { floating: floatRect },
+			elements: { floating },
+			platform,
+			strategy,
+			placement,
+		} = state;
+
+		const win = ownerWindow(floating);
+		const styles = win.getComputedStyle(floating);
+		const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
+
+		if (!hasTransition) {
+			return {
+				x: rawX,
+				y: rawY,
+				data: DEFAULT_SIDES,
+			};
+		}
+
+		const offsetParent = await platform.getOffsetParent?.(floating);
+
+		let offsetDimensions = { width: 0, height: 0 };
+
+		// For fixed strategy, prefer visualViewport if available
+		if (strategy === 'fixed' && win?.visualViewport) {
+			offsetDimensions = {
+				width: win.visualViewport.width,
+				height: win.visualViewport.height,
+			};
+		} else if (offsetParent === win) {
+			const doc = ownerDocument(floating);
+			offsetDimensions = {
+				width: doc.documentElement.clientWidth,
+				height: doc.documentElement.clientHeight,
+			};
+		} else if (await platform.isElement?.(offsetParent)) {
+			offsetDimensions = await platform.getDimensions(offsetParent);
+		}
+
+		const currentSide = getSide(placement);
+		let x = rawX;
+		let y = rawY;
+
+		if (currentSide === 'left') {
+			x = offsetDimensions.width - (rawX + floatRect.width);
+		}
+		if (currentSide === 'top') {
+			y = offsetDimensions.height - (rawY + floatRect.height);
+		}
+
+		const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX;
+		const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY;
+		return {
+			x,
+			y,
+			data: {
+				sideX,
+				sideY,
+			},
+		};
+	},
+};

package/src/utils/closePart.ts

@@ -0,0 +1,61 @@
+// Ported from .base-ui/packages/react/src/utils/closePart.tsx (v1.6.0), octane-adapted
+// (slot-threaded plain-`.ts`). Tracks how many "close" parts (e.g. `Popover.Close`) are mounted
+// inside a popup so the focus manager can decide whether the popup is effectively modal.
+import {
+	createContext,
+	useContext,
+	useState,
+	useMemo,
+	useLayoutEffect,
+	createElement,
+} from 'octane';
+
+import { S, subSlot } from '../internal';
+import { useStableCallback } from './useStableCallback';
+
+interface ClosePartContextValue {
+	register: () => () => void;
+}
+
+const ClosePartContext = createContext<ClosePartContextValue | undefined>(undefined);
+
+export function useClosePartCount(): { context: ClosePartContextValue; hasClosePart: boolean } {
+	const slot = S('useClosePartCount');
+	const [closePartCount, setClosePartCount] = useState(0, subSlot(slot, 'count'));
+
+	const register = useStableCallback(
+		() => {
+			setClosePartCount((count: number) => count + 1);
+			return () => {
+				setClosePartCount((count: number) => Math.max(0, count - 1));
+			};
+		},
+		subSlot(slot, 'reg'),
+	);
+
+	const context = useMemo(() => ({ register }), [register], subSlot(slot, 'ctx'));
+
+	return {
+		context,
+		hasClosePart: closePartCount > 0,
+	};
+}
+
+export function ClosePartProvider(props: { value: ClosePartContextValue; children?: any }): any {
+	return createElement(ClosePartContext.Provider, {
+		value: props.value,
+		children: props.children,
+	});
+}
+
+export function useClosePartRegistration(): void {
+	const slot = S('useClosePartRegistration');
+	const context = useContext(ClosePartContext);
+	useLayoutEffect(
+		() => {
+			return context?.register();
+		},
+		[context],
+		subSlot(slot, 'eff'),
+	);
+}

package/src/utils/constants.ts

@@ -0,0 +1,9 @@
+// Ported from .base-ui/packages/react/src/internals/constants.ts (v1.6.0) — the subset the
+// 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).
+export const POPUP_COLLISION_AVOIDANCE = {
+	fallbackAxisSide: 'end',
+} as const;
+
+export const DISABLED_TRANSITIONS_STYLE = { style: { transition: 'none' } } as const;

package/src/utils/createChangeEventDetails.ts

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

package/src/utils/dom.ts

@@ -0,0 +1,9 @@
+// Small DOM type-guards (Base UI uses `@floating-ui/utils/dom`'s isElement/isHTMLElement). jsdom
+// and normal DOM are single-realm here, so `instanceof` is sufficient.
+export function isElement(value: unknown): value is Element {
+	return value != null && value instanceof Element;
+}
+
+export function isHTMLElement(value: unknown): value is HTMLElement {
+	return value != null && value instanceof HTMLElement;
+}

package/src/utils/empty.ts

@@ -0,0 +1,7 @@
+// Ported from @base-ui/utils/empty: shared frozen empties + NOOP, compared by identity across the
+// codebase (a stable reference lets effects/memos bail out). NOOP re-exports the existing shared
+// one so there is a single identity.
+export { NOOP } from './noop';
+
+export const EMPTY_OBJECT = {} as Record<string, never>;
+export const EMPTY_ARRAY = [] as never[];