11import React , { useEffect } from 'react' ;
22import { cn } from '@/lib/utils' ;
3- import { SimpleDialogContext } from './SimpleDialogContext ' ;
3+ import { SimpleDialogContext } from './DialogContext ' ;
44
55interface SimpleDialogProps {
66 isOpen ?: boolean ;
@@ -34,148 +34,169 @@ interface SimpleDialogDescriptionProps {
3434 className ?: string ;
3535}
3636
37- const SimpleDialogPortal : React . FC < { children : React . ReactNode } > = ( { children } ) => {
37+ const SimpleDialogPortal : React . FC < { children : React . ReactNode } > = ( {
38+ children,
39+ } ) => {
3840 return < > { children } </ > ;
3941} ;
4042
41- const SimpleDialogOverlay : React . FC < { className ?: string ; onClick ?: ( ) => void } > = ( {
42- className,
43- onClick
44- } ) => {
43+ const SimpleDialogOverlay : React . FC < {
44+ className ?: string ;
45+ onClick ?: ( ) => void ;
46+ } > = ( { className , onClick } ) => {
4547 return (
46- < div
47- className = { cn (
48- 'fixed inset-0 z-50 bg-black/80' ,
49- className
50- ) }
48+ < div
49+ className = { cn ( 'fixed inset-0 z-50 bg-black/80' , className ) }
5150 onClick = { onClick }
5251 />
5352 ) ;
5453} ;
5554
56- const SimpleDialogContent = React . forwardRef < HTMLDivElement , SimpleDialogContentProps > (
57- ( { className, children, headerTitle, onOpenAutoFocus, ...props } , ref ) => {
58- // Always define the useEffect, but make its behavior conditional inside
59- useEffect ( ( ) => {
60- if ( onOpenAutoFocus ) {
61- const handler = ( e : Event ) => {
62- onOpenAutoFocus ( e ) ;
63- } ;
64- document . addEventListener ( 'focus' , handler , { once : true } ) ;
65- return ( ) => document . removeEventListener ( 'focus' , handler ) ;
66- }
67- // Return empty cleanup function when onOpenAutoFocus is not provided
68- return ( ) => { } ;
69- } , [ onOpenAutoFocus ] ) ;
70-
71- // Stop click propagation to prevent closing the dialog when clicking content
72- const handleContentClick = ( e : React . MouseEvent ) => {
73- e . stopPropagation ( ) ;
74- } ;
55+ const SimpleDialogContent = React . forwardRef <
56+ HTMLDivElement ,
57+ SimpleDialogContentProps
58+ > ( ( { className, children, headerTitle, onOpenAutoFocus, ...props } , ref ) => {
59+ // Always define the useEffect, but make its behavior conditional inside
60+ useEffect ( ( ) => {
61+ if ( onOpenAutoFocus ) {
62+ const handler = ( e : Event ) => {
63+ onOpenAutoFocus ( e ) ;
64+ } ;
65+ document . addEventListener ( 'focus' , handler , { once : true } ) ;
66+ return ( ) => document . removeEventListener ( 'focus' , handler ) ;
67+ }
68+ // Return empty cleanup function when onOpenAutoFocus is not provided
69+ return ( ) => { } ;
70+ } , [ onOpenAutoFocus ] ) ;
71+
72+ // Stop click propagation to prevent closing the dialog when clicking content
73+ const handleContentClick = ( e : React . MouseEvent ) => {
74+ e . stopPropagation ( ) ;
75+ } ;
7576
76- return (
77- < div
78- ref = { ref }
79- className = { cn (
80- 'fixed left-[50%] top-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border-0 bg-background p-0 shadow-lg duration-200' ,
81- 'max-w-[95vw] max-h-[90vh] sm:max-w-lg rounded-lg overflow-hidden' ,
82- className
83- ) }
84- onClick = { handleContentClick }
85- { ...props }
86- >
87- { /* If there's a header title, add it as a styled header */ }
88- { headerTitle && (
89- < div className = "flex items-center justify-between bg-brand-pink p-2 sm:p-4 flex-shrink-0" >
90- < h2 className = "text-base sm:text-lg font-semibold text-white" > { headerTitle } </ h2 >
91- </ div >
92- ) }
93- { /* Main content with scroll capability */ }
94- < div className = "overflow-y-auto flex-grow" >
95- { children }
77+ return (
78+ < div
79+ ref = { ref }
80+ className = { cn (
81+ 'fixed left-[50%] top-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border-0 bg-background p-0 shadow-lg duration-200' ,
82+ 'max-w-[95vw] max-h-[90vh] sm:max-w-lg rounded-lg overflow-hidden' ,
83+ className
84+ ) }
85+ onClick = { handleContentClick }
86+ { ...props }
87+ >
88+ { /* If there's a header title, add it as a styled header */ }
89+ { headerTitle && (
90+ < div className = 'flex items-center justify-between bg-brand-pink p-2 sm:p-4 flex-shrink-0' >
91+ < h2 className = 'text-base sm:text-lg font-semibold text-white' >
92+ { headerTitle }
93+ </ h2 >
9694 </ div >
97- </ div >
98- ) ;
99- }
100- ) ;
95+ ) }
96+ { /* Main content with scroll capability */ }
97+ < div className = 'overflow-y-auto flex-grow' > { children } </ div >
98+ </ div >
99+ ) ;
100+ } ) ;
101101SimpleDialogContent . displayName = 'SimpleDialogContent' ;
102102
103- const SimpleDialogClose : React . FC < { children : React . ReactNode ; className ?: string ; asChild ?: boolean } > = ( {
104- children,
105- className,
106- } ) => {
107- return (
108- < button className = { cn ( '' , className ) } >
109- { children }
110- </ button >
111- ) ;
103+ const SimpleDialogClose : React . FC < {
104+ children : React . ReactNode ;
105+ className ?: string ;
106+ asChild ?: boolean ;
107+ } > = ( { children, className } ) => {
108+ return < button className = { cn ( '' , className ) } > { children } </ button > ;
112109} ;
113110
114- const SimpleDialogTitle : React . FC < SimpleDialogTitleProps > = ( { children, className } ) => {
111+ const SimpleDialogTitle : React . FC < SimpleDialogTitleProps > = ( {
112+ children,
113+ className,
114+ } ) => {
115115 return (
116- < h2 className = { cn ( 'text-lg font-semibold leading-none tracking-tight' , className ) } >
116+ < h2
117+ className = { cn (
118+ 'text-lg font-semibold leading-none tracking-tight' ,
119+ className
120+ ) }
121+ >
117122 { children }
118123 </ h2 >
119124 ) ;
120125} ;
121126
122- const SimpleDialogDescription : React . FC < SimpleDialogDescriptionProps > = ( { children, className } ) => {
127+ const SimpleDialogDescription : React . FC < SimpleDialogDescriptionProps > = ( {
128+ children,
129+ className,
130+ } ) => {
123131 return (
124- < p className = { cn ( 'text-xs sm:text-sm text-muted-foreground mt-1 mb-2 sm:mb-3' , className ) } >
132+ < p
133+ className = { cn (
134+ 'text-xs sm:text-sm text-muted-foreground mt-1 mb-2 sm:mb-3' ,
135+ className
136+ ) }
137+ >
125138 { children }
126139 </ p >
127140 ) ;
128141} ;
129142
130143// Context is now imported from separate file
131144
132- const SimpleDialogTrigger : React . FC < SimpleDialogTriggerProps > = ( { children } ) => {
145+ const SimpleDialogTrigger : React . FC < SimpleDialogTriggerProps > = ( {
146+ children,
147+ } ) => {
133148 // Get the dialog context to control the dialog's open state
134149 const { onOpenChange } = React . useContext ( SimpleDialogContext ) ;
135-
150+
136151 // Create a clickable wrapper that opens the dialog
137152 const handleClick = ( e : React . MouseEvent ) => {
138153 e . preventDefault ( ) ;
139154 console . log ( 'SimpleDialogTrigger: Opening dialog' ) ;
140155 onOpenChange ( true ) ;
141156 } ;
142-
157+
143158 // If asChild is true, we'd clone the child element and add an onClick handler
144159 // For simplicity, we'll just wrap the children in a div with an onClick
145160 return (
146- < div onClick = { handleClick } style = { { display : 'inline-block' , cursor : 'pointer' } } >
161+ < div
162+ onClick = { handleClick }
163+ style = { { display : 'inline-block' , cursor : 'pointer' } }
164+ >
147165 { children }
148166 </ div >
149167 ) ;
150168} ;
151169
152- const SimpleDialog : React . FC < SimpleDialogProps > = ( {
153- isOpen,
170+ const SimpleDialog : React . FC < SimpleDialogProps > = ( {
171+ isOpen,
154172 open,
155- onOpenChange,
156- children,
157- className
173+ onOpenChange,
174+ children,
175+ className,
158176} ) => {
159177 // Support both isOpen and open props for compatibility
160- const isDialogOpen = open !== undefined ? open : isOpen !== undefined ? isOpen : false ;
161-
178+ const isDialogOpen =
179+ open !== undefined ? open : isOpen !== undefined ? isOpen : false ;
180+
162181 // Handle ESC key press
163182 useEffect ( ( ) => {
164183 if ( ! isDialogOpen ) return ;
165-
184+
166185 const onKeyDown = ( e : KeyboardEvent ) => {
167186 if ( e . key === 'Escape' ) {
168187 onOpenChange ( false ) ;
169188 }
170189 } ;
171-
190+
172191 window . addEventListener ( 'keydown' , onKeyDown ) ;
173192 return ( ) => window . removeEventListener ( 'keydown' , onKeyDown ) ;
174193 } , [ isDialogOpen , onOpenChange ] ) ;
175194
176195 // Provide the dialog state to all children via context
177196 return (
178- < SimpleDialogContext . Provider value = { { isOpen : isDialogOpen , onOpenChange } } >
197+ < SimpleDialogContext . Provider
198+ value = { { isOpen : isDialogOpen , onOpenChange } }
199+ >
179200 { isDialogOpen ? (
180201 < div className = { cn ( 'fixed inset-0 z-50' , className ) } >
181202 < SimpleDialogOverlay onClick = { ( ) => onOpenChange ( false ) } />
@@ -190,10 +211,10 @@ const SimpleDialog: React.FC<SimpleDialogProps> = ({
190211} ;
191212
192213// For compatibility with existing code
193- const SimpleDialogHeader : React . FC < { className ?: string ; children : React . ReactNode } > = ( {
194- className,
195- children
196- } ) => (
214+ const SimpleDialogHeader : React . FC < {
215+ className ?: string ;
216+ children : React . ReactNode ;
217+ } > = ( { className , children } ) => (
197218 < div
198219 className = { cn (
199220 'flex flex-col space-y-1.5 text-center sm:text-left' ,
@@ -204,10 +225,10 @@ const SimpleDialogHeader: React.FC<{ className?: string; children: React.ReactNo
204225 </ div >
205226) ;
206227
207- const SimpleDialogFooter : React . FC < { className ?: string ; children : React . ReactNode } > = ( {
208- className,
209- children
210- } ) => (
228+ const SimpleDialogFooter : React . FC < {
229+ className ?: string ;
230+ children : React . ReactNode ;
231+ } > = ( { className , children } ) => (
211232 < div
212233 className = { cn (
213234 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2' ,
@@ -228,5 +249,5 @@ export {
228249 SimpleDialogDescription ,
229250 SimpleDialogClose ,
230251 SimpleDialogOverlay ,
231- SimpleDialogPortal
232- } ;
252+ SimpleDialogPortal ,
253+ } ;
0 commit comments