@octanejs/base-ui 0.1.49 → 0.1.51

package/src/utils/dispatchClickWithModifiers.ts

@@ -0,0 +1,36 @@
+import { ownerWindow } from '@octanejs/base-ui-utils/owner';
+
+interface ModifierState {
+	shiftKey: boolean;
+	ctrlKey: boolean;
+	altKey: boolean;
+	metaKey: boolean;
+}
+
+/**
+ * Dispatches a constructed click on the target so it carries the source event's
+ * modifier state, which `click()` always reports as unpressed. Like `click()`,
+ * the untrusted click still runs native activation behavior (form submission,
+ * link navigation).
+ * `detail` defaults to 0 (the native convention for keyboard-generated clicks);
+ * pass `detail: 1` when the click represents a mouse gesture so consumers keying
+ * off `detail === 0` don't classify it as a keyboard activation.
+ */
+export function dispatchClickWithModifiers(
+	target: Element,
+	sourceEvent: ModifierState,
+	{ detail = 0 }: { detail?: number | undefined } = {},
+) {
+	target.dispatchEvent(
+		new (ownerWindow(target).PointerEvent)('click', {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail,
+			shiftKey: sourceEvent.shiftKey,
+			ctrlKey: sourceEvent.ctrlKey,
+			altKey: sourceEvent.altKey,
+			metaKey: sourceEvent.metaKey,
+		}),
+	);
+}

package/src/utils/getCssDimensions.ts

@@ -1,28 +1,24 @@
-// Ported from .base-ui/packages/react/src/utils/getCssDimensions.ts (v1.6.0). Base UI reads this
-// from `@floating-ui/utils`; `round` is inlined here rather than adding an import.
-import { isHTMLElement } from './dom';
-
-export interface Dimensions {
-	width: number;
-	height: number;
-}
+import { type Dimensions, round } from '@floating-ui/utils';
+import { getComputedStyle, isHTMLElement } from '@floating-ui/utils/dom';
 
 export function getCssDimensions(element: Element): Dimensions {
 	const css = getComputedStyle(element);
-	// In testing environments the `width`/`height` properties are empty strings for SVG elements,
-	// which would parse to NaN. Fall back to 0.
+	// In testing environments, the `width` and `height` properties are empty
+	// strings for SVG elements, returning NaN. Fallback to `0` in this case.
 	let width = parseFloat(css.width) || 0;
 	let height = parseFloat(css.height) || 0;
 	const hasOffset = isHTMLElement(element);
-	const offsetWidth = hasOffset ? (element as HTMLElement).offsetWidth : width;
-	const offsetHeight = hasOffset ? (element as HTMLElement).offsetHeight : height;
-	const shouldFallback =
-		Math.round(width * 2) / 2 !== offsetWidth || Math.round(height * 2) / 2 !== offsetHeight;
+	const offsetWidth = hasOffset ? element.offsetWidth : width;
+	const offsetHeight = hasOffset ? element.offsetHeight : height;
+	const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
 
 	if (shouldFallback) {
 		width = offsetWidth;
 		height = offsetHeight;
 	}
 
-	return { width, height };
+	return {
+		width,
+		height,
+	};
 }

package/src/utils/getElementAtPoint.ts

@@ -0,0 +1,12 @@
+type ElementFromPointRoot = Node & Partial<Pick<Document, 'elementFromPoint'>>;
+
+// `Document.elementFromPoint` retargets shadow content to the shadow host, which then fails
+// `contains()` checks against a popup inside that shadow root, so callers pass `getRootNode()`
+// (a document or a shadow root) rather than `ownerDocument()`.
+export function getElementAtPoint(
+	root: ElementFromPointRoot | null | undefined,
+	x: number,
+	y: number,
+) {
+	return typeof root?.elementFromPoint === 'function' ? root.elementFromPoint(x, y) : null;
+}

package/src/utils/getElementTransform.ts

@@ -0,0 +1,33 @@
+import { ownerWindow } from '@octanejs/base-ui-utils/owner';
+
+/**
+ * Extracts the 2D translation and scale from the element's computed `transform` matrix.
+ * Note that the `translate`, `rotate`, and `scale` longhands are separate properties and
+ * are not reflected in the computed `transform` value.
+ *
+ * Pass `computedStyle` when the caller has already resolved it to avoid a second lookup.
+ */
+export function getElementTransform(element: HTMLElement, computedStyle?: CSSStyleDeclaration) {
+	const transform = (computedStyle ?? ownerWindow(element).getComputedStyle(element)).transform;
+	let translateX = 0;
+	let translateY = 0;
+	let scale = 1;
+
+	if (transform && transform !== 'none') {
+		const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
+		if (matrix) {
+			const values = matrix[1].split(', ').map(parseFloat);
+			if (values.length === 6) {
+				translateX = values[4];
+				translateY = values[5];
+				scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
+			} else if (values.length === 16) {
+				translateX = values[12];
+				translateY = values[13];
+				scale = values[0];
+			}
+		}
+	}
+
+	return { x: translateX, y: translateY, scale };
+}

