Morphing Dialog

1'use client';
2 
3import React, {
4  useCallback,
5  useContext,
6  useEffect,
7  useId,
8  useMemo,
9  useRef,
10  useState,
11} from 'react';
12import {
13  motion,
14  AnimatePresence,
15  MotionConfig,
16  Transition,
17  Variant,
18} from 'motion/react';
19import { createPortal } from 'react-dom';
20import { cn } from '@/lib/utils';
21import { XIcon } from 'lucide-react';
22import useClickOutside from '@/hooks/useClickOutside';
23 
24export type MorphingDialogContextType = {
25  isOpen: boolean;
26  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
27  uniqueId: string;
28  triggerRef: React.RefObject<HTMLButtonElement | null>;
29};
30 
31const MorphingDialogContext =
32  React.createContext<MorphingDialogContextType | null>(null);
33 
34function useMorphingDialog() {
35  const context = useContext(MorphingDialogContext);
36  if (!context) {
37    throw new Error(
38      'useMorphingDialog must be used within a MorphingDialogProvider'
39    );
40  }
41  return context;
42}
43 
44export type MorphingDialogProviderProps = {
45  children: React.ReactNode;
46  transition?: Transition;
47};
48 
49function MorphingDialogProvider({
50  children,
51  transition,
52}: MorphingDialogProviderProps) {
53  const [isOpen, setIsOpen] = useState(false);
54  const uniqueId = useId();
55  const triggerRef = useRef<HTMLButtonElement>(null!);
56 
57  const contextValue = useMemo(
58    () => ({
59      isOpen,
60      setIsOpen,
61      uniqueId,
62      triggerRef,
63    }),
64    [isOpen, uniqueId]
65  );
66 
67  return (
68    <MorphingDialogContext.Provider value={contextValue}>
69      <MotionConfig transition={transition}>{children}</MotionConfig>
70    </MorphingDialogContext.Provider>
71  );
72}
73 
74export type MorphingDialogProps = {
75  children: React.ReactNode;
76  transition?: Transition;
77};
78 
79function MorphingDialog({ children, transition }: MorphingDialogProps) {
80  return (
81    <MorphingDialogProvider>
82      <MotionConfig transition={transition}>{children}</MotionConfig>
83    </MorphingDialogProvider>
84  );
85}
86 
87export type MorphingDialogTriggerProps = {
88  children: React.ReactNode;
89  className?: string;
90  style?: React.CSSProperties;
91  triggerRef?: React.RefObject<HTMLButtonElement>;
92};
93 
94function MorphingDialogTrigger({
95  children,
96  className,
97  style,
98  triggerRef,
99}: MorphingDialogTriggerProps) {
100  const { setIsOpen, isOpen, uniqueId } = useMorphingDialog();
101 
102  const handleClick = useCallback(() => {
103    setIsOpen(!isOpen);
104  }, [isOpen, setIsOpen]);
105 
106  const handleKeyDown = useCallback(
107    (event: React.KeyboardEvent) => {
108      if (event.key === 'Enter' || event.key === ' ') {
109// … truncated