Removing useDialog, cause rerender

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -10,6 +10,7 @@ import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
 
 const CartSidebarView: FC = () => {
+  const { closeSidebar } = useUI()
   const { data, isEmpty } = useCart()
   const { price: subTotal } = usePrice(
     data && {
@@ -23,7 +24,6 @@ const CartSidebarView: FC = () => {
       currencyCode: data.currency.code,
     }
   )
-  const { closeSidebar } = useUI()
   const handleClose = () => closeSidebar()
 
   const items = data?.line_items.physical_items ?? []

components/common/Layout/Layout.tsx

@@ -10,6 +10,7 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { CartSidebarView } from '@components/cart'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@@ -20,9 +21,7 @@ const Loading = () => (
 const dynamicProps = {
   loading: () => <Loading />,
 }
-const CartSidebarView = dynamic(
-  () => import('@components/cart/CartSidebarView')
-)
+
 const LoginView = dynamic(
   () => import('@components/auth/LoginView'),
   dynamicProps
@@ -67,14 +66,17 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Navbar />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
+
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
+
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}

components/ui/Modal/Modal.tsx

@@ -1,11 +1,10 @@
-import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
-import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 import { Cross } from '@components/icons'
+import { useOverlay, OverlayContainer } from '@react-aria/overlays'
+import Portal from '@reach/portal'
 interface Props {
   className?: string
   children?: any
@@ -13,17 +12,8 @@ interface Props {
   onClose: () => void
 }
 
-const Modal: FC<Props> = ({
-  className,
-  children,
-  open = false,
-  onClose,
-  ...props
-}) => {
-  const rootClassName = cn(s.root, className)
+const Modal: FC<Props> = ({ children, open = false, onClose, ...props }) => {
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { modalProps } = useModal()
-  let { dialogProps } = useDialog({}, ref)
   let { overlayProps } = useOverlay(
     {
       isOpen: open,
@@ -38,7 +28,7 @@ const Modal: FC<Props> = ({
     <Transition show={open}>
       <OverlayContainer>
         <FocusScope contain restoreFocus autoFocus>
-          <div className={rootClassName}>
+          <div className={s.root}>
             <Transition.Child
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
@@ -47,13 +37,7 @@ const Modal: FC<Props> = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div
-                className={s.modal}
-                {...overlayProps}
-                {...dialogProps}
-                {...modalProps}
-                ref={ref}
-              >
+              <div className={s.modal} {...overlayProps} ref={ref}>
                 <div className="h-7 flex items-center justify-end w-full">
                   <button
                     onClick={() => onClose()}
@@ -63,7 +47,6 @@ const Modal: FC<Props> = ({
                     <Cross className="h-6 w-6" />
                   </button>
                 </div>
-
                 {children}
               </div>
             </Transition.Child>

components/ui/Sidebar/Sidebar.tsx

@@ -1,22 +1,19 @@
 import cn from 'classnames'
-import { FC, useRef } from 'react'
+import { FC, useRef, useMemo } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
-import { useDialog } from '@react-aria/dialog'
+import { useOverlay, OverlayContainer } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
+import Portal from '@reach/portal'
 
 interface Props {
-  className?: string
-  children?: any
-  open?: boolean
+  children: any
+  open: boolean
   onClose: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
-  const rootClassName = cn(s.root, className)
+const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
   const ref = useRef<HTMLDivElement>(null)
-  const { modalProps } = useModal()
   const { overlayProps } = useOverlay(
     {
       isOpen: open,
@@ -25,55 +22,54 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
     },
     ref
   )
-  const { dialogProps } = useDialog({}, ref)
 
   return (
-    <Transition show={open}>
-      <OverlayContainer>
-        <FocusScope contain restoreFocus autoFocus>
-          <div className={rootClassName}>
-            <div className="absolute inset-0 overflow-hidden">
-              <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
-                  className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
-                  // Close the sidebar when clicking on the backdrop
-                  onClick={onClose}
-                />
-              </Transition.Child>
-              <section
-                className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
-                {...dialogProps}
-                {...overlayProps}
-                {...modalProps}
-                ref={ref}
-              >
+    <Portal>
+      <Transition show={open}>
+        <OverlayContainer>
+          <FocusScope contain restoreFocus autoFocus>
+            <div className={s.root}>
+              <div className="absolute inset-0 overflow-hidden">
                 <Transition.Child
-                  enter="transition ease-in-out duration-300 transform"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transition ease-in-out duration-300 transform"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
+                  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 className="h-full md:w-screen md:max-w-md">
-                    <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
-                      {children}
-                    </div>
-                  </div>
+                  <div
+                    className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
+                    // Close the sidebar when clicking on the backdrop
+                    onClick={onClose}
+                  />
                 </Transition.Child>
-              </section>
+                <section
+                  className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
+                  {...overlayProps}
+                  ref={ref}
+                >
+                  <Transition.Child
+                    enter="transition ease-in-out duration-300 transform"
+                    enterFrom="translate-x-full"
+                    enterTo="translate-x-0"
+                    leave="transition ease-in-out duration-300 transform"
+                    leaveFrom="translate-x-0"
+                    leaveTo="translate-x-full"
+                  >
+                    <div className="h-full md:w-screen md:max-w-md">
+                      <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
+                        {children}
+                      </div>
+                    </div>
+                  </Transition.Child>
+                </section>
+              </div>
             </div>
-          </div>
-        </FocusScope>
-      </OverlayContainer>
-    </Transition>
+          </FocusScope>
+        </OverlayContainer>
+      </Transition>
+    </Portal>
   )
 }