stream-chat-react 12.0.0 → 12.2.0

package/dist/index.node.cjs

@@ -10274,7 +10274,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"(exports2, module2) {
     "use strict";
-    var React171 = require("react");
+    var React170 = require("react");
     var xtend = require_immutable();
     var ReactIs2 = require("react-is");
     function astToReact(node2, options) {
@@ -10301,7 +10301,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 React171.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
+      return React170.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
       function resolveChildren() {
         return node2.children && node2.children.map(function(childNode, i) {
           return astToReact(childNode, options, {
@@ -10315,7 +10315,7 @@ var require_ast_to_react = __commonJS({
       var props = {
         key
       };
-      var isSimpleRenderer = typeof renderer === "string" || renderer === React171.Fragment;
+      var isSimpleRenderer = typeof renderer === "string" || renderer === React170.Fragment;
       if (opts.sourcePos && node2.position) {
         props["data-sourcepos"] = flattenPosition2(node2.position);
       }
@@ -10468,14 +10468,14 @@ var require_ast_to_react = __commonJS({
     function mergeNodeChildren(node2, parsedChildren) {
       var el = node2.element;
       if (Array.isArray(el)) {
-        var Fragment2 = React171.Fragment || "div";
-        return React171.createElement(Fragment2, null, el);
+        var Fragment2 = React170.Fragment || "div";
+        return React170.createElement(Fragment2, null, el);
       }
       if (el.props.children || parsedChildren) {
-        var children = React171.Children.toArray(el.props.children).concat(parsedChildren);
-        return React171.cloneElement(el, null, children);
+        var children = React170.Children.toArray(el.props.children).concat(parsedChildren);
+        return React170.cloneElement(el, null, children);
       }
-      return React171.cloneElement(el, null);
+      return React170.cloneElement(el, null);
     }
     function flattenPosition2(pos) {
       return [pos.start.line, ":", pos.start.column, "-", pos.end.line, ":", pos.end.column].map(String).join("");
@@ -10599,9 +10599,9 @@ var require_renderers = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/renderers.js"(exports2, module2) {
     "use strict";
     var xtend = require_immutable();
-    var React171 = require("react");
-    var supportsStringRender = parseInt((React171.version || "16").slice(0, 2), 10) >= 16;
-    var createElement = React171.createElement;
+    var React170 = require("react");
+    var supportsStringRender = parseInt((React170.version || "16").slice(0, 2), 10) >= 16;
+    var createElement = React170.createElement;
     module2.exports = {
       break: "br",
       paragraph: "p",
@@ -10637,7 +10637,7 @@ var require_renderers = __commonJS({
     }
     function Root(props) {
       var className = props.className;
-      var root2 = !className && React171.Fragment || "div";
+      var root2 = !className && React170.Fragment || "div";
       return createElement(root2, className ? {
         className
       } : null, props.children);
@@ -10693,7 +10693,7 @@ var require_renderers = __commonJS({
       var dangerous = props.allowDangerousHtml || props.escapeHtml === false;
       var tag = props.isBlock ? "div" : "span";
       if (!dangerous) {
-        return createElement(React171.Fragment || tag, null, props.value);
+        return createElement(React170.Fragment || tag, null, props.value);
       }
       var nodeProps = {
         dangerouslySetInnerHTML: {
@@ -10703,7 +10703,7 @@ var require_renderers = __commonJS({
       return createElement(tag, nodeProps);
     }
     function ParsedHtml(props) {
-      return props["data-sourcepos"] ? React171.cloneElement(props.element, {
+      return props["data-sourcepos"] ? React170.cloneElement(props.element, {
         "data-sourcepos": props["data-sourcepos"]
       }) : props.element;
     }
@@ -18555,8 +18555,8 @@ var require_mml_react_cjs_development = __commonJS({
     function _interopDefault(ex) {
       return ex && typeof ex === "object" && "default" in ex ? ex["default"] : ex;
     }
-    var React171 = require("react");
-    var React__default = _interopDefault(React171);
+    var React170 = require("react");
+    var React__default = _interopDefault(React170);
     var parseXml = _interopDefault(require_src());
     var dayjs = _interopDefault(require("dayjs"));
     var sanitizeUrl4 = require("@braintree/sanitize-url");
@@ -19341,8 +19341,8 @@ var require_mml_react_cjs_development = __commonJS({
         className: "mml-carousel__track"
       }, React__default.createElement("div", {
         className: "mml-carousel__slides"
-      }, React171.Children.map(children, function(child) {
-        return React171.cloneElement(child, {
+      }, React170.Children.map(children, function(child) {
+        return React170.cloneElement(child, {
           className: "mml-carousel__slide",
           slideWidth
         });
@@ -19386,7 +19386,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var Input = function Input2(_ref) {
       var name = _ref.name, label = _ref.label, _ref$value = _ref.value, value = _ref$value === void 0 ? "" : _ref$value, _ref$type = _ref.type, type = _ref$type === void 0 ? "text" : _ref$type, _ref$placeholder = _ref.placeholder, placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder;
-      var _useState = React171.useState(value), state = _useState[0], setState = _useState[1];
+      var _useState = React170.useState(value), state = _useState[0], setState = _useState[1];
       var id = "mml-" + name;
       return React__default.createElement(React__default.Fragment, null, label && React__default.createElement("label", {
         className: "mml-card-header",
@@ -19516,7 +19516,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var Number2 = function Number3(_ref) {
       var name = _ref.name, value = _ref.value;
-      var _useState = React171.useState(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
+      var _useState = React170.useState(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
       return React__default.createElement("div", {
         className: "mml-number"
       }, React__default.createElement("input", {
@@ -19553,7 +19553,7 @@ var require_mml_react_cjs_development = __commonJS({
     var VIRTUOSO_START_INDEX = 1e4;
     var DatePickerSelect = function DatePickerSelect2(props) {
       var onChange = props.onChange, icalFilter = props.icalFilter, getItemData2 = props.getItemData, itemClassName = props.itemClassName, interval = props.interval, format = props.format, value = props.value;
-      var generateItems = React171.useCallback(function(quantity, firstIdx) {
+      var generateItems = React170.useCallback(function(quantity, firstIdx) {
         return Array(quantity).fill(true).map(function(_, idx) {
           return getItemData2({
             interval,
@@ -19565,11 +19565,11 @@ var require_mml_react_cjs_development = __commonJS({
           return !icalFilter || icalFilter && icalFilter(newItem.value);
         });
       }, [interval, format, value, icalFilter, getItemData2]);
-      var _useState = React171.useState(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
-      var _useState2 = React171.useState(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
-      var initialIndexOffset = React171.useRef(INITIAL_INDEX);
-      var _useState3 = React171.useState(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
-      var handleClick = React171.useCallback(function(item) {
+      var _useState = React170.useState(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
+      var _useState2 = React170.useState(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
+      var initialIndexOffset = React170.useRef(INITIAL_INDEX);
+      var _useState3 = React170.useState(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
+      var handleClick = React170.useCallback(function(item) {
         onChange(item.value);
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
@@ -19583,12 +19583,12 @@ var require_mml_react_cjs_development = __commonJS({
         }
         setSelectedIdx(item.idx);
       }, [setItems, generateItems, initialIndexOffset, onChange]);
-      var appendItems = React171.useCallback(function(lastItemIndex) {
+      var appendItems = React170.useCallback(function(lastItemIndex) {
         setItems(function(items2) {
           return [].concat(items2, generateItems(ITEMS_PER_PAGE, lastItemIndex));
         });
       }, [setItems, generateItems]);
-      var prependItems = React171.useCallback(function() {
+      var prependItems = React170.useCallback(function() {
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
         if (initialIndexOffset) {
@@ -19600,7 +19600,7 @@ var require_mml_react_cjs_development = __commonJS({
         setFirstItemIndex(firstItemIndex2 - ITEMS_PER_PAGE);
         return false;
       }, [setItems, generateItems, initialIndexOffset]);
-      React171.useEffect(function() {
+      React170.useEffect(function() {
         if (value) {
           var initialSelectedIdx = null;
           for (var i = 0; i < items.length; i++) {
@@ -19670,7 +19670,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var DatePicker = function DatePicker2(_ref) {
       var name = _ref.name, selected = _ref.selected, dateInterval = _ref.dateInterval, timeInterval = _ref.timeInterval, dateFormat = _ref.dateFormat, timeFormat = _ref.timeFormat, fullDay = _ref.fullDay, icalFilter = _ref.icalFilter;
-      var _useState = React171.useState(selected), date = _useState[0], setDate = _useState[1];
+      var _useState = React170.useState(selected), date = _useState[0], setDate = _useState[1];
       var handleChangeDate = function handleChangeDate2(value) {
         setDate(function(prevDate) {
           return prevDate.set("date", value.get("date")).set("month", value.get("month")).set("year", value.get("year"));
@@ -19750,14 +19750,14 @@ var require_mml_react_cjs_development = __commonJS({
     }();
     var Scheduler = function Scheduler2(_ref2) {
       var name = _ref2.name, selected = _ref2.selected, icalAvailability = _ref2.icalAvailability, _ref2$duration = _ref2.duration, duration = _ref2$duration === void 0 ? 30 : _ref2$duration, _ref2$dateInterval = _ref2.dateInterval, dateInterval = _ref2$dateInterval === void 0 ? 1 : _ref2$dateInterval, _ref2$timeInterval = _ref2.timeInterval, timeInterval = _ref2$timeInterval === void 0 ? 30 : _ref2$timeInterval, _ref2$dateFormat = _ref2.dateFormat, dateFormat = _ref2$dateFormat === void 0 ? "ddd MMM DD" : _ref2$dateFormat, _ref2$timeFormat = _ref2.timeFormat, timeFormat = _ref2$timeFormat === void 0 ? "hh:mm A" : _ref2$timeFormat, _ref2$fullDay = _ref2.fullDay, fullDay = _ref2$fullDay === void 0 ? false : _ref2$fullDay;
-      var _useState = React171.useState(false), loading = _useState[0], setLoading = _useState[1];
-      var _useState2 = React171.useState(""), error = _useState2[0], setError = _useState2[1];
-      var _useState3 = React171.useState(function() {
+      var _useState = React170.useState(false), loading = _useState[0], setLoading = _useState[1];
+      var _useState2 = React170.useState(""), error = _useState2[0], setError = _useState2[1];
+      var _useState3 = React170.useState(function() {
         return function() {
           return true;
         };
       }), icalFilter = _useState3[0], setIcalFilter = _useState3[1];
-      React171.useEffect(function() {
+      React170.useEffect(function() {
         if (!icalAvailability) return;
         setLoading(true);
         setupIcalFilter(icalAvailability, duration).then(setIcalFilter)["catch"](function(err) {
@@ -19961,13 +19961,13 @@ var require_mml_react_cjs_development = __commonJS({
     }
     var MML2 = function MML3(_ref) {
       var source = _ref.source, onSubmit = _ref.onSubmit, converters2 = _ref.converters, _ref$theme = _ref.theme, theme = _ref$theme === void 0 ? "" : _ref$theme, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, _ref$Loading = _ref.Loading, Loading$1 = _ref$Loading === void 0 ? Loading : _ref$Loading, _ref$Error = _ref.Error, Error2 = _ref$Error === void 0 ? Error$1 : _ref$Error, _ref$Success = _ref.Success, Success$1 = _ref$Success === void 0 ? Success : _ref$Success;
-      var _useState = React171.useState(""), error = _useState[0], setError = _useState[1];
-      var _useState2 = React171.useState({
+      var _useState = React170.useState(""), error = _useState[0], setError = _useState[1];
+      var _useState2 = React170.useState({
         loading: false,
         error: "",
         success: ""
       }), submitState = _useState2[0], setSubmitState = _useState2[1];
-      var tree = React171.useMemo(function() {
+      var tree = React170.useMemo(function() {
         try {
           return Parse(source, converters2);
         } catch (e2) {
@@ -19976,7 +19976,7 @@ var require_mml_react_cjs_development = __commonJS({
           return null;
         }
       }, [source, converters2]);
-      var handleSubmit = React171.useCallback(/* @__PURE__ */ function() {
+      var handleSubmit = React170.useCallback(/* @__PURE__ */ function() {
         var _ref2 = _asyncToGenerator(/* @__PURE__ */ runtime_1.mark(function _callee(event) {
           var state;
           return runtime_1.wrap(function _callee$(_context) {
@@ -47994,7 +47994,7 @@ var import_react161 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
 var import_react159 = __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_react159.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -48032,9 +48032,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;
@@ -48720,7 +48720,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,
@@ -48824,7 +48825,7 @@ var MessageListWithContext = (props) => {
     }
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  return /* @__PURE__ */ import_react175.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react175.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react175.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react175.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react175.default.createElement(
+  return /* @__PURE__ */ import_react175.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react175.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react175.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react175.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react175.default.createElement(
     "div",
     {
       className: (0, import_clsx38.default)(messageListClass, customClasses?.threadList),
@@ -49102,39 +49103,39 @@ var useMessageSetKey = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
-var import_react182 = __toESM(require("react"));
+var import_react182 = require("react");
 var useScrollToBottomOnNewMessage = ({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus
 }) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = import_react182.default.useState(
-    false
-  );
-  const resetNewMessagesReceivedInBackground = (0, import_react182.useCallback)(() => {
-    setNewMessagesReceivedInBackground(false);
-  }, []);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react182.useState)(false);
+  const scrollToBottomIfConfigured = (0, import_react182.useRef)();
+  scrollToBottomIfConfigured.current = (event) => {
+    if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
+      return;
+    }
+    setTimeout(scrollToBottom, 100);
+  };
   (0, import_react182.useEffect)(() => {
     setNewMessagesReceivedInBackground(true);
   }, [messages]);
-  const scrollToBottomIfConfigured = (0, import_react182.useCallback)(
-    (event) => {
-      if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window)
-        return;
-      setTimeout(scrollToBottom, 100);
-    },
-    [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]
-  );
   (0, import_react182.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
@@ -49235,6 +49236,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     messageGroupStyles,
     MessageSystem,
     numItemsPrepended,
+    openThread,
     ownMessagesReadByOthers,
     processedMessages: messageList,
     reactionDetailsSort,
@@ -49287,6 +49289,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
       message,
       Message: MessageUIComponent,
       messageActions,
+      openThread,
       reactionDetailsSort,
       readBy: ownMessagesReadByOthers[message.id] || [],
       sortReactionDetails,
@@ -49353,6 +49356,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,
@@ -49381,6 +49385,7 @@ var VirtualizedMessageListWithContext = (props) => {
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
     MessageNotification: MessageNotification2 = MessageNotification,
     MessageSystem = EventComponent,
+    MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel,
     UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification,
     UnreadMessagesSeparator: UnreadMessagesSeparator2 = UnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
@@ -49533,7 +49538,7 @@ var VirtualizedMessageListWithContext = (props) => {
     };
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
-  return /* @__PURE__ */ import_react185.default.createElement(import_react185.default.Fragment, null, /* @__PURE__ */ import_react185.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react185.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react185.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react185.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react185.default.createElement(
+  return /* @__PURE__ */ import_react185.default.createElement(import_react185.default.Fragment, null, /* @__PURE__ */ import_react185.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react185.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react185.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react185.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react185.default.createElement(
     import_react_virtuoso2.Virtuoso,
     {
       atBottomStateChange,
@@ -49567,6 +49572,7 @@ var VirtualizedMessageListWithContext = (props) => {
         messageGroupStyles,
         MessageSystem,
         numItemsPrepended,
+        openThread,
         ownMessagesReadByOthers,
         processedMessages,
         reactionDetailsSort,
@@ -50757,7 +50763,7 @@ var useChannelDeletedListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.deleted", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelHiddenListener.ts
@@ -50781,7 +50787,7 @@ var useChannelHiddenListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.hidden", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelTruncatedListener.ts
@@ -50802,7 +50808,7 @@ var useChannelTruncatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.truncated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelUpdatedListener.ts
@@ -50835,7 +50841,7 @@ var useChannelUpdatedListener = (setChannels, customHandler, forceUpdate) => {
     return () => {
       client.off("channel.updated", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useChannelVisibleListener.ts
@@ -50860,7 +50866,7 @@ var useChannelVisibleListener = (setChannels, customHandler) => {
     return () => {
       client.off("channel.visible", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
@@ -50877,7 +50883,7 @@ var useConnectionRecoveredListener = (forceUpdate) => {
     return () => {
       client.off("connection.recovered", handleEvent);
     };
-  }, []);
+  }, [client, forceUpdate]);
 };
 
 // src/components/ChannelList/hooks/useMessageNewListener.ts
@@ -50921,7 +50927,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
@@ -50969,7 +50981,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
@@ -50994,7 +51006,7 @@ var useNotificationMessageNewListener = (setChannels, customHandler, allowNewMes
     return () => {
       client.off("notification.message_new", handleEvent);
     };
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
@@ -51015,7 +51027,7 @@ var useNotificationRemovedFromChannelListener = (setChannels, customHandler) =>
     return () => {
       client.off("notification.removed_from_channel", handleEvent);
     };
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
 
 // src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -51122,7 +51134,7 @@ var useUserPresenceChangedListener = (setChannels) => {
     return () => {
       client.off("user.presence.changed", handleEvent);
     };
-  }, []);
+  }, [client, setChannels]);
 };
 
 // src/components/ChannelSearch/ChannelSearch.tsx
@@ -51889,7 +51901,9 @@ var UnMemoizedChannelList = (props) => {
       setActiveChannel(channels2[0], watchers);
     }
   };
-  const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+  const forceUpdate = (0, import_react211.useCallback)(() => setChannelUpdateCount((count) => count + 1), [
+    setChannelUpdateCount
+  ]);
   const onSearch = (0, import_react211.useCallback)((event) => {
     if (!event.target.value) {
       setSearchActive(false);