stream-chat-react 10.2.0 → 10.3.0

package/dist/index.cjs.js

@@ -4281,7 +4281,7 @@ var MessageErrorIcon = function () { return (React__default["default"].createEle
 
 var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
     var _a, _b, _c;
-    var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e, channelConfig = _d.channelConfig;
+    var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e;
     var client = useChatContext('useUserRole').client;
     /**
      * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
@@ -4307,11 +4307,11 @@ var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
         (isMyMessage && channelCapabilities['update-own-message']);
     var canDelete = channelCapabilities['delete-any-message'] ||
         (isMyMessage && channelCapabilities['delete-own-message']);
-    var canFlag = !isMyMessage;
-    var canMute = !isMyMessage && (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.mutes);
+    var canFlag = !isMyMessage && channelCapabilities['flag-message'];
+    var canMute = !isMyMessage && channelCapabilities['mute-channel'];
     var canQuote = !disableQuotedMessages && channelCapabilities['quote-message'];
-    var canReact = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction'];
-    var canReply = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) !== false && channelCapabilities['send-reply'];
+    var canReact = channelCapabilities['send-reaction'];
+    var canReply = channelCapabilities['send-reply'];
     return {
         canDelete: canDelete,
         canEdit: canEdit,
@@ -10596,12 +10596,27 @@ var UnMemoizedReactionsList = function (props) {
  */
 var ReactionsList = React__default["default"].memo(UnMemoizedReactionsList);
 
+// todo: merge with ReactionsList/ButtonWithTooltip
+// avoiding breaking change of replacing <span> with <button>
+var WithTooltip = function (_a) {
+    var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, title = _a.title;
+    var _b = React.useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
+    var _c = useEnterLeaveHandlers({
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+    }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
+    var themeVersion = useChatContext('WithTooltip').themeVersion;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, title)),
+        React__default["default"].createElement("span", { onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, children)));
+};
 var UnMemoizedSimpleReactionsList = function (props) {
     var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
     var _a = useEmojiContext('SimpleReactionsList'), Emoji = _a.Emoji, emojiConfig = _a.emojiConfig;
     var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
     var _b = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _b.additionalEmojiProps, emojiData = _b.emojiData, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
     var _c = React.useState(undefined), tooltipReactionType = _c[0], setTooltipReactionType = _c[1];
+    var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
     var handleReaction = propHandleReaction || contextHandleReaction;
     if (!latestReactions.length)
         return null;
@@ -10611,7 +10626,7 @@ var UnMemoizedSimpleReactionsList = function (props) {
         return latestReactions
             .map(function (reaction) {
             var _a, _b;
-            if (reaction.type === type) {
+            if (type && reaction.type === type) {
                 return ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = reaction.user) === null || _b === void 0 ? void 0 : _b.id);
             }
             return null;
@@ -10624,16 +10639,18 @@ var UnMemoizedSimpleReactionsList = function (props) {
                 var _a;
                 var emojiObject = getEmojiByReactionType(reactionType);
                 var isOwnReaction = iHaveReactedWithReaction(reactionType);
+                var tooltipVisible = emojiObject && tooltipReactionType === (emojiObject === null || emojiObject === void 0 ? void 0 : emojiObject.id);
+                var tooltipContent = (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 : _a.join(', ');
                 return emojiObject ? (React__default["default"].createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                         'str-chat__message-reaction-own': isOwnReaction,
                     }), key: "".concat(emojiObject.id, "-").concat(i), onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
-                    React__default["default"].createElement("span", { onMouseEnter: function () { return setTooltipReactionType(reactionType); } },
+                    React__default["default"].createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
                         React__default["default"].createElement(React.Suspense, { fallback: null },
                             React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
-                        "\u00A0"),
-                    tooltipReactionType === emojiObject.id && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip str-chat__tooltip' },
-                        React__default["default"].createElement("div", { className: 'arrow' }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
-                        _a.join(', '))))) : null;
+                        "\u00A0",
+                        tooltipVisible && themeVersion === '1' && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
+                            React__default["default"].createElement("div", { className: 'arrow' }),
+                            tooltipContent))))) : null;
             }),
             React__default["default"].createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
 };
