refactor: migrate disclosure & combobox from reach-ui (#2316)

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx

@@ -1,65 +1,21 @@
 import Icon from '@/Components/Icon/Icon'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { FunctionComponent, useState, useRef, useEffect, MouseEventHandler } from 'react'
-import { IconType } from '@standardnotes/snjs'
+import { Hovercard, HovercardAnchor, useHovercardStore } from '@ariakit/react'
 
-type Props = {
-  className?: string
-  icon: IconType
-  onMouseEnter?: MouseEventHandler<HTMLButtonElement>
-  onMouseLeave?: MouseEventHandler<HTMLButtonElement>
-}
-
-const DisclosureIconButton: FunctionComponent<Props> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
-  <DisclosureButton
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-    className={`no-border cursor-pointer bg-transparent p-0 hover:brightness-125 ${className ?? ''}`}
-  >
-    <Icon type={icon} />
-  </DisclosureButton>
-)
-
-/**
- * AuthAppInfoPopup is an info icon that shows a tooltip when clicked
- * Tooltip is dismissible by clicking outside
- *
- * Note: it can be generalized but more use cases are required
- * @returns
- */
-const AuthAppInfoTooltip: FunctionComponent = () => {
-  const [isClicked, setClicked] = useState(false)
-  const [isHover, setHover] = useState(false)
-  const ref = useRef(null)
-
-  useEffect(() => {
-    const dismiss = () => setClicked(false)
-    document.addEventListener('mousedown', dismiss)
-    return () => {
-      document.removeEventListener('mousedown', dismiss)
-    }
-  }, [ref])
+const AuthAppInfoTooltip = () => {
+  const infoHovercard = useHovercardStore({
+    showTimeout: 100,
+  })
 
   return (
-    <Disclosure open={isClicked || isHover} onChange={() => setClicked(!isClicked)}>
-      <div className="relative">
-        <DisclosureIconButton
-          icon="info"
-          className="mt-1"
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
-        />
-        <DisclosurePanel>
-          <div
-            className={`bg-inverted-default text-inverted-default shadow-overlay w-103 -left-51
-absolute -top-10 rounded py-1.5 px-2 text-center`}
-          >
-            Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or
-            get a new one.
-          </div>
-        </DisclosurePanel>
-      </div>
-    </Disclosure>
+    <>
+      <HovercardAnchor store={infoHovercard}>
+        <Icon type="info" />
+      </HovercardAnchor>
+      <Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default py-2 px-3 text-sm">
+        Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or get
+        a new one.
+      </Hovercard>
+    </>
   )
 }
 

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -78,7 +78,6 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           }}
           classNameOverride={{
             wrapper: 'relative',
-            popover: 'bottom-full w-full max-h-max',
             button: 'focus:outline-none focus:shadow-none focus:ring-none',
           }}
         />