chore: close currently open modals/popovers when sharing text into sn

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

@@ -1,6 +1,6 @@
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { Dialog, DialogOptions, useDialogStore } from '@ariakit/react'
-import { ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 
 type Props = {
@@ -10,6 +10,8 @@ type Props = {
   close: () => void
 }
 
+type DialogWithClose = HTMLDivElement & { close: () => void }
+
 const ModalOverlay = forwardRef(
   (
     { isOpen, children, animationVariant, close, ...props }: Props & Partial<DialogOptions>,
@@ -25,6 +27,15 @@ const ModalOverlay = forwardRef(
       },
     })
 
+    const addCloseMethod = useCallback(
+      (element: HTMLDivElement | null) => {
+        if (element) {
+          ;(element as DialogWithClose).close = close
+        }
+      },
+      [close],
+    )
+
     if (!isMounted) {
       return null
     }
@@ -33,7 +44,7 @@ const ModalOverlay = forwardRef(
       <Dialog
         tabIndex={0}
         className="fixed top-0 left-0 z-modal h-full w-full"
-        ref={mergeRefs([setElement, ref])}
+        ref={mergeRefs([setElement, addCloseMethod, ref])}
         store={dialog}
         modal={false}
         portal={true}

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -1,10 +1,11 @@
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode } from 'react'
+import { ReactNode, useCallback } from 'react'
 import Portal from '../Portal/Portal'
 import MobileModalAction from '../Modal/MobileModalAction'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 import MobileModalHeader from '../Modal/MobileModalHeader'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
 const DisableScroll = () => {
   useDisableBodyScrollOnMobile()
@@ -12,6 +13,8 @@ const DisableScroll = () => {
   return null
 }
 
+type PopoverWithClose = HTMLDivElement & { close: () => void }
+
 const MobilePopoverContent = ({
   open,
   requestClose,
@@ -29,6 +32,15 @@ const MobilePopoverContent = ({
 }) => {
   const [isMounted, setPopoverElement] = useModalAnimation(open)
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        ;(element as PopoverWithClose).close = requestClose
+      }
+    },
+    [requestClose],
+  )
+
   if (!isMounted) {
     return null
   }
@@ -37,7 +49,7 @@ const MobilePopoverContent = ({
     <Portal>
       <DisableScroll />
       <div
-        ref={setPopoverElement}
+        ref={mergeRefs([setPopoverElement, addCloseMethod])}
         className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
         data-popover={id}
         data-mobile-popover

packages/web/src/javascripts/Controllers/SelectedItemsController.ts

@@ -21,6 +21,7 @@ import { Persistable } from './Abstract/Persistable'
 import { CrossControllerEvent } from './CrossControllerEvent'
 import { ItemListController } from './ItemList/ItemListController'
 import { PaneLayout } from './PaneController/PaneLayout'
+import { requestCloseAllOpenModalsAndPopovers } from '@/Utils/CloseOpenModalsAndPopovers'
 
 export class SelectedItemsController
   extends AbstractViewController
@@ -252,6 +253,10 @@ export class SelectedItemsController
       if (!this.application.paneController.isInMobileView || userTriggered) {
         void this.application.paneController.setPaneLayout(PaneLayout.Editing)
       }
+
+      if (this.application.paneController.isInMobileView && userTriggered) {
+        requestCloseAllOpenModalsAndPopovers()
+      }
     }
   }
 

packages/web/src/javascripts/Utils/CloseOpenModalsAndPopovers.ts

@@ -0,0 +1,7 @@
+export const requestCloseAllOpenModalsAndPopovers = () => {
+  document.querySelectorAll('[role="dialog"], [data-popover]').forEach((element) => {
+    if ('close' in element && typeof element.close === 'function') {
+      element.close()
+    }
+  })
+}