stream-chat-react 11.22.0 → 12.0.0-rc.2

package/dist/components/Channel/utils.js

@@ -1,26 +1,21 @@
-import { __spreadArray } from "tslib";
 import { nanoid } from 'nanoid';
-export var makeAddNotifications = function (setNotifications, notificationTimeouts) { return function (text, type) {
+export const makeAddNotifications = (setNotifications, notificationTimeouts) => (text, type) => {
     if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
         return;
     }
-    var id = nanoid();
-    setNotifications(function (prevNotifications) { return __spreadArray(__spreadArray([], prevNotifications, true), [{ id: id, text: text, type: type }], false); });
-    var timeout = setTimeout(function () {
-        return setNotifications(function (prevNotifications) {
-            return prevNotifications.filter(function (notification) { return notification.id !== id; });
-        });
-    }, 5000);
+    const id = nanoid();
+    setNotifications((prevNotifications) => [...prevNotifications, { id, text, type }]);
+    const timeout = setTimeout(() => setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.id !== id)), 5000);
     notificationTimeouts.push(timeout);
-}; };
+};
 /**
  * Utility function for jumpToFirstUnreadMessage
  * @param targetId
  * @param msgSet
  */
-export var findInMsgSetById = function (targetId, msgSet) {
-    for (var i = msgSet.length - 1; i >= 0; i--) {
-        var item = msgSet[i];
+export const findInMsgSetById = (targetId, msgSet) => {
+    for (let i = msgSet.length - 1; i >= 0; i--) {
+        const item = msgSet[i];
         if (item.id === targetId) {
             return {
                 index: i,
@@ -38,19 +33,17 @@ export var findInMsgSetById = function (targetId, msgSet) {
  * @param msgSet
  * @param exact
  */
-export var findInMsgSetByDate = function (targetDate, msgSet, exact) {
-    var _a, _b;
-    if (exact === void 0) { exact = false; }
-    var targetTimestamp = targetDate.getTime();
-    var left = 0;
-    var middle = 0;
-    var right = msgSet.length - 1;
+export const findInMsgSetByDate = (targetDate, msgSet, exact = false) => {
+    const targetTimestamp = targetDate.getTime();
+    let left = 0;
+    let middle = 0;
+    let right = msgSet.length - 1;
     while (left <= right) {
         middle = Math.floor((right + left) / 2);
-        var middleTimestamp = new Date(msgSet[middle].created_at).getTime();
-        var middleLeftTimestamp = ((_a = msgSet[middle - 1]) === null || _a === void 0 ? void 0 : _a.created_at) &&
+        const middleTimestamp = new Date(msgSet[middle].created_at).getTime();
+        const middleLeftTimestamp = msgSet[middle - 1]?.created_at &&
             new Date(msgSet[middle - 1].created_at).getTime();
-        var middleRightTimestamp = ((_b = msgSet[middle + 1]) === null || _b === void 0 ? void 0 : _b.created_at) &&
+        const middleRightTimestamp = msgSet[middle + 1]?.created_at &&
             new Date(msgSet[middle + 1].created_at).getTime();
         if (middleTimestamp === targetTimestamp ||
             (middleLeftTimestamp &&

package/dist/components/ChannelHeader/ChannelHeader.d.ts

@@ -17,4 +17,3 @@ export type ChannelHeaderProps = {
  * The ChannelHeader component renders some basic information about a Channel.
  */
 export declare const ChannelHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelHeaderProps) => React.JSX.Element;
-//# sourceMappingURL=ChannelHeader.d.ts.map

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -5,28 +5,28 @@ import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreview
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-var UnMemoizedChannelHeader = function (props) {
-    var _a = props.Avatar, Avatar = _a === void 0 ? DefaultAvatar : _a, _b = props.MenuIcon, MenuIcon = _b === void 0 ? DefaultMenuIcon : _b, overrideImage = props.image, live = props.live, overrideTitle = props.title;
-    var _c = useChannelStateContext('ChannelHeader'), channel = _c.channel, watcher_count = _c.watcher_count;
-    var openMobileNav = useChatContext('ChannelHeader').openMobileNav;
-    var t = useTranslationContext('ChannelHeader').t;
-    var _d = useChannelPreviewInfo({
-        channel: channel,
-        overrideImage: overrideImage,
-        overrideTitle: overrideTitle,
-    }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
-    var _e = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, member_count = _e.member_count, subtitle = _e.subtitle;
-    return (React.createElement("div", { className: 'str-chat__header-livestream str-chat__channel-header' },
+const UnMemoizedChannelHeader = (props) => {
+    const { Avatar = DefaultAvatar, MenuIcon = DefaultMenuIcon, image: overrideImage, live, title: overrideTitle, } = props;
+    const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
+    const { openMobileNav } = useChatContext('ChannelHeader');
+    const { t } = useTranslationContext('ChannelHeader');
+    const { displayImage, displayTitle } = useChannelPreviewInfo({
+        channel,
+        overrideImage,
+        overrideTitle,
+    });
+    const { member_count, subtitle } = channel?.data || {};
+    return (React.createElement("div", { className: 'str-chat__channel-header' },
         React.createElement("button", { "aria-label": t('aria/Menu'), className: 'str-chat__header-hamburger', onClick: openMobileNav },
             React.createElement(MenuIcon, null)),
-        React.createElement(Avatar, { image: displayImage, name: displayTitle, shape: 'rounded', size: (channel === null || channel === void 0 ? void 0 : channel.type) === 'commerce' ? 60 : 40 }),
-        React.createElement("div", { className: 'str-chat__header-livestream-left str-chat__channel-header-end' },
-            React.createElement("p", { className: 'str-chat__header-livestream-left--title str-chat__channel-header-title' },
+        React.createElement(Avatar, { className: 'str-chat__avatar--channel-header', image: displayImage, name: displayTitle }),
+        React.createElement("div", { className: 'str-chat__channel-header-end' },
+            React.createElement("p", { className: 'str-chat__channel-header-title' },
                 displayTitle,
                 ' ',
-                live && (React.createElement("span", { className: 'str-chat__header-livestream-left--livelabel' }, t('live')))),
-            subtitle && React.createElement("p", { className: 'str-chat__header-livestream-left--subtitle' }, subtitle),
-            React.createElement("p", { className: 'str-chat__header-livestream-left--members str-chat__channel-header-info' },
+                live && (React.createElement("span", { className: 'str-chat__header-livestream-livelabel' }, t('live')))),
+            subtitle && React.createElement("p", { className: 'str-chat__channel-header-subtitle' }, subtitle),
+            React.createElement("p", { className: 'str-chat__channel-header-info' },
                 !live && !!member_count && member_count > 0 && (React.createElement(React.Fragment, null,
                     t('{{ memberCount }} members', {
                         memberCount: member_count,
@@ -38,4 +38,4 @@ var UnMemoizedChannelHeader = function (props) {
 /**
  * The ChannelHeader component renders some basic information about a Channel.
  */
-export var ChannelHeader = React.memo(UnMemoizedChannelHeader);
+export const ChannelHeader = React.memo(UnMemoizedChannelHeader);

package/dist/components/ChannelHeader/icons.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 export declare const MenuIcon: ({ title }: {
-    title?: string | undefined;
+    title?: string;
 }) => React.JSX.Element;
-//# sourceMappingURL=icons.d.ts.map

package/dist/components/ChannelHeader/icons.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslationContext } from '../../context';
-export var MenuIcon = function (_a) {
-    var title = _a.title;
-    var t = useTranslationContext('MenuIcon').t;
+export const MenuIcon = ({ title }) => {
+    const { t } = useTranslationContext('MenuIcon');
     return (React.createElement("svg", { "data-testid": 'menu-icon', viewBox: '0 0 448 512', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("title", null, title !== null && title !== void 0 ? title : t('Menu')),
+        React.createElement("title", null, title ?? t('Menu')),
         React.createElement("path", { d: 'M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z', fill: 'currentColor' })));
 };

package/dist/components/ChannelHeader/index.d.ts

@@ -1,2 +1 @@
 export * from './ChannelHeader';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelList/ChannelList.d.ts

@@ -4,7 +4,6 @@ import { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
 import { AvatarProps } from '../Avatar/Avatar';
 import { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
-import { ChatDownProps } from '../ChatDown/ChatDown';
 import { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
@@ -35,8 +34,8 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     filters?: ChannelFilters<StreamChatGenerics>;
     /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
     List?: React.ComponentType<ChannelListMessengerProps<StreamChatGenerics>>;
-    /** Custom UI component to display the loading error indicator, defaults to and accepts same props as: [ChatDown](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChatDown/ChatDown.tsx) */
-    LoadingErrorIndicator?: React.ComponentType<ChatDownProps>;
+    /** Custom UI component to display the loading error indicator, defaults to component that renders null */
+    LoadingErrorIndicator?: React.ComponentType;
     /** Custom UI component to display the loading state, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
     LoadingIndicator?: React.ComponentType;
     /** When true, channels won't dynamically sort by most recent message */
@@ -92,4 +91,3 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
  * Renders a preview list of Channels, allowing you to select the Channel you want to open
  */
 export declare const ChannelList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelListProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=ChannelList.d.ts.map

package/dist/components/ChannelList/ChannelList.js

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __generator } from "tslib";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { ChannelListMessenger } from './ChannelListMessenger';
@@ -19,85 +18,72 @@ import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUp } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar/Avatar';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
-import { ChatDown } from '../ChatDown/ChatDown';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator, } from '../EmptyStateIndicator';
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';
+import { NullComponent } from '../UtilityComponents';
 import { ChannelListContextProvider } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
-var DEFAULT_FILTERS = {};
-var DEFAULT_OPTIONS = {};
-var DEFAULT_SORT = {};
-var UnMemoizedChannelList = function (props) {
-    var _a, _b;
-    var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch = _d === void 0 ? DefaultChannelSearch : _d, customActiveChannel = props.customActiveChannel, customQueryChannels = props.customQueryChannels, _e = props.EmptyStateIndicator, EmptyStateIndicator = _e === void 0 ? DefaultEmptyStateIndicator : _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, onMessageNewHandler = props.onMessageNewHandler, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, 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 = useRef(null);
-    var _s = useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
-    var _t = useState(false), searchActive = _t[0], setSearchActive = _t[1];
+const DEFAULT_FILTERS = {};
+const DEFAULT_OPTIONS = {};
+const DEFAULT_SORT = {};
+const UnMemoizedChannelList = (props) => {
+    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
+    const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
+    const channelListRef = useRef(null);
+    const [channelUpdateCount, setChannelUpdateCount] = useState(0);
+    const [searchActive, setSearchActive] = useState(false);
     /**
      * 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.
      */
-    var activeChannelHandler = function (channels, setChannels) { return __awaiter(void 0, void 0, void 0, function () {
-        var customActiveChannelObject, newChannels;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!channels.length || channels.length > ((options === null || options === void 0 ? void 0 : options.limit) || MAX_QUERY_CHANNELS_LIMIT)) {
-                        return [2 /*return*/];
-                    }
-                    if (!customActiveChannel) return [3 /*break*/, 3];
-                    customActiveChannelObject = channels.find(function (chan) { return chan.id === customActiveChannel; });
-                    if (!!customActiveChannelObject) return [3 /*break*/, 2];
-                    return [4 /*yield*/, client.queryChannels({ id: customActiveChannel })];
-                case 1:
-                    //@ts-expect-error
-                    customActiveChannelObject = (_a.sent())[0];
-                    _a.label = 2;
-                case 2:
-                    if (customActiveChannelObject) {
-                        setActiveChannel(customActiveChannelObject, watchers);
-                        newChannels = moveChannelUp({
-                            activeChannel: customActiveChannelObject,
-                            channels: channels,
-                            cid: customActiveChannelObject.cid,
-                        });
-                        setChannels(newChannels);
-                    }
-                    return [2 /*return*/];
-                case 3:
-                    if (setActiveChannelOnMount) {
-                        setActiveChannel(channels[0], watchers);
-                    }
-                    return [2 /*return*/];
+    const activeChannelHandler = async (channels, setChannels) => {
+        if (!channels.length || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
+            return;
+        }
+        if (customActiveChannel) {
+            let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
+            if (!customActiveChannelObject) {
+                //@ts-expect-error
+                [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
+            }
+            if (customActiveChannelObject) {
+                setActiveChannel(customActiveChannelObject, watchers);
+                const newChannels = moveChannelUp({
+                    activeChannel: customActiveChannelObject,
+                    channels,
+                    cid: customActiveChannelObject.cid,
+                });
+                setChannels(newChannels);
             }
-        });
-    }); };
+            return;
+        }
+        if (setActiveChannelOnMount) {
+            setActiveChannel(channels[0], watchers);
+        }
+    };
     /**
      * For some events, inner properties on the channel will update but the shallow comparison will not
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
-    var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var onSearch = useCallback(function (event) {
-        var _a;
+    const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+    const onSearch = useCallback((event) => {
         if (!event.target.value) {
             setSearchActive(false);
         }
         else {
             setSearchActive(true);
         }
-        (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearch) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps, event);
+        additionalChannelSearchProps?.onSearch?.(event);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var onSearchExit = useCallback(function () {
-        var _a;
+    const onSearchExit = useCallback(() => {
         setSearchActive(false);
-        (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
+        additionalChannelSearchProps?.onSearchExit?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
-    var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
+    const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
+    const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, onMessageNewHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
     useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
@@ -110,48 +96,49 @@ var UnMemoizedChannelList = function (props) {
     useChannelUpdatedListener(setChannels, onChannelUpdated, forceUpdate);
     useConnectionRecoveredListener(forceUpdate);
     useUserPresenceChangedListener(setChannels);
-    useEffect(function () {
-        var handleEvent = function (event) {
-            if (event.cid === (channel === null || channel === void 0 ? void 0 : channel.cid)) {
+    useEffect(() => {
+        const handleEvent = (event) => {
+            if (event.cid === channel?.cid) {
                 setActiveChannel();
             }
         };
         client.on('channel.deleted', handleEvent);
         client.on('channel.hidden', handleEvent);
-        return function () {
+        return () => {
             client.off('channel.deleted', handleEvent);
             client.off('channel.hidden', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [channel === null || channel === void 0 ? void 0 : channel.cid]);
-    var renderChannel = function (item) {
-        var previewProps = {
+    }, [channel?.cid]);
+    const renderChannel = (item) => {
+        const previewProps = {
             activeChannel: channel,
-            Avatar: Avatar,
+            Avatar,
             channel: item,
             // forces the update of preview component on channel update
-            channelUpdateCount: channelUpdateCount,
+            channelUpdateCount,
             key: item.id,
-            Preview: Preview,
-            setActiveChannel: setActiveChannel,
-            watchers: watchers,
+            Preview,
+            setActiveChannel,
+            watchers,
         };
-        return React.createElement(ChannelPreview, __assign({}, previewProps));
+        return React.createElement(ChannelPreview, { ...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 str-chat__channel-list-react', {
+    const baseClass = 'str-chat__channel-list';
+    const className = clsx(customClasses?.chat ?? 'str-chat', theme, customClasses?.channelList ?? `${baseClass} ${baseClass}-react`, {
         'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
-        'str-chat-channel-list--open': navOpen,
+        [`${baseClass}--open`]: navOpen,
     });
-    var showChannelList = !searchActive || (additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.popupResults);
-    return (React.createElement(ChannelListContextProvider, { value: { channels: channels, setChannels: setChannels } },
+    const showChannelList = !searchActive || additionalChannelSearchProps?.popupResults;
+    return (React.createElement(ChannelListContextProvider, { value: { channels, setChannels } },
         React.createElement("div", { className: className, ref: channelListRef },
-            showChannelSearch && (React.createElement(ChannelSearch, __assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
+            showChannelSearch && (React.createElement(ChannelSearch, { onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels, ...additionalChannelSearchProps })),
             showChannelList && (React.createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
-                    ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress), LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React.createElement(EmptyStateIndicator, { listType: 'channel' })) : (React.createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
+                    ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress), LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !loadedChannels?.length ? (React.createElement(EmptyStateIndicator, { listType: 'channel' })) : (React.createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
-                : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
+                : loadedChannels.map((channel) => renderChannel(channel)))))))));
 };
 /**
  * Renders a preview list of Channels, allowing you to select the Channel you want to open
  */
-export var ChannelList = React.memo(UnMemoizedChannelList);
+export const ChannelList = React.memo(UnMemoizedChannelList);

package/dist/components/ChannelList/ChannelListMessenger.d.ts

@@ -1,16 +1,15 @@
 import React, { PropsWithChildren } from 'react';
-import { ChatDownProps } from '../ChatDown/ChatDown';
 import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelListMessengerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Whether or not the channel query request returned an errored response */
+    /** Whether the channel query request returned an errored response */
     error: ErrorFromResponse<APIErrorResponse> | null;
     /** The channels currently loaded in the list, only defined if `sendChannelsToList` on `ChannelList` is true */
     loadedChannels?: Channel<StreamChatGenerics>[];
-    /** Whether or not channels are currently loading */
+    /** Whether the channels are currently loading */
     loading?: boolean;
-    /** Custom UI component to display a loading error, defaults to and accepts same props as: [ChatDown](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChatDown/ChatDown.tsx) */
-    LoadingErrorIndicator?: React.ComponentType<ChatDownProps>;
+    /** Custom UI component to display the loading error indicator, defaults to component that renders null */
+    LoadingErrorIndicator?: React.ComponentType;
     /** Custom UI component to display a loading indicator, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
     LoadingIndicator?: React.ComponentType;
     /** Local state hook that resets the currently loaded channels */
@@ -19,5 +18,4 @@ export type ChannelListMessengerProps<StreamChatGenerics extends DefaultStreamCh
 /**
  * A preview list of channels, allowing you to select the channel you want to open
  */
-export declare const ChannelListMessenger: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: React.PropsWithChildren<ChannelListMessengerProps<StreamChatGenerics>>) => React.JSX.Element;
-//# sourceMappingURL=ChannelListMessenger.d.ts.map
+export declare const ChannelListMessenger: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: PropsWithChildren<ChannelListMessengerProps<StreamChatGenerics>>) => React.JSX.Element;

package/dist/components/ChannelList/ChannelListMessenger.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { ChatDown } from '../ChatDown/ChatDown';
 import { LoadingChannels } from '../Loading/LoadingChannels';
+import { NullComponent } from '../UtilityComponents';
 import { useTranslationContext } from '../../context';
 /**
  * A preview list of channels, allowing you to select the channel you want to open
  */
-export var ChannelListMessenger = function (props) {
-    var children = props.children, _a = props.error, error = _a === void 0 ? null : _a, loading = props.loading, _b = props.LoadingErrorIndicator, LoadingErrorIndicator = _b === void 0 ? ChatDown : _b, _c = props.LoadingIndicator, LoadingIndicator = _c === void 0 ? LoadingChannels : _c;
-    var t = useTranslationContext('ChannelListMessenger').t;
+export const ChannelListMessenger = (props) => {
+    const { children, error = null, loading, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, } = props;
+    const { t } = useTranslationContext('ChannelListMessenger');
     if (error) {
-        return React.createElement(LoadingErrorIndicator, { type: 'Connection Error' });
+        return React.createElement(LoadingErrorIndicator, null);
     }
     if (loading) {
         return React.createElement(LoadingIndicator, null);

package/dist/components/ChannelList/hooks/index.d.ts

@@ -11,4 +11,3 @@ export * from './useNotificationMessageNewListener';
 export * from './useNotificationRemovedFromChannelListener';
 export * from './usePaginatedChannels';
 export * from './useUserPresenceChangedListener';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelList/hooks/useChannelDeletedListener.d.ts

@@ -1,4 +1,3 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelDeletedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined) => void;
-//# sourceMappingURL=useChannelDeletedListener.d.ts.map
+export declare const useChannelDeletedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, customHandler?: (setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, event: Event<StreamChatGenerics>) => void) => void;

package/dist/components/ChannelList/hooks/useChannelDeletedListener.js

@@ -1,26 +1,25 @@
-import { __spreadArray } from "tslib";
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
-export var useChannelDeletedListener = function (setChannels, customHandler) {
-    var client = useChatContext('useChannelDeletedListener').client;
-    useEffect(function () {
-        var handleEvent = function (event) {
+export const useChannelDeletedListener = (setChannels, customHandler) => {
+    const { client } = useChatContext('useChannelDeletedListener');
+    useEffect(() => {
+        const handleEvent = (event) => {
             if (customHandler && typeof customHandler === 'function') {
                 customHandler(setChannels, event);
             }
             else {
-                setChannels(function (channels) {
-                    var channelIndex = channels.findIndex(function (channel) { return channel.cid === event.cid; });
+                setChannels((channels) => {
+                    const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
                     if (channelIndex < 0)
-                        return __spreadArray([], channels, true);
+                        return [...channels];
                     // Remove the deleted channel from the list.s
                     channels.splice(channelIndex, 1);
-                    return __spreadArray([], channels, true);
+                    return [...channels];
                 });
             }
         };
         client.on('channel.deleted', handleEvent);
-        return function () {
+        return () => {
             client.off('channel.deleted', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/components/ChannelList/hooks/useChannelHiddenListener.d.ts

@@ -1,4 +1,3 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelHiddenListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined) => void;
-//# sourceMappingURL=useChannelHiddenListener.d.ts.map
+export declare const useChannelHiddenListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, customHandler?: (setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, event: Event<StreamChatGenerics>) => void) => void;

package/dist/components/ChannelList/hooks/useChannelHiddenListener.js

@@ -1,26 +1,25 @@
-import { __spreadArray } from "tslib";
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
-export var useChannelHiddenListener = function (setChannels, customHandler) {
-    var client = useChatContext('useChannelHiddenListener').client;
-    useEffect(function () {
-        var handleEvent = function (event) {
+export const useChannelHiddenListener = (setChannels, customHandler) => {
+    const { client } = useChatContext('useChannelHiddenListener');
+    useEffect(() => {
+        const handleEvent = (event) => {
             if (customHandler && typeof customHandler === 'function') {
                 customHandler(setChannels, event);
             }
             else {
-                setChannels(function (channels) {
-                    var channelIndex = channels.findIndex(function (channel) { return channel.cid === event.cid; });
+                setChannels((channels) => {
+                    const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
                     if (channelIndex < 0)
-                        return __spreadArray([], channels, true);
+                        return [...channels];
                     // Remove the hidden channel from the list.s
                     channels.splice(channelIndex, 1);
-                    return __spreadArray([], channels, true);
+                    return [...channels];
                 });
             }
         };
         client.on('channel.hidden', handleEvent);
-        return function () {
+        return () => {
             client.off('channel.hidden', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.d.ts

@@ -1,4 +1,3 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelTruncatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: () => void) => void;
-//# sourceMappingURL=useChannelTruncatedListener.d.ts.map
+export declare const useChannelTruncatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, customHandler?: (setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, event: Event<StreamChatGenerics>) => void, forceUpdate?: () => void) => void;

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.js

@@ -1,11 +1,10 @@
-import { __spreadArray } from "tslib";
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
-export var useChannelTruncatedListener = function (setChannels, customHandler, forceUpdate) {
-    var client = useChatContext('useChannelTruncatedListener').client;
-    useEffect(function () {
-        var handleEvent = function (event) {
-            setChannels(function (channels) { return __spreadArray([], channels, true); });
+export const useChannelTruncatedListener = (setChannels, customHandler, forceUpdate) => {
+    const { client } = useChatContext('useChannelTruncatedListener');
+    useEffect(() => {
+        const handleEvent = (event) => {
+            setChannels((channels) => [...channels]);
             if (customHandler && typeof customHandler === 'function') {
                 customHandler(setChannels, event);
             }
@@ -14,7 +13,7 @@ export var useChannelTruncatedListener = function (setChannels, customHandler, f
             }
         };
         client.on('channel.truncated', handleEvent);
-        return function () {
+        return () => {
             client.off('channel.truncated', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.d.ts

@@ -1,4 +1,3 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelUpdatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: () => void) => void;
-//# sourceMappingURL=useChannelUpdatedListener.d.ts.map
+export declare const useChannelUpdatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, customHandler?: (setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, event: Event<StreamChatGenerics>) => void, forceUpdate?: () => void) => void;