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,47 +1,88 @@
 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}>
-      <div className={rootClassName}>
+      <OverlayContainer>
-        <div className="absolute inset-0 overflow-hidden">
+        <FocusScope contain restoreFocus autoFocus>
-          <Transition.Child
+          <div className={rootClassName}>
-            enter="transition-opacity ease-linear duration-300"
+            <div className="absolute inset-0 overflow-hidden">
-            enterFrom="opacity-0"
+              <Transition.Child
-            enterTo="opacity-100"
+                enter="transition-opacity ease-linear duration-300"
-            leave="transition-opacity ease-linear duration-300"
+                enterFrom="opacity-0"
-            leaveFrom="opacity-100"
+                enterTo="opacity-100"
-            leaveTo="opacity-0"
+                leave="transition-opacity ease-linear duration-300"
-          >
+                leaveFrom="opacity-100"
-            <div className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" />
+                leaveTo="opacity-0"
-          </Transition.Child>
+              >
-          <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+                <div
-            <Transition.Child
+                  className="absolute inset-0 bg-black bg-opacity-25 transition-opacity"
-              enter="transition ease-in-out duration-300 transform"
+                  // Close the sidebar when clicking on the backdrop
-              enterFrom="translate-x-full"
+                  onClick={close}
-              enterTo="translate-x-0"
+                />
-              leave="transition ease-in-out duration-300 transform"
+              </Transition.Child>
-              leaveFrom="translate-x-0"
+              <section
-              leaveTo="translate-x-full"
+                className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
-            >
+                {...dialogProps}
-              <div className="h-full w-screen max-w-2xl">
+                {...overlayProps}
-                <div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
+                {...modalProps}
-                  {children}
+                ref={ref}
-                </div>
+              >
-              </div>
+                <Transition.Child
-            </Transition.Child>
+                  enter="transition ease-in-out duration-300 transform"
-          </section>
+                  enterFrom="translate-x-full"
-        </div>
+                  enterTo="translate-x-0"
-      </div>
+                  leave="transition ease-in-out duration-300 transform"
+                  leaveFrom="translate-x-0"
+                  leaveTo="translate-x-full"
+                >
+                  <div className="h-full w-screen max-w-2xl">
+                    <div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
+                      {children}
+                    </div>
+                  </div>
+                </Transition.Child>
+              </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 (
-    <Layout>
+    <SSRProvider>
-      <Component {...pageProps} />
+      <OverlayProvider>
-    </Layout>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </OverlayProvider>
+    </SSRProvider>
   )
 }