Popover Morph Popover

1"use client";
2// beui.dev/components/motion/popover
3 
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import {
6  cloneElement,
7  createContext,
8  isValidElement,
9  type ReactElement,
10  type ReactNode,
11  type Ref,
12  useCallback,
13  useContext,
14  useEffect,
15  useId,
16  useMemo,
17  useRef,
18  useState,
19} from "react";
20import { createPortal } from "react-dom";
21import { usePopoverPortalPosition } from "@/components/motion/popover-position";
22import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
23import { cn } from "@/lib/utils";
24 
25type Side = "top" | "bottom";
26type Align = "start" | "end";
27 
28type MorphContextValue = {
29  open: boolean;
30  setOpen: (open: boolean) => void;
31  toggle: () => void;
32  triggerId: string;
33  contentId: string;
34  triggerRef: React.MutableRefObject<HTMLElement | null>;
35  contentRef: React.MutableRefObject<HTMLDivElement | null>;
36};
37 
38const MorphContext = createContext<MorphContextValue | null>(null);
39 
40function useMorphContext(component: string) {
41  const ctx = useContext(MorphContext);
42  if (!ctx) throw new Error(`${component} must be used within <MorphPopover>`);
43  return ctx;
44}
45 
46export interface MorphPopoverProps {
47  children: ReactNode;
48  /** Controlled open state. */
49  open?: boolean;
50  /** Uncontrolled initial open state. */
51  defaultOpen?: boolean;
52  onOpenChange?: (open: boolean) => void;
53  className?: string;
54}
55 
56/**
57 * A popover whose panel morphs open from the trigger corner: it's laid out at
58 * full size but clipped to the corner nearest the trigger, then unclips as one
59 * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.
60 */
61export function MorphPopover({
62  children,
63  open: controlledOpen,
64  defaultOpen = false,
65  onOpenChange,
66  className,
67}: MorphPopoverProps) {
68  const baseId = useId();
69  const rootRef = useRef<HTMLDivElement>(null);
70  const triggerRef = useRef<HTMLElement | null>(null);
71  const contentRef = useRef<HTMLDivElement | null>(null);
72  const [internalOpen, setInternalOpen] = useState(defaultOpen);
73  const controlled = controlledOpen !== undefined;
74  const open = controlled ? controlledOpen : internalOpen;
75 
76  const setOpen = useCallback(
77    (next: boolean) => {
78      if (!controlled) setInternalOpen(next);
79      onOpenChange?.(next);
80    },
81    [controlled, onOpenChange],
82  );
83  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
84 
85  useEffect(() => {
86    if (!open) return;
87    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
88// … truncated