@passui/react 0.1.44 → 0.1.46

package/src/components/popover/popover-content.tsx

@@ -0,0 +1,334 @@
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { concealMenuSource } from "../context-menu/conceal-menu-source";
+import {
+	menuSurfaceExit,
+	menuSurfaceReveal,
+	type MenuRect,
+} from "../context-menu/menu-reveal";
+import { useSheetFocus } from "../sheet/use-sheet-focus";
+import { SheetPortal } from "../sheet/sheet-portal";
+import { cn } from "../../lib/class-names";
+import { screenEdges } from "../../lib/screen-edges";
+import { fluidCollapse, fluidOvershoot } from "../../motion/transitions";
+import { fitPopover, type PopoverFit } from "./popover-fit";
+import { usePopover } from "./popover-root";
+
+export type PopoverOrigin = "top-left" | "top-right";
+
+export interface PopoverContentProps {
+	children: ReactNode;
+	className?: string;
+	/** Accessible name (used when there is no labelledBy). */
+	label?: string;
+	/** ID of a visible heading inside the content. */
+	labelledBy?: string;
+	/** Allow tapping outside to close. Escape always closes. */
+	dismissOnOutsidePress?: boolean;
+	/**
+	 * Where the content rests once expanded:
+	 * - "anchor" positions relative to the trigger (default)
+	 * - "center" floats in the middle of the viewport (modal)
+	 */
+	placement?: "anchor" | "center";
+	/**
+	 * Which corner the popover grows from when placement="anchor".
+	 * top-left: panel's left edge aligns to the trigger's left.
+	 * top-right: panel's right edge aligns to the trigger's right.
+	 * @default "top-left"
+	 */
+	origin?: PopoverOrigin;
+	/**
+	 * ARIA role for the panel. Use "menu" for action menus, "dialog"
+	 * (the default) for free-form content, "tooltip" for tips.
+	 * @default "dialog"
+	 */
+	role?: "dialog" | "menu" | "tooltip";
+}
+
+export function PopoverContent({
+	children,
+	className,
+	label,
+	labelledBy,
+	dismissOnOutsidePress = true,
+	placement = "anchor",
+	origin = "top-left",
+	role = "dialog",
+}: PopoverContentProps) {
+	const { state, send, triggerRef, contentId } = usePopover();
+	const panel = useRef<HTMLDivElement>(null);
+	const reducedMotion = useReducedMotion();
+	const [settled, setSettled] = useState(false);
+	const [material, setMaterial] = useState({ width: 0, height: 0, radius: 0 });
+	const [fit, setFit] = useState<PopoverFit>({
+		shiftX: 0,
+		shiftY: 0,
+		maxWidth: 0,
+		above: false,
+	});
+	const [reveal, setReveal] = useState<ReturnType<
+		typeof menuSurfaceReveal
+	> | null>(null);
+
+	useSheetFocus(panel, () => send("CLOSE"));
+
+	// Measure panel + trigger rects, compute the reveal (initial morph state)
+	// and the viewport fit (so the panel stays on screen as it resizes).
+	useLayoutEffect(() => {
+		const surface = panel.current;
+		const source = triggerRef.current;
+		if (!surface) return;
+
+		const refit = () => {
+			const panelRect = surface.getBoundingClientRect();
+			const radius =
+				Number.parseFloat(getComputedStyle(surface).borderTopLeftRadius) || 0;
+			setMaterial((prev) =>
+				prev.width === panelRect.width &&
+				prev.height === panelRect.height &&
+				prev.radius === radius
+					? prev
+					: { width: panelRect.width, height: panelRect.height, radius },
+			);
+
+			const visualViewport = window.visualViewport;
+			const offsetLeft = visualViewport?.offsetLeft ?? 0;
+			const offsetTop = visualViewport?.offsetTop ?? 0;
+			const edges = screenEdges();
+			const trigger = source?.getBoundingClientRect();
+			const next = fitPopover(
+				{
+					left: panelRect.left,
+					top: panelRect.top,
+					width: panelRect.width,
+					height: panelRect.height,
+				},
+				trigger ? { top: trigger.top, bottom: trigger.bottom } : undefined,
+				{
+					viewport: {
+						width: offsetLeft + (visualViewport?.width ?? window.innerWidth),
+						height: offsetTop + (visualViewport?.height ?? window.innerHeight),
+					},
+					edges: {
+						...edges,
+						left: offsetLeft + edges.left,
+						top: offsetTop + edges.top,
+					},
+				},
+				trigger ? -trigger.height : 6,
+				origin,
+			);
+			setFit((current) => {
+				if (
+					current.shiftX === next.shiftX &&
+					current.shiftY === next.shiftY &&
+					current.maxWidth === next.maxWidth &&
+					current.maxHeight === next.maxHeight &&
+					current.above === next.above
+				)
+					return current;
+				return next;
+			});
+
+			const sourceArg: MenuRect | undefined =
+				trigger && trigger.width > 0 && trigger.height > 0
+					? {
+							left: trigger.left,
+							top: trigger.top,
+							width: trigger.width,
+							height: trigger.height,
+						}
+					: undefined;
+			setReveal(
+				menuSurfaceReveal(sourceArg, {
+					left: panelRect.left,
+					top: panelRect.top,
+					width: next.maxWidth || panelRect.width,
+					height: next.maxHeight
+						? Math.min(next.maxHeight, panelRect.height)
+						: panelRect.height,
+					radius,
+				}),
+			);
+		};
+
+		refit();
+		let frame = 0;
+		const schedule = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(refit);
+		};
+		const observer = new ResizeObserver(schedule);
+		observer.observe(surface);
+		if (source) observer.observe(source);
+		const viewport = window.visualViewport;
+		viewport?.addEventListener("resize", schedule);
+		viewport?.addEventListener("scroll", schedule);
+		window.addEventListener("resize", schedule);
+		window.addEventListener("scroll", schedule, true);
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(frame);
+			viewport?.removeEventListener("resize", schedule);
+			viewport?.removeEventListener("scroll", schedule);
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("scroll", schedule, true);
+		};
+	}, [triggerRef, origin]);
+
+	// Conceal the trigger while the surface is morphing.
+	useLayoutEffect(() => {
+		const source = triggerRef.current;
+		if (!source) return;
+		const restore = concealMenuSource(source, false);
+		return () => {
+			restore();
+		};
+	}, [triggerRef]);
+
+	const anchored = placement === "anchor";
+
+	return (
+		<AnimatePresence>
+			{state !== "closed" && (
+				<SheetPortal>
+					{placement === "center" && (
+						<motion.div
+							aria-hidden="true"
+							className="fixed inset-0 z-[75] bg-black/30 backdrop-blur-md"
+							initial={{ opacity: 0 }}
+							animate={{ opacity: 1 }}
+							exit={{ opacity: 0 }}
+							transition={reducedMotion ? { duration: 0 } : { duration: 0.18 }}
+							onClick={dismissOnOutsidePress ? () => send("CLOSE") : undefined}
+						/>
+					)}
+					<motion.div
+						ref={panel}
+						id={contentId}
+						role={role}
+						aria-modal={placement === "center" || undefined}
+						aria-label={labelledBy ? undefined : label}
+						aria-labelledby={labelledBy}
+						tabIndex={-1}
+						data-state={state}
+						className={cn(
+							"relative isolate flex flex-col outline-none",
+							anchored
+								? cn(
+										"rounded-5xl absolute z-40",
+										"[&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]",
+									)
+								: "rounded-5xl fixed z-[76] max-h-[92%] w-full max-w-[560px] p-6",
+							settled && anchored ? "overflow-hidden" : undefined,
+							className,
+						)}
+						style={
+							anchored
+								? {
+										transformOrigin:
+											origin === "top-left"
+												? `0% ${fit.above ? "100%" : "0%"}`
+												: `100% ${fit.above ? "100%" : "0%"}`,
+										translate: `${fit.shiftX}px ${fit.shiftY}px`,
+										maxWidth: fit.maxWidth || undefined,
+										maxHeight: fit.maxHeight,
+										overflowY:
+											fit.maxHeight !== undefined && settled
+												? "auto"
+												: undefined,
+									}
+								: undefined
+						}
+						initial={
+							anchored
+								? { "--popover-content-opacity": reducedMotion ? 1 : 0 }
+								: { opacity: 0 }
+						}
+						animate={
+							anchored ? { "--popover-content-opacity": 1 } : { opacity: 1 }
+						}
+						exit={
+							anchored
+								? {
+										"--popover-content-opacity": 0,
+										transition: { duration: reducedMotion ? 0 : 0.06 },
+									}
+								: { opacity: 0 }
+						}
+						transition={
+							anchored
+								? reducedMotion
+									? { duration: 0 }
+									: { duration: 0.16, delay: 0.06 }
+								: reducedMotion
+									? { duration: 0 }
+									: { duration: 0.16, delay: 0.06 }
+						}
+					>
+						{/* The morphing glass surface — starts at the trigger's rect
+						    and grows to fill the panel, with the fluid overshoot bounce. */}
+						<motion.div
+							key={reveal ? "surface" : "measure"}
+							aria-hidden="true"
+							data-popover-surface=""
+							onAnimationComplete={() => {
+								if (state === "opening") send("OPENED");
+								if (state === "closing") send("CLOSED");
+								if (reveal) setSettled(true);
+							}}
+							className="glass-menu rounded-5xl pointer-events-none absolute top-0 left-0 -z-10"
+							style={{ width: "100%", height: "100%" }}
+							initial={reducedMotion || !reveal ? { opacity: 0 } : reveal}
+							animate={
+								material.width > 0
+									? {
+											x: 0,
+											y: 0,
+											width: material.width,
+											height: fit.maxHeight
+												? Math.min(material.height, fit.maxHeight)
+												: material.height,
+											opacity: 1,
+											borderRadius: material.radius,
+										}
+									: undefined
+							}
+							exit={
+								reducedMotion || !reveal
+									? { opacity: 0 }
+									: {
+											...menuSurfaceExit(reveal),
+											transition: fluidCollapse,
+										}
+							}
+							transition={
+								reducedMotion
+									? { duration: 0 }
+									: { ...fluidOvershoot, opacity: { duration: 0.16 } }
+							}
+						/>
+						{/* Content fades in after the surface arrives. */}
+						<motion.div
+							initial={reducedMotion ? false : { opacity: 0 }}
+							animate={reducedMotion ? undefined : { opacity: 1 }}
+							exit={
+								reducedMotion
+									? undefined
+									: { opacity: 0, transition: { duration: 0.12 } }
+							}
+							transition={
+								reducedMotion
+									? { duration: 0 }
+									: { duration: 0.16, delay: 0.06 }
+							}
+						>
+							{state !== "closing" && children}
+						</motion.div>
+					</motion.div>
+				</SheetPortal>
+			)}
+		</AnimatePresence>
+	);
+}

