stream-chat-react 10.0.1 → 10.1.0

package/dist/browser.full-bundle.js

@@ -10717,7 +10717,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
     };
     var CardV1 = function (props) {
-        var giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
+        var asset_url = props.asset_url, giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
         var giphyVersionName = useChannelStateContext('Card').giphyVersion;
         var image = thumb_url || image_url;
         var dimensions = {};
@@ -10727,20 +10727,19 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             dimensions.height = giphyVersion.height;
             dimensions.width = giphyVersion.width;
         }
-        if (!title && !title_link && !image) {
+        if (!title && !title_link && !asset_url && !image) {
             return React__default["default"].createElement(UnableToRenderCard, { type: type });
         }
         if (!title_link && !og_scrape_url) {
             return null;
         }
         return (React__default["default"].createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
-            image && (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--header' },
-                React__default["default"].createElement("img", __assign$8({ alt: image, src: image }, dimensions)))),
-            React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--content' },
+            React__default["default"].createElement(CardHeader$1, __assign$8({}, props, { dimensions: dimensions, image: image })),
+            type !== 'video' && (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--content' },
                 React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--flex' },
                     title && React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
                     text && React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--text' }, text),
-                    (title_link || og_scrape_url) && (React__default["default"].createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, getHostFromURL(title_link || og_scrape_url)))))));
+                    (title_link || og_scrape_url) && (React__default["default"].createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, getHostFromURL(title_link || og_scrape_url))))))));
     };
     var SourceLink = function (_a) {
         var author_name = _a.author_name, url = _a.url;
@@ -38688,7 +38687,9 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
         _defineProperty$2(_assertThisInitialized(_this), "_handleKeyDown", function (event) {
           var _this$props$shouldSub = _this.props.shouldSubmit,
-              shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub;
+              shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub; // prevent default behaviour when the selection list is rendered
+
+          if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && _this.dropdownRef) event.preventDefault();
           if (shouldSubmit !== null && shouldSubmit !== void 0 && shouldSubmit(event)) return _this._onEnter(event);
           if (event.key === ' ') return _this._onSpace(event);
           if (event.key === 'Escape') return _this._closeAutocomplete();
@@ -43661,7 +43662,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
      * utilises outdated components from the package [`react-file-utils`](https://github.com/GetStream/react-file-utils)
      * which will no longer receive updates for aforementioned components.
      *
-     * **Will be removed with the complete transition to the theming V2.**
+     * **Will be removed with the complete transition to the theming V2 (next major release - `v11.0.0`).**
      */
     var UploadsPreview = function () {
         var themeVersion = useChatContext('UploadsPreview').themeVersion;
@@ -46573,7 +46574,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
      * In case you need to change styling in places where `MessageInputSmall` has been used previously ([`Thread`](../Thread/Thread.tsx))
      * please do so by updating the CSS or by overriding the component itself.
      *
-     * **Will be removed with the complete transition to the theming V2.**
+     * **Will be removed with the complete transition to the theming V2 (next major release - `v11.0.0`).**
      */
     var MessageInputSmall = function () {
         var _a = useChannelStateContext('MessageInputSmall'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
@@ -47227,7 +47228,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var customClasses = _a.customClasses;
         var useImageFlagEmojisOnWindows = useChatContext('Channel').useImageFlagEmojisOnWindows;
         return {
-            channelClass: (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) !== null && _b !== void 0 ? _b : 'str-chat-channel',
+            channelClass: (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) !== null && _b !== void 0 ? _b : 'str-chat-channel str-chat__channel',
             chatClass: (_c = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _c !== void 0 ? _c : 'str-chat',
             chatContainerClass: (_d = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chatContainer) !== null && _d !== void 0 ? _d : 'str-chat__container',
             windowsEmojiClass: useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
@@ -47243,16 +47244,17 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             customClasses: customClasses,
         }), channelClass = _d.channelClass, chatClass = _d.chatClass;
         var channel = propsChannel || contextChannel;
+        var className = clsx(chatClass, theme, channelClass);
         if (channelsQueryState.queryInProgress === 'reload' && LoadingIndicator) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            return (React__default["default"].createElement("div", { className: className },
                 React__default["default"].createElement(LoadingIndicator, null)));
         }
         if (channelsQueryState.error && LoadingErrorIndicator) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            return (React__default["default"].createElement("div", { className: className },
                 React__default["default"].createElement(LoadingErrorIndicator, { error: channelsQueryState.error })));
         }
         if (!(channel === null || channel === void 0 ? void 0 : channel.cid)) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) }, EmptyPlaceholder));
+            return React__default["default"].createElement("div", { className: className }, EmptyPlaceholder);
         }
         // @ts-ignore
         return React__default["default"].createElement(ChannelInner, __assign$8({}, props, { channel: channel, key: channel.cid }));
@@ -47791,19 +47793,20 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             typing: typing,
         });
         var OptionalMessageInputProvider = React.useMemo(function () { return (dragAndDropWindow ? DropzoneProvider : React__default["default"].Fragment); }, [dragAndDropWindow]);
+        var className = clsx(chatClass, theme, channelClass);
         if (state.error) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            return (React__default["default"].createElement("div", { className: className },
                 React__default["default"].createElement(LoadingErrorIndicator$1, { error: state.error })));
         }
         if (state.loading) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            return (React__default["default"].createElement("div", { className: className },
                 React__default["default"].createElement(LoadingIndicator, null)));
         }
         if (!channel.watch) {
-            return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme) },
+            return (React__default["default"].createElement("div", { className: className },
                 React__default["default"].createElement("div", null, t('Channel Missing'))));
         }
