stream-chat-react 10.4.2 → 10.4.3

package/dist/index.cjs.js

@@ -33776,7 +33776,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.4.2';
+var version = '10.4.3';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -33962,9 +33962,12 @@ var Chat = function (props) {
     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,
@@ -34069,6 +34072,8 @@ var InfiniteScroll = function (props) {
         if (listenToScroll) {
             listenToScroll(offset, reverseOffset, threshold);
         }
+        if (isLoading)
+            return;
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -34080,10 +34085,11 @@ var InfiniteScroll = function (props) {
     }, [
         hasPreviousPageFlag,
         hasNextPageFlag,
-        threshold,
+        isLoading,
         listenToScroll,
         loadPreviousPageFn,
         loadNextPageFn,
+        threshold,
     ]);
     React.useEffect(function () {
         deprecationAndReplacementWarning([
@@ -34093,19 +34099,18 @@ var InfiniteScroll = function (props) {
             [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
         ], 'InfiniteScroll');
     }, []);
-    React.useEffect(function () {
+    React.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.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -34896,8 +34901,9 @@ var useMessageListElements = function (props) {
     return elements;
 };
 
+// FIXME: change this generic name to something like useAdjustScrollPositionToListSize
 function useMessageListScrollManager(params) {
-    var onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
+    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.useRef({
         offsetHeight: 0,
@@ -34905,7 +34911,7 @@ function useMessageListScrollManager(params) {
     });
     var messages = React.useRef();
     var scrollTop = React.useRef(0);
-    React.useEffect(function () {
+    React.useLayoutEffect(function () {
         var _a, _b, _c;
         var prevMeasures = measures.current;
         var prevMessages = messages.current;
@@ -34919,8 +34925,8 @@ function useMessageListScrollManager(params) {
             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);
                     }
                 }
@@ -34953,7 +34959,7 @@ function useMessageListScrollManager(params) {
 }
 
 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.useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
     var _d = React.useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
     var _e = React.useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
@@ -34977,6 +34983,7 @@ var useScrollLocationLogic = function (params) {
         }
     }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
+        loadMoreScrollThreshold: loadMoreScrollThreshold,
         messages: messages,
         onScrollBy: function (scrollBy) {
             listElement === null || listElement === void 0 ? void 0 : listElement.scrollBy({ top: scrollBy });
@@ -35125,16 +35132,18 @@ var MessageListMainPanel = function (_a) {
 };
 
 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,
@@ -35221,7 +35230,7 @@ var MessageListWithContext = function (props) {
     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({ 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({ 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' }))))),