package/src/components/popover/popover-fit.ts

@@ -1,69 +1,74 @@
-import { type PlacementFrame, placeInViewport } from "../../lib/anchored-placement"
+import {
+	type PlacementFrame,
+	placeInViewport,
+} from "../../lib/anchored-placement";
 
 interface PanelRect {
-    left: number
-    top: number
-    width: number
-    height: number
+	left: number;
+	top: number;
+	width: number;
+	height: number;
 }
 
 interface AnchorRect {
-    top: number
-    bottom: number
+	top: number;
+	bottom: number;
 }
 
 export interface PopoverFit {
-    shiftX: number
-    shiftY: number
-    maxWidth: number
-    maxHeight?: number
-    above: boolean
+	shiftX: number;
+	shiftY: number;
+	maxWidth: number;
+	maxHeight?: number;
+	above: boolean;
 }
 
 /** Keep an absolutely positioned popover visible without scaling its contents. */
 export function fitPopover(
-    panel: PanelRect,
-    anchor: AnchorRect | undefined,
-    frame: Pick<PlacementFrame, "viewport" | "edges">,
-    gap = 6,
-    origin: "top-left" | "top-right" = "top-left"
+	panel: PanelRect,
+	anchor: AnchorRect | undefined,
+	frame: Pick<PlacementFrame, "viewport" | "edges">,
+	gap = 6,
+	origin: "top-left" | "top-right" = "top-left",
 ): PopoverFit {
-    const { viewport, edges } = frame
-    const topEdge = edges.top
-    const bottomEdge = viewport.height - edges.bottom
-    const availableHeight = Math.max(0, bottomEdge - topEdge)
-    const placement = placeInViewport(
-        {
-            ...frame,
-            anchor: {
-                left: panel.left,
-                top: anchor?.top ?? panel.top,
-                bottom: anchor?.bottom ?? panel.top,
-            },
-        },
-        panel.width,
-        panel.height,
-        gap
-    )
+	const { viewport, edges } = frame;
+	const topEdge = edges.top;
+	const bottomEdge = viewport.height - edges.bottom;
+	const availableHeight = Math.max(0, bottomEdge - topEdge);
+	const placement = placeInViewport(
+		{
+			...frame,
+			anchor: {
+				left: panel.left,
+				top: anchor?.top ?? panel.top,
+				bottom: anchor?.bottom ?? panel.top,
+			},
+		},
+		panel.width,
+		panel.height,
+		gap,
+	);
 
-    const above = Boolean(anchor && panel.top + panel.height > bottomEdge && placement.above)
-    const aboveHeight = anchor ? Math.max(0, anchor.top - topEdge - gap) : 0
-    const visibleHeight = above
-        ? Math.min(panel.height, aboveHeight)
-        : Math.min(panel.height, availableHeight)
-    const desiredTop = above
-        ? (anchor?.top ?? panel.top) - gap - visibleHeight
-        : Math.max(topEdge, Math.min(panel.top, bottomEdge - visibleHeight))
-    const heightRoom = above ? aboveHeight : Math.max(0, bottomEdge - desiredTop)
+	const above = Boolean(
+		anchor && panel.top + panel.height > bottomEdge && placement.above,
+	);
+	const aboveHeight = anchor ? Math.max(0, anchor.top - topEdge - gap) : 0;
+	const visibleHeight = above
+		? Math.min(panel.height, aboveHeight)
+		: Math.min(panel.height, availableHeight);
+	const desiredTop = above
+		? (anchor?.top ?? panel.top) - gap - visibleHeight
+		: Math.max(topEdge, Math.min(panel.top, bottomEdge - visibleHeight));
+	const heightRoom = above ? aboveHeight : Math.max(0, bottomEdge - desiredTop);
 
-    return {
-        shiftX:
-            placement.left -
-            panel.left -
-            (origin === "top-right" ? panel.width - placement.width : 0),
-        shiftY: desiredTop - panel.top,
-        maxWidth: Math.max(0, viewport.width - edges.left - edges.right),
-        maxHeight: panel.height > heightRoom ? heightRoom : undefined,
-        above,
-    }
+	return {
+		shiftX:
+			placement.left -
+			panel.left -
+			(origin === "top-right" ? panel.width - placement.width : 0),
+		shiftY: desiredTop - panel.top,
+		maxWidth: Math.max(0, viewport.width - edges.left - edges.right),
+		maxHeight: panel.height > heightRoom ? heightRoom : undefined,
+		above,
+	};
 }

