feat: responsive popovers & menus (#1323)

2022-07-21 02:20:14 +05:30
parent baf7fb0019
commit 2573407851
44 changed files with 1308 additions and 1415 deletions
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -1,12 +1,11 @@
-import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { KeyboardKey } from '@/Services/IOService'
+import Popover from '../Popover/Popover'

 type Props = {
  navigationController: NavigationController
@@ -16,101 +15,59 @@ type Props = {

 const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesController, noteTagsController }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)

-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
-    right: 0,
-    bottom: 0,
-    maxHeight: 'auto',
-  })
+  const [isOpen, setIsOpen] = useState(false)

-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
-
-  const toggleTagsMenu = useCallback(() => {
-    if (!isMenuOpen) {
-      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
-      if (menuPosition) {
-        setMenuStyle(menuPosition)
-      }
-    }
-
-    setIsMenuOpen(!isMenuOpen)
-  }, [isMenuOpen])
-
-  const recalculateMenuStyle = useCallback(() => {
-    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
-
-    if (newMenuPosition) {
-      setMenuStyle(newMenuPosition)
-    }
+  const toggleMenu = useCallback(() => {
+    setIsOpen((isOpen) => !isOpen)
  }, [])

-  useEffect(() => {
-    if (isMenuOpen) {
-      setTimeout(() => {
-        recalculateMenuStyle()
-      })
-    }
-  }, [isMenuOpen, recalculateMenuStyle])
-
  return (
    <div ref={menuContainerRef}>
-      <Disclosure open={isMenuOpen} onChange={toggleTagsMenu}>
-        <DisclosureButton
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setIsMenuOpen(false)
-            }
-          }}
-          onBlur={closeOnBlur}
-          ref={menuButtonRef}
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        >
-          <div className="flex items-center">
-            <Icon type="hashtag" className="mr-2 text-neutral" />
-            Add tag
-          </div>
-          <Icon type="chevron-right" className="text-neutral" />
-        </DisclosureButton>
-        <DisclosurePanel
-          ref={menuRef}
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setIsMenuOpen(false)
-              menuButtonRef.current?.focus()
-            }
-          }}
-          style={{
-            ...menuStyle,
-            position: 'fixed',
-          }}
-          className={`${
-            isMenuOpen ? 'flex' : 'hidden'
-          } max-h-120 fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main`}
-        >
-          {navigationController.tags.map((tag) => (
-            <button
-              key={tag.uuid}
-              className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-              onBlur={closeOnBlur}
-              onClick={() => {
-                notesController.isTagInSelectedNotes(tag)
-                  ? notesController.removeTagFromSelectedNotes(tag).catch(console.error)
-                  : notesController.addTagToSelectedNotes(tag).catch(console.error)
-              }}
-            >
-              <span
-                className={`overflow-hidden overflow-ellipsis whitespace-nowrap
+      <button
+        onClick={toggleMenu}
+        onKeyDown={(event) => {
+          if (event.key === KeyboardKey.Escape) {
+            setIsOpen(false)
+          }
+        }}
+        ref={buttonRef}
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+      >
+        <div className="flex items-center">
+          <Icon type="hashtag" className="mr-2 text-neutral" />
+          Add tag
+        </div>
+        <Icon type="chevron-right" className="text-neutral" />
+      </button>
+      <Popover
+        togglePopover={toggleMenu}
+        anchorElement={buttonRef.current}
+        open={isOpen}
+        side="right"
+        align="start"
+        className="py-2"
+      >
+        {navigationController.tags.map((tag) => (
+          <button
+            key={tag.uuid}
+            className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            onClick={() => {
+              notesController.isTagInSelectedNotes(tag)
+                ? notesController.removeTagFromSelectedNotes(tag).catch(console.error)
+                : notesController.addTagToSelectedNotes(tag).catch(console.error)
+            }}
+          >
+            <span
+              className={`overflow-hidden overflow-ellipsis whitespace-nowrap
                      ${notesController.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`}
-              >
-                {noteTagsController.getLongTitle(tag)}
-              </span>
-            </button>
-          ))}
-        </DisclosurePanel>
-      </Disclosure>
+            >
+              {noteTagsController.getLongTitle(tag)}
+            </span>
+          </button>
+        ))}
+      </Popover>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -1,12 +1,10 @@
 import { KeyboardKey } from '@/Services/IOService'
 import { WebApplication } from '@/Application/Application'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import ChangeEditorMenu from '@/Components/ChangeEditor/ChangeEditorMenu'
-import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import Popover from '../Popover/Popover'

 type ChangeEditorOptionProps = {
  application: WebApplication
@@ -15,91 +13,48 @@ type ChangeEditorOptionProps = {

 const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ application, note }) => {
  const [isOpen, setIsOpen] = useState(false)
-  const [isVisible, setIsVisible] = useState(false)
-  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
-    right: 0,
-    bottom: 0,
-    maxHeight: 'auto',
-  })
  const menuContainerRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)

-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, (open: boolean) => {
-    setIsOpen(open)
-    setIsVisible(open)
-  })
-
-  const toggleChangeEditorMenu = useCallback(() => {
-    if (!isOpen) {
-      const menuStyle = calculateSubmenuStyle(buttonRef.current)
-      if (menuStyle) {
-        setMenuStyle(menuStyle)
-      }
-    }
-
-    setIsOpen(!isOpen)
-  }, [isOpen])
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        const newMenuStyle = calculateSubmenuStyle(buttonRef.current, menuRef.current)
-
-        if (newMenuStyle) {
-          setMenuStyle(newMenuStyle)
-          setIsVisible(true)
-        }
-      }, 5)
-    }
-  }, [isOpen])
+  const toggleMenu = useCallback(async () => {
+    setIsOpen((isOpen) => !isOpen)
+  }, [])

  return (
    <div ref={menuContainerRef}>
-      <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
-        <DisclosureButton
-          onKeyDown={(event) => {
-            if (event.key === KeyboardKey.Escape) {
-              setIsOpen(false)
-            }
+      <button
+        onClick={toggleMenu}
+        onKeyDown={(event) => {
+          if (event.key === KeyboardKey.Escape) {
+            setIsOpen(false)
+          }
+        }}
+        ref={buttonRef}
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+      >
+        <div className="flex items-center">
+          <Icon type="dashboard" className="mr-2 text-neutral" />
+          Change note type
+        </div>
+        <Icon type="chevron-right" className="text-neutral" />
+      </button>
+      <Popover
+        align="start"
+        anchorElement={buttonRef.current}
+        className="pt-2 md:pt-0"
+        open={isOpen}
+        side="right"
+        togglePopover={toggleMenu}
+      >
+        <ChangeEditorMenu
+          application={application}
+          note={note}
+          isVisible={isOpen}
+          closeMenu={() => {
+            setIsOpen(false)
          }}
-          onBlur={closeOnBlur}
-          ref={buttonRef}
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        >
-          <div className="flex items-center">
-            <Icon type="dashboard" className="mr-2 text-neutral" />
-            Change note type
-          </div>
-          <Icon type="chevron-right" className="text-neutral" />
-        </DisclosureButton>
-        <DisclosurePanel
-          ref={menuRef}
-          onKeyDown={(event) => {
-            if (event.key === KeyboardKey.Escape) {
-              setIsOpen(false)
-              buttonRef.current?.focus()
-            }
-          }}
-          style={{
-            ...menuStyle,
-            position: 'fixed',
-          }}
-          className="max-h-120 fixed flex min-w-68 flex-col overflow-y-auto rounded bg-default shadow-main"
-        >
-          {isOpen && (
-            <ChangeEditorMenu
-              application={application}
-              closeOnBlur={closeOnBlur}
-              note={note}
-              isVisible={isVisible}
-              closeMenu={() => {
-                setIsOpen(false)
-              }}
-            />
-          )}
-        </DisclosurePanel>
-      </Disclosure>
+        />
+      </Popover>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx
@@ -9,10 +9,9 @@ import Spinner from '@/Components/Spinner/Spinner'
 type ListedActionsMenuProps = {
  application: WebApplication
  note: SNNote
-  recalculateMenuStyle: () => void
 }

-const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedActionsMenuProps) => {
+const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
  const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
  const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)

@@ -88,14 +87,11 @@ const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedAc
        console.error(err)
      } finally {
        setIsFetchingAccounts(false)
-        setTimeout(() => {
-          recalculateMenuStyle()
-        })
      }
    }

    void fetchListedAccounts()
-  }, [application, note.uuid, recalculateMenuStyle])
+  }, [application, note.uuid])

  return (
    <>
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -1,11 +1,10 @@
 import { WebApplication } from '@/Application/Application'
-import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import ListedActionsMenu from './ListedActionsMenu'
+import { KeyboardKey } from '@/Services/IOService'
+import Popover from '../Popover/Popover'

 type Props = {
  application: WebApplication
@@ -14,74 +13,42 @@ type Props = {

 const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)

-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
-    right: 0,
-    bottom: 0,
-    maxHeight: 'auto',
-  })
+  const [isOpen, setIsOpen] = useState(false)

-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
-
-  const toggleListedMenu = useCallback(() => {
-    if (!isMenuOpen) {
-      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
-      if (menuPosition) {
-        setMenuStyle(menuPosition)
-      }
-    }
-
-    setIsMenuOpen(!isMenuOpen)
-  }, [isMenuOpen])
-
-  const recalculateMenuStyle = useCallback(() => {
-    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
-
-    if (newMenuPosition) {
-      setMenuStyle(newMenuPosition)
-    }
+  const toggleMenu = useCallback(() => {
+    setIsOpen((isOpen) => !isOpen)
  }, [])

-  useEffect(() => {
-    if (isMenuOpen) {
-      setTimeout(() => {
-        recalculateMenuStyle()
-      })
-    }
-  }, [isMenuOpen, recalculateMenuStyle])
-
  return (
    <div ref={menuContainerRef}>
-      <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
-        <DisclosureButton
-          ref={menuButtonRef}
-          onBlur={closeOnBlur}
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        >
-          <div className="flex items-center">
-            <Icon type="listed" className="mr-2 text-neutral" />
-            Listed actions
-          </div>
-          <Icon type="chevron-right" className="text-neutral" />
-        </DisclosureButton>
-        <DisclosurePanel
-          ref={menuRef}
-          style={{
-            ...menuStyle,
-            position: 'fixed',
-          }}
-          className={`${
-            isMenuOpen ? 'flex' : 'hidden'
-          } max-h-120 fixed min-w-68 flex-col overflow-y-auto rounded bg-default pb-1 shadow-main`}
-        >
-          {isMenuOpen && (
-            <ListedActionsMenu application={application} note={note} recalculateMenuStyle={recalculateMenuStyle} />
-          )}
-        </DisclosurePanel>
-      </Disclosure>
+      <button
+        onClick={toggleMenu}
+        onKeyDown={(event) => {
+          if (event.key === KeyboardKey.Escape) {
+            setIsOpen(false)
+          }
+        }}
+        ref={buttonRef}
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+      >
+        <div className="flex items-center">
+          <Icon type="listed" className="mr-2 text-neutral" />
+          Listed actions
+        </div>
+        <Icon type="chevron-right" className="text-neutral" />
+      </button>
+      <Popover
+        togglePopover={toggleMenu}
+        anchorElement={buttonRef.current}
+        open={isOpen}
+        side="right"
+        align="end"
+        className="pt-2 md:pt-0"
+      >
+        <ListedActionsMenu application={application} note={note} />
+      </Popover>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -15,13 +15,11 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'

 type DeletePermanentlyButtonProps = {
-  closeOnBlur: NotesOptionsProps['closeOnBlur']
  onClick: () => void
 }

-const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
+const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => (
  <button
-    onBlur={closeOnBlur}
    className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
    onClick={onClick}
  >
@@ -177,7 +175,6 @@ const NotesOptions = ({
  notesController,
  noteTagsController,
  historyModalController,
-  closeOnBlur,
 }: NotesOptionsProps) => {
  const [altKeyDown, setAltKeyDown] = useState(false)

@@ -270,7 +267,6 @@ const NotesOptions = ({
      {notes.length === 1 && (
        <>
          <button
-            onBlur={closeOnBlur}
            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
            onClick={openRevisionHistoryModal}
          >
@@ -285,7 +281,6 @@ const NotesOptions = ({
        onClick={() => {
          notesController.setLockSelectedNotes(!locked)
        }}
-        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="pencil-off" className={iconClass} />
@@ -298,7 +293,6 @@ const NotesOptions = ({
        onClick={() => {
          notesController.setHideSelectedNotePreviews(!hidePreviews)
        }}
-        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="rich-text" className={iconClass} />
@@ -311,7 +305,6 @@ const NotesOptions = ({
        onClick={() => {
          notesController.setProtectSelectedNotes(!protect).catch(console.error)
        }}
-        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="password" className={iconClass} />
@@ -335,7 +328,6 @@ const NotesOptions = ({
      )}
      {unpinned && (
        <button
-          onBlur={closeOnBlur}
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={() => {
            notesController.setPinSelectedNotes(true)
@@ -347,7 +339,6 @@ const NotesOptions = ({
      )}
      {pinned && (
        <button
-          onBlur={closeOnBlur}
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={() => {
            notesController.setPinSelectedNotes(false)
@@ -358,7 +349,6 @@ const NotesOptions = ({
        </button>
      )}
      <button
-        onBlur={closeOnBlur}
        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
        onClick={downloadSelectedItems}
      >
@@ -366,7 +356,6 @@ const NotesOptions = ({
        Export
      </button>
      <button
-        onBlur={closeOnBlur}
        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
        onClick={duplicateSelectedItems}
      >
@@ -375,7 +364,6 @@ const NotesOptions = ({
      </button>
      {unarchived && (
        <button
-          onBlur={closeOnBlur}
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={() => {
            notesController.setArchiveSelectedNotes(true).catch(console.error)
@@ -387,7 +375,6 @@ const NotesOptions = ({
      )}
      {archived && (
        <button
-          onBlur={closeOnBlur}
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={() => {
            notesController.setArchiveSelectedNotes(false).catch(console.error)
@@ -400,14 +387,12 @@ const NotesOptions = ({
      {notTrashed &&
        (altKeyDown ? (
          <DeletePermanentlyButton
-            closeOnBlur={closeOnBlur}
            onClick={async () => {
              await notesController.deleteNotesPermanently()
            }}
          />
        ) : (
          <button
-            onBlur={closeOnBlur}
            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
            onClick={async () => {
              await notesController.setTrashSelectedNotes(true)
@@ -420,7 +405,6 @@ const NotesOptions = ({
      {trashed && (
        <>
          <button
-            onBlur={closeOnBlur}
            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
            onClick={async () => {
              await notesController.setTrashSelectedNotes(false)
@@ -430,13 +414,11 @@ const NotesOptions = ({
            <span className="text-success">Restore</span>
          </button>
          <DeletePermanentlyButton
-            closeOnBlur={closeOnBlur}
            onClick={async () => {
              await notesController.deleteNotesPermanently()
            }}
          />
          <button
-            onBlur={closeOnBlur}
            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
            onClick={async () => {
              await notesController.emptyTrash()
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -1,16 +1,13 @@
 import Icon from '@/Components/Icon/Icon'
-import VisuallyHidden from '@reach/visually-hidden'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import NotesOptions from './NotesOptions'
 import { WebApplication } from '@/Application/Application'
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
+import Popover from '../Popover/Popover'

 type Props = {
  application: WebApplication
@@ -29,83 +26,38 @@ const NotesOptionsPanel = ({
  historyModalController,
  onClickPreprocessing,
 }: Props) => {
-  const [open, setOpen] = useState(false)
-  const [position, setPosition] = useState({
-    top: 0,
-    right: 0,
-  })
-  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const [isOpen, setIsOpen] = useState(false)
  const buttonRef = useRef<HTMLButtonElement>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)
+
+  const toggleMenu = useCallback(async () => {
+    const willMenuOpen = !isOpen
+    if (willMenuOpen && onClickPreprocessing) {
+      await onClickPreprocessing()
+    }
+    setIsOpen(willMenuOpen)
+  }, [onClickPreprocessing, isOpen])

  return (
-    <Disclosure
-      open={open}
-      onChange={async () => {
-        const rect = buttonRef.current?.getBoundingClientRect()
-        if (rect) {
-          const { clientHeight } = document.documentElement
-          const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-          const footerHeightInPx = footerElementRect?.height
-          if (footerHeightInPx) {
-            setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
-          }
-          setPosition({
-            top: rect.bottom,
-            right: document.body.clientWidth - rect.right,
-          })
-          const newOpenState = !open
-          if (newOpenState && onClickPreprocessing) {
-            await onClickPreprocessing()
-          }
-          setOpen(newOpenState)
-        }
-      }}
-    >
-      <DisclosureButton
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            setOpen(false)
-          }
-        }}
-        onBlur={closeOnBlur}
-        ref={buttonRef}
+    <>
+      <button
        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
+        title="Note options menu"
+        aria-label="Note options menu"
+        onClick={toggleMenu}
+        ref={buttonRef}
      >
-        <VisuallyHidden>Actions</VisuallyHidden>
-        <Icon type="more" className="block" />
-      </DisclosureButton>
-      <DisclosurePanel
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            setOpen(false)
-            buttonRef.current?.focus()
-          }
-        }}
-        ref={panelRef}
-        style={{
-          ...position,
-          maxHeight,
-        }}
-        className={`${
-          open ? 'flex' : 'hidden'
-        } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main transition-transform duration-150`}
-        onBlur={closeOnBlur}
-        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-      >
-        {open && (
-          <NotesOptions
-            application={application}
-            navigationController={navigationController}
-            notesController={notesController}
-            noteTagsController={noteTagsController}
-            historyModalController={historyModalController}
-            closeOnBlur={closeOnBlur}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+        <Icon type="more" />
+      </button>
+      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="py-2">
+        <NotesOptions
+          application={application}
+          navigationController={navigationController}
+          notesController={notesController}
+          noteTagsController={noteTagsController}
+          historyModalController={historyModalController}
+        />
+      </Popover>
+    </>
  )
 }

--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
@@ -10,5 +10,4 @@ export type NotesOptionsProps = {
  notesController: NotesController
  noteTagsController: NoteTagsController
  historyModalController: HistoryModalController
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }