stream-chat-react 10.0.1 → 10.0.2

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 },
@@ -48849,11 +48852,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 +48917,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 +48958,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 +48981,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.0.2';
 
     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 +49143,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;