Morphing Popover

1'use client';
2 
3import {
4  useState,
5  useId,
6  useRef,
7  useEffect,
8  createContext,
9  useContext,
10  isValidElement,
11} from 'react';
12import {
13  AnimatePresence,
14  MotionConfig,
15  motion,
16  Transition,
17  Variants,
18} from 'motion/react';
19import useClickOutside from '@/hooks/useClickOutside';
20import { cn } from '@/lib/utils';
21 
22const TRANSITION = {
23  type: 'spring',
24  bounce: 0.1,
25  duration: 0.4,
26};
27 
28type MorphingPopoverContextValue = {
29  isOpen: boolean;
30  open: () => void;
31  close: () => void;
32  uniqueId: string;
33  variants?: Variants;
34};
35 
36const MorphingPopoverContext =
37  createContext<MorphingPopoverContextValue | null>(null);
38 
39function usePopoverLogic({
40  defaultOpen = false,
41  open: controlledOpen,
42  onOpenChange,
43}: {
44  defaultOpen?: boolean;
45  open?: boolean;
46  onOpenChange?: (open: boolean) => void;
47} = {}) {
48  const uniqueId = useId();
49  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
50 
51  const isOpen = controlledOpen ?? uncontrolledOpen;
52 
53  const open = () => {
54    if (controlledOpen === undefined) {
55      setUncontrolledOpen(true);
56    }
57    onOpenChange?.(true);
58  };
59 
60  const close = () => {
61    if (controlledOpen === undefined) {
62      setUncontrolledOpen(false);
63    }
64    onOpenChange?.(false);
65  };
66 
67  return { isOpen, open, close, uniqueId };
68}
69 
70export type MorphingPopoverProps = {
71  children: React.ReactNode;
72  transition?: Transition;
73  defaultOpen?: boolean;
74  open?: boolean;
75  onOpenChange?: (open: boolean) => void;
76  variants?: Variants;
77  className?: string;
78} & React.ComponentProps<'div'>;
79 
80function MorphingPopover({
81  children,
82  transition = TRANSITION,
83  defaultOpen,
84  open,
85  onOpenChange,
86  variants,
87  className,
88  ...props
89}: MorphingPopoverProps) {
90  const popoverLogic = usePopoverLogic({ defaultOpen, open, onOpenChange });
91 
92  return (
93    <MorphingPopoverContext.Provider value={{ ...popoverLogic, variants }}>
94      <MotionConfig transition={transition}>
95        <div
96          className={cn('relative flex items-center justify-center', className)}
97          key={popoverLogic.uniqueId}
98          {...props}
99        >
100          {children}
101        </div>
102      </MotionConfig>
103    </MorphingPopoverContext.Provider>
104  );
105}
106 
107export type MorphingPopoverTriggerProps = {
108  asChild?: boolean;
109  children: React.ReactNode;
110  className?: string;
111} & React.ComponentProps<typeof motion.button>;
112 
113function MorphingPopoverTrigger({
114  children,
115  className,
116  asChild = false,
117  ...props
118}: MorphingPopoverTriggerProps) {
119// … truncated