package/src/components/popover/popover-root.tsx

@@ -0,0 +1,97 @@
+import {
+	type ReactNode,
+	useEffect,
+	useId,
+	useReducer,
+	useRef,
+	type RefObject,
+} from "react";
+import { createContext, useContext } from "react";
+import {
+	popoverMachine,
+	type PopoverContextValue,
+	type PopoverEvent,
+	type PopoverState,
+} from "../../machines/popover.machine";
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+export function usePopover(): PopoverContextValue {
+	const ctx = useContext(PopoverContext);
+	if (!ctx) throw new Error("Popover parts need a <Popover.Root> parent");
+	return ctx;
+}
+
+export interface PopoverRootProps {
+	children: ReactNode;
+	/**
+	 * Start open (uncontrolled) or set the initial state.
+	 * Ignored when `open` is provided.
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * Controlled open state. When provided, the popover is driven by this
+	 * prop: setting it to true opens, false closes. The internal machine
+	 * still runs the open/close transitions so the morph can play.
+	 */
+	open?: boolean;
+	/** Called when the popover finishes opening or closing. */
+	onOpenChange?: (open: boolean) => void;
+}
+
+export function PopoverRoot({
+	children,
+	defaultOpen = false,
+	open,
+	onOpenChange,
+}: PopoverRootProps) {
+	const [state, dispatch] = useReducer(
+		popoverMachine,
+		defaultOpen ? "opening" : ("closed" satisfies PopoverState),
+	);
+	const triggerRef = useRef<HTMLElement | null>(null);
+	const contentId = useId();
+	const surfaceId = useId();
+	const onOpenChangeRef = useRef(onOpenChange);
+
+	// Keep the latest callback without re-rendering the tree.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	onOpenChangeRef.current = onOpenChange;
+
+	const send = (event: PopoverEvent) => {
+		const next = popoverMachine(state, event);
+		if (next !== state) {
+			dispatch(event);
+			// Fire onOpenChange only when fully open or fully closed — not
+			// during transitions. This lets the consumer close the popover
+			// (set open=false) and have it animate out, rather than unmounting.
+			if (next === "open") onOpenChangeRef.current?.(true);
+			if (next === "closed") onOpenChangeRef.current?.(false);
+		}
+	};
+
+	// Controlled mode: drive OPEN/CLOSE from the `open` prop. The machine
+	// still runs the morph transitions; we only nudge it when the desired
+	// presence differs from the current presence.
+	const present = state !== "closed";
+	useEffect(() => {
+		if (open === undefined) return;
+		if (open && !present) send("OPEN");
+		if (!open && present) send("CLOSE");
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [open]);
+
+	const isPresent = present;
+
+	return (
+		<PopoverContext
+			value={{ state, send, triggerRef, contentId, surfaceId, isPresent }}
+		>
+			{children}
+		</PopoverContext>
+	);
+}
+
+// Re-export the context type for consumers that need it.
+export type { PopoverContextValue };
+export type { RefObject };

package/src/components/popover/popover-trigger.tsx

@@ -0,0 +1,71 @@
+import { type ReactNode, cloneElement, isValidElement } from "react";
+import { usePopover } from "./popover-root";
+
+export type PopoverTriggerRenderProps = {
+	ref: (node: HTMLElement | null) => void;
+	"aria-haspopup": "dialog";
+	"aria-expanded": boolean;
+	"aria-controls": string | undefined;
+	onClick: () => void;
+	onKeyDown: (event: React.KeyboardEvent) => void;
+};
+
+export interface PopoverTriggerProps {
+	/** The trigger content when using render prop. */
+	children?: ReactNode;
+	/**
+	 * Render prop: receives the trigger props (ref, aria, onClick) and
+	 * returns the trigger element. This prevents ref-passing conflicts
+	 * when multiple triggers exist — borrowed from Base UI.
+	 *
+	 * If you pass a single element as children instead, it will be
+	 * cloned with the trigger props merged in.
+	 */
+	render?: (props: PopoverTriggerRenderProps) => ReactNode;
+}
+
+export function PopoverTrigger({ children, render }: PopoverTriggerProps) {
+	const { state, send, triggerRef, contentId } = usePopover();
+
+	const triggerProps: PopoverTriggerRenderProps = {
+		ref: (node) => {
+			triggerRef.current = node;
+		},
+		"aria-haspopup": "dialog",
+		"aria-expanded": state === "open" || state === "opening",
+		"aria-controls": state !== "closed" ? contentId : undefined,
+		onClick: () => send("TOGGLE"),
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				send("TOGGLE");
+			}
+		},
+	};
+
+	if (render) {
+		return render(triggerProps);
+	}
+
+	// Clone a single child element with the trigger props merged.
+	if (isValidElement(children)) {
+		const child = children as React.ReactElement<Record<string, unknown>>;
+		return cloneElement(child, {
+			ref: (node: HTMLElement | null) => {
+				triggerRef.current = node;
+			},
+			"aria-haspopup": "dialog",
+			"aria-expanded": state === "open" || state === "opening",
+			"aria-controls": state !== "closed" ? contentId : undefined,
+			onClick: () => send("TOGGLE"),
+			onKeyDown: (event: React.KeyboardEvent) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					send("TOGGLE");
+				}
+			},
+		});
+	}
+
+	return null;
+}