@@ -11788,8 +11805,8 @@ var ChannelListMessenger = function (props) {
     if (loading) {
         return React__default["default"].createElement(LoadingIndicator, null);
     }
-    return (React__default["default"].createElement("div", { className: 'str-chat__channel-list-messenger' },
-        React__default["default"].createElement("div", { "aria-label": 'Channel list', className: 'str-chat__channel-list-messenger__main', role: 'listbox' }, children)));
+    return (React__default["default"].createElement("div", { className: 'str-chat__channel-list-messenger str-chat__channel-list-messenger-react' },
+        React__default["default"].createElement("div", { "aria-label": 'Channel list', className: 'str-chat__channel-list-messenger__main str-chat__channel-list-messenger-react__main', role: 'listbox' }, children)));
 };
 
 var useChannelDeletedListener = function (setChannels, customHandler) {
@@ -12636,18 +12653,39 @@ var UnMemoizedEmptyStateIndicator = function (props) {
 };
 var EmptyStateIndicator = React__default["default"].memo(UnMemoizedEmptyStateIndicator);
 
-var UnMemoizedLoadMoreButton = function (props) {
-    var _a = props.children, children = _a === void 0 ? 'Load more' : _a, onClick = props.onClick, refreshing = props.refreshing;
+var deprecationAndReplacementWarning = function (pairs, component) {
+    pairs.forEach(function (data) {
+        var _a = [
+            Object.entries(data[0])[0],
+            Object.entries(data[1])[0],
+        ], _b = _a[0], oldName = _b[0], oldValue = _b[1], _c = _a[1], newName = _c[0], newValue = _c[1];
+        if ((typeof oldValue !== 'undefined' && typeof newValue === 'undefined') ||
+            (typeof oldValue !== 'undefined' && typeof newValue !== 'undefined')) {
+            console.warn("[Deprecation notice (".concat(component, ")]: prefer using prop ").concat(newName, " instead of ").concat(oldName));
+        }
+    });
+};
+
+var UnMemoizedLoadMoreButton = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? 'Load more' : _b, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+    var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+    React.useEffect(function () {
+        deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
+    }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
-        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React__default["default"].createElement(LoadingIndicator, null) : children)));
+        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : children)));
 };
 var LoadMoreButton = React__default["default"].memo(UnMemoizedLoadMoreButton);
 
 var UnMemoizedLoadMorePaginator = function (props) {
-    var children = props.children, hasNextPage = props.hasNextPage, _a = props.LoadMoreButton, LoadMoreButton$1 = _a === void 0 ? LoadMoreButton : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse;
+    var children = props.children, hasNextPage = props.hasNextPage, isLoading = props.isLoading, _a = props.LoadMoreButton, LoadMoreButton$1 = _a === void 0 ? LoadMoreButton : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse;
+    var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+    React.useEffect(function () {
+        deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMorePaginator');
+    }, []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         !reverse && children,
-        hasNextPage && React__default["default"].createElement(LoadMoreButton$1, { onClick: loadNextPage, refreshing: refreshing }),
+        hasNextPage && React__default["default"].createElement(LoadMoreButton$1, { isLoading: loadingState, onClick: loadNextPage }),
         reverse && children));
 };
 var LoadMorePaginator = React__default["default"].memo(UnMemoizedLoadMorePaginator);
@@ -12762,7 +12800,7 @@ var UnMemoizedChannelList = function (props) {
         };
         return React__default["default"].createElement(ChannelPreview, __assign({}, previewProps));
     };
