feat: add support for global modal rendering at the top of the chat component tree

MartinCupela · MartinCupela · commit fea01861e3b1 · 2025-08-01T14:40:52.000+02:00
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -128,6 +128,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'MessageStatus'
   | 'MessageSystem'
   | 'MessageTimestamp'
+  | 'Modal'
   | 'ModalGallery'
   | 'PinIndicator'
   | 'PollActions'
@@ -1221,6 +1222,7 @@ const ChannelInner = (
       MessageStatus: props.MessageStatus,
       MessageSystem: props.MessageSystem,
       MessageTimestamp: props.MessageTimestamp,
+      Modal: props.Modal,
       ModalGallery: props.ModalGallery,
       PinIndicator: props.PinIndicator,
       PollActions: props.PollActions,
@@ -1288,6 +1290,7 @@ const ChannelInner = (
       props.MessageStatus,
       props.MessageSystem,
       props.MessageTimestamp,
+      props.Modal,
       props.ModalGallery,
       props.PinIndicator,
       props.PollActions,
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -14,7 +14,7 @@ import { useChannelsQueryState } from './hooks/useChannelsQueryState';
 import { ChatProvider } from '../../context/ChatContext';
 import { TranslationProvider } from '../../context/TranslationContext';
 import type { CustomClasses } from '../../context/ChatContext';
-import type { MessageContextValue } from '../../context';
+import { type MessageContextValue, ModalDialogManagerProvider } from '../../context';
 import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 
@@ -110,7 +110,9 @@ export const Chat = (props: PropsWithChildren<ChatProps>) => {
 
   return (
     <ChatProvider value={chatContextValue}>
-      <TranslationProvider value={translators}>{children}</TranslationProvider>
+      <TranslationProvider value={translators}>
+        <ModalDialogManagerProvider>{children}</ModalDialogManagerProvider>
+      </TranslationProvider>
     </ChatProvider>
   );
 };
diff --git a/src/components/Dialog/DialogManager.ts b/src/components/Dialog/DialogManager.ts
@@ -1,9 +1,10 @@
 import { nanoid } from 'nanoid';
 import { StateStore } from 'stream-chat';
 
-export type GetOrCreateDialogParams = {
+export type GetDialogParams = {
   id: DialogId;
 };
+export type GetOrCreateDialogParams = GetDialogParams;
 
 type DialogId = string;
 
@@ -57,6 +58,10 @@ export class DialogManager {
     );
   }
 
+  get(id: DialogId) {
+    return this.state.getLatestValue().dialogsById[id];
+  }
+
   getOrCreate({ id }: GetOrCreateDialogParams) {
     let dialog = this.state.getLatestValue().dialogsById[id];
     if (!dialog) {
diff --git a/src/components/Dialog/DialogPortal.tsx b/src/components/Dialog/DialogPortal.tsx
@@ -31,8 +31,8 @@ export const DialogPortalEntry = ({
   children,
   dialogId,
 }: PropsWithChildren<DialogPortalEntryProps>) => {
-  const { dialogManager } = useDialogManager();
-  const dialogIsOpen = useDialogIsOpen(dialogId);
+  const { dialogManager } = useDialogManager({ dialogId });
+  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
 
   const getPortalDestination = useCallback(
     () => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`),
diff --git a/src/components/Dialog/hooks/useDialog.ts b/src/components/Dialog/hooks/useDialog.ts
@@ -1,11 +1,15 @@
 import { useCallback, useEffect } from 'react';
-import { useDialogManager } from '../../../context';
+import { modalDialogManagerId, useDialogManager } from '../../../context';
 import { useStateStore } from '../../../store';
 
 import type { DialogManagerState, GetOrCreateDialogParams } from '../DialogManager';
 
-export const useDialog = ({ id }: GetOrCreateDialogParams) => {
-  const { dialogManager } = useDialogManager();
+export type UseDialogParams = GetOrCreateDialogParams & {
+  dialogManagerId?: string;
+};
+
+export const useDialog = ({ dialogManagerId, id }: UseDialogParams) => {
+  const { dialogManager } = useDialogManager({ dialogManagerId });
 
   useEffect(
     () => () => {
@@ -21,15 +25,23 @@ export const useDialog = ({ id }: GetOrCreateDialogParams) => {
   return dialogManager.getOrCreate({ id });
 };
 
-export const useDialogIsOpen = (id: string) => {
-  const { dialogManager } = useDialogManager();
+export const modalDialogId = 'modal-dialog' as const;
+
+export const useModalDialog = () =>
+  useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });
+
+export const useDialogIsOpen = (id: string, dialogManagerId?: string) => {
+  const { dialogManager } = useDialogManager({ dialogManagerId });
   const dialogIsOpenSelector = useCallback(
     ({ dialogsById }: DialogManagerState) => ({ isOpen: !!dialogsById[id]?.isOpen }),
     [id],
   );
   return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
 };
 
+export const useModalDialogIsOpen = () =>
+  useDialogIsOpen(modalDialogId, modalDialogManagerId);
+
 const openedDialogCountSelector = (nextValue: DialogManagerState) => ({
   openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
     if (dialog.isOpen) return count + 1;
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
@@ -4,7 +4,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import clsx from 'clsx';
 
 import { BaseImage as DefaultBaseImage } from './BaseImage';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 
 import { useComponentContext } from '../../context/ComponentContext';
@@ -29,8 +29,11 @@ const UnMemoizedGallery = (props: GalleryProps) => {
   const [index, setIndex] = useState(0);
   const [modalOpen, setModalOpen] = useState(false);
 
-  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } =
-    useComponentContext('Gallery');
+  const {
+    BaseImage = DefaultBaseImage,
+    Modal = DefaultModal,
+    ModalGallery = DefaultModalGallery,
+  } = useComponentContext('Gallery');
   const { t } = useTranslationContext('Gallery');
 
   const imageFallbackTitle = t('User uploaded content');
diff --git a/src/components/Gallery/Image.tsx b/src/components/Gallery/Image.tsx
@@ -1,9 +1,10 @@
 import type { CSSProperties, MutableRefObject } from 'react';
+import { useCallback } from 'react';
 import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 import { BaseImage as DefaultBaseImage } from './BaseImage';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 import { useComponentContext } from '../../context';
 
@@ -42,28 +43,36 @@ export const ImageComponent = (props: ImageProps) => {
   } = props;
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
-  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } =
-    useComponentContext('ImageComponent');
+  const {
+    BaseImage = DefaultBaseImage,
+    Modal = DefaultModal,
+    ModalGallery = DefaultModalGallery,
+  } = useComponentContext('ImageComponent');
 
   const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
+  const closeModal = useCallback(() => {
+    setModalIsOpen(false);
+  }, []);
 
-  const toggleModal = () => setModalIsOpen((modalIsOpen) => !modalIsOpen);
+  const openModal = useCallback(() => {
+    setModalIsOpen(true);
+  }, []);
 
   return (
     <>
       <BaseImage
         alt={fallback}
         className='str-chat__message-attachment--img'
         data-testid='image-test'
-        onClick={toggleModal}
+        onClick={openModal}
         src={imageSrc}
         style={style}
         tabIndex={0}
         title={fallback}
         {...dimensions}
         {...(innerRef && { ref: innerRef })}
       />
-      <Modal className='str-chat__image-modal' onClose={toggleModal} open={modalIsOpen}>
+      <Modal className='str-chat__image-modal' onClose={closeModal} open={modalIsOpen}>
         <ModalGallery images={[props]} index={0} />
       </Modal>
     </>
diff --git a/src/components/MessageBounce/MessageBounceModal.tsx b/src/components/MessageBounce/MessageBounceModal.tsx
@@ -1,8 +1,8 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
 import type { ModalProps } from '../Modal';
-import { Modal } from '../Modal';
-import { MessageBounceProvider } from '../../context';
+import { Modal as DefaultModal } from '../Modal';
+import { MessageBounceProvider, useComponentContext } from '../../context';
 import type { MessageBouncePromptProps } from './MessageBouncePrompt';
 
 export type MessageBounceModalProps = PropsWithChildren<
@@ -15,6 +15,7 @@ export function MessageBounceModal({
   MessageBouncePrompt,
   ...modalProps
 }: MessageBounceModalProps) {
+  const { Modal = DefaultModal } = useComponentContext();
   return (
     <Modal className='str-chat__message-bounce-modal' {...modalProps}>
       <MessageBounceProvider>
diff --git a/src/components/MessageInput/AttachmentSelector.tsx b/src/components/MessageInput/AttachmentSelector.tsx
@@ -4,7 +4,7 @@ import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ShareLocationDialog as DefaultLocationDialog } from '../Location';
 import { PollCreationDialog as DefaultPollCreationDialog } from '../Poll';
 import { Portal } from '../Portal/Portal';
@@ -192,6 +192,7 @@ export const AttachmentSelector = ({
   getModalPortalDestination,
 }: AttachmentSelectorProps) => {
   const { t } = useTranslationContext();
+  const { Modal = DefaultModal } = useComponentContext();
   const { channelCapabilities } = useChannelStateContext();
   const messageComposer = useMessageComposer();
 
diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { MessageInput } from './MessageInput';
 import { MessageInputFlat } from './MessageInputFlat';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import {
   useComponentContext,
   useMessageContext,
@@ -71,7 +71,8 @@ export const EditMessageForm = () => {
 export const EditMessageModal = ({
   additionalMessageInputProps,
 }: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => {
-  const { EditMessageInput = EditMessageForm } = useComponentContext();
+  const { EditMessageInput = EditMessageForm, Modal = DefaultModal } =
+    useComponentContext();
   const { clearEditingState } = useMessageContext();
   const messageComposer = useMessageComposer();
   const onEditModalClose = useCallback(() => {
diff --git a/src/components/Modal/GlobalModal.tsx b/src/components/Modal/GlobalModal.tsx
@@ -0,0 +1,86 @@
+import clsx from 'clsx';
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { FocusScope } from '@react-aria/focus';
+
+import { CloseIconRound } from './icons';
+
+import { useTranslationContext } from '../../context';
+import {
+  DialogPortalEntry,
+  modalDialogId,
+  useModalDialog,
+  useModalDialogIsOpen,
+} from '../Dialog';
+import type { ModalProps } from './Modal';
+
+export const GlobalModal = ({
+  children,
+  className,
+  onClose,
+  open,
+}: PropsWithChildren<ModalProps>) => {
+  const { t } = useTranslationContext('Modal');
+
+  const dialog = useModalDialog();
+  const isOpen = useModalDialogIsOpen();
+  const innerRef = useRef<HTMLDivElement | null>(null);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
+    if (innerRef.current?.contains(event.target as HTMLButtonElement | HTMLDivElement))
+      return;
+    onClose?.(event);
+    dialog.close();
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose?.(event as unknown as React.KeyboardEvent);
+        dialog.close();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [dialog, onClose, isOpen]);
+
+  useEffect(() => {
+    if (open && !dialog.isOpen) {
+      dialog.open();
+    }
+  }, [dialog, open, children]);
+
+  if (!open || !isOpen) return null;
+
+  return (
+    <DialogPortalEntry dialogId={modalDialogId}>
+      <div
+        className={clsx(
+          'str-chat str-chat__modal str-chat-react__modal str-chat__modal--open',
+          className,
+        )}
+        onClick={handleClick}
+      >
+        <FocusScope autoFocus contain>
+          <button
+            className='str-chat__modal__close-button'
+            ref={closeRef}
+            title={t('Close')}
+          >
+            <CloseIconRound />
+          </button>
+          <div
+            className='str-chat__modal__inner str-chat-react__modal__inner'
+            ref={innerRef}
+          >
+            {children}
+          </div>
+        </FocusScope>
+      </div>
+    </DialogPortalEntry>
+  );
+};
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
@@ -1 +1,2 @@
+export * from './GlobalModal';
 export * from './Modal';
diff --git a/src/components/Poll/PollActions/PollAction.tsx b/src/components/Poll/PollActions/PollAction.tsx
@@ -1,6 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import { Modal } from '../../Modal';
+import { Modal as DefaultModal } from '../../Modal';
+import { useComponentContext } from '../../../context';
 
 export type PollActionProps = {
   buttonText: string;
@@ -17,13 +18,16 @@ export const PollAction = ({
   modalClassName,
   modalIsOpen,
   openModal,
-}: PropsWithChildren<PollActionProps>) => (
-  <>
-    <button className='str-chat__poll-action' onClick={openModal}>
-      {buttonText}
-    </button>
-    <Modal className={modalClassName} onClose={closeModal} open={modalIsOpen}>
-      {children}
-    </Modal>
-  </>
-);
+}: PropsWithChildren<PollActionProps>) => {
+  const { Modal = DefaultModal } = useComponentContext();
+  return (
+    <>
+      <button className='str-chat__poll-action' onClick={openModal}>
+        {buttonText}
+      </button>
+      <Modal className={modalClassName} onClose={closeModal} open={modalIsOpen}>
+        {children}
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/Poll/PollActions/PollActions.tsx b/src/components/Poll/PollActions/PollActions.tsx
diff --git a/src/components/Reactions/ReactionsListModal.tsx b/src/components/Reactions/ReactionsListModal.tsx
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
diff --git a/src/context/DialogManagerContext.tsx b/src/context/DialogManagerContext.tsx
