dialog-stack

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import { Portal } from "radix-ui";
5import type {
6  ButtonHTMLAttributes,
7  Dispatch,
8  HTMLAttributes,
9  MouseEvent,
10  MouseEventHandler,
11  ReactElement,
12  SetStateAction,
13} from "react";
14import {
15  Children,
16  cloneElement,
17  createContext,
18  useCallback,
19  useContext,
20  useEffect,
21  useState,
22} from "react";
23import { cn } from "@/lib/utils";
24 
25type DialogStackContextType = {
26  activeIndex: number;
27  setActiveIndex: Dispatch<SetStateAction<number>>;
28  totalDialogs: number;
29  setTotalDialogs: Dispatch<SetStateAction<number>>;
30  isOpen: boolean;
31  setIsOpen: Dispatch<SetStateAction<boolean>>;
32  clickable: boolean;
33};
34 
35const DialogStackContext = createContext<DialogStackContextType>({
36  activeIndex: 0,
37  setActiveIndex: () => {},
38  totalDialogs: 0,
39  setTotalDialogs: () => {},
40  isOpen: false,
41  setIsOpen: () => {},
42  clickable: false,
43});
44 
45type DialogStackChildProps = {
46  index?: number;
47};
48 
49export type DialogStackProps = HTMLAttributes<HTMLDivElement> & {
50  open?: boolean;
51  clickable?: boolean;
52  onOpenChange?: (open: boolean) => void;
53  defaultOpen?: boolean;
54};
55 
56export const DialogStack = ({
57  children,
58  className,
59  open,
60  defaultOpen = false,
61  onOpenChange,
62  clickable = false,
63  ...props
64}: DialogStackProps) => {
65  const [activeIndex, setActiveIndex] = useState(0);
66  const [isOpen, setIsOpen] = useControllableState({
67    defaultProp: defaultOpen,
68    prop: open,
69    onChange: onOpenChange,
70  });
71 
72  useEffect(() => {
73    if (onOpenChange && isOpen !== undefined) {
74      onOpenChange(isOpen);
75    }
76  }, [isOpen, onOpenChange]);
77 
78  return (
79    <DialogStackContext.Provider
80      value={{
81        activeIndex,
82        setActiveIndex,
83        totalDialogs: 0,
84        setTotalDialogs: () => {},
85        isOpen: isOpen ?? false,
86        setIsOpen: (value) => setIsOpen(Boolean(value)),
87        clickable,
88      }}
89    >
90      <div className={className} {...props}>
91        {children}
92      </div>
93    </DialogStackContext.Provider>
94  );
95};
96 
97export type DialogStackTriggerProps =
98  ButtonHTMLAttributes<HTMLButtonElement> & {
99    asChild?: boolean;
100  };
101 
102export const DialogStackTrigger = ({
103  children,
104  className,
105  onClick,
106  asChild,
107  ...props
108}: DialogStackTriggerProps) => {
109  const context = useContext(DialogStackContext);
110 
111  if (!context) {
112    throw new Error("DialogStackTrigger must be used within a DialogStack");
113  }
114 
115// … truncated