-        return (React__default["default"].createElement("div", { className: "".concat(chatClass, " ").concat(channelClass, " str-chat__channel ").concat(theme, " ").concat(windowsEmojiClass) },
+        return (React__default["default"].createElement("div", { className: clsx(className, windowsEmojiClass) },
             React__default["default"].createElement(ChannelStateProvider, { value: channelStateContextValue },
                 React__default["default"].createElement(ChannelActionProvider, { value: channelActionContextValue },
                     React__default["default"].createElement(ComponentProvider, { value: componentContextValue },
@@ -48274,6 +48277,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var _a = useChatContext('usePaginatedChannels').channelsQueryState, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
         var _b = React.useState([]), channels = _b[0], setChannels = _b[1];
         var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
+        // memoize props
         var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
         var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
         var queryChannels = function (queryType) { return __awaiter$3(void 0, void 0, void 0, function () {
@@ -48687,6 +48691,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             exitSearch();
             (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, []);
+        var closeAppMenu = React.useCallback(function () { return setMenuIsOpen(false); }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
             inputIsFocused ? (React__default["default"].createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--exit-search', onClick: exitSearch },
                 React__default["default"].createElement(ExitSearchIcon, null))) : AppMenu ? (React__default["default"].createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--menu', onClick: function () { return setMenuIsOpen(function (prev) { return !prev; }); } },
@@ -48698,7 +48703,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 React__default["default"].createElement("button", { className: 'str-chat__channel-search-input--clear-button', "data-testid": 'clear-input-button', disabled: !inputProps.query, onClick: handleClearClick },
                     React__default["default"].createElement(ClearInputIcon, null))),
             menuIsOpen && AppMenu && (React__default["default"].createElement("div", { ref: appMenuRef },
-                React__default["default"].createElement(AppMenu, null)))));
+                React__default["default"].createElement(AppMenu, { close: closeAppMenu })))));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -48849,11 +48854,12 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     var DEFAULT_OPTIONS = {};
     var DEFAULT_SORT = {};
     var UnMemoizedChannelList = function (props) {
-        var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
-        var _o = useChatContext('ChannelList'), channel = _o.channel, channelsQueryState = _o.channelsQueryState, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
+        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, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, 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.useRef(null);
-        var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
-        var _r = React.useState(false), searchActive = _r[0], setSearchActive = _r[1];
+        var _s = React.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
+        var _t = React.useState(false), searchActive = _t[0], setSearchActive = _t[1];
         /**
          * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
          * If customActiveChannel prop is absent, then set the first channel in list as active channel.
@@ -48913,7 +48919,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             setSearchActive(false);
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
         }, []);
-        var _s = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _s.channels, hasNextPage = _s.hasNextPage, loadNextPage = _s.loadNextPage, setChannels = _s.setChannels;
+        var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
         var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
         useMobileNavigation(channelListRef, navOpen, closeMobileNav);
         useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -48954,7 +48960,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             };
             return React__default["default"].createElement(ChannelPreview, __assign$8({}, previewProps));
         };
-        var className = clsx('str-chat__channel-list', theme, (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat', (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) || '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--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
             'str-chat-channel-list--open': navOpen,
         });
@@ -48977,7 +48983,7 @@ var StreamChatReact = (function (exports, React, 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 = '10.0.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.1.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -49139,6 +49145,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         '--white-smoke': '#13151b',
         '--white-snow': '#070a0d',
     };
+    /**
+     * @deprecated This hook has been deprecated in favor of the new
+     * theming (V2) setup which sets its variables through CSS files.
+     * Refer to the [documentation](https://getstream.io/chat/docs/sdk/react/theming/themingv2/) of the new theming for the upgrade.
+     *
+     * **Will be removed with the complete transition to the theming V2.**
+     */
     var useCustomStyles = function (customStyles) {
         if (!customStyles)
             return;
@@ -51920,7 +51933,9 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                     acc[message.id] = style;
                 return acc;
             }, {});
-        }, [processedMessages.length, shouldGroupByUser]);
+        }, 
+        // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
+        [processedMessages.length, shouldGroupByUser]);
         var virtuoso = React.useRef(null);
         var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, newMessagesNotification = _x.newMessagesNotification, setIsMessageListScrolledToBottom = _x.setIsMessageListScrolledToBottom, setNewMessagesNotification = _x.setNewMessagesNotification;
         var scrollToBottom = React.useCallback(function () { return __awaiter$3(void 0, void 0, void 0, function () {
@@ -51944,6 +51959,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             virtuoso,
             processedMessages,
             setNewMessagesNotification,
+            // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
             processedMessages.length,
             hasMoreNewer,
             jumpToLatestMessage,
@@ -52036,8 +52052,9 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             return Item;
         }, [
             customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage,
-            Object.keys(messageGroupStyles),
+            messageGroupStyles,
             numItemsPrepended,
+            // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
             processedMessages.length,
         ]);
         var virtuosoComponents = React.useMemo(function () {
@@ -68815,6 +68832,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     exports.SUPPORTED_VIDEO_FORMATS = SUPPORTED_VIDEO_FORMATS;
     exports.SafeAnchor = SafeAnchor;
     exports.ScrollToBottomButton = ScrollToBottomButton;
+    exports.SearchBar = SearchBar;
     exports.SearchInput = SearchInput;
     exports.SearchResults = SearchResults;
     exports.SendButton = SendButton;