feat: allow custom class on Modal root div (#2410)

src/components/Gallery/Gallery.tsx

@@ -104,7 +104,11 @@ const UnMemoizedGallery = <
   return (
     <div className={className}>
       {renderImages}
-      <Modal onClose={() => setModalOpen((modalOpen) => !modalOpen)} open={modalOpen}>
+      <Modal
+        className='str-chat__gallery-modal'
+        onClose={() => setModalOpen((modalOpen) => !modalOpen)}
+        open={modalOpen}
+      >
         <ModalGallery images={images} index={index} />
       </Modal>
     </div>

src/components/Gallery/Image.tsx

@@ -61,7 +61,7 @@ export const ImageComponent = <
         {...dimensions}
         {...(innerRef && { ref: innerRef })}
       />
-      <Modal onClose={toggleModal} open={modalIsOpen}>
+      <Modal className='str-chat__image-modal' onClose={toggleModal} open={modalIsOpen}>
         <ModalGallery images={[props]} index={0} />
       </Modal>
     </>

src/components/Message/MessageSimple.tsx

@@ -149,7 +149,7 @@ const MessageSimpleWithContext = <
   return (
     <>
       {editing && (
-        <Modal onClose={clearEditingState} open={editing}>
+        <Modal className='str-chat__edit-message-modal' onClose={clearEditingState} open={editing}>
           <MessageInput
             clearEditingState={clearEditingState}
             grow

src/components/MessageBounce/MessageBounceModal.tsx

@@ -14,7 +14,7 @@ export function MessageBounceModal({
   ...modalProps
 }: MessageBounceModalProps) {
   return (
-    <Modal {...modalProps}>
+    <Modal className='str-chat__message-bounce-modal' {...modalProps}>
       <MessageBounceProvider>
         <MessageBouncePrompt onClose={modalProps.onClose} />
       </MessageBounceProvider>

src/components/Modal/Modal.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 
@@ -8,13 +9,15 @@ import { useChatContext, useTranslationContext } from '../../context';
 export type ModalProps = {
   /** If true, modal is opened or visible. */
   open: boolean;
+  /** Custom class to be applied to the modal root div */
+  className?: string;
   /** Callback handler for closing of modal. */
   onClose?: (
     event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>,
   ) => void;
 };
 
-export const Modal = ({ children, onClose, open }: PropsWithChildren<ModalProps>) => {
+export const Modal = ({ children, className, onClose, open }: PropsWithChildren<ModalProps>) => {
   const { t } = useTranslationContext('Modal');
   const { themeVersion } = useChatContext('Modal');
 
@@ -42,7 +45,7 @@ export const Modal = ({ children, onClose, open }: PropsWithChildren<ModalProps>
   if (!open) return null;
 
   return (
-    <div className='str-chat__modal str-chat__modal--open' onClick={handleClick}>
+    <div className={clsx('str-chat__modal str-chat__modal--open', className)} onClick={handleClick}>
       <FocusScope autoFocus contain>
         <button className='str-chat__modal__close-button' ref={closeRef} title={t<string>('Close')}>
           {themeVersion === '2' && <CloseIconRound />}

src/components/Reactions/ReactionsListModal.tsx

@@ -68,7 +68,10 @@ export function ReactionsListModal<
   );
 
   return (
-    <Modal {...modalProps}>
+    <Modal
+      {...modalProps}
+      className={clsx('str-chat__message-reactions-details-modal', modalProps.className)}
+    >
       <div className='str-chat__message-reactions-details' data-testid='reactions-list-modal'>
         <div className='str-chat__message-reactions-details-reaction-types'>
           {reactions.map(