react-aria modal sidebar

components/core/Layout/Layout.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const CoreLayout: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
-  const { displaySidebar } = useUI()
+  const { displaySidebar, closeSidebar } = useUI()
 
   return (
     <div className={rootClassName}>
@@ -28,7 +28,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
         <main className={s.main}>{children}</main>
       </Container>
       <Footer />
-      <Sidebar show={displaySidebar}>
+      <Sidebar show={displaySidebar} close={closeSidebar}>
         <CartSidebarView />
       </Sidebar>
     </div>

components/ui/Sidebar/Sidebar.tsx

@@ -1,17 +1,46 @@
 import cn from 'classnames'
-import { FC } from 'react'
+import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { useDialog } from '@react-aria/dialog'
+import { FocusScope } from '@react-aria/focus'
+
 interface Props {
   className?: string
   children?: any
   show?: boolean
+  close: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, show = true }) => {
+const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
   const rootClassName = cn(s.root, className)
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { modalProps } = useModal()
+  const { overlayProps } = useOverlay(
+    {
+      isOpen: show,
+      onClose: close,
+      isDismissable: true,
+    },
+    ref
+  )
+  const { dialogProps } = useDialog({}, ref)
+
+  usePreventScroll({
+    isDisabled: !show,
+  })
+
   return (
     <Transition show={show}>
+      <OverlayContainer>
+        <FocusScope contain restoreFocus autoFocus>
           <div className={rootClassName}>
             <div className="absolute inset-0 overflow-hidden">
               <Transition.Child
@@ -22,9 +51,19 @@ const Sidebar: FC<Props> = ({ className, children, show = true }) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-            <div className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" />
+                <div
+                  className="absolute inset-0 bg-black bg-opacity-25 transition-opacity"
+                  // Close the sidebar when clicking on the backdrop
+                  onClick={close}
+                />
               </Transition.Child>
-          <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+              <section
+                className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
+                {...dialogProps}
+                {...overlayProps}
+                {...modalProps}
+                ref={ref}
+              >
                 <Transition.Child
                   enter="transition ease-in-out duration-300 transform"
                   enterFrom="translate-x-full"
@@ -42,6 +81,8 @@ const Sidebar: FC<Props> = ({ className, children, show = true }) => {
               </section>
             </div>
           </div>
+        </FocusScope>
+      </OverlayContainer>
     </Transition>
   )
 }

pages/_app.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 import '@assets/global.css'
 import '@assets/tailwind.css'
 import '@assets/utils.css'
@@ -10,8 +11,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop
 
   return (
+    <SSRProvider>
+      <OverlayProvider>
         <Layout>
           <Component {...pageProps} />
         </Layout>
+      </OverlayProvider>
+    </SSRProvider>
   )
 }