package/src/utils/getPseudoElementBounds.ts

@@ -1,10 +1,5 @@
-// Ported from .base-ui/packages/react/src/utils/getPseudoElementBounds.ts (v1.6.0). Returns an
-// element's bounding box widened to cover its `::before`/`::after` pseudo-elements, so hit-testing
-// (safe-polygon / mouse-tracking) accounts for decorations drawn outside the box.
-//
-// Pure — no renderer API is involved, so this is a straight transcription.
-import { ownerWindow } from './owner';
-import { platform } from './platform';
+import { ownerWindow } from '@octanejs/base-ui-utils/owner';
+import { platform } from '@octanejs/base-ui-utils/platform';
 
 interface ElementBounds {
 	left: number;
@@ -13,6 +8,26 @@ interface ElementBounds {
 	bottom: number;
 }
 
+// Tolerance around the element bounds so a fast click whose pointer drifts slightly
+// during press-release isn't mistaken for a drag-off-and-release cancellation.
+// Matches typical OS/browser drag-initiation thresholds.
+const BOUNDARY_OFFSET = 5;
+
+/**
+ * Determines if a mouse event occurred within the bounds of an element
+ * (including its pseudo-elements), with a small tolerance for pointer drift.
+ */
+export function isMouseWithinBounds(event: MouseEvent, element: HTMLElement): boolean {
+	const bounds = getPseudoElementBounds(element);
+
+	return (
+		event.clientX >= bounds.left - BOUNDARY_OFFSET &&
+		event.clientX <= bounds.right + BOUNDARY_OFFSET &&
+		event.clientY >= bounds.top - BOUNDARY_OFFSET &&
+		event.clientY <= bounds.bottom + BOUNDARY_OFFSET
+	);
+}
+
 export function getPseudoElementBounds(element: HTMLElement): ElementBounds {
 	const elementRect = element.getBoundingClientRect();
 	const win = ownerWindow(element);

package/src/utils/hideMiddleware.ts

@@ -1,21 +1,24 @@
-// Ported from .base-ui/packages/react/src/utils/hideMiddleware.ts (v1.6.0). Base UI imports the
-// native `hide` from `@floating-ui/react-dom`; octane's `@octanejs/floating-ui` re-exports the same
-// `@floating-ui/dom` `hide`, so we wrap that. Adds an extra "anchor hidden" heuristic: a reference
-// rect that is fully zeroed (width/height/x/y all 0) is treated as hidden even if native `hide`
-// doesn't flag it.
-import { hide as nativeHide } from '@octanejs/floating-ui';
+import { type Middleware } from '@octanejs/floating-ui';
 
-const nativeHideFn = (nativeHide() as any).fn;
-
-export const hide: any = {
+export const hide: Middleware = {
 	name: 'hide',
-	async fn(state: any) {
+	async fn(state) {
 		const { width, height, x, y } = state.rects.reference;
 		const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
-		const nativeHideResult = await nativeHideFn(state);
+		// Mirrors Floating UI's `hide()` referenceHidden strategy. Floating UI injects
+		// `detectOverflow` into the middleware platform before invoking middleware.
+		const overflow = await state.platform.detectOverflow(state, {
+			elementContext: 'reference',
+		});
+		const referenceHidden =
+			overflow.top - height >= 0 ||
+			overflow.right - width >= 0 ||
+			overflow.bottom - height >= 0 ||
+			overflow.left - width >= 0;
+
 		return {
 			data: {
-				referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden,
+				referenceHidden: referenceHidden || anchorHidden,
 			},
 		};
 	},

package/src/utils/listbox-separator/ListboxSeparator.tsrx

@@ -0,0 +1,47 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps, Orientation } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * A visual separator between items.
+ * Renders a `<div>` element.
+ *
+ * @internal
+ */
+export const ListboxSeparator = function ListboxSeparator(
+	componentPropsWithRef: React.PropsWithoutRef<ListboxSeparator.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { className, render, orientation = 'horizontal', style, ...elementProps } = componentProps;
+
+	const state: ListboxSeparatorState = { orientation };
+
+	return useRenderElement('div', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [{ role: 'presentation' }, elementProps],
+	});
+};
+
+export interface ListboxSeparatorProps extends BaseUIComponentProps<'div', ListboxSeparatorState> {
+	/**
+	 * The orientation of the separator.
+	 * @default 'horizontal'
+	 */
+	orientation?: Orientation | undefined;
+}
+
+export interface ListboxSeparatorState {
+	/**
+	 * The orientation of the separator.
+	 */
+	orientation: Orientation;
+}
+
+export namespace ListboxSeparator {
+	export type Props = ListboxSeparatorProps;
+	export type State = ListboxSeparatorState;
+}

package/src/utils/mergeStyles.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'octane';
+import { mergeObjects } from '@octanejs/base-ui-utils/mergeObjects';
+
+function assertStyleObject(style: unknown): asserts style is CSSProperties | null | undefined {
+	if (style != null && (typeof style !== 'object' || Array.isArray(style))) {
+		throw new TypeError('Base UI: merged styles must be objects.');
+	}
+}
+
+/** Compose object styles without treating CSS text as numeric property names. */
+export function mergeStyles(first: unknown, second: unknown): CSSProperties | undefined {
+	assertStyleObject(first);
+	assertStyleObject(second);
+	return mergeObjects(first ?? undefined, second ?? undefined);
+}

package/src/utils/popupStateMapping.ts

@@ -1,48 +1,70 @@
-// Ported from .base-ui/packages/react/src/utils/popupStateMapping.ts (v1.6.0). Maps popup/trigger
-// `open` (+ transition/anchor) state → the shared `data-*` attributes. Pure.
-import type { StateAttributesMapping } from './getStateAttributesProps';
-
-export const CommonPopupDataAttributes = {
-	open: 'data-open',
-	closed: 'data-closed',
-	startingStyle: 'data-starting-style',
-	endingStyle: 'data-ending-style',
-	anchorHidden: 'data-anchor-hidden',
-	side: 'data-side',
-	align: 'data-align',
-} as const;
-
-export const CommonTriggerDataAttributes = {
-	popupOpen: 'data-popup-open',
-	pressed: 'data-pressed',
-} as const;
-
-const TRIGGER_HOOK = { [CommonTriggerDataAttributes.popupOpen]: '' };
+import type { StateAttributesMapping } from '../internals/getStateAttributesProps';
+import { transitionStatusMapping } from '../internals/stateAttributesMapping';
+import type { TransitionStatus } from '../internals/useTransitionStatus';
+import * as CommonPopupDataAttributes from './CommonPopupDataAttributes';
+import * as CommonTriggerDataAttributes from './CommonTriggerDataAttributes';
+
+export { CommonPopupDataAttributes, CommonTriggerDataAttributes };
+
+const TRIGGER_HOOK = {
+	[CommonTriggerDataAttributes.popupOpen]: '',
+};
+
 const PRESSABLE_TRIGGER_HOOK = {
 	[CommonTriggerDataAttributes.popupOpen]: '',
 	[CommonTriggerDataAttributes.pressed]: '',
 };
-const POPUP_OPEN_HOOK = { [CommonPopupDataAttributes.open]: '' };
-const POPUP_CLOSED_HOOK = { [CommonPopupDataAttributes.closed]: '' };
-const ANCHOR_HIDDEN_HOOK = { [CommonPopupDataAttributes.anchorHidden]: '' };
 
-export const triggerOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
-	open(value: boolean) {
-		return value ? TRIGGER_HOOK : null;
-	},
+const POPUP_OPEN_HOOK = {
+	[CommonPopupDataAttributes.open]: '',
 };
 
-export const pressableTriggerOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
-	open(value: boolean) {
-		return value ? PRESSABLE_TRIGGER_HOOK : null;
-	},
+const POPUP_CLOSED_HOOK = {
+	[CommonPopupDataAttributes.closed]: '',
 };
 
+const ANCHOR_HIDDEN_HOOK = {
+	[CommonPopupDataAttributes.anchorHidden]: '',
+};
+
+export const triggerOpenStateMapping = {
+	open(value) {
+		if (value) {
+			return TRIGGER_HOOK;
+		}
+		return null;
+	},
+} satisfies StateAttributesMapping<{ open: boolean }>;
+
+export const pressableTriggerOpenStateMapping = {
+	open(value) {
+		if (value) {
+			return PRESSABLE_TRIGGER_HOOK;
+		}
+		return null;
+	},
+} satisfies StateAttributesMapping<{ open: boolean }>;
+
 export const popupStateMapping = {
-	open(value: boolean) {
-		return value ? POPUP_OPEN_HOOK : POPUP_CLOSED_HOOK;
+	open(value) {
+		if (value) {
+			return POPUP_OPEN_HOOK;
+		}
+		return POPUP_CLOSED_HOOK;
 	},
-	anchorHidden(value: boolean) {
-		return value ? ANCHOR_HIDDEN_HOOK : null;
+	anchorHidden(value) {
+		if (value) {
+			return ANCHOR_HIDDEN_HOOK;
+		}
+		return null;
 	},
 } satisfies StateAttributesMapping<{ open: boolean; anchorHidden: boolean }>;
+
+export const popupTransitionStateMapping = {
+	...popupStateMapping,
+	...transitionStatusMapping,
+} satisfies StateAttributesMapping<{
+	open: boolean;
+	anchorHidden: boolean;
+	transitionStatus: TransitionStatus;
+}>;

package/src/utils/popups/index.ts

@@ -1,10 +1,6 @@
-// Mirrors .base-ui/packages/react/src/utils/popups/index.ts — the popup store engine barrel.
-export * from './store';
+export * from './inlineRect';
+export * from './popupHandle';
 export * from './popupStoreUtils';
 export * from './popupTriggerMap';
-export {
-	createInlineMiddleware,
-	getInlineRectTriggerProps,
-	updateInlineRectCoords,
-	type InlineRectCoords,
-} from './inlineRect';
+export * from './store';
+export * from './usePopupHandleStore';

package/src/utils/popups/inlineRect.ts

@@ -1,9 +1,10 @@
-// Ported from .base-ui/packages/react/src/utils/popups/inlineRect.ts (v1.6.0). Floating UI ships an
-// `inline()` middleware; this local version mirrors its line-rect selection while adding trigger
-// identity checks, delayed-open hit-line reuse, and better left/right edge grouping for Preview
-// Card's reusable trigger model. Pure geometry plus a floating-ui middleware — transcribed as-is,
-// with React's ref types collapsed to plain `{ current }` objects and native event handlers.
-import { isElement } from '../dom';
+import type * as React from 'octane';
+import type { Middleware, VirtualElement } from '@octanejs/floating-ui';
+import { isElement } from '@floating-ui/utils/dom';
+
+// Floating UI ships an `inline()` middleware. This local version mirrors its line-rect
+// selection while adding trigger identity checks, delayed-open hit-line reuse, and
+// improved left/right edge grouping for Preview Card's reusable trigger model.
 
 export interface InlineRectCoords {
 	/** The x position in viewport coordinates. */
@@ -191,23 +192,23 @@ function getInlineReferenceRect(
 	return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
 }
 
-function getContextElement(reference: any): Element | undefined {
+function getContextElement(reference: Element | VirtualElement): Element | undefined {
 	if ('contextElement' in reference && reference.contextElement) {
 		return reference.contextElement;
 	}
 
-	return isElement(reference) ? (reference as Element) : undefined;
+	return isElement(reference) ? reference : undefined;
 }
 
 export function getInlineRectTriggerProps(
-	coordsRef: { current: InlineRectCoords | undefined },
+	coordsRef: React.RefObject<InlineRectCoords | undefined>,
 	isOpen: boolean,
-): Record<string, any> {
-	function updateCoords(event: MouseEvent) {
-		updateInlineRectCoords(coordsRef, event.currentTarget as Element, event.clientX, event.clientY);
+): Pick<React.HTMLAttributes<Element>, 'onFocus' | 'onMouseEnter' | 'onMouseMove'> {
+	function updateCoords(event: React.MouseEvent<Element>) {
+		updateInlineRectCoords(coordsRef, event.currentTarget, event.clientX, event.clientY);
 	}
 
-	function updateCoordsIfClosed(event: MouseEvent) {
+	function updateCoordsIfClosed(event: React.MouseEvent<Element>) {
 		if (!isOpen) {
 			updateCoords(event);
 		}
@@ -223,7 +224,7 @@ export function getInlineRectTriggerProps(
 }
 
 export function updateInlineRectCoords(
-	coordsRef: { current: InlineRectCoords | undefined },
+	coordsRef: React.RefObject<InlineRectCoords | undefined>,
 	element: Element,
 	clientX: number,
 	clientY: number,
@@ -233,10 +234,12 @@ export function updateInlineRectCoords(
 	return nextCoords;
 }
 
-export function createInlineMiddleware(coordsRef: { current: InlineRectCoords | undefined }): any {
+export function createInlineMiddleware(
+	coordsRef: React.RefObject<InlineRectCoords | undefined>,
+): Middleware {
 	return {
 		name: 'inline',
-		async fn(state: any) {
+		async fn(state) {
 			const reference = state.elements.reference;
 
 			if (