stream-chat-react 11.6.0 → 11.7.0

package/dist/browser.full-bundle.js

@@ -51259,12 +51259,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var _e = React$2.useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
         var closeToBottom = React$2.useRef(false);
         var closeToTop = React$2.useRef(false);
-        var scrollCounter = React$2.useRef({ autoScroll: 0, scroll: 0 });
         var scrollToBottom = React$2.useCallback(function () {
             if (!(listElement === null || listElement === void 0 ? void 0 : listElement.scrollTo) || hasMoreNewer || suppressAutoscroll) {
                 return;
             }
-            scrollCounter.current.autoScroll += 1;
             listElement.scrollTo({
                 top: listElement.scrollHeight,
             });
@@ -51343,9 +51341,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return 0 <= targetMessageY && targetMessageY <= msgListHeight;
     };
     var useUnreadMessagesNotification = function (_a) {
-        var unreadCount = _a.unreadCount;
+        var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, unreadCount = _a.unreadCount;
         var messages = useChannelStateContext('UnreadMessagesNotification').messages;
         var _b = React$2.useState(false), show = _b[0], setShow = _b[1];
+        var isScrolledAboveTargetTop = React$2.useRef(false);
         var intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';
         React$2.useEffect(function () {
             if (!(unreadCount && intersectionObserverIsSupported)) {
@@ -51365,14 +51364,28 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 if (!elements.length)
                     return;
                 var _a = elements[0], boundingClientRect = _a.boundingClientRect, isIntersecting = _a.isIntersecting, rootBounds = _a.rootBounds;
-                var isScrolledAboveTargetTop = rootBounds && boundingClientRect && rootBounds.bottom < boundingClientRect.top;
-                setShow(!isIntersecting && !isScrolledAboveTargetTop);
+                var isScrolledAboveTargetTopCurrent = !!(rootBounds &&
+                    boundingClientRect &&
+                    rootBounds.bottom < boundingClientRect.top);
+                setShow(!isIntersecting && !isScrolledAboveTargetTopCurrent);
+                isScrolledAboveTargetTop.current = isScrolledAboveTargetTopCurrent;
             }, { root: msgListPanel });
             observer.observe(observedTarget);
             return function () {
                 observer.disconnect();
             };
         }, [intersectionObserverIsSupported, messages, unreadCount]);
+        React$2.useEffect(function () {
+            /**
+             * Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).
+             * The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom
+             * and at the same time scrolled above the observed target.
+             */
+            if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
+                setShow(true);
+                isScrolledAboveTargetTop.current = false;
+            }
+        }, [isMessageListScrolledToBottom, unreadCount]);
         return { show: show && intersectionObserverIsSupported };
     };
 
@@ -51708,9 +51721,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var _u = useComponentContext('MessageList'), _v = _u.EmptyStateIndicator, EmptyStateIndicator$1 = _v === void 0 ? EmptyStateIndicator : _v, _w = _u.LoadingIndicator, LoadingIndicator$1 = _w === void 0 ? LoadingIndicator : _w, _x = _u.MessageListNotifications, MessageListNotifications$1 = _x === void 0 ? MessageListNotifications : _x, _y = _u.MessageNotification, MessageNotification$1 = _y === void 0 ? MessageNotification : _y, _z = _u.TypingIndicator, TypingIndicator$1 = _z === void 0 ? TypingIndicator : _z, _0 = _u.UnreadMessagesNotification, UnreadMessagesNotification$1 = _0 === void 0 ? UnreadMessagesNotification : _0;
         var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
         var currentUserChannelReadState = client.user && (read === null || read === void 0 ? void 0 : read[client.user.id]);
-        var showUnreadMessagesNotification = useUnreadMessagesNotification({
-            unreadCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages,
-        }).show;
         var _1 = useScrollLocationLogic({
             hasMoreNewer: hasMoreNewer,
             listElement: listElement,
@@ -51719,6 +51729,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             scrolledUpThreshold: props.scrolledUpThreshold,
             suppressAutoscroll: suppressAutoscroll,
         }), hasNewMessages = _1.hasNewMessages, isMessageListScrolledToBottom = _1.isMessageListScrolledToBottom, onScroll = _1.onScroll, scrollToBottom = _1.scrollToBottom, wrapperRect = _1.wrapperRect;
