@octanejs/base-ui 0.1.14 → 0.1.15

package/src/utils/popups/inlineRect.ts

@@ -0,0 +1,289 @@
+// 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';
+
+export interface InlineRectCoords {
+	/** The x position in viewport coordinates. */
+	x: number;
+	/** The y position in viewport coordinates. */
+	y: number;
+	/** The line index under the pointer when coordinates were captured. */
+	lineIndex?: number | undefined;
+	/** The trigger element whose rects produced these coordinates. */
+	element: Element;
+}
+
+interface RectLike {
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+	width: number;
+	height: number;
+}
+
+interface ClientRectLike extends RectLike {
+	x: number;
+	y: number;
+}
+
+interface ClientRectsReference {
+	getClientRects(): ArrayLike<RectLike>;
+}
+
+function createRect(left: number, top: number, right: number, bottom: number): ClientRectLike {
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top,
+	};
+}
+
+function copyRect(rect: RectLike): RectLike {
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		width: rect.width,
+		height: rect.height,
+	};
+}
+
+function getLineRects(rects: ArrayLike<RectLike>) {
+	const lines: RectLike[] = [];
+	let previousRect: RectLike | undefined;
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+
+	for (const rect of Array.from(rects).sort((a, b) => a.top - b.top)) {
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+
+		if (!previousRect || rect.top - previousRect.top > previousRect.height / 2) {
+			lines.push(copyRect(rect));
+		} else {
+			const line = lines[lines.length - 1];
+			line.left = Math.min(line.left, rect.left);
+			line.right = Math.max(line.right, rect.right);
+			line.bottom = Math.max(line.bottom, rect.bottom);
+			line.width = line.right - line.left;
+			line.height = line.bottom - line.top;
+		}
+
+		previousRect = rect;
+	}
+
+	return {
+		lines,
+		fallback: createRect(left, top, right, bottom),
+	};
+}
+
+function findLineIndex(lines: RectLike[], x: number, y: number) {
+	return lines.findIndex(
+		(lineRect) =>
+			x > lineRect.left - 2 &&
+			x < lineRect.right + 2 &&
+			y > lineRect.top - 2 &&
+			y < lineRect.bottom + 2,
+	);
+}
+
+function createClientRect(rect: RectLike) {
+	return createRect(rect.left, rect.top, rect.right, rect.bottom);
+}
+
+function getInlineRectCoords(
+	element: Element,
+	clientX: number,
+	clientY: number,
+): InlineRectCoords | undefined {
+	const { lines } = getLineRects(element.getClientRects());
+
+	if (lines.length < 2) {
+		return undefined;
+	}
+
+	const lineIndex = findLineIndex(lines, clientX, clientY);
+
+	return {
+		x: clientX,
+		y: clientY,
+		lineIndex: lineIndex === -1 ? undefined : lineIndex,
+		element,
+	};
+}
+
+function getInlineReferenceRect(
+	reference: ClientRectsReference,
+	placement: string,
+	coords: InlineRectCoords | undefined,
+): ClientRectLike | null {
+	const { lines, fallback } = getLineRects(reference.getClientRects());
+
+	if (lines.length < 2) {
+		return null;
+	}
+
+	const x = coords?.x;
+	const y = coords?.y;
+	const side = placement[0];
+
+	if (coords?.lineIndex != null && lines[coords.lineIndex]) {
+		return createClientRect(lines[coords.lineIndex]);
+	}
+
+	if (x != null && y != null) {
+		const lineIndex = findLineIndex(lines, x, y);
+
+		if (lineIndex !== -1) {
+			return createClientRect(lines[lineIndex]);
+		}
+	}
+
+	if (lines.length === 2 && lines[0].left > lines[1].right && x != null && y != null) {
+		return fallback;
+	}
+
+	if (side === 't' || side === 'b') {
+		const firstRect = lines[0];
+		const lastRect = lines[lines.length - 1];
+		const targetRect = side === 't' ? firstRect : lastRect;
+
+		return createRect(targetRect.left, firstRect.top, targetRect.right, lastRect.bottom);
+	}
+
+	const isLeft = side === 'l';
+	let left = lines[0].left;
+	let right = lines[0].right;
+	let edge = isLeft ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+	let targetFirstRect = lines[0];
+	let targetLastRect = lines[0];
+
+	for (const rect of lines) {
+		left = Math.min(left, rect.left);
+		right = Math.max(right, rect.right);
+
+		const nextEdge = isLeft ? rect.left : rect.right;
+
+		if ((isLeft && nextEdge < edge) || (!isLeft && nextEdge > edge)) {
+			edge = nextEdge;
+			targetFirstRect = rect;
+			targetLastRect = rect;
+		} else if (nextEdge === edge) {
+			targetLastRect = rect;
+		}
+	}
+
+	return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
+}
+
+function getContextElement(reference: any): Element | undefined {
+	if ('contextElement' in reference && reference.contextElement) {
+		return reference.contextElement;
+	}
+
+	return isElement(reference) ? (reference as Element) : undefined;
+}
+
+export function getInlineRectTriggerProps(
+	coordsRef: { current: InlineRectCoords | undefined },
+	isOpen: boolean,
+): Record<string, any> {
+	function updateCoords(event: MouseEvent) {
+		updateInlineRectCoords(coordsRef, event.currentTarget as Element, event.clientX, event.clientY);
+	}
+
+	function updateCoordsIfClosed(event: MouseEvent) {
+		if (!isOpen) {
+			updateCoords(event);
+		}
+	}
+
+	return {
+		onFocus() {
+			coordsRef.current = undefined;
+		},
+		onMouseEnter: updateCoordsIfClosed,
+		onMouseMove: updateCoordsIfClosed,
+	};
+}
+
+export function updateInlineRectCoords(
+	coordsRef: { current: InlineRectCoords | undefined },
+	element: Element,
+	clientX: number,
+	clientY: number,
+) {
+	const nextCoords = getInlineRectCoords(element, clientX, clientY);
+	coordsRef.current = nextCoords;
+	return nextCoords;
+}
+
+export function createInlineMiddleware(coordsRef: { current: InlineRectCoords | undefined }): any {
+	return {
+		name: 'inline',
+		async fn(state: any) {
+			const reference = state.elements.reference;
+
+			if (
+				typeof (reference as Partial<ClientRectsReference> | null)?.getClientRects !== 'function'
+			) {
+				return {};
+			}
+
+			const contextElement = getContextElement(reference);
+			const coords = coordsRef.current;
+			const currentCoords =
+				coords?.element === reference || coords?.element === contextElement ? coords : undefined;
+			const rect = getInlineReferenceRect(
+				reference as ClientRectsReference,
+				state.placement,
+				currentCoords,
+			);
+
+			if (!rect || typeof state.platform.getElementRects !== 'function') {
+				return {};
+			}
+
+			const resetRects = await state.platform.getElementRects({
+				reference: {
+					contextElement,
+					getBoundingClientRect() {
+						return rect;
+					},
+				},
+				floating: state.elements.floating,
+				strategy: state.strategy,
+			});
+
+			if (
+				state.rects.reference.x === resetRects.reference.x &&
+				state.rects.reference.y === resetRects.reference.y &&
+				state.rects.reference.width === resetRects.reference.width &&
+				state.rects.reference.height === resetRects.reference.height
+			) {
+				return {};
+			}
+
+			return {
+				reset: {
+					rects: resetRects,
+				},
+			};
+		},
+	};
+}

