chore: correctly close modals and show toast after creating note from shared text

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

@@ -1,6 +1,7 @@
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 import { Dialog, DialogStoreProps, useDialogStore } from '@ariakit/react'
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode } from 'react'
+import { ReactNode, useCallback } from 'react'
 
 const AlertDialog = ({
   children,
@@ -13,6 +14,15 @@ const AlertDialog = ({
     ...props,
   })
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        ;(element as DialogWithClose).close = closeDialog
+      }
+    },
+    [closeDialog],
+  )
+
   return (
     <Dialog
       store={dialog}
@@ -21,6 +31,7 @@ const AlertDialog = ({
       modal={false}
       portal={true}
       preventBodyScroll={true}
+      ref={addCloseMethod}
     >
       <div
         className="absolute z-0 h-full w-full bg-passive-5 opacity-25 md:opacity-75"

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

@@ -2,6 +2,7 @@ import { mergeRefs } from '@/Hooks/mergeRefs'
 import { Dialog, DialogOptions, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 type Props = {
   isOpen: boolean
@@ -10,8 +11,6 @@ type Props = {
   close: () => void
 }
 
-type DialogWithClose = HTMLDivElement & { close: () => void }
-
 const ModalOverlay = forwardRef(
   (
     { isOpen, children, animationVariant, close, ...props }: Props & Partial<DialogOptions>,

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

@@ -6,6 +6,7 @@ import MobileModalAction from '../Modal/MobileModalAction'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 import MobileModalHeader from '../Modal/MobileModalHeader'
 import { mergeRefs } from '@/Hooks/mergeRefs'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 const DisableScroll = () => {
   useDisableBodyScrollOnMobile()
@@ -13,8 +14,6 @@ const DisableScroll = () => {
   return null
 }
 
-type PopoverWithClose = HTMLDivElement & { close: () => void }
-
 const MobilePopoverContent = ({
   open,
   requestClose,
@@ -35,7 +34,7 @@ const MobilePopoverContent = ({
   const addCloseMethod = useCallback(
     (element: HTMLDivElement | null) => {
       if (element) {
-        ;(element as PopoverWithClose).close = requestClose
+        ;(element as DialogWithClose).close = requestClose
       }
     },
     [requestClose],

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

@@ -10,6 +10,8 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { getAdjustedStylesForNonPortalPopover } from './Utils/getAdjustedStylesForNonPortal'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -82,6 +84,15 @@ const PositionedPopoverContent = ({
     correctInitialScrollForOverflowedContent()
   }, [popoverElement, correctInitialScrollForOverflowedContent])
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element && togglePopover) {
+        ;(element as DialogWithClose).close = togglePopover
+      }
+    },
+    [togglePopover],
+  )
+
   return (
     <Portal disabled={!portal}>
       <div
@@ -100,7 +111,7 @@ const PositionedPopoverContent = ({
             ...adjustedStyles,
           } as CSSProperties
         }
-        ref={setPopoverElement}
+        ref={mergeRefs([setPopoverElement, addCloseMethod])}
         data-popover={id}
         onKeyDown={(event) => {
           if (event.key === KeyboardKey.Escape) {

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,7 +1,9 @@
 import { getPlatformString } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import { Dialog, useDialogStore } from '@ariakit/react'
-import { ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
+import { mergeRefs } from '@/Hooks/mergeRefs'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 type Props = {
   children: ReactNode
@@ -13,11 +15,20 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
     open: true,
   })
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        ;(element as DialogWithClose).close = onDismiss
+      }
+    },
+    [onDismiss],
+  )
+
   return (
     <Dialog
       store={dialog}
       aria-label="Note revision history"
-      ref={ref}
+      ref={mergeRefs([addCloseMethod, ref])}
       className="fixed left-0 top-0 z-modal h-full w-full"
     >
       <div