OV-326: Close Menu Body when click outside, but also when click out…

frontend/src/bundles/chat/pages/chat-modal.tsx

@@ -17,9 +17,14 @@ import {
 type Properties = {
     isChatOpen: boolean;
     onModalChatClose: () => void;
+    modalReference: React.RefObject<HTMLDivElement>;
 };
 
-const ChatModal: React.FC<Properties> = ({ isChatOpen, onModalChatClose }) => {
+const ChatModal: React.FC<Properties> = ({
+    isChatOpen,
+    onModalChatClose,
+    modalReference,
+}) => {
     const dispatch = useAppDispatch();
     const { messages } = useAppSelector(({ chat }) => ({
         messages: chat.messages,
@@ -42,7 +47,7 @@ const ChatModal: React.FC<Properties> = ({ isChatOpen, onModalChatClose }) => {
             size="5xl"
         >
             <ModalOverlay />
-            <ModalContent borderRadius="xl">
+            <ModalContent borderRadius="xl" ref={modalReference}>
                 <ModalCloseButton color="white" />
                 <Chat
                     messages={messages}

frontend/src/bundles/common/components/modal/modal.tsx

@@ -9,11 +9,21 @@ import { type ModalProps } from '~/bundles/common/types/types.js';
 
 import styles from './styles.module.css';
 
-const Modal: React.FC<ModalProps> = ({ children, ...properties }) => {
+type Properties = {
+    modalReference?: React.RefObject<HTMLElement> | undefined;
+} & ModalProps;
+const Modal: React.FC<Properties> = ({
+    children,
+    modalReference,
+    ...properties
+}) => {
     return (
         <LibraryModal {...properties} isCentered>
             <ModalOverlay />
-            <ModalContent className={styles['modal-content']}>
+            <ModalContent
+                className={styles['modal-content']}
+                ref={modalReference}
+            >
                 <ModalCloseButton margin="20px" zIndex={10} />
                 <ModalBody padding={0}>{children}</ModalBody>
             </ModalContent>

frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx

@@ -16,21 +16,36 @@ type Properties = {
     title: string | React.ReactNode;
     onClose: () => void;
     onChatOpen?: () => void;
+    chatModalReference: React.RefObject<HTMLDivElement>;
+    scriptModalReference: React.RefObject<HTMLDivElement>;
 };
 
 const MenuBody: React.FC<React.PropsWithChildren<Properties>> = ({
     title,
     children,
     onClose,
     onChatOpen,
+    chatModalReference,
+    scriptModalReference,
 }) => {
-    const menuReference = useRef<HTMLDivElement | null>(null);
+    const menuBodyReference = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent): void => {
+            const isInsideMenuBody = menuBodyReference.current?.contains(
+                event.target as Node,
+            );
+            const isInsideChatModal = chatModalReference.current?.contains(
+                event.target as Node,
+            );
+            const isInsideScriptModal = scriptModalReference.current?.contains(
+                event.target as Node,
+            );
+
             if (
-                menuReference.current &&
-                !menuReference.current.contains(event.target as Node)
+                !isInsideMenuBody &&
+                !isInsideChatModal &&
+                !isInsideScriptModal
             ) {
                 onClose();
             }
@@ -44,11 +59,11 @@ const MenuBody: React.FC<React.PropsWithChildren<Properties>> = ({
                 handleClickOutside,
             );
         };
-    }, [onClose]);
+    }, [onClose, menuBodyReference, chatModalReference, scriptModalReference]);
 
     return (
         <Box
-            ref={menuReference}
+            ref={menuBodyReference}
             bg="background.900"
             className={styles['menu-body']}
         >

frontend/src/bundles/studio/components/video-menu/components/menu-content/script-content/components/voices-modal/voices-modal.tsx

@@ -6,10 +6,20 @@ type Properties = {
     isOpen: boolean;
     onClose: () => void;
     scriptId: string | null;
+    modalReference: React.RefObject<HTMLDivElement>;
 };
-const VoicesModal: React.FC<Properties> = ({ isOpen, onClose, scriptId }) => {
+const VoicesModal: React.FC<Properties> = ({
+    isOpen,
+    onClose,
+    scriptId,
+    modalReference,
+}) => {
     return (
-        <Modal isOpen={isOpen} onClose={onClose}>
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            modalReference={modalReference}
+        >
             {scriptId && (
                 <VoicesModalContent
                     scriptId={scriptId}

frontend/src/bundles/studio/components/video-menu/components/menu-content/script-content/script-content.tsx

@@ -16,7 +16,10 @@ import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
 import { Script, VoicesModal } from './components/components.js';
 
-const ScriptContent: React.FC = () => {
+type Properties = {
+    modalReference: React.RefObject<HTMLDivElement>;
+};
+const ScriptContent: React.FC<Properties> = ({ modalReference }) => {
     const dispatch = useAppDispatch();
     const scripts = useAppSelector(({ studio }) => studio.scripts);
     const [changeVoiceScriptId, setChangeVoiceScriptId] = useState<
@@ -63,6 +66,7 @@ const ScriptContent: React.FC = () => {
                 isOpen={changeVoiceScriptId !== null}
                 onClose={handleCloseVoicesModal}
                 scriptId={changeVoiceScriptId}
+                modalReference={modalReference}
             />
         </>
     );

frontend/src/bundles/studio/components/video-menu/video-menu.tsx

@@ -5,6 +5,7 @@ import {
     useAppSelector,
     useCallback,
     useEffect,
+    useRef,
     useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
@@ -29,6 +30,8 @@ const VideoMenu: React.FC = () => {
 
     const dispatch = useAppDispatch();
     const [isChatOpen, setIsChatOpen] = useState(false);
+    const chatModalReference = useRef<HTMLDivElement | null>(null);
+    const scriptModalReference = useRef<HTMLDivElement | null>(null);
 
     const setActiveItem = useCallback(
         (item: ValueOf<typeof MenuItems> | null): void => {
@@ -74,7 +77,9 @@ const VideoMenu: React.FC = () => {
         script: {
             label: 'Script',
             icon: <Icon as={IconName.SCRIPT} />,
-            getContent: () => <ScriptContent />,
+            getContent: () => (
+                <ScriptContent modalReference={scriptModalReference} />
+            ),
         },
         // text: {
         //     label: 'Text',
@@ -102,13 +107,16 @@ const VideoMenu: React.FC = () => {
                     title={activeMenuItem.label}
                     onClose={handleMenuClose}
                     onChatOpen={handleChatOpen}
+                    chatModalReference={chatModalReference}
+                    scriptModalReference={scriptModalReference}
                 >
                     {activeMenuItem.getContent()}
                 </MenuBody>
             )}
             <ChatModal
                 isChatOpen={isChatOpen}
                 onModalChatClose={handleChatClose}
+                modalReference={chatModalReference}
             />
         </>
     );