refactor: migrate dialogs & tooltips from reach-ui (#2314)

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -1,6 +1,5 @@
 import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { isIOS } from '@/Utils'
-import { DialogContent } from '@reach/dialog'
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode, useMemo, useRef, useState } from 'react'
 import Button from '../Button/Button'
@@ -26,6 +25,7 @@ type Props = {
   className?: {
     content?: string
     description?: string
+    backdrop?: string
   }
   customHeader?: ReactNode
   disableCustomHeader?: boolean
@@ -95,13 +95,17 @@ const Modal = ({
   return (
     <>
       <ModalAndroidBackHandler close={close} />
-      <DialogContent
-        tabIndex={0}
+      <div
+        className={classNames('absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75', className?.backdrop)}
+        role="presentation"
+        onClick={close}
+      />
+      <div
         className={classNames(
-          'm-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
-          className.content,
+          'absolute z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
+          className?.content,
         )}
-        aria-label={title}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader
@@ -218,7 +222,7 @@ const Modal = ({
                 ))}
               </div>
             )}
-      </DialogContent>
+      </div>
     </>
   )
 }

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -1,35 +1,37 @@
 import { mergeRefs } from '@/Hooks/mergeRefs'
-import { DialogOverlay, DialogOverlayProps } from '@reach/dialog'
-import { classNames } from '@standardnotes/snjs'
+import { Dialog, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 
 type Props = {
   isOpen: boolean
-  onDismiss?: () => void
   children: ReactNode
-  className?: string
-} & DialogOverlayProps
+}
 
-const ModalOverlay = forwardRef(
-  ({ isOpen, onDismiss, children, className, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-    const [isMounted, setElement] = useModalAnimation(isOpen)
+const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isMounted, setElement] = useModalAnimation(isOpen)
+  const dialog = useDialogStore({
+    open: isMounted,
+  })
 
-    if (!isMounted) {
-      return null
-    }
+  if (!isMounted) {
+    return null
+  }
 
-    return (
-      <DialogOverlay
-        className={classNames('p-0 md:px-0 md:opacity-100', className)}
-        onDismiss={onDismiss}
-        ref={mergeRefs([setElement, ref])}
-        {...props}
-      >
-        {children}
-      </DialogOverlay>
-    )
-  },
-)
+  return (
+    <Dialog
+      tabIndex={0}
+      className="h-full w-full"
+      backdropProps={{
+        className: '!z-modal',
+      }}
+      ref={mergeRefs([setElement, ref])}
+      store={dialog}
+      {...props}
+    >
+      {children}
+    </Dialog>
+  )
+})
 
 export default ModalOverlay