-    var className = clsx((_a = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _a !== void 0 ? _a : 'str-chat', theme, (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) !== null && _b !== void 0 ? _b : 'str-chat-channel-list str-chat__channel-list', {
+    var className = clsx((_a = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _a !== void 0 ? _a : 'str-chat', theme, (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) !== null && _b !== void 0 ? _b : 'str-chat-channel-list str-chat__channel-list str-chat__channel-list-react', {
         'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
         'str-chat-channel-list--open': navOpen,
     });
@@ -12770,7 +12808,7 @@ var UnMemoizedChannelList = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: className, ref: channelListRef },
             showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
-            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
+            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
                 : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
 };
@@ -12779,7 +12817,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.2.0';
+var version = '10.3.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -13054,7 +13092,11 @@ var mousewheelListener = function (event) {
     }
 };
 var InfiniteScroll = function (props) {
-    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, _b = props.hasMore, hasMore = _b === void 0 ? false : _b, _c = props.hasMoreNewer, hasMoreNewer = _c === void 0 ? false : _c, head = props.head, _d = props.initialLoad, initialLoad = _d === void 0 ? true : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, _f = props.threshold, threshold = _f === void 0 ? 250 : _f, _g = props.useCapture, useCapture = _g === void 0 ? false : _g, elementProps = __rest(props, ["children", "element", "hasMore", "hasMoreNewer", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "threshold", "useCapture"]);
+    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, hasNextPage = props.hasNextPage, hasPreviousPage = props.hasPreviousPage, head = props.head, _b = props.initialLoad, initialLoad = _b === void 0 ? true : _b, isLoading = props.isLoading, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, loadNextPage = props.loadNextPage, loadPreviousPage = props.loadPreviousPage, _c = props.threshold, threshold = _c === void 0 ? 250 : _c, _d = props.useCapture, useCapture = _d === void 0 ? false : _d, elementProps = __rest(props, ["children", "element", "hasMore", "hasMoreNewer", "hasNextPage", "hasPreviousPage", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "loadNextPage", "loadPreviousPage", "threshold", "useCapture"]);
+    var loadNextPageFn = loadNextPage || loadMoreNewer;
+    var loadPreviousPageFn = loadPreviousPage || loadMore;
+    var hasNextPageFlag = hasNextPage || hasMoreNewer;
+    var hasPreviousPageFlag = hasPreviousPage || hasMore;
     var scrollComponent = React.useRef();
     var scrollListener = React.useCallback(function () {
         var element = scrollComponent.current;
@@ -13068,13 +13110,30 @@ var InfiniteScroll = function (props) {
         if (listenToScroll) {
             listenToScroll(offset, reverseOffset, threshold);
         }
-        if (reverseOffset < Number(threshold) && typeof loadMore === 'function' && hasMore) {
-            loadMore();
+        if (reverseOffset < Number(threshold) &&
+            typeof loadPreviousPageFn === 'function' &&
+            hasPreviousPageFlag) {
+            loadPreviousPageFn();
         }
-        if (offset < Number(threshold) && typeof loadMoreNewer === 'function' && hasMoreNewer) {
-            loadMoreNewer();
+        if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
+            loadNextPageFn();
         }
-    }, [hasMore, hasMoreNewer, threshold, listenToScroll, loadMore, loadMoreNewer]);
+    }, [
+        hasPreviousPageFlag,
+        hasNextPageFlag,
+        threshold,
+        listenToScroll,
+        loadPreviousPageFn,
+        loadNextPageFn,
+    ]);
+    React.useEffect(function () {
+        deprecationAndReplacementWarning([
+            [{ hasMoreNewer: hasMoreNewer }, { hasNextPage: hasNextPage }],
+            [{ loadMoreNewer: loadMoreNewer }, { loadNextPage: loadNextPage }],
+            [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
+            [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
+        ], 'InfiniteScroll');
+    }, []);
     React.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -14203,7 +14262,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', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, 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 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, 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),
                 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' }))))),