feat: close submenu if another submenu is opened (#911)

app/assets/javascripts/components/NotesOptions/AddTagOption.tsx

@@ -0,0 +1,129 @@
+import { AppState } from '@/ui_models/app_state';
+import {
+  calculateSubmenuStyle,
+  SubmenuStyle,
+} from '@/utils/calculateSubmenuStyle';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@reach/disclosure';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Icon } from '../Icon';
+import { useCloseOnBlur } from '../utils';
+
+type Props = {
+  appState: AppState;
+};
+
+export const AddTagOption: FunctionComponent<Props> = observer(
+  ({ appState }) => {
+    const menuContainerRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const menuButtonRef = useRef<HTMLButtonElement>(null);
+
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
+      right: 0,
+      bottom: 0,
+      maxHeight: 'auto',
+    });
+
+    const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+
+    const toggleTagsMenu = () => {
+      if (!isMenuOpen) {
+        const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
+        if (menuPosition) {
+          setMenuStyle(menuPosition);
+          console.log(menuPosition);
+        }
+      }
+
+      setIsMenuOpen(!isMenuOpen);
+    };
+
+    const recalculateMenuStyle = useCallback(() => {
+      const newMenuPosition = calculateSubmenuStyle(
+        menuButtonRef.current,
+        menuRef.current
+      );
+
+      if (newMenuPosition) {
+        setMenuStyle(newMenuPosition);
+        console.log(newMenuPosition);
+      }
+    }, []);
+
+    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="sn-dropdown-item justify-between"
+          >
+            <div className="flex items-center">
+              <Icon type="hashtag" className="mr-2 color-neutral" />
+              Add tag
+            </div>
+            <Icon type="chevron-right" className="color-neutral" />
+          </DisclosureButton>
+          <DisclosurePanel
+            ref={menuRef}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsMenuOpen(false);
+                menuButtonRef.current?.focus();
+              }
+            }}
+            style={{
+              ...menuStyle,
+              position: 'fixed',
+            }}
+            className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
+          >
+            {appState.tags.tags.map((tag) => (
+              <button
+                key={tag.title}
+                className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
+                onBlur={closeOnBlur}
+                onClick={() => {
+                  appState.notes.isTagInSelectedNotes(tag)
+                    ? appState.notes.removeTagFromSelectedNotes(tag)
+                    : appState.notes.addTagToSelectedNotes(tag);
+                }}
+              >
+                <span
+                  className={`whitespace-nowrap overflow-hidden overflow-ellipsis
+                      ${
+                        appState.notes.isTagInSelectedNotes(tag)
+                          ? 'font-bold'
+                          : ''
+                      }`}
+                >
+                  {appState.noteTags.getLongTitle(tag)}
+                </span>
+              </button>
+            ))}
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+);

app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx

@@ -15,12 +15,12 @@ import {
   calculateSubmenuStyle,
   SubmenuStyle,
 } from '@/utils/calculateSubmenuStyle';
+import { useCloseOnBlur } from '../utils';
 
 type ChangeEditorOptionProps = {
   appState: AppState;
   application: WebApplication;
   note: SNNote;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };
 
 type AccordionMenuGroup<T> = {
@@ -40,7 +40,6 @@ export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>;
 
 export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   application,
-  closeOnBlur,
   note,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -50,9 +49,15 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     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 = () => {
     if (!isOpen) {
       const menuStyle = calculateSubmenuStyle(buttonRef.current);
@@ -81,49 +86,51 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   }, [isOpen]);
 
   return (
-    <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
-      <DisclosureButton
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-          }
-        }}
-        onBlur={closeOnBlur}
-        ref={buttonRef}
-        className="sn-dropdown-item justify-between"
-      >
-        <div className="flex items-center">
-          <Icon type="dashboard" className="color-neutral mr-2" />
-          Change editor
-        </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </DisclosureButton>
-      <DisclosurePanel
-        ref={menuRef}
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-            buttonRef.current?.focus();
-          }
-        }}
-        style={{
-          ...menuStyle,
-          position: 'fixed',
-        }}
-        className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
-      >
-        {isOpen && (
-          <ChangeEditorMenu
-            application={application}
-            closeOnBlur={closeOnBlur}
-            note={note}
-            isVisible={isVisible}
-            closeMenu={() => {
+    <div ref={menuContainerRef}>
+      <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
+        <DisclosureButton
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
               setIsOpen(false);
-            }}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+            }
+          }}
+          onBlur={closeOnBlur}
+          ref={buttonRef}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="dashboard" className="color-neutral mr-2" />
+            Change editor
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
+              setIsOpen(false);
+              buttonRef.current?.focus();
+            }
+          }}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
+        >
+          {isOpen && (
+            <ChangeEditorMenu
+              application={application}
+              closeOnBlur={closeOnBlur}
+              note={note}
+              isVisible={isVisible}
+              closeMenu={() => {
+                setIsOpen(false);
+              }}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
   );
 };

