Merge branch 'master' into feat/user.messages.deleted

# Conflicts:
#	yarn.lock

Author: MartinCupela

package.json

@@ -111,7 +111,7 @@
     "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
     "i18next": "^25.2.1",
-    "linkifyjs": "^4.1.0",
+    "linkifyjs": "^4.3.2",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.mergewith": "^4.6.2",
@@ -192,7 +192,7 @@
     "@types/hast": "^2.3.4",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.5",
-    "@types/linkifyjs": "^2.1.3",
+    "@types/linkifyjs": "^2.1.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.defaultsdeep": "^4.6.9",
     "@types/lodash.mergewith": "^4.6.9",

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);
+  });
 });

yarn.lock

@@ -2800,10 +2800,10 @@
     "@types/ms" "*"
     "@types/node" "*"
 
-"@types/linkifyjs@^2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.3.tgz#80195c3c88c5e75d9f660e3046ce4a42be2c2fa4"
-  integrity sha512-V3Xt9wgaOvDPXcpOy3dC8qXCxy3cs0Lr/Hqgd9Bi6m3sf/vpbpTtfmVR0LJklrqYEjaAmc7e3Xh/INT2rCAKjQ==
+"@types/linkifyjs@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.7.tgz#000b1630ff7a3776f98c8e53ba98b8ad7d92efc4"
+  integrity sha512-+SIYXs1lajyD7t/2+V9GLfdFlc/6Nr2tr65kjA2F5oOzBlPH+NiPqySJDHzREoGcL91Au9Qef8M5JdZiRXsaJw==
   dependencies:
     "@types/react" "*"
 
@@ -8599,11 +8599,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkifyjs@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.0.tgz#0460bfcc37d3348fa80e078d92e7bbc82588db15"
-  integrity sha512-Ffv8VoY3+ixI1b3aZ3O+jM6x17cOsgwfB1Wq7pkytbo1WlyRp6ZO0YDMqiWT/gQPY/CmtiGuKfzDIVqxh1aCTA==
-
 linkifyjs@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"