stream-chat-react 12.8.0 → 12.8.1

package/dist/components/Chat/hooks/useChat.js

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.8.0-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.8.1-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/Dialog/DialogManager.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { StateStore } from 'stream-chat';
 export type GetOrCreateDialogParams = {
     id: DialogId;
@@ -8,6 +9,7 @@ export type Dialog = {
     id: DialogId;
     isOpen: boolean | undefined;
     open: (zIndex?: number) => void;
+    removalTimeout: NodeJS.Timeout | undefined;
     remove: () => void;
     toggle: (closeAll?: boolean) => void;
 };
@@ -39,5 +41,11 @@ export declare class DialogManager {
     closeAll(): void;
     toggle(params: GetOrCreateDialogParams, closeAll?: boolean): void;
     remove(id: DialogId): void;
+    /**
+     * Marks the dialog state as unused. If the dialog id is referenced again quickly,
+     * the state will not be removed. Otherwise, the state will be removed after
+     * a short timeout.
+     */
+    markForRemoval(id: DialogId): void;
 }
 export {};

package/dist/components/Dialog/DialogManager.js

@@ -35,6 +35,7 @@ export class DialogManager {
                 open: () => {
                     this.open({ id });
                 },
+                removalTimeout: undefined,
                 remove: () => {
                     this.remove(id);
                 },
@@ -47,6 +48,21 @@ export class DialogManager {
                 ...{ dialogsById: { ...current.dialogsById, [id]: dialog } },
             }));
         }
+        if (dialog.removalTimeout) {
+            clearTimeout(dialog.removalTimeout);
+            this.state.next((current) => ({
+                ...current,
+                ...{
+                    dialogsById: {
+                        ...current.dialogsById,
+                        [id]: {
+                            ...dialog,
+                            removalTimeout: undefined,
+                        },
+                    },
+                },
+            }));
+        }
         return dialog;
     }
     open(params, closeRest) {
@@ -86,6 +102,9 @@ export class DialogManager {
         const dialog = state.dialogsById[id];
         if (!dialog)
             return;
+        if (dialog.removalTimeout) {
+            clearTimeout(dialog.removalTimeout);
+        }
         this.state.next((current) => {
             const newDialogs = { ...current.dialogsById };
             delete newDialogs[id];
@@ -95,4 +114,27 @@ export class DialogManager {
             };
         });
     }
+    /**
+     * Marks the dialog state as unused. If the dialog id is referenced again quickly,
+     * the state will not be removed. Otherwise, the state will be removed after
+     * a short timeout.
+     */
+    markForRemoval(id) {
+        const dialog = this.state.getLatestValue().dialogsById[id];
+        if (!dialog) {
+            return;
+        }
+        this.state.next((current) => ({
+            ...current,
+            dialogsById: {
+                ...current.dialogsById,
+                [id]: {
+                    ...dialog,
+                    removalTimeout: setTimeout(() => {
+                        this.remove(id);
+                    }, 16),
+                },
+            },
+        }));
+    }
 }

package/dist/components/Dialog/hooks/useDialog.js

@@ -4,7 +4,11 @@ import { useStateStore } from '../../../store';
 export const useDialog = ({ id }) => {
     const { dialogManager } = useDialogManager();
     useEffect(() => () => {
-        dialogManager.remove(id);
+        // Since this cleanup can run even if the component is still mounted
+        // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
+        // mark state as unused and only remove it after a timeout, rather than
+        // to remove it immediately.
+        dialogManager.markForRemoval(id);
     }, [dialogManager, id]);
     return dialogManager.getOrCreate({ id });
 };

package/dist/experimental/index.browser.cjs

@@ -122,7 +122,7 @@ var useDialog = ({ id }) => {
   const { dialogManager } = useDialogManager();
   (0, import_react6.useEffect)(
     () => () => {
-      dialogManager.remove(id);
+      dialogManager.markForRemoval(id);
     },
     [dialogManager, id]
   );