@@ -12,19 +12,22 @@ import * as suspense from '#/components/Suspense'
1212
1313import * as mergeRefs from '#/utilities/mergeRefs'
1414
15- import { DialogDismiss } from '#/components/AriaComponents'
15+ import { DialogDismiss , ResetButtonGroupContext } from '#/components/AriaComponents'
1616import { useEventCallback } from '#/hooks/eventCallbackHooks'
1717import { useMeasure } from '#/hooks/measureHooks'
1818import { LayoutGroup , motion , type Spring } from '#/utilities/motion'
1919import type { VariantProps } from '#/utilities/tailwindVariants'
2020import { tv } from '#/utilities/tailwindVariants'
21+ import { unsafeWriteValue } from '#/utilities/write'
22+ import { useRootContext } from '../../UIProviders'
2123import { Close } from './Close'
2224import * as dialogProvider from './DialogProvider'
2325import * as dialogStackProvider from './DialogStackProvider'
2426import { DialogTrigger } from './DialogTrigger'
2527import type * as types from './types'
2628import * as utlities from './utilities'
2729import { DIALOG_BACKGROUND } from './variants'
30+
2831// eslint-disable-next-line no-restricted-syntax
2932const MotionDialog = motion ( aria . Dialog )
3033
@@ -254,6 +257,8 @@ function DialogContent(props: DialogContentProps) {
254257 const scrollerRef = React . useRef < HTMLDivElement | null > ( null )
255258 const dialogId = aria . useId ( )
256259
260+ const { appRoot } = useRootContext ( )
261+
257262 const titleId = `${ dialogId }
258263 const padding = paddingRaw ?? ( type === 'modal' ? 'medium' : 'xlarge' )
259264 const isFullscreen = type === 'fullscreen'
@@ -297,6 +302,20 @@ function DialogContent(props: DialogContentProps) {
297302 }
298303 } , [ isFullscreen ] )
299304
305+ React . useEffect ( ( ) => {
306+ if ( isFullscreen && modalState . isOpen ) {
307+ unsafeWriteValue ( appRoot . style , 'scale' , '0.99' )
308+ unsafeWriteValue ( appRoot . style , 'filter' , 'blur(8px)' )
309+ unsafeWriteValue ( appRoot . style , 'willChange' , 'scale, filter' )
310+
311+ return ( ) => {
312+ unsafeWriteValue ( appRoot . style , 'scale' , '' )
313+ unsafeWriteValue ( appRoot . style , 'filter' , '' )
314+ unsafeWriteValue ( appRoot . style , 'willChange' , '' )
315+ }
316+ }
317+ } , [ isFullscreen , modalState , appRoot ] )
318+
300319 const styles = variants ( {
301320 className,
302321 type,
@@ -322,86 +341,88 @@ function DialogContent(props: DialogContentProps) {
322341 }
323342
324343 return (
325- < LayoutGroup >
326- < MotionDialog
327- layout
328- transition = { TRANSITION }
329- style = { { height : getDialogHeight ( ) } }
330- id = { dialogId }
331- onLayoutAnimationStart = { ( ) => {
332- if ( scrollerRef . current ) {
333- scrollerRef . current . style . overflowY = 'clip'
334- }
335- } }
336- onLayoutAnimationComplete = { ( ) => {
337- if ( scrollerRef . current ) {
338- scrollerRef . current . style . overflowY = ''
339- }
340- } }
341- ref = { ( ref : HTMLDivElement | null ) => {
342- mergeRefs . mergeRefs ( dialogRef , ( element ) => {
343- if ( element ) {
344- // This is a workaround for the `data-testid` attribute not being
345- // supported by the 'react-aria-components' library.
346- // We need to set the `data-testid` attribute on the dialog element
347- // so that we can use it in our tests.
348- // This is a temporary solution until we refactor the Dialog component
349- // to use `useDialog` hook from the 'react-aria-components' library.
350- // this will allow us to set the `data-testid` attribute on the dialog
351- element . dataset . testid = testId
344+ < ResetButtonGroupContext >
345+ < LayoutGroup >
346+ < MotionDialog
347+ layout
348+ transition = { TRANSITION }
349+ style = { { height : getDialogHeight ( ) } }
350+ id = { dialogId }
351+ onLayoutAnimationStart = { ( ) => {
352+ if ( scrollerRef . current ) {
353+ scrollerRef . current . style . overflowY = 'clip'
352354 }
353- } ) ( ref )
354- } }
355- className = { styles . base ( ) }
356- aria-labelledby = { titleId }
357- { ...ariaDialogProps }
358- >
359- { ( opts ) => (
360- < >
361- < motion . div layout className = "w-full" transition = { { duration : 0 } } >
362- < DialogHeader
363- closeButton = { closeButton }
364- title = { title }
365- titleId = { titleId }
366- scrollerRef = { scrollerRef }
367- fitContent = { fitContent }
368- hideCloseButton = { hideCloseButton }
369- padding = { padding }
370- rounded = { rounded }
371- size = { size }
372- type = { type }
373- headerDimensionsRef = { headerDimensionsRef }
374- close = { opts . close }
375- variants = { variants }
376- />
377- </ motion . div >
378-
379- < motion . div
380- layout
381- layoutScroll
382- className = { styles . scroller ( ) }
383- ref = { scrollerRef }
384- transition = { { duration : 0 } }
385- >
386- < DialogBody
387- close = { opts . close }
388- contentDimensionsRef = { contentDimensionsRef }
389- dialogId = { dialogId }
390- headerDimensionsRef = { headerDimensionsRef }
391- scrollerRef = { scrollerRef }
392- measurerWrapperClassName = { styles . measurerWrapper ( ) }
393- contentClassName = { styles . content ( ) }
394- type = { type }
355+ } }
356+ onLayoutAnimationComplete = { ( ) => {
357+ if ( scrollerRef . current ) {
358+ scrollerRef . current . style . overflowY = ''
359+ }
360+ } }
361+ ref = { ( ref : HTMLDivElement | null ) => {
362+ mergeRefs . mergeRefs ( dialogRef , ( element ) => {
363+ if ( element ) {
364+ // This is a workaround for the `data-testid` attribute not being
365+ // supported by the 'react-aria-components' library.
366+ // We need to set the `data-testid` attribute on the dialog element
367+ // so that we can use it in our tests.
368+ // This is a temporary solution until we refactor the Dialog component
369+ // to use `useDialog` hook from the 'react-aria-components' library.
370+ // this will allow us to set the `data-testid` attribute on the dialog
371+ element . dataset . testid = testId
372+ }
373+ } ) ( ref )
374+ } }
375+ className = { styles . base ( ) }
376+ aria-labelledby = { titleId }
377+ { ...ariaDialogProps }
378+ >
379+ { ( opts ) => (
380+ < >
381+ < motion . div layout className = "w-full" transition = { { duration : 0 } } >
382+ < DialogHeader
383+ closeButton = { closeButton }
384+ title = { title }
385+ titleId = { titleId }
386+ scrollerRef = { scrollerRef }
387+ fitContent = { fitContent }
388+ hideCloseButton = { hideCloseButton }
389+ padding = { padding }
390+ rounded = { rounded }
391+ size = { size }
392+ type = { type }
393+ headerDimensionsRef = { headerDimensionsRef }
394+ close = { opts . close }
395+ variants = { variants }
396+ />
397+ </ motion . div >
398+
399+ < motion . div
400+ layout
401+ layoutScroll
402+ className = { styles . scroller ( ) }
403+ ref = { scrollerRef }
404+ transition = { { duration : 0 } }
395405 >
396- { children }
397- </ DialogBody >
398- </ motion . div >
399- </ >
400- ) }
401- </ MotionDialog >
402-
403- < dialogStackProvider . DialogStackRegistrar id = { dialogId } type = { TYPE_TO_DIALOG_TYPE [ type ] } />
404- </ LayoutGroup >
406+ < DialogBody
407+ close = { opts . close }
408+ contentDimensionsRef = { contentDimensionsRef }
409+ dialogId = { dialogId }
410+ headerDimensionsRef = { headerDimensionsRef }
411+ scrollerRef = { scrollerRef }
412+ measurerWrapperClassName = { styles . measurerWrapper ( ) }
413+ contentClassName = { styles . content ( ) }
414+ type = { type }
415+ >
416+ { children }
417+ </ DialogBody >
418+ </ motion . div >
419+ </ >
420+ ) }
421+ </ MotionDialog >
422+
423+ < dialogStackProvider . DialogStackRegistrar id = { dialogId } type = { TYPE_TO_DIALOG_TYPE [ type ] } />
424+ </ LayoutGroup >
425+ </ ResetButtonGroupContext >
405426 )
406427}
407428
0 commit comments