import { lazy , Suspense , useRef } from 'react' ; import { useOverlay , usePreventScroll , useModal , OverlayContainer } from '@react-aria/overlays' ; import { useDialog } from '@react-aria/dialog' ; import { FocusScope } from '@react-aria/focus' ; import { styled } from '~/theme/stitches.config' ; import { motion } from 'framer-motion' ; import { BackdropCss } from '~/components/ui/Backdrop' ; import { CircularProgress } from '~/components/ui/CircularProgress' ; import type { OverlayProps } from '@react-aria/overlays' ; const BuildDownloader = lazy ( ( ) => import ( './BuildDownloader' ) ) ; type AriaDialogProps = Parameters < typeof useDialog > [ 0 ] ; interface ModalProps extends OverlayProps , AriaDialogProps { title : string ; } const Modal = styled ( 'div' , { background : '$body' , padding : '$gutter' , borderRadius : '$rounded' , '&:focus' : { outline : 'none' , } , height : '100%' , width : '100%' , maxHeight : '100vh' , overflow : 'auto' , '-webkit-overflow-scrolling' : 'touch' , overscrollBehavior : 'contain' , '@sm' : { background : '$neutral1' , height : 'auto' , width : 'auto' , boxShadow : '$2xl' , } , } ) ; const ModalDialog = ( props ) => { let { children } = props ; let ref = useRef < HTMLDivElement > ( null ) ; let { overlayProps } = useOverlay ( props , ref ) ; usePreventScroll ( ) ; let { modalProps } = useModal ( ) ; let { dialogProps } = useDialog ( props , ref ) ; return ( < motion . div className = { BackdropCss ( { open : true } ) } style = { { backgroundColor : 'rgba(0,0,0,.01)' } } animate = { { backgroundColor : 'rgba(0,0,0,.75)' } } > < FocusScope contain restoreFocus > < Modal ref = { ref } { ... overlayProps } { ... dialogProps } { ... modalProps } > { children } < /Modal> < /FocusScope> < /motion.div>); } ; interface BuildDownloaderDialogProps { setIsDownloading : ( state : boolean ) => void ; } export const BuildDownloaderDialog = ( { setIsDownloading } ) => ( < OverlayContainer > < ModalDialog title = "Generating ZIP bundle. Please wait…" isOpen isDismissable onClose = { ( ) => { setIsDownloading ( false ) ; } } > < Suspense fallback = { < CircularProgress size = { 36 } />}> < BuildDownloader setIsDownloading = { setIsDownloading } / > < /Suspense> < /ModalDialog> < /OverlayContainer>);