stream-chat-react 13.1.0 → 13.1.2

package/dist/i18n/TranslationBuilder/TranslationBuilder.d.ts

@@ -1,4 +1,6 @@
 import type { i18n, TFunction } from 'i18next';
+type TopicName = string;
+type TranslatorName = string;
 export type Translator<O extends Record<string, unknown> = Record<string, unknown>> = (params: {
     key: string;
     value: string;
@@ -22,10 +24,12 @@ export type TranslationTopicConstructor = new (options: TranslationTopicOptions)
 export declare class TranslationBuilder {
     private i18next;
     private topics;
+    private translatorRegistrationsBuffer;
     constructor(i18next: i18n);
-    registerTopic: (name: string, Topic: TranslationTopicConstructor) => TranslationTopic<Record<string, unknown>>;
-    disableTopic: (topicName: string) => void;
-    getTopic: (topicName: string) => TranslationTopic<Record<string, unknown>> | undefined;
-    registerTranslators(topicName: string, translators: Record<string, Translator>): void;
-    removeTranslators(topicName: string, translators: string[]): void;
+    registerTopic: (name: TopicName, Topic: TranslationTopicConstructor) => TranslationTopic<Record<string, unknown>>;
+    disableTopic: (topicName: TopicName) => void;
+    getTopic: (topicName: TopicName) => TranslationTopic<Record<string, unknown>> | undefined;
+    registerTranslators(topicName: TopicName, translators: Record<TranslatorName, Translator>): void;
+    removeTranslators(topicName: TopicName, translators: TranslatorName[]): void;
 }
+export {};

package/dist/i18n/TranslationBuilder/TranslationBuilder.js

@@ -21,19 +21,32 @@ export class TranslationBuilder {
     constructor(i18next) {
         this.i18next = i18next;
         this.topics = new Map();
+        // need to keep a registration buffer so that translators can be registered once a topic is registered
+        // what does not happen when Streami18n is instantiated but rather once Streami18n.init() is invoked
+        this.translatorRegistrationsBuffer = {};
         this.registerTopic = (name, Topic) => {
-            const topic = new Topic({ i18next: this.i18next });
-            this.topics.set(name, topic);
-            this.i18next.use({
-                name,
-                process: (value, key, options) => {
-                    const topic = this.topics.get(name);
-                    if (!topic)
-                        return value;
-                    return topic.translate(value, key, options);
-                },
-                type: 'postProcessor',
-            });
+            let topic = this.topics.get(name);
+            if (!topic) {
+                topic = new Topic({ i18next: this.i18next });
+                this.topics.set(name, topic);
+                this.i18next.use({
+                    name,
+                    process: (value, key, options) => {
+                        const topic = this.topics.get(name);
+                        if (!topic)
+                            return value;
+                        return topic.translate(value, key, options);
+                    },
+                    type: 'postProcessor',
+                });
+            }
+            const additionalTranslatorsToRegister = this.translatorRegistrationsBuffer[name];
+            if (additionalTranslatorsToRegister) {
+                Object.entries(additionalTranslatorsToRegister).forEach(([translatorName, translator]) => {
+                    topic.setTranslator(translatorName, translator);
+                });
+                delete this.translatorRegistrationsBuffer[name];
+            }
             return topic;
         };
         this.disableTopic = (topicName) => {
@@ -51,14 +64,25 @@ export class TranslationBuilder {
     }
     registerTranslators(topicName, translators) {
         const topic = this.getTopic(topicName);
-        if (!topic)
+        if (!topic) {
+            if (!this.translatorRegistrationsBuffer[topicName])
+                this.translatorRegistrationsBuffer[topicName] = {};
+            Object.entries(translators).forEach(([translatorName, translator]) => {
+                this.translatorRegistrationsBuffer[topicName][translatorName] = translator;
+            });
             return;
+        }
         Object.entries(translators).forEach(([name, translator]) => {
             topic.setTranslator(name, translator);
         });
     }
     removeTranslators(topicName, translators) {
         const topic = this.getTopic(topicName);
+        if (this.translatorRegistrationsBuffer[topicName]) {
+            translators.forEach((translatorName) => {
+                delete this.translatorRegistrationsBuffer[topicName][translatorName];
+            });
+        }
         if (!topic)
             return;
         translators.forEach((name) => {

package/dist/i18n/TranslationBuilder/notifications/index.d.ts

@@ -1 +1,2 @@
 export { NotificationTranslationTopic } from './NotificationTranslationTopic';
+export * from './types';

package/dist/i18n/TranslationBuilder/notifications/index.js

@@ -1 +1,2 @@
 export { NotificationTranslationTopic } from './NotificationTranslationTopic';
+export * from './types';

package/dist/i18n/index.d.ts

@@ -1,5 +1,5 @@
 export * from './translations';
 export * from './Streami18n';
-export * from './TranslationBuilder/TranslationBuilder';
+export * from './TranslationBuilder';
 export { defaultDateTimeParser, defaultTranslatorFunction, isDate, isDayOrMoment, isLanguageSupported, isNumberOrString, } from './utils';
 export * from './types';

package/dist/i18n/index.js

@@ -1,5 +1,5 @@
 export * from './translations';
 export * from './Streami18n';
-export * from './TranslationBuilder/TranslationBuilder';
+export * from './TranslationBuilder';
 export { defaultDateTimeParser, defaultTranslatorFunction, isDate, isDayOrMoment, isLanguageSupported, isNumberOrString, } from './utils';
 export * from './types';

package/dist/index.browser.cjs

@@ -18017,6 +18017,7 @@ __export(src_exports, {
   MicIcon: () => MicIcon,
   Modal: () => Modal,
   ModalGallery: () => ModalGallery,
+  NotificationTranslationTopic: () => NotificationTranslationTopic,
   PauseIcon: () => PauseIcon2,
   PinIcon: () => PinIcon,
   PinIndicator: () => PinIndicator,
@@ -44087,18 +44088,33 @@ var TranslationBuilder = class {
   constructor(i18next) {
     this.i18next = i18next;
     this.topics = /* @__PURE__ */ new Map();
+    // need to keep a registration buffer so that translators can be registered once a topic is registered
+    // what does not happen when Streami18n is instantiated but rather once Streami18n.init() is invoked
+    this.translatorRegistrationsBuffer = {};
     this.registerTopic = (name2, Topic) => {
-      const topic = new Topic({ i18next: this.i18next });
-      this.topics.set(name2, topic);
-      this.i18next.use({
-        name: name2,
-        process: (value, key, options) => {
-          const topic2 = this.topics.get(name2);
-          if (!topic2) return value;
-          return topic2.translate(value, key, options);
-        },
-        type: "postProcessor"
-      });
+      let topic = this.topics.get(name2);
+      if (!topic) {
+        topic = new Topic({ i18next: this.i18next });
+        this.topics.set(name2, topic);
+        this.i18next.use({
+          name: name2,
+          process: (value, key, options) => {
+            const topic2 = this.topics.get(name2);
+            if (!topic2) return value;
+            return topic2.translate(value, key, options);
+          },
+          type: "postProcessor"
+        });
+      }
+      const additionalTranslatorsToRegister = this.translatorRegistrationsBuffer[name2];
+      if (additionalTranslatorsToRegister) {
+        Object.entries(additionalTranslatorsToRegister).forEach(
+          ([translatorName, translator]) => {
+            topic.setTranslator(translatorName, translator);
+          }
+        );
+        delete this.translatorRegistrationsBuffer[name2];
+      }
       return topic;
     };
     this.disableTopic = (topicName) => {
@@ -44115,13 +44131,25 @@ var TranslationBuilder = class {
   }
   registerTranslators(topicName, translators) {
     const topic = this.getTopic(topicName);
-    if (!topic) return;
+    if (!topic) {
+      if (!this.translatorRegistrationsBuffer[topicName])
+        this.translatorRegistrationsBuffer[topicName] = {};
+      Object.entries(translators).forEach(([translatorName, translator]) => {
+        this.translatorRegistrationsBuffer[topicName][translatorName] = translator;
+      });
+      return;
+    }
     Object.entries(translators).forEach(([name2, translator]) => {
       topic.setTranslator(name2, translator);
     });
   }
   removeTranslators(topicName, translators) {
     const topic = this.getTopic(topicName);
+    if (this.translatorRegistrationsBuffer[topicName]) {
+      translators.forEach((translatorName) => {
+        delete this.translatorRegistrationsBuffer[topicName][translatorName];
+      });
+    }
     if (!topic) return;
     translators.forEach((name2) => {
       topic.removeTranslator(name2);
@@ -45397,7 +45425,7 @@ var mousewheelListener2 = (event) => {
 var InfiniteScroll = (props) => {
   const {
     children,
-    element: element4 = "div",
+    element: Component2 = "div",
     hasMore,
     hasMoreNewer,
     hasNextPage,
@@ -45419,17 +45447,17 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  const scrollComponent = (0, import_react181.useRef)(void 0);
+  const [scrollComponent, setScrollComponent] = (0, import_react181.useState)(null);
   const previousOffset = (0, import_react181.useRef)(void 0);
   const previousReverseOffset = (0, import_react181.useRef)(void 0);
   const scrollListenerRef = (0, import_react181.useRef)(void 0);
   scrollListenerRef.current = () => {
-    const element5 = scrollComponent.current;
-    if (!element5 || element5.offsetParent === null) {
+    const element4 = scrollComponent;
+    if (!element4 || element4.offsetParent === null) {
       return;
     }
-    const parentElement = element5.parentElement;
-    const offset = element5.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
+    const parentElement = element4.parentElement;
+    const offset = element4.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
     const reverseOffset = parentElement.scrollTop;
     if (listenToScroll) {
       listenToScroll(offset, reverseOffset, threshold);
@@ -45458,7 +45486,7 @@ var InfiniteScroll = (props) => {
     );
   }, []);
   (0, import_react181.useEffect)(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
+    const scrollElement = scrollComponent?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
     scrollElement.addEventListener("scroll", scrollListener, useCapture);
@@ -45468,29 +45496,16 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("scroll", scrollListener, useCapture);
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
-  }, [initialLoad, useCapture]);
+  }, [initialLoad, scrollComponent, useCapture]);
   (0, import_react181.useEffect)(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
-    if (scrollElement) {
-      scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
-    }
+    const scrollElement = scrollComponent?.parentNode;
+    if (!scrollElement) return;
+    scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
     return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener("wheel", mousewheelListener2, useCapture);
-      }
+      scrollElement.removeEventListener("wheel", mousewheelListener2, useCapture);
     };
-  }, [useCapture]);
-  const attributes = {
-    ...elementProps,
-    ref: (element5) => {
-      scrollComponent.current = element5;
-    }
-  };
-  const childrenArray = [loader, children];
-  if (head) {
-    childrenArray.unshift(head);
-  }
-  return import_react181.default.createElement(element4, attributes, childrenArray);
+  }, [scrollComponent, useCapture]);
+  return /* @__PURE__ */ import_react181.default.createElement(Component2, { ...elementProps, ref: setScrollComponent }, head, loader, children);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
@@ -46738,10 +46753,10 @@ function VirtualizedMessageList(props) {
   );
 }
 
-// src/components/Message/MessageThreadReplyInChannelButtonIndicator.tsx
+// src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx
 var import_react199 = __toESM(require("react"));
 var import_stream_chat6 = require("stream-chat");
-var MessageThreadReplyInChannelButtonIndicator = () => {
+var MessageIsThreadReplyInChannelButtonIndicator = () => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
@@ -46762,7 +46777,7 @@ var MessageThreadReplyInChannelButtonIndicator = () => {
       },
       origin: {
         context: { threadReply: message },
-        emitter: "MessageThreadReplyInChannelButtonIndicator"
+        emitter: "MessageIsThreadReplyInChannelButtonIndicator"
       }
     });
   });
@@ -47262,7 +47277,7 @@ var MessageSimpleWithContext = (props) => {
     MessageBlocked: MessageBlocked2 = MessageBlocked,
     MessageBouncePrompt: MessageBouncePrompt2 = MessageBouncePrompt,
     MessageDeleted: MessageDeleted2 = MessageDeleted,
-    MessageIsThreadReplyInChannelButtonIndicator = MessageThreadReplyInChannelButtonIndicator,
+    MessageIsThreadReplyInChannelButtonIndicator: MessageIsThreadReplyInChannelButtonIndicator2 = MessageIsThreadReplyInChannelButtonIndicator,
     MessageRepliesCountButton: MessageRepliesCountButton2 = MessageRepliesCountButton,
     MessageStatus: MessageStatus2 = MessageStatus,
     MessageTimestamp: MessageTimestamp2 = MessageTimestamp,
@@ -47367,7 +47382,7 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleOpenThread,
       reply_count: message.reply_count
     }
-  ), showIsReplyInChannel && /* @__PURE__ */ import_react207.default.createElement(MessageIsThreadReplyInChannelButtonIndicator, null), showMetadata && /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react207.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react207.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react207.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react207.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t("Edited")), isEdited && /* @__PURE__ */ import_react207.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
+  ), showIsReplyInChannel && /* @__PURE__ */ import_react207.default.createElement(MessageIsThreadReplyInChannelButtonIndicator2, null), showMetadata && /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react207.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react207.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react207.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react207.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t("Edited")), isEdited && /* @__PURE__ */ import_react207.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
 };
 var MemoizedMessageSimple = import_react207.default.memo(
   MessageSimpleWithContext,
@@ -52623,7 +52638,7 @@ var useChat = ({
   };
   (0, import_react272.useEffect)(() => {
     if (!client) return;
-    const version = "13.1.0";
+    const version = "13.1.2";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);