app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx

@@ -12,11 +12,11 @@ import { Action, ListedAccount, SNNote } from '@standardnotes/snjs';
 import { Fragment, FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
+import { useCloseOnBlur } from '../utils';
 
 type Props = {
   application: WebApplication;
   note: SNNote;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };
 
 type ListedMenuGroup = {
@@ -230,8 +230,8 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
 export const ListedActionsOption: FunctionComponent<Props> = ({
   application,
   note,
-  closeOnBlur,
 }) => {
+  const menuContainerRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -242,6 +242,8 @@ export const ListedActionsOption: FunctionComponent<Props> = ({
     maxHeight: 'auto',
   });
 
+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+
   const toggleListedMenu = () => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
@@ -273,34 +275,36 @@ export const ListedActionsOption: FunctionComponent<Props> = ({
   }, [isMenuOpen, recalculateMenuStyle]);
 
   return (
-    <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
-      <DisclosureButton
-        ref={menuButtonRef}
-        onBlur={closeOnBlur}
-        className="sn-dropdown-item justify-between"
-      >
-        <div className="flex items-center">
-          <Icon type="listed" className="color-neutral mr-2" />
-          Listed actions
-        </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </DisclosureButton>
-      <DisclosurePanel
-        ref={menuRef}
-        style={{
-          ...menuStyle,
-          position: 'fixed',
-        }}
-        className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
-      >
-        {isMenuOpen && (
-          <ListedActionsMenu
-            application={application}
-            note={note}
-            recalculateMenuStyle={recalculateMenuStyle}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+    <div ref={menuContainerRef}>
+      <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
+        <DisclosureButton
+          ref={menuButtonRef}
+          onBlur={closeOnBlur}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="listed" className="color-neutral mr-2" />
+            Listed actions
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
+        >
+          {isMenuOpen && (
+            <ListedActionsMenu
+              application={application}
+              note={note}
+              recalculateMenuStyle={recalculateMenuStyle}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
   );
 };

app/assets/javascripts/components/NotesOptions/NotesOptions.tsx

@@ -2,29 +2,20 @@ import { AppState } from '@/ui_models/app_state';
 import { Icon } from '../Icon';
 import { Switch } from '../Switch';
 import { observer } from 'mobx-react-lite';
-import { useRef, useState, useEffect, useMemo } from 'preact/hooks';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
+import { useState, useEffect, useMemo } from 'preact/hooks';
 import { SNApplication, SNNote } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { KeyboardModifier } from '@/services/ioService';
 import { FunctionComponent } from 'preact';
 import { ChangeEditorOption } from './ChangeEditorOption';
-import {
-  MENU_MARGIN_FROM_APP_BORDER,
-  MAX_MENU_SIZE_MULTIPLIER,
-  BYTES_IN_ONE_MEGABYTE,
-} from '@/constants';
+import { BYTES_IN_ONE_MEGABYTE } from '@/constants';
 import { ListedActionsOption } from './ListedActionsOption';
+import { AddTagOption } from './AddTagOption';
 
 export type NotesOptionsProps = {
   application: WebApplication;
   appState: AppState;
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  onSubmenuChange?: (submenuOpen: boolean) => void;
 };
 
 type DeletePermanentlyButtonProps = {
@@ -206,24 +197,7 @@ const NoteSizeWarning: FunctionComponent<{
   ) : null;
 
 export const NotesOptions = observer(
-  ({
-    application,
-    appState,
-    closeOnBlur,
-    onSubmenuChange,
-  }: NotesOptionsProps) => {
-    const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
-    const [tagsMenuPosition, setTagsMenuPosition] = useState<{
-      top: number;
-      right?: number;
-      left?: number;
-    }>({
-      top: 0,
-      right: 0,
-    });
-    const [tagsMenuMaxHeight, setTagsMenuMaxHeight] = useState<number | 'auto'>(
-      'auto'
-    );
+  ({ application, appState, closeOnBlur }: NotesOptionsProps) => {
     const [altKeyDown, setAltKeyDown] = useState(false);
 
     const toggleOn = (condition: (note: SNNote) => boolean) => {
@@ -246,14 +220,6 @@ export const NotesOptions = observer(
     const unpinned = notes.some((note) => !note.pinned);
     const errored = notes.some((note) => note.errorDecrypting);
 
-    const tagsButtonRef = useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-      if (onSubmenuChange) {
-        onSubmenuChange(tagsMenuOpen);
-      }
-    }, [tagsMenuOpen, onSubmenuChange]);
-
     useEffect(() => {
       const removeAltKeyObserver = application.io.addKeyObserver({
         modifiers: [KeyboardModifier.Alt],
@@ -270,48 +236,6 @@ export const NotesOptions = observer(
       };
     }, [application]);
 
-    const openTagsMenu = () => {
-      const defaultFontSize = window.getComputedStyle(
-        document.documentElement
-      ).fontSize;
-      const maxTagsMenuSize =
-        parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER;
-      const { clientWidth, clientHeight } = document.documentElement;
-      const buttonRect = tagsButtonRef.current?.getBoundingClientRect();
-      const footerElementRect = document
-        .getElementById('footer-bar')
-        ?.getBoundingClientRect();
-      const footerHeightInPx = footerElementRect?.height;
-
-      if (buttonRect && footerHeightInPx) {
-        if (
-          buttonRect.top + maxTagsMenuSize >
-          clientHeight - footerHeightInPx
-        ) {
-          setTagsMenuMaxHeight(
-            clientHeight -
-              buttonRect.top -
-              footerHeightInPx -
-              MENU_MARGIN_FROM_APP_BORDER
-          );
-        }
-
-        if (buttonRect.right + maxTagsMenuSize > clientWidth) {
-          setTagsMenuPosition({
-            top: buttonRect.top,
-            right: clientWidth - buttonRect.left,
-          });
-        } else {
-          setTagsMenuPosition({
-            top: buttonRect.top,
-            left: buttonRect.right,
-          });
-        }
-      }
-
-      setTagsMenuOpen(!tagsMenuOpen);
-    };
-
     const downloadSelectedItems = () => {
       notes.forEach((note) => {
         const editor = application.componentManager.editorForNote(note);
@@ -416,70 +340,12 @@ export const NotesOptions = observer(
             <ChangeEditorOption
               appState={appState}
               application={application}
-              closeOnBlur={closeOnBlur}
               note={notes[0]}
             />
           </>
         )}
         <div className="min-h-1px my-2 bg-border"></div>
-        {appState.tags.tagsCount > 0 && (
-          <Disclosure open={tagsMenuOpen} onChange={openTagsMenu}>
-            <DisclosureButton
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  setTagsMenuOpen(false);
-                }
-              }}
-              onBlur={closeOnBlur}
-              ref={tagsButtonRef}
-              className="sn-dropdown-item justify-between"
-            >
-              <div className="flex items-center">
-                <Icon type="hashtag" className={iconClass} />
-                {'Add tag'}
-              </div>
-              <Icon type="chevron-right" className="color-neutral" />
-            </DisclosureButton>
-            <DisclosurePanel
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  setTagsMenuOpen(false);
-                  tagsButtonRef.current?.focus();
-                }
-              }}
-              style={{
-                ...tagsMenuPosition,
-                maxHeight: tagsMenuMaxHeight,
-                position: 'fixed',
-              }}
-              className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
-            >
-              {appState.tags.tags.map((tag) => (
-                <button
-                  key={tag.title}
-                  className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
-                  onBlur={closeOnBlur}
-                  onClick={() => {
-                    appState.notes.isTagInSelectedNotes(tag)
-                      ? appState.notes.removeTagFromSelectedNotes(tag)
-                      : appState.notes.addTagToSelectedNotes(tag);
-                  }}
-                >
-                  <span
-                    className={`whitespace-nowrap overflow-hidden overflow-ellipsis
-                      ${
-                        appState.notes.isTagInSelectedNotes(tag)
-                          ? 'font-bold'
-                          : ''
-                      }`}
-                  >
-                    {appState.noteTags.getLongTitle(tag)}
-                  </span>
-                </button>
-              ))}
-            </DisclosurePanel>
-          </Disclosure>
-        )}
+        {appState.tags.tagsCount > 0 && <AddTagOption appState={appState} />}
         {unpinned && (
           <button
             onBlur={closeOnBlur}
@@ -604,11 +470,7 @@ export const NotesOptions = observer(
         {notes.length === 1 ? (
           <>
             <div className="min-h-1px my-2 bg-border"></div>
-            <ListedActionsOption
-              application={application}
-              closeOnBlur={closeOnBlur}
-              note={notes[0]}
-            />
+            <ListedActionsOption application={application} note={notes[0]} />
             <div className="min-h-1px my-2 bg-border"></div>
             <SpellcheckOptions appState={appState} note={notes[0]} />
             <div className="min-h-1px my-2 bg-border"></div>