Correct UI State

components/ui/Modal/Modal.tsx

@@ -2,21 +2,21 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
-
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose?: () => void
 }
 
 const Modal: FC<Props> = ({
   className,
   children,
-  show = true,
-  close,
+  open = false,
+  onClose,
   ...props
 }) => {
   const rootClassName = cn(s.root, className)
@@ -26,19 +26,32 @@ const Modal: FC<Props> = ({
   let { dialogProps } = useDialog(props, ref)
 
   return (
-    <div className={rootClassName}>
-      <FocusScope contain restoreFocus autoFocus>
-        <div
-          {...overlayProps}
-          {...dialogProps}
-          {...modalProps}
-          ref={ref}
-          className={s.modal}
-        >
-          {children}
+    <Transition show={open}>
+      <OverlayContainer>
+        <div className={rootClassName} onClick={onClose}>
+          <FocusScope contain restoreFocus autoFocus>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+                className={s.modal}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </FocusScope>
         </div>
-      </FocusScope>
-    </div>
+      </OverlayContainer>
+    </Transition>
   )
 }
 

components/ui/context.tsx

@@ -5,11 +5,13 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
+  displayModal: boolean
 }
 
 const initialState = {
   displaySidebar: false,
   displayDropdown: false,
+  displayModal: false,
 }
 
 type Action =
@@ -25,6 +27,12 @@ type Action =
   | {
       type: 'CLOSE_DROPDOWN'
     }
+  | {
+      type: 'OPEN_MODAL'
+    }
+  | {
+      type: 'CLOSE_MODAL'
+    }
 
 export const UIContext = React.createContext<State | any>(initialState)
 
@@ -56,6 +64,18 @@ function uiReducer(state: State, action: Action) {
         displayDropdown: false,
       }
     }
+    case 'OPEN_MODAL': {
+      return {
+        ...state,
+        displayModal: true,
+      }
+    }
+    case 'CLOSE_MODAL': {
+      return {
+        ...state,
+        displayModal: false,
+      }
+    }
   }
 }
 
@@ -68,14 +88,21 @@ export const UIProvider: FC = (props) => {
   const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
   const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
 
+  const openModal = () => dispatch({ type: 'OPEN_MODAL' })
+  const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
+
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
     openDropdown,
     closeDropdown,
+    openModal,
+    closeModal,
   }
 
+  console.log('state', state)
+
   return <UIContext.Provider value={value} {...props} />
 }