package/src/utils/usePopupAutoResize.ts

@@ -0,0 +1,250 @@
+// Ported from .base-ui/packages/react/src/utils/usePopupAutoResize.ts (v1.6.0). Lets a popup resize
+// to its content while keeping the change animatable: it measures the new content at `max-content`,
+// pins the popup to its previous size, then animates to the new one on the next frame.
+//
+// octane adaptations: `useIsoLayoutEffect` → `useLayoutEffect`; every composed hook threads an
+// explicit slot.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useLayoutEffect, useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { NOOP, EMPTY_OBJECT } from './empty';
+import { useAnimationFrame } from './useAnimationFrame';
+import { useAnimationsFinished } from './useAnimationsFinished';
+import { useStableCallback } from './useStableCallback';
+import { getCssDimensions } from './getCssDimensions';
+import type { Dimensions } from './getCssDimensions';
+import type { Side } from './useAnchorPositioning';
+
+export interface UsePopupAutoResizeParameters {
+	/** Element to resize. */
+	popupElement: HTMLElement | null;
+	/** Positioner element (parent of the popup). */
+	positionerElement: HTMLElement | null;
+	/** Whether the popup is mounted. */
+	mounted: boolean;
+	/**
+	 * Content that may change and trigger a resize. It doesn't have to be the actual content, just
+	 * a value that changes when a resize is needed.
+	 */
+	content: unknown;
+	/** Fired immediately before measuring the dimensions of the new content. */
+	onMeasureLayout?: (() => void) | undefined;
+	/**
+	 * Fired after the new dimensions have been measured.
+	 * @param previousDimensions Dimensions before the change, or `null` on the first measurement.
+	 * @param newDimensions Newly measured dimensions.
+	 */
+	onMeasureLayoutComplete?:
+		((previousDimensions: Dimensions | null, newDimensions: Dimensions) => void) | undefined;
+	side: Side;
+	direction: 'ltr' | 'rtl';
+}
+
+function overrideElementStyle(element: HTMLElement, property: string, value: string): () => void {
+	const originalValue = element.style.getPropertyValue(property);
+	element.style.setProperty(property, value);
+	return () => {
+		element.style.setProperty(property, originalValue);
+	};
+}
+
+function applyElementStyles(element: HTMLElement, styles: Record<string, string>): () => void {
+	const restorers: Array<() => void> = [];
+	for (const [key, value] of Object.entries(styles)) {
+		restorers.push(overrideElementStyle(element, key, value));
+	}
+	return restorers.length
+		? () => {
+				restorers.forEach((restore) => restore());
+			}
+		: NOOP;
+}
+
+function setPopupCssSize(popupElement: HTMLElement, size: Dimensions | 'auto'): void {
+	const width = size === 'auto' ? 'auto' : `${size.width}px`;
+	const height = size === 'auto' ? 'auto' : `${size.height}px`;
+	popupElement.style.setProperty('--popup-width', width);
+	popupElement.style.setProperty('--popup-height', height);
+}
+
+function setPositionerCssSize(
+	positionerElement: HTMLElement,
+	size: Dimensions | 'max-content',
+): void {
+	const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
+	const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
+	positionerElement.style.setProperty('--positioner-width', width);
+	positionerElement.style.setProperty('--positioner-height', height);
+}
+
+export function usePopupAutoResize(...args: any[]): void {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('usePopupAutoResize');
+	const parameters = user[0] as UsePopupAutoResizeParameters;
+
+	const {
+		popupElement,
+		positionerElement,
+		content,
+		mounted,
+		onMeasureLayout: onMeasureLayoutParam,
+		onMeasureLayoutComplete: onMeasureLayoutCompleteParam,
+		side,
+		direction,
+	} = parameters;
+
+	const runOnceAnimationsFinish = useAnimationsFinished(
+		popupElement,
+		true,
+		false,
+		subSlot(slot, 'anim'),
+	);
+
+	const animationFrame = useAnimationFrame(subSlot(slot, 'frame'));
+
+	const committedDimensionsRef = useRef<Dimensions | null>(null, subSlot(slot, 'dims'));
+	const isInitialRenderRef = useRef(true, subSlot(slot, 'init'));
+
+	const restoreAnchoringStylesRef = useRef<() => void>(NOOP, subSlot(slot, 'restore'));
+
+	const onMeasureLayout = useStableCallback(onMeasureLayoutParam, subSlot(slot, 'oml'));
+	const onMeasureLayoutComplete = useStableCallback(
+		onMeasureLayoutCompleteParam,
+		subSlot(slot, 'omlc'),
+	);
+
+	const anchoringStyles = useMemo(
+		() => {
+			// Ensure the popup size transitions correctly when anchored to `bottom` (side=top) or
+			// `right` (side=left).
+			let isOriginSide = side === 'top';
+			let isPhysicalLeft = side === 'left';
+			if (direction === 'rtl') {
+				isOriginSide = isOriginSide || side === 'inline-end';
+				isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
+			} else {
+				isOriginSide = isOriginSide || side === 'inline-start';
+				isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
+			}
+
+			return isOriginSide
+				? ({
+						position: 'absolute',
+						[side === 'top' ? 'bottom' : 'top']: '0',
+						[isPhysicalLeft ? 'right' : 'left']: '0',
+					} as Record<string, string>)
+				: (EMPTY_OBJECT as unknown as Record<string, string>);
+		},
+		[side, direction],
+		subSlot(slot, 'anchoring'),
+	);
+
+	useLayoutEffect(
+		() => {
+			// Reset the state when the popup is closed.
+			if (!mounted) {
+				restoreAnchoringStylesRef.current = NOOP;
+				isInitialRenderRef.current = true;
+				committedDimensionsRef.current = null;
+				return undefined;
+			}
+
+			if (!popupElement || !positionerElement) {
+				return undefined;
+			}
+
+			restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
+
+			// Measure the rendered size to enable transitions.
+			setPopupCssSize(popupElement, 'auto');
+
+			const restorePopupPosition = overrideElementStyle(popupElement, 'position', 'static');
+			const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
+			const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
+			const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+				'--available-width': 'max-content',
+				'--available-height': 'max-content',
+			});
+
+			function restoreMeasurementOverrides() {
+				restorePopupPosition();
+				restorePopupTransform();
+				restorePositionerAvailableSize();
+			}
+
+			function restoreMeasurementOverridesIncludingScale() {
+				restoreMeasurementOverrides();
+				restorePopupScale();
+			}
+
+			onMeasureLayout?.();
+
+			// Initial render (for each time the popup opens).
+			if (isInitialRenderRef.current || committedDimensionsRef.current === null) {
+				setPositionerCssSize(positionerElement, 'max-content');
+
+				const dimensions = getCssDimensions(popupElement);
+
+				committedDimensionsRef.current = dimensions;
+
+				setPositionerCssSize(positionerElement, dimensions);
+				restoreMeasurementOverridesIncludingScale();
+				onMeasureLayoutComplete?.(null, dimensions);
+
+				isInitialRenderRef.current = false;
+
+				return () => {
+					restoreAnchoringStylesRef.current();
+					restoreAnchoringStylesRef.current = NOOP;
+				};
+			}
+
+			// Subsequent renders while open (when `content` changes).
+			setPositionerCssSize(positionerElement, 'max-content');
+
+			const previousDimensions = committedDimensionsRef.current;
+			const newDimensions = getCssDimensions(popupElement);
+
+			// Commit immediately so future content changes have a stable previous size.
+			committedDimensionsRef.current = newDimensions;
+
+			setPopupCssSize(popupElement, previousDimensions);
+			restoreMeasurementOverridesIncludingScale();
+			onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+
+			setPositionerCssSize(positionerElement, newDimensions);
+
+			const abortController = new AbortController();
+
+			animationFrame.request(() => {
+				setPopupCssSize(popupElement, newDimensions);
+
+				runOnceAnimationsFinish(() => {
+					popupElement.style.setProperty('--popup-width', 'auto');
+					popupElement.style.setProperty('--popup-height', 'auto');
+				}, abortController.signal);
+			});
+
+			return () => {
+				abortController.abort();
+				animationFrame.cancel();
+				restoreAnchoringStylesRef.current();
+				restoreAnchoringStylesRef.current = NOOP;
+			};
+		},
+		[
+			content,
+			popupElement,
+			positionerElement,
+			runOnceAnimationsFinish,
+			animationFrame,
+			mounted,
+			onMeasureLayout,
+			onMeasureLayoutComplete,
+			anchoringStyles,
+		],
+		subSlot(slot, 'l:resize'),
+	);
+}