feat: allow restrictions on modal close behavior (#2797)

Author: MartinCupela

src/components/Modal/Modal.tsx

@@ -1,52 +1,72 @@
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren, useCallback } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 
 import { CloseIconRound } from './icons';
 
 import { useTranslationContext } from '../../context';
 
+type CloseEvent =
+  | KeyboardEvent
+  | React.KeyboardEvent
+  | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;
+export type ModalCloseSource = 'overlay' | 'button' | 'escape';
+
 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;
+  onClose?: (event: CloseEvent) => void;
+  /** Optional handler to intercept closing logic. Return false to prevent onClose. */
+  onCloseAttempt?: (source: ModalCloseSource, event: CloseEvent) => boolean;
 };
 
 export const Modal = ({
   children,
   className,
   onClose,
+  onCloseAttempt,
   open,
 }: PropsWithChildren<ModalProps>) => {
   const { t } = useTranslationContext('Modal');
 
   const innerRef = useRef<HTMLDivElement | null>(null);
-  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  const maybeClose = useCallback(
+    (source: ModalCloseSource, event: CloseEvent) => {
+      const allow = onCloseAttempt?.(source, event);
+      if (allow !== false) {
+        onClose?.(event);
+      }
+    },
+    [onClose, onCloseAttempt],
+  );
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
     const target = event.target as HTMLButtonElement | HTMLDivElement;
-    if (!innerRef.current || !closeRef.current) return;
+    if (!innerRef.current || !closeButtonRef.current) return;
 
-    if (!innerRef.current.contains(target) || closeRef.current.contains(target))
-      onClose?.(event);
+    if (closeButtonRef.current.contains(target)) {
+      maybeClose('button', event);
+    } else if (!innerRef.current.contains(target)) {
+      maybeClose('overlay', event);
+    }
   };
 
   useEffect(() => {
     if (!open) return;
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose?.(event as unknown as React.KeyboardEvent);
+      if (event.key === 'Escape') maybeClose('escape', event);
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose, open]);
+  }, [maybeClose, open]);
 
   if (!open) return null;
 
@@ -58,7 +78,7 @@ export const Modal = ({
       <FocusScope autoFocus contain>
         <button
           className='str-chat__modal__close-button'
-          ref={closeRef}
+          ref={closeButtonRef}
           title={t('Close')}
         >
           <CloseIconRound />

src/components/Modal/__tests__/Modal.test.js

@@ -5,6 +5,8 @@ import '@testing-library/jest-dom';
 
 import { Modal } from '../Modal';
 
+const CLOSE_BUTTON_SELECTOR = '.str-chat__modal__close-button';
+
 describe('Modal', () => {
   afterEach(cleanup);
 
@@ -95,4 +97,54 @@ describe('Modal', () => {
     const { container } = render(<Modal onClose={() => {}} open={false} />);
     expect(container).toBeEmptyDOMElement();
   });
+
+  it('should call onClose if onCloseAttempt returns true', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => true;
+    const { container } = render(
+      <Modal onClose={onClose} onCloseAttempt={onCloseAttempt} open />,
+    );
+
+    fireEvent(
+      document,
+      new KeyboardEvent('keydown', {
+        key: 'Escape',
+      }),
+    );
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(container.firstChild);
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+
+    fireEvent.click(container.querySelector(CLOSE_BUTTON_SELECTOR));
+
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it('should not call onClose if onCloseAttempt returns false', () => {
+    const onClose = jest.fn();
+    const onCloseAttempt = () => false;
+    const { container } = render(
+      <Modal onClose={onClose} onCloseAttempt={onCloseAttempt} open />,
+    );
+
+    fireEvent(
+      document,
+      new KeyboardEvent('keydown', {
+        key: 'Escape',
+      }),
+    );
+
+    expect(onClose).toHaveBeenCalledTimes(0);
+
+    fireEvent.click(container.firstChild);
+
+    expect(onClose).toHaveBeenCalledTimes(0);
+
+    fireEvent.click(container.querySelector(CLOSE_BUTTON_SELECTOR));
+
+    expect(onClose).toHaveBeenCalledTimes(0);
+  });
 });