+        var showUnreadMessagesNotification = useUnreadMessagesNotification({
+            isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+            unreadCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages,
+        }).show;
         useMarkRead({
             isMessageListScrolledToBottom: isMessageListScrolledToBottom,
             markReadOnScrolledToBottom: markReadOnScrolledToBottom,
@@ -55113,7 +55127,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
     var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
-    var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs) {
+    var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels) {
         if (recoveryThrottleIntervalMs === void 0) { recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS; }
         var _a = useChatContext('usePaginatedChannels').channelsQueryState, error = _a.error, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
         var _b = React$2.useState([]), channels = _b[0], setChannels = _b[1];
@@ -55128,49 +55142,61 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var filterString = React$2.useMemo(function () { return JSON.stringify(filters); }, [filters]);
         var sortString = React$2.useMemo(function () { return JSON.stringify(sort); }, [sort]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
-            var offset, newOptions, channelQueryResponse, newChannels, err_1;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        setError(null);
-                        if (queryType === 'reload') {
-                            setChannels([]);
-                            setQueryInProgress('reload');
-                        }
-                        else {
-                            setQueryInProgress('load-more');
-                        }
-                        offset = queryType === 'reload' ? 0 : channels.length;
-                        newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: offset }, options);
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
-                    case 2:
-                        channelQueryResponse = _b.sent();
-                        newChannels = queryType === 'reload'
-                            ? channelQueryResponse
-                            : uniqBy(__spreadArray(__spreadArray([], channels, true), channelQueryResponse, true), 'cid');
-                        setChannels(newChannels);
-                        setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-                        // Set active channel only on load of first page
-                        if (!offset && activeChannelHandler) {
-                            activeChannelHandler(newChannels, setChannels);
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        err_1 = _b.sent();
-                        console.warn(err_1);
-                        setError(err_1);
-                        return [3 /*break*/, 4];
-                    case 4:
-                        setQueryInProgress(null);
-                        return [2 /*return*/];
-                }
+        var queryChannels = function (queryType) {
+            if (queryType === void 0) { queryType = 'load-more'; }
+            return __awaiter(void 0, void 0, void 0, function () {
+                var offset, newOptions, channelQueryResponse, newChannels, err_1;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            setError(null);
+                            if (queryType === 'reload') {
+                                setChannels([]);
+                            }
+                            setQueryInProgress(queryType);
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, , 7]);
+                            if (!customQueryChannels) return [3 /*break*/, 3];
+                            return [4 /*yield*/, customQueryChannels({
+                                    currentChannels: channels,
+                                    queryType: queryType,
+                                    setChannels: setChannels,
+                                    setHasNextPage: setHasNextPage,
+                                })];
+                        case 2:
+                            _b.sent();
+                            return [3 /*break*/, 5];
+                        case 3:
+                            offset = queryType === 'reload' ? 0 : channels.length;
+                            newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: offset }, options);
+                            return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
+                        case 4:
+                            channelQueryResponse = _b.sent();
+                            newChannels = queryType === 'reload'
+                                ? channelQueryResponse
+                                : uniqBy(__spreadArray(__spreadArray([], channels, true), channelQueryResponse, true), 'cid');
+                            setChannels(newChannels);
+                            setHasNextPage(channelQueryResponse.length >= newOptions.limit);
+                            // Set active channel only on load of first page
+                            if (!offset && activeChannelHandler) {
+                                activeChannelHandler(newChannels, setChannels);
+                            }
+                            _b.label = 5;
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            err_1 = _b.sent();
+                            console.warn(err_1);
+                            setError(err_1);
+                            return [3 /*break*/, 7];
+                        case 7:
+                            setQueryInProgress(null);
+                            return [2 /*return*/];
+                    }
+                });
             });
-        }); };
+        };
         var throttleRecover = React$2.useCallback(function () {
             var now = Date.now();
             var isFirstRecovery = !lastRecoveryTimestamp.current;
@@ -55883,7 +55909,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     var DEFAULT_SORT = {};
     var UnMemoizedChannelList = function (props) {
         var _a, _b;
-        var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onMessageNewHandler = props.onMessageNewHandler, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
+        var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, customQueryChannels = props.customQueryChannels, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onMessageNewHandler = props.onMessageNewHandler, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
         var _q = useChatContext('ChannelList'), channel = _q.channel, channelsQueryState = _q.channelsQueryState, client = _q.client, closeMobileNav = _q.closeMobileNav, customClasses = _q.customClasses, _r = _q.navOpen, navOpen = _r === void 0 ? false : _r, setActiveChannel = _q.setActiveChannel, theme = _q.theme, useImageFlagEmojisOnWindows = _q.useImageFlagEmojisOnWindows;
         var channelListRef = React$2.useRef(null);
         var _s = React$2.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
@@ -55949,7 +55975,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
-        var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
+        var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
         var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
         useMobileNavigation(channelListRef, navOpen, closeMobileNav);
         useMessageNewListener(setChannels, onMessageNewHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -56015,7 +56041,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.6.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.7.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;