stream-chat-react 10.0.1 → 10.0.2

package/dist/context/ChatContext.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
-import type { Theme } from '../components/Chat/Chat';
+import type { AppSettingsAPIResponse, Channel, Mute } from 'stream-chat';
+import type { ChatProps } from '../components/Chat/Chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
 import type { ChannelsQueryState } from '../components/Chat/hooks/useChannelsQueryState';
 declare type CSSClasses = 'chat' | 'chatContainer' | 'channel' | 'channelList' | 'message' | 'messageList' | 'thread' | 'threadList' | 'virtualMessage' | 'virtualizedMessageList';
@@ -9,7 +9,6 @@ declare type ChannelCID = string;
 export declare type ThemeVersion = '1' | '2';
 export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     channelsQueryState: ChannelsQueryState;
-    client: StreamChat<StreamChatGenerics>;
     closeMobileNav: () => void;
     getAppSettings: () => Promise<AppSettingsAPIResponse<StreamChatGenerics>> | null;
     latestMessageDatesByChannels: Record<ChannelCID, Date>;
@@ -19,14 +18,12 @@ export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamCha
         limit?: number;
         offset?: number;
     }, event?: React.BaseSyntheticEvent) => void;
-    /** @deprecated */
-    theme: Theme;
     themeVersion: ThemeVersion;
     useImageFlagEmojisOnWindows: boolean;
     channel?: Channel<StreamChatGenerics>;
     customClasses?: CustomClasses;
     navOpen?: boolean;
-};
+} & Required<Pick<ChatProps<StreamChatGenerics>, 'theme' | 'client'>>;
 export declare const ChatContext: React.Context<ChatContextValue<DefaultStreamChatGenerics> | undefined>;
 export declare const ChatProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: React.PropsWithChildren<{
     value: ChatContextValue<StreamChatGenerics>;
@@ -38,7 +35,7 @@ export declare const useChatContext: <StreamChatGenerics extends DefaultStreamCh
  * wrapped component must be provided as the first generic.
  */
 export declare const withChatContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => {
-    (props: Omit<P, keyof ChatContextValue<StreamChatGenerics>>): JSX.Element;
+    (props: Omit<P, "channel" | "client" | "mutes" | "navOpen" | "latestMessageDatesByChannels" | "theme" | "channelsQueryState" | "closeMobileNav" | "customClasses" | "getAppSettings" | "openMobileNav" | "setActiveChannel" | "themeVersion" | "useImageFlagEmojisOnWindows">): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGrF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,aAAK,UAAU,GACX,MAAM,GACN,eAAe,GACf,SAAS,GACT,aAAa,GACb,SAAS,GACT,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,wBAAwB,CAAC;AAE7B,oBAAY,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhE,aAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,oBAAY,YAAY,GAAG,GAAG,GAAG,GAAG,CAAC;AAErC,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,GAAG,IAAI,CAAC;IACjF,4BAA4B,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAChB,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EACxC,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,EAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAC7B,IAAI,CAAC;IACV,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,WAAW,wEAA+D,CAAC;AAExF,eAAO,MAAM,YAAY;;kBAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,qGAGT,MAAM,yCAavB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;CAa3B,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,aAAK,UAAU,GACX,MAAM,GACN,eAAe,GACf,SAAS,GACT,aAAa,GACb,SAAS,GACT,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,wBAAwB,CAAC;AAE7B,oBAAY,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhE,aAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,oBAAY,YAAY,GAAG,GAAG,GAAG,GAAG,CAAC;AAErC,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,GAAG,IAAI,CAAC;IACjF,4BAA4B,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACvD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAChB,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,EACxC,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,EAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAC7B,IAAI,CAAC;IACV,YAAY,EAAE,YAAY,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEtE,eAAO,MAAM,WAAW,wEAA+D,CAAC;AAExF,eAAO,MAAM,YAAY;;kBAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,qGAGT,MAAM,yCAavB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;CAa3B,CAAC"}

package/dist/index.cjs.js

@@ -1417,7 +1417,7 @@ var UnableToRenderCard = function (_a) {
             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 = {};
@@ -1427,20 +1427,19 @@ var CardV1 = function (props) {
         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({ alt: image, src: image }, dimensions)))),
-        React__default["default"].createElement("div", { className: 'str-chat__message-attachment-card--content' },
+        React__default["default"].createElement(CardHeader, __assign({}, 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;
@@ -3186,7 +3185,9 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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();
@@ -7312,7 +7313,7 @@ var SendButton = function (_a) {
  * 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;
@@ -10258,7 +10259,7 @@ var MessageInput = React__default["default"].memo(UnMemoizedMessageInput);
  * 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;
@@ -10906,7 +10907,7 @@ var useChannelContainerClasses = function (_a) {
     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/)
@@ -10922,16 +10923,17 @@ var UnMemoizedChannel = function (props) {
         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({}, props, { channel: channel, key: channel.cid }));
@@ -11470,19 +11472,20 @@ var ChannelInner = function (props) {
         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 },
@@ -12520,11 +12523,12 @@ var DEFAULT_FILTERS = {};
 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.
@@ -12584,7 +12588,7 @@ var UnMemoizedChannelList = function (props) {
         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);
@@ -12625,7 +12629,7 @@ var UnMemoizedChannelList = function (props) {
         };
         return React__default["default"].createElement(ChannelPreview, __assign({}, 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,
     });
@@ -12642,7 +12646,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.0.1';
+var version = '10.0.2';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -12804,6 +12808,13 @@ var darkModeTheme = {
     '--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;