stream-chat-react 10.4.2 → 10.4.3

package/dist/browser.full-bundle.js

@@ -48132,7 +48132,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     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 = '10.4.2';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.4.3';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -48318,9 +48318,12 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
         var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
         var channelsQueryState = useChannelsQueryState();
-        var themeVersion = (getComputedStyle(document.documentElement)
-            .getPropertyValue('--str-chat__theme-version')
-            .replace(' ', '') || '1');
+        var themeVersion = typeof window !== 'undefined'
+            ? (window
+                .getComputedStyle(document.documentElement)
+                .getPropertyValue('--str-chat__theme-version')
+                .replace(' ', '') || '1')
+            : '1';
         useCustomStyles(darkMode ? darkModeTheme : customStyles);
         var chatContextValue = useCreateChatContext({
             channel: channel,
@@ -48439,6 +48442,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             if (listenToScroll) {
                 listenToScroll(offset, reverseOffset, threshold);
             }
+            if (isLoading)
+                return;
             if (reverseOffset < Number(threshold) &&
                 typeof loadPreviousPageFn === 'function' &&
                 hasPreviousPageFlag) {
@@ -48450,10 +48455,11 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         }, [
             hasPreviousPageFlag,
             hasNextPageFlag,
-            threshold,
+            isLoading,
             listenToScroll,
             loadPreviousPageFn,
             loadNextPageFn,
+            threshold,
         ]);
         React$2.useEffect(function () {
             deprecationAndReplacementWarning([
@@ -48463,19 +48469,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
             ], 'InfiniteScroll');
         }, []);
-        React$2.useEffect(function () {
+        React$2.useLayoutEffect(function () {
             var _a;
             var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
-            if (isLoading || !scrollElement) {
-                return function () { return undefined; };
-            }
+            if (!scrollElement)
+                return;
             scrollElement.addEventListener('scroll', scrollListener, useCapture);
             scrollElement.addEventListener('resize', scrollListener, useCapture);
             return function () {
                 scrollElement.removeEventListener('scroll', scrollListener, useCapture);
                 scrollElement.removeEventListener('resize', scrollListener, useCapture);
             };
-        }, [initialLoad, isLoading, scrollListener, useCapture]);
+        }, [initialLoad, scrollListener, useCapture]);
         React$2.useEffect(function () {
             var _a;
             var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -49276,8 +49281,9 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return elements;
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function useMessageListScrollManager(params) {
-        var onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// FIXME: change this generic name to something like useAdjustScrollPositionToListSize
+    function useMessageListScrollManager(params) {
+        var loadMoreScrollThreshold = params.loadMoreScrollThreshold, onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
         var client = useChatContext('useMessageListScrollManager').client;
         var measures = React$2.useRef({
             offsetHeight: 0,
@@ -49285,7 +49291,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         });
         var messages = React$2.useRef();
         var scrollTop = React$2.useRef(0);
-        React$2.useEffect(function () {
+        React$2.useLayoutEffect(function () {
             var _a, _b, _c;
             var prevMeasures = measures.current;
             var prevMessages = messages.current;
@@ -49299,8 +49305,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 if (prevMessages.length < newMessages.length) {
                     // messages added to the top
                     if ((lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.id) === lastNewMessage.id) {
-                        var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
-                        if (scrollTop.current === 0) {
+                        if (scrollTop.current < loadMoreScrollThreshold) {
+                            var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
                             onScrollBy(listHeightDelta);
                         }
                     }
@@ -49333,7 +49339,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useScrollLocationLogic = function (params) {
-        var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
+        var loadMoreScrollThreshold = params.loadMoreScrollThreshold, _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
         var _c = React$2.useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
         var _d = React$2.useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
         var _e = React$2.useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
@@ -49357,6 +49363,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }
         }, [listElement, hasMoreNewer]);
         var updateScrollTop = useMessageListScrollManager({
+            loadMoreScrollThreshold: loadMoreScrollThreshold,
             messages: messages,
             onScrollBy: function (scrollBy) {
                 listElement === null || listElement === void 0 ? void 0 : listElement.scrollBy({ top: scrollBy });
@@ -49507,16 +49514,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageListWithContext = function (props) {
-        var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+        var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
         _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
         returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
         var _p = React__default["default"].useState(null), listElement = _p[0], setListElement = _p[1];
         var _q = React__default["default"].useState(null), ulElement = _q[0], setUlElement = _q[1];
         var customClasses = useChatContext('MessageList').customClasses;
         var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator$1 = _s === void 0 ? EmptyStateIndicator : _s, _t = _r.LoadingIndicator, LoadingIndicator$1 = _t === void 0 ? LoadingIndicator : _t, _u = _r.MessageListNotifications, MessageListNotifications$1 = _u === void 0 ? MessageListNotifications : _u, _v = _r.MessageNotification, MessageNotification$1 = _v === void 0 ? MessageNotification : _v, _w = _r.TypingIndicator, TypingIndicator$1 = _w === void 0 ? TypingIndicator : _w;
+        var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
         var _x = useScrollLocationLogic({
             hasMoreNewer: hasMoreNewer,
             listElement: listElement,
+            loadMoreScrollThreshold: loadMoreScrollThreshold,
             messages: messages,
             scrolledUpThreshold: props.scrolledUpThreshold,
             suppressAutoscroll: suppressAutoscroll,
@@ -49603,7 +49612,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var showEmptyStateIndicator = elements.length === 0 && !threadList;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(MessageListMainPanel, null,
-                React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign$8({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps),
+                React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign$8({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps, { threshold: loadMoreScrollThreshold }),
                     React__default["default"].createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                     React__default["default"].createElement(TypingIndicator$1, { threadList: threadList }),
                     React__default["default"].createElement("div", { key: 'bottom' }))))),