stream-chat-react 12.0.0 → 12.2.0

package/dist/index.browser.cjs

@@ -8278,7 +8278,7 @@ var require_disallow_node = __commonJS({
 var require_ast_to_react = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/ast-to-react.js"(exports, module2) {
     "use strict";
-    var React172 = require("react");
+    var React171 = require("react");
     var xtend = require_immutable();
     var ReactIs2 = require("react-is");
     function astToReact(node2, options) {
@@ -8305,7 +8305,7 @@ var require_ast_to_react = __commonJS({
         throw new Error("Renderer for type `".concat(node2.type, "` not defined or is not renderable"));
       }
       var nodeProps = getNodeProps(node2, key, options, renderer, parent, index3);
-      return React172.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
+      return React171.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
       function resolveChildren() {
         return node2.children && node2.children.map(function(childNode, i) {
           return astToReact(childNode, options, {
@@ -8319,7 +8319,7 @@ var require_ast_to_react = __commonJS({
       var props = {
         key
       };
-      var isSimpleRenderer = typeof renderer === "string" || renderer === React172.Fragment;
+      var isSimpleRenderer = typeof renderer === "string" || renderer === React171.Fragment;
       if (opts.sourcePos && node2.position) {
         props["data-sourcepos"] = flattenPosition2(node2.position);
       }
@@ -8472,14 +8472,14 @@ var require_ast_to_react = __commonJS({
     function mergeNodeChildren(node2, parsedChildren) {
       var el = node2.element;
       if (Array.isArray(el)) {
-        var Fragment2 = React172.Fragment || "div";
-        return React172.createElement(Fragment2, null, el);
+        var Fragment2 = React171.Fragment || "div";
+        return React171.createElement(Fragment2, null, el);
       }
       if (el.props.children || parsedChildren) {
-        var children = React172.Children.toArray(el.props.children).concat(parsedChildren);
-        return React172.cloneElement(el, null, children);
+        var children = React171.Children.toArray(el.props.children).concat(parsedChildren);
+        return React171.cloneElement(el, null, children);
       }
-      return React172.cloneElement(el, null);
+      return React171.cloneElement(el, null);
     }
     function flattenPosition2(pos) {
       return [pos.start.line, ":", pos.start.column, "-", pos.end.line, ":", pos.end.column].map(String).join("");
@@ -8603,9 +8603,9 @@ var require_renderers = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/renderers.js"(exports, module2) {
     "use strict";
     var xtend = require_immutable();
-    var React172 = require("react");
-    var supportsStringRender = parseInt((React172.version || "16").slice(0, 2), 10) >= 16;
-    var createElement = React172.createElement;
+    var React171 = require("react");
+    var supportsStringRender = parseInt((React171.version || "16").slice(0, 2), 10) >= 16;
+    var createElement = React171.createElement;
     module2.exports = {
       break: "br",
       paragraph: "p",
@@ -8641,7 +8641,7 @@ var require_renderers = __commonJS({
     }
     function Root(props) {
       var className = props.className;
-      var root2 = !className && React172.Fragment || "div";
+      var root2 = !className && React171.Fragment || "div";
       return createElement(root2, className ? {
         className
       } : null, props.children);
@@ -8697,7 +8697,7 @@ var require_renderers = __commonJS({
       var dangerous = props.allowDangerousHtml || props.escapeHtml === false;
       var tag = props.isBlock ? "div" : "span";
       if (!dangerous) {
-        return createElement(React172.Fragment || tag, null, props.value);
+        return createElement(React171.Fragment || tag, null, props.value);
       }
       var nodeProps = {
         dangerouslySetInnerHTML: {
@@ -8707,7 +8707,7 @@ var require_renderers = __commonJS({
       return createElement(tag, nodeProps);
     }
     function ParsedHtml(props) {
-      return props["data-sourcepos"] ? React172.cloneElement(props.element, {
+      return props["data-sourcepos"] ? React171.cloneElement(props.element, {
         "data-sourcepos": props["data-sourcepos"]
       }) : props.element;
     }
@@ -43427,7 +43427,7 @@ var import_react162 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
 var import_react160 = __toESM(require("react"));
-var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner";
+var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner str-chat__message-list-main-panel";
 var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react160.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -43465,9 +43465,9 @@ var useUnreadMessagesNotification = ({
       setShow(false);
       return;
     }
-    const msgListPanel = document.querySelector(`.${MESSAGE_LIST_MAIN_PANEL_CLASS}`);
+    const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
     if (!msgListPanel) return;
-    const observedTarget = document.querySelector(`.${UNREAD_MESSAGE_SEPARATOR_CLASS}`);
+    const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
     if (!observedTarget) {
       setShow(true);
       return;
@@ -44153,7 +44153,8 @@ var MessageListWithContext = (props) => {
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
     MessageNotification: MessageNotification2 = MessageNotification,
     TypingIndicator: TypingIndicator2 = TypingIndicator,
-    UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification
+    UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification,
+    MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel
   } = useComponentContext("MessageList");
   const {
     hasNewMessages,
@@ -44257,7 +44258,7 @@ var MessageListWithContext = (props) => {
     }
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
+  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
     "div",
     {
       className: (0, import_clsx38.default)(messageListClass, customClasses?.threadList),
@@ -44535,39 +44536,39 @@ var useMessageSetKey = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
-var import_react183 = __toESM(require("react"));
+var import_react183 = require("react");
 var useScrollToBottomOnNewMessage = ({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus
 }) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = import_react183.default.useState(
-    false
-  );
-  const resetNewMessagesReceivedInBackground = (0, import_react183.useCallback)(() => {
-    setNewMessagesReceivedInBackground(false);
-  }, []);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react183.useState)(false);
+  const scrollToBottomIfConfigured = (0, import_react183.useRef)();
+  scrollToBottomIfConfigured.current = (event) => {
+    if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
+      return;
+    }
+    setTimeout(scrollToBottom, 100);
+  };
   (0, import_react183.useEffect)(() => {
     setNewMessagesReceivedInBackground(true);
   }, [messages]);
-  const scrollToBottomIfConfigured = (0, import_react183.useCallback)(
-    (event) => {
-      if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window)
-        return;
-      setTimeout(scrollToBottom, 100);
-    },
-    [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]
-  );
   (0, import_react183.useEffect)(() => {
+    const handleFocus = (event) => {
+      scrollToBottomIfConfigured.current?.(event);
+    };
+    const handleBlur = () => {
+      setNewMessagesReceivedInBackground(false);
+    };
     if (typeof window !== "undefined") {
-      window.addEventListener("focus", scrollToBottomIfConfigured);
-      window.addEventListener("blur", resetNewMessagesReceivedInBackground);
+      window.addEventListener("focus", handleFocus);
+      window.addEventListener("blur", handleBlur);
     }
     return () => {
-      window.removeEventListener("focus", scrollToBottomIfConfigured);
-      window.removeEventListener("blur", resetNewMessagesReceivedInBackground);
+      window.removeEventListener("focus", handleFocus);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [scrollToBottomIfConfigured]);
+  }, []);
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
@@ -44668,6 +44669,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     messageGroupStyles,
     MessageSystem,
     numItemsPrepended,
+    openThread,
     ownMessagesReadByOthers,
     processedMessages: messageList,
     reactionDetailsSort,
@@ -44720,6 +44722,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
       message,
       Message: MessageUIComponent,
       messageActions,
+      openThread,
       reactionDetailsSort,
       readBy: ownMessagesReadByOthers[message.id] || [],
       sortReactionDetails,
@@ -44786,6 +44789,7 @@ var VirtualizedMessageListWithContext = (props) => {
     messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
     messages,
     notifications,
+    openThread,
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0,
     read,
@@ -44814,6 +44818,7 @@ var VirtualizedMessageListWithContext = (props) => {
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
     MessageNotification: MessageNotification2 = MessageNotification,
     MessageSystem = EventComponent,
+    MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel,
     UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification,
     UnreadMessagesSeparator: UnreadMessagesSeparator2 = UnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
@@ -44966,7 +44971,7 @@ var VirtualizedMessageListWithContext = (props) => {
     };
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
-  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
+  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
     import_react_virtuoso3.Virtuoso,
     {
       atBottomStateChange,
@@ -45000,6 +45005,7 @@ var VirtualizedMessageListWithContext = (props) => {
         messageGroupStyles,
         MessageSystem,
         numItemsPrepended,
+        openThread,
         ownMessagesReadByOthers,
         processedMessages,
         reactionDetailsSort,
@@ -46190,7 +46196,7 @@ var useChannelDeletedListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.deleted", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelHiddenListener.ts
@@ -46214,7 +46220,7 @@ var useChannelHiddenListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.hidden", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelTruncatedListener.ts
@@ -46235,7 +46241,7 @@ var useChannelTruncatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.truncated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelUpdatedListener.ts
@@ -46268,7 +46274,7 @@ var useChannelUpdatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.updated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelVisibleListener.ts
@@ -46293,7 +46299,7 @@ var useChannelVisibleListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.visible", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
@@ -46310,7 +46316,7 @@ var useConnectionRecoveredListener = (forceUpdate) => {
     return () => {
       client.off("connection.recovered", handleEvent);
     };
-  }, []);
+  }, [client, forceUpdate]);
 };
 
 // src/components/ChannelList/hooks/useMessageNewListener.ts
@@ -46354,7 +46360,13 @@ var useMessageNewListener = (setChannels, customHandler, lockChannelOrder = fals
     return () => {
       client.off("message.new", handleEvent);
     };
-  }, [lockChannelOrder]);
+  }, [
+    allowNewMessagesFromUnfilteredChannels,
+    client,
+    customHandler,
+    lockChannelOrder,
+    setChannels
+  ]);
 };
 
 // src/components/ChannelList/hooks/useMobileNavigation.ts
@@ -46402,7 +46414,7 @@ var useNotificationAddedToChannelListener = (setChannels, customHandler, allowNe
     return () => {
       client.off("notification.added_to_channel", handleEvent);
     };
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
@@ -46427,7 +46439,7 @@ var useNotificationMessageNewListener = (setChannels, customHandler, allowNewMes
     return () => {
       client.off("notification.message_new", handleEvent);
     };
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
@@ -46448,7 +46460,7 @@ var useNotificationRemovedFromChannelListener = (setChannels, customHandler) =>
     return () => {
       client.off("notification.removed_from_channel", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -46555,7 +46567,7 @@ var useUserPresenceChangedListener = (setChannels) => {
     return () => {
       client.off("user.presence.changed", handleEvent);
     };
-  }, []);
+  }, [client, setChannels]);
 };
 
 // src/components/ChannelSearch/ChannelSearch.tsx
@@ -47322,7 +47334,9 @@ var UnMemoizedChannelList = (props) => {
       setActiveChannel(channels2[0], watchers);
     }
   };
-  const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+  const forceUpdate = (0, import_react212.useCallback)(() => setChannelUpdateCount((count) => count + 1), [
+    setChannelUpdateCount
+  ]);
   const onSearch = (0, import_react212.useCallback)((event) => {
     if (!event.target.value) {
       setSearchActive(false);