@octanejs/base-ui 0.1.14 → 0.1.16

package/src/utils/useMixedToggleClickHandler.ts

@@ -0,0 +1,77 @@
+// Ported from .base-ui/packages/react/src/utils/useMixedToggleClickHandler.ts (v1.6.0),
+// octane-adapted (slot-threaded; native events). Returns `click`/`mousedown` handlers for a trigger
+// whose popup is toggled by two different events — opened on mousedown, closed on click — so the
+// click that follows the opening mousedown does not immediately close the popup again.
+//
+// octane adaptations: events are NATIVE (not synthetic), so the handlers take the native event
+// and `preventBaseUIHandler` is the shim `mergeProps`/`makeEventPreventable` attaches to it.
+// Upstream's empty `UseMixedToggleClickHandlerState` interface is a docs-pipeline artifact with no
+// members, so it is dropped.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { EMPTY_OBJECT } from './empty';
+import { ownerDocument } from './owner';
+
+export interface UseMixedToggleClickHandlerParameters {
+	/**
+	 * Whether the mixed toggle click handler is enabled.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * Determines what action is performed on mousedown.
+	 */
+	mouseDownAction: 'open' | 'close';
+	/**
+	 * The current open state of the popup.
+	 */
+	open: boolean;
+}
+
+export interface UseMixedToggleClickHandlerReturnValue {
+	onMouseDown?: (event: any) => void;
+	onClick?: (event: any) => void;
+}
+
+export function useMixedToggleClickHandler(...args: any[]): UseMixedToggleClickHandlerReturnValue {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useMixedToggleClickHandler');
+	const { enabled = true, mouseDownAction, open } = user[0] as UseMixedToggleClickHandlerParameters;
+
+	const ignoreClickRef = useRef(false, subSlot(slot, 'ignore'));
+
+	return useMemo(
+		() => {
+			if (!enabled) {
+				return EMPTY_OBJECT;
+			}
+
+			return {
+				onMouseDown: (event: any) => {
+					if ((mouseDownAction === 'open' && !open) || (mouseDownAction === 'close' && open)) {
+						ignoreClickRef.current = true;
+
+						ownerDocument(event.currentTarget as Element).addEventListener(
+							'click',
+							() => {
+								ignoreClickRef.current = false;
+							},
+							{ once: true },
+						);
+					}
+				},
+				onClick: (event: any) => {
+					if (ignoreClickRef.current) {
+						ignoreClickRef.current = false;
+						event.preventBaseUIHandler();
+					}
+				},
+			};
+		},
+		[enabled, mouseDownAction, open],
+		subSlot(slot, 'm'),
+	);
+}

package/src/utils/useOpenInteractionType.ts

@@ -1,11 +1,12 @@
 // Ported from .base-ui/packages/react/src/utils/useOpenInteractionType.ts (v1.6.0), octane-adapted
 // (slot-threaded; native events). Records the interaction type (mouse/touch/pen/keyboard) that
 // opened a popup, so trigger-owned focus can behave correctly.
-import { useMemo } from 'octane';
+import { useMemo, useState } from 'octane';
 
 import { subSlot } from '../internal';
 import { useStableCallback } from './useStableCallback';
 import { useEnhancedClickHandler, type InteractionType } from './useEnhancedClickHandler';
+import { useValueChanged } from './useValueChanged';
 import { platform } from './platform';
 
 export function useOpenMethodTriggerProps(
@@ -30,3 +31,38 @@ export function useOpenMethodTriggerProps(
 
 	return useMemo(() => ({ onClick, onPointerDown }), [onClick, onPointerDown], subSlot(slot, 'm'));
 }
+
+/**
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component, and
+ * returns it alongside the trigger props that record it. Resets to `null` once the popup closes.
+ *
+ * Used by roots that own the open method locally (Menu) rather than delegating it to each trigger
+ * (Popover, which calls `useOpenMethodTriggerProps` directly and stores the result in its store).
+ */
+export function useOpenInteractionType(
+	open: boolean,
+	slot: symbol | undefined,
+): {
+	openMethod: InteractionType | null;
+	triggerProps: { onClick: (event: any) => void; onPointerDown: (event: any) => void };
+} {
+	const [openMethod, setOpenMethod] = useState<InteractionType | null>(null, subSlot(slot, 's'));
+
+	const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod, subSlot(slot, 'tp'));
+
+	useValueChanged(
+		open,
+		(previousOpen: boolean) => {
+			if (previousOpen && !open) {
+				setOpenMethod(null);
+			}
+		},
+		subSlot(slot, 'vc'),
+	);
+
+	return useMemo(
+		() => ({ openMethod, triggerProps }),
+		[openMethod, triggerProps],
+		subSlot(slot, 'r'),
+	);
+}

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'),
+	);
+}