stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/components/Thread/Thread.js

@@ -1,8 +1,7 @@
-import { __assign } from "tslib";
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { MESSAGE_ACTIONS } from '../Message';
-import { MessageInput, MessageInputFlat, MessageInputSmall, } from '../MessageInput';
+import { MessageInput, MessageInputFlat } from '../MessageInput';
 import { MessageList, VirtualizedMessageList, } from '../MessageList';
 import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
 import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
@@ -10,27 +9,26 @@ import { useChannelActionContext, useChannelStateContext, useChatContext, useCom
 /**
  * The Thread component renders a parent Message with a list of replies
  */
-export var Thread = function (props) {
-    var _a = useChannelStateContext('Thread'), channel = _a.channel, channelConfig = _a.channelConfig, thread = _a.thread;
-    if (!thread || (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) === false)
+export const Thread = (props) => {
+    const { channel, channelConfig, thread } = useChannelStateContext('Thread');
+    if (!thread || channelConfig?.replies === false)
         return null;
     // The wrapper ensures a key variable is set and the component recreates on thread switch
-    return React.createElement(ThreadInner, __assign({}, props, { key: "thread-".concat(thread.id, "-").concat(channel === null || channel === void 0 ? void 0 : channel.cid) }));
+    return React.createElement(ThreadInner, { ...props, key: `thread-${thread.id}-${channel?.cid}` });
 };
-var ThreadInner = function (props) {
-    var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _c = props.autoFocus, autoFocus = _c === void 0 ? true : _c, _d = props.enableDateSeparator, enableDateSeparator = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, PropInput = props.Input, PropMessage = props.Message, _f = props.messageActions, messageActions = _f === void 0 ? Object.keys(MESSAGE_ACTIONS) : _f, virtualized = props.virtualized;
-    var _g = useChannelStateContext('Thread'), thread = _g.thread, threadHasMore = _g.threadHasMore, threadLoadingMore = _g.threadLoadingMore, threadMessages = _g.threadMessages, threadSuppressAutoscroll = _g.threadSuppressAutoscroll;
-    var _h = useChannelActionContext('Thread'), closeThread = _h.closeThread, loadMoreThread = _h.loadMoreThread;
-    var _j = useChatContext('Thread'), customClasses = _j.customClasses, themeVersion = _j.themeVersion;
-    var _k = useComponentContext('Thread'), ContextInput = _k.ThreadInput, ContextMessage = _k.Message, _l = _k.ThreadHead, ThreadHead = _l === void 0 ? DefaultThreadHead : _l, _m = _k.ThreadHeader, ThreadHeader = _m === void 0 ? DefaultThreadHeader : _m, VirtualMessage = _k.VirtualMessage;
-    var ThreadInput = (_b = (_a = PropInput !== null && PropInput !== void 0 ? PropInput : additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) !== null && _a !== void 0 ? _a : ContextInput) !== null && _b !== void 0 ? _b : (themeVersion === '2' ? MessageInputFlat : MessageInputSmall);
-    var ThreadMessage = PropMessage || (additionalMessageListProps === null || additionalMessageListProps === void 0 ? void 0 : additionalMessageListProps.Message);
-    var FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
-    var MessageUIComponent = ThreadMessage || FallbackMessage;
-    var ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
-    useEffect(function () {
-        if ((thread === null || thread === void 0 ? void 0 : thread.id) && (thread === null || thread === void 0 ? void 0 : thread.reply_count)) {
+const ThreadInner = (props) => {
+    const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, fullWidth = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
+    const { thread, threadHasMore, threadLoadingMore, threadMessages, threadSuppressAutoscroll, } = useChannelStateContext('Thread');
+    const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
+    const { customClasses } = useChatContext('Thread');
+    const { ThreadInput: ContextInput, Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, VirtualMessage, } = useComponentContext('Thread');
+    const ThreadInput = PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
+    const ThreadMessage = PropMessage || additionalMessageListProps?.Message;
+    const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
+    const MessageUIComponent = ThreadMessage || FallbackMessage;
+    const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
+    useEffect(() => {
+        if (thread?.id && thread?.reply_count) {
             // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
             loadMoreThread();
         }
@@ -38,14 +36,14 @@ var ThreadInner = function (props) {
     }, []);
     if (!thread)
         return null;
-    var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) ||
+    const threadClass = customClasses?.thread ||
         clsx('str-chat__thread-container str-chat__thread', {
             'str-chat__thread--full': fullWidth,
             'str-chat__thread--virtualized': virtualized,
         });
-    var head = (React.createElement(ThreadHead, __assign({ key: thread.id, message: thread, Message: MessageUIComponent }, additionalParentMessageProps)));
+    const head = (React.createElement(ThreadHead, { key: thread.id, message: thread, Message: MessageUIComponent, ...additionalParentMessageProps }));
     return (React.createElement("div", { className: threadClass },
         React.createElement(ThreadHeader, { closeThread: closeThread, thread: thread }),
-        React.createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps))),
-        React.createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps) }),
+        React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false, ...additionalMessageInputProps })));
 };

package/dist/components/Thread/ThreadHead.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { MessageProps } from '../Message';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const ThreadHead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics, import("../../types/types").CustomTrigger>) => React.JSX.Element;
-//# sourceMappingURL=ThreadHead.d.ts.map
+export declare const ThreadHead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Thread/ThreadHead.js

@@ -1,11 +1,10 @@
-import { __assign } from "tslib";
 import React from 'react';
 import { Message } from '../Message';
 import { ThreadStart as DefaultThreadStart } from './ThreadStart';
 import { useComponentContext } from '../../context';
-export var ThreadHead = function (props) {
-    var _a = useComponentContext('ThreadHead').ThreadStart, ThreadStart = _a === void 0 ? DefaultThreadStart : _a;
+export const ThreadHead = (props) => {
+    const { ThreadStart = DefaultThreadStart } = useComponentContext('ThreadHead');
     return (React.createElement("div", { className: 'str-chat__parent-message-li' },
-        React.createElement(Message, __assign({ initialMessage: true, threadList: true }, props)),
+        React.createElement(Message, { initialMessage: true, threadList: true, ...props }),
         React.createElement(ThreadStart, null)));
 };

package/dist/components/Thread/ThreadHeader.d.ts

@@ -8,5 +8,4 @@ export type ThreadHeaderProps<StreamChatGenerics extends DefaultStreamChatGeneri
     /** The thread parent message */
     thread: StreamMessage<StreamChatGenerics>;
 };
-export declare const ThreadHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ThreadHeaderProps<StreamChatGenerics> & Pick<ChannelPreviewInfoParams<StreamChatGenerics>, "overrideImage" | "overrideTitle">) => React.JSX.Element;
-//# sourceMappingURL=ThreadHeader.d.ts.map
+export declare const ThreadHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ThreadHeaderProps<StreamChatGenerics> & Pick<ChannelPreviewInfoParams<StreamChatGenerics>, 'overrideImage' | 'overrideTitle'>) => React.JSX.Element;

package/dist/components/Thread/ThreadHeader.js

@@ -3,19 +3,19 @@ import { useChannelPreviewInfo, } from '../ChannelPreview/hooks/useChannelPrevie
 import { CloseIcon } from './icons';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-export var ThreadHeader = function (props) {
-    var closeThread = props.closeThread, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
-    var t = useTranslationContext('ThreadHeader').t;
-    var channel = useChannelStateContext('').channel;
-    var displayTitle = useChannelPreviewInfo({
-        channel: channel,
-        overrideImage: overrideImage,
-        overrideTitle: overrideTitle,
-    }).displayTitle;
+export const ThreadHeader = (props) => {
+    const { closeThread, overrideImage, overrideTitle } = props;
+    const { t } = useTranslationContext('ThreadHeader');
+    const { channel } = useChannelStateContext('');
+    const { displayTitle } = useChannelPreviewInfo({
+        channel,
+        overrideImage,
+        overrideTitle,
+    });
     return (React.createElement("div", { className: 'str-chat__thread-header' },
         React.createElement("div", { className: 'str-chat__thread-header-details' },
             React.createElement("div", { className: 'str-chat__thread-header-title' }, t('Thread')),
             React.createElement("div", { className: 'str-chat__thread-header-subtitle' }, displayTitle)),
-        React.createElement("button", { "aria-label": t('aria/Close thread'), className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
+        React.createElement("button", { "aria-label": t('aria/Close thread'), className: 'str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
             React.createElement(CloseIcon, null))));
 };

package/dist/components/Thread/ThreadStart.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const ThreadStart: () => React.JSX.Element | null;
-//# sourceMappingURL=ThreadStart.d.ts.map

package/dist/components/Thread/ThreadStart.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-export var ThreadStart = function () {
-    var thread = useChannelStateContext('ThreadStart').thread;
-    var t = useTranslationContext('ThreadStart').t;
-    if (!(thread === null || thread === void 0 ? void 0 : thread.reply_count))
+export const ThreadStart = () => {
+    const { thread } = useChannelStateContext('ThreadStart');
+    const { t } = useTranslationContext('ThreadStart');
+    if (!thread?.reply_count)
         return null;
     return (React.createElement("div", { className: 'str-chat__thread-start' }, t('replyCount', { count: thread.reply_count })));
 };

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

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

package/dist/components/Thread/icons.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
-export var CloseIcon = function (_a) {
-    var title = _a.title;
-    var t = useTranslationContext('CloseIcon').t;
+export const CloseIcon = ({ title }) => {
+    const { t } = useTranslationContext('CloseIcon');
     return (React.createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("title", null, title !== null && title !== void 0 ? title : t('Close')),
+        React.createElement("title", null, title ?? t('Close')),
         React.createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' })));
 };

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

@@ -1,4 +1,3 @@
 export * from './Thread';
 export * from './ThreadHeader';
 export { ThreadStart } from './ThreadStart';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts

@@ -12,4 +12,3 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
     visible?: boolean;
 }>;
 export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, referenceElement, placement, visible, }: PopperTooltipProps<T>) => React.JSX.Element | null;
-//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.js

@@ -1,25 +1,20 @@
-import { __assign, __rest } from "tslib";
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
-export var Tooltip = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
-};
-export var PopperTooltip = function (_a) {
-    var children = _a.children, _b = _a.offset, offset = _b === void 0 ? [0, 10] : _b, referenceElement = _a.referenceElement, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.visible, visible = _d === void 0 ? false : _d;
-    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
-    var _f = usePopper(referenceElement, popperElement, {
+export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
+export const PopperTooltip = ({ children, offset = [0, 10], referenceElement, placement = 'top', visible = false, }) => {
+    const [popperElement, setPopperElement] = useState(null);
+    const { attributes, styles } = usePopper(referenceElement, popperElement, {
         modifiers: [
             {
                 name: 'offset',
                 options: {
-                    offset: offset,
+                    offset,
                 },
             },
         ],
-        placement: placement,
-    }), attributes = _f.attributes, styles = _f.styles;
+        placement,
+    });
     if (!visible)
         return null;
-    return (React.createElement("div", __assign({ className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper }, attributes.popper), children));
+    return (React.createElement("div", { className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper, ...attributes.popper }, children));
 };

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

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

package/dist/components/Tooltip/hooks/useEnterLeaveHandlers.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-export declare const useEnterLeaveHandlers: <T extends HTMLElement>({ onMouseEnter, onMouseLeave, }?: Partial<Record<"onMouseEnter" | "onMouseLeave", React.MouseEventHandler<T>>>) => {
+export declare const useEnterLeaveHandlers: <T extends HTMLElement>({ onMouseEnter, onMouseLeave, }?: Partial<Record<'onMouseEnter' | 'onMouseLeave', React.MouseEventHandler<T>>>) => {
     handleEnter: React.MouseEventHandler<T>;
     handleLeave: React.MouseEventHandler<T>;
     tooltipVisible: boolean;
 };
-//# sourceMappingURL=useEnterLeaveHandlers.d.ts.map

package/dist/components/Tooltip/hooks/useEnterLeaveHandlers.js

@@ -1,14 +1,13 @@
 import { useCallback, useState } from 'react';
-export var useEnterLeaveHandlers = function (_a) {
-    var _b = _a === void 0 ? {} : _a, onMouseEnter = _b.onMouseEnter, onMouseLeave = _b.onMouseLeave;
-    var _c = useState(false), tooltipVisible = _c[0], setTooltipVisible = _c[1];
-    var handleEnter = useCallback(function (e) {
+export const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const handleEnter = useCallback((e) => {
         setTooltipVisible(true);
-        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        onMouseEnter?.(e);
     }, [onMouseEnter]);
-    var handleLeave = useCallback(function (e) {
+    const handleLeave = useCallback((e) => {
         setTooltipVisible(false);
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        onMouseLeave?.(e);
     }, [onMouseLeave]);
-    return { handleEnter: handleEnter, handleLeave: handleLeave, tooltipVisible: tooltipVisible };
+    return { handleEnter, handleLeave, tooltipVisible };
 };

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

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

package/dist/components/TypingIndicator/TypingIndicator.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export type TypingIndicatorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
-    Avatar?: React.ComponentType<AvatarProps<StreamChatGenerics>>;
-    /** Avatar size in pixels, @default 32px */
-    avatarSize?: number;
+export type TypingIndicatorProps = {
     /** Whether the typing indicator is in a thread */
     threadList?: boolean;
 };
-export declare const TypingIndicator: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: TypingIndicatorProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=TypingIndicator.d.ts.map
+export declare const TypingIndicator: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: TypingIndicatorProps) => React.JSX.Element | null;

package/dist/components/TypingIndicator/TypingIndicator.js

@@ -1,89 +1,59 @@
 import React from 'react';
 import clsx from 'clsx';
-import { Avatar as DefaultAvatar } from '../Avatar';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext } from '../../context/ComponentContext';
 import { useTypingContext } from '../../context/TypingContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-var useJoinTypingUsers = function (names) {
-    var t = useTranslationContext().t;
+const useJoinTypingUsers = (names) => {
+    const { t } = useTranslationContext();
     if (!names.length)
         return null;
-    var name = names[0], rest = names.slice(1);
+    const [name, ...rest] = names;
     if (names.length === 1)
         return t('{{ user }} is typing...', {
             user: name,
         });
-    var MAX_JOINED_USERS = 3;
-    var isLargeArray = names.length > MAX_JOINED_USERS;
-    var joinedUsers = (isLargeArray ? names.slice(0, MAX_JOINED_USERS) : rest).join(', ').trim();
-    if (isLargeArray)
+    const MAX_JOINED_USERS = 3;
+    if (names.length > MAX_JOINED_USERS)
         return t('{{ users }} and more are typing...', {
-            users: joinedUsers,
+            users: names.slice(0, MAX_JOINED_USERS).join(', ').trim(),
         });
     return t('{{ users }} and {{ user }} are typing...', {
         user: name,
-        users: joinedUsers,
+        users: rest.join(', ').trim(),
     });
 };
 /**
  * TypingIndicator lists users currently typing, it needs to be a child of Channel component
  */
-var UnMemoizedTypingIndicator = function (props) {
-    var PropAvatar = props.Avatar, _a = props.avatarSize, avatarSize = _a === void 0 ? 32 : _a, threadList = props.threadList;
-    var _b = useChannelStateContext('TypingIndicator'), channelConfig = _b.channelConfig, thread = _b.thread;
-    var _c = useChatContext('TypingIndicator'), client = _c.client, themeVersion = _c.themeVersion;
-    var ContextAvatar = useComponentContext('TypingIndicator').Avatar;
-    var _d = useTypingContext('TypingIndicator').typing, typing = _d === void 0 ? {} : _d;
-    var Avatar = PropAvatar || ContextAvatar || DefaultAvatar;
-    var typingInChannel = !threadList
-        ? Object.values(typing).filter(function (_a) {
-            var _b;
-            var parent_id = _a.parent_id, user = _a.user;
-            return (user === null || user === void 0 ? void 0 : user.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id) && !parent_id;
-        })
+const UnMemoizedTypingIndicator = (props) => {
+    const { threadList } = props;
+    const { channelConfig, thread } = useChannelStateContext('TypingIndicator');
+    const { client } = useChatContext('TypingIndicator');
+    const { typing = {} } = useTypingContext('TypingIndicator');
+    const typingInChannel = !threadList
+        ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id)
         : [];
-    var typingInThread = threadList
-        ? Object.values(typing).filter(function (_a) {
-            var _b;
-            var parent_id = _a.parent_id, user = _a.user;
-            return (user === null || user === void 0 ? void 0 : user.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id) && parent_id === (thread === null || thread === void 0 ? void 0 : thread.id);
-        })
+    const typingInThread = threadList
+        ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === thread?.id)
         : [];
-    var typingUserList = (threadList ? typingInThread : typingInChannel)
-        .map(function (_a) {
-        var user = _a.user;
-        return (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.id);
-    })
+    const typingUserList = (threadList ? typingInThread : typingInChannel)
+        .map(({ user }) => user?.name || user?.id)
         .filter(Boolean);
-    var joinedTypingUsers = useJoinTypingUsers(typingUserList);
-    var isTypingActive = (threadList && typingInThread.length) || (!threadList && typingInChannel.length);
-    if ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.typing_events) === false) {
+    const joinedTypingUsers = useJoinTypingUsers(typingUserList);
+    const isTypingActive = (threadList && typingInThread.length) || (!threadList && typingInChannel.length);
+    if (channelConfig?.typing_events === false) {
         return null;
     }
-    if (themeVersion === '2') {
-        if (!isTypingActive)
-            return null;
-        return (React.createElement("div", { className: clsx('str-chat__typing-indicator', {
-                'str-chat__typing-indicator--typing': isTypingActive,
-            }), "data-testid": 'typing-indicator' },
-            React.createElement("div", { className: 'str-chat__typing-indicator__dots' },
-                React.createElement("span", { className: 'str-chat__typing-indicator__dot' }),
-                React.createElement("span", { className: 'str-chat__typing-indicator__dot' }),
-                React.createElement("span", { className: 'str-chat__typing-indicator__dot' })),
-            React.createElement("div", { className: 'str-chat__typing-indicator__users', "data-testid": 'typing-users' }, joinedTypingUsers)));
-    }
+    if (!isTypingActive)
+        return null;
     return (React.createElement("div", { className: clsx('str-chat__typing-indicator', {
             'str-chat__typing-indicator--typing': isTypingActive,
-        }) },
-        React.createElement("div", { className: 'str-chat__typing-indicator__avatars' }, (threadList ? typingInThread : typingInChannel).map(function (_a, i) {
-            var user = _a.user;
-            return (React.createElement(Avatar, { image: user === null || user === void 0 ? void 0 : user.image, key: "".concat(user === null || user === void 0 ? void 0 : user.id, "-").concat(i), name: (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.id), size: avatarSize, user: user }));
-        })),
+        }), "data-testid": 'typing-indicator' },
         React.createElement("div", { className: 'str-chat__typing-indicator__dots' },
             React.createElement("span", { className: 'str-chat__typing-indicator__dot' }),
             React.createElement("span", { className: 'str-chat__typing-indicator__dot' }),
-            React.createElement("span", { className: 'str-chat__typing-indicator__dot' }))));
+            React.createElement("span", { className: 'str-chat__typing-indicator__dot' })),
+        React.createElement("div", { className: 'str-chat__typing-indicator__users', "data-testid": 'typing-users' }, joinedTypingUsers)));
 };
-export var TypingIndicator = React.memo(UnMemoizedTypingIndicator);
+export const TypingIndicator = React.memo(UnMemoizedTypingIndicator);

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

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

package/dist/components/UserItem/UserItem.d.ts

@@ -21,4 +21,3 @@ export type UserItemProps = {
     Avatar?: React.ComponentType<AvatarProps>;
 };
 export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element;
-//# sourceMappingURL=UserItem.d.ts.map

package/dist/components/UserItem/UserItem.js

@@ -1,29 +1,26 @@
 import React from 'react';
 import clsx from 'clsx';
-import { useChatContext } from '../../context/ChatContext';
 import { Avatar as DefaultAvatar } from '../Avatar';
 /**
  * UI component for mentions rendered in suggestion list
  */
-var UnMemoizedUserItem = function (_a) {
-    var _b = _a.Avatar, Avatar = _b === void 0 ? DefaultAvatar : _b, entity = _a.entity;
-    var themeVersion = useChatContext('UserItem').themeVersion;
-    var hasEntity = !!Object.keys(entity).length;
-    var itemParts = entity === null || entity === void 0 ? void 0 : entity.itemNameParts;
-    var renderName = function () {
+const UnMemoizedUserItem = ({ Avatar = DefaultAvatar, entity }) => {
+    const hasEntity = !!Object.keys(entity).length;
+    const itemParts = entity?.itemNameParts;
+    const renderName = () => {
         if (!hasEntity)
             return null;
-        return itemParts.parts.map(function (part, i) {
-            var matches = part.toLowerCase() === itemParts.match.toLowerCase();
+        return itemParts.parts.map((part, i) => {
+            const matches = part.toLowerCase() === itemParts.match.toLowerCase();
             return (React.createElement("span", { className: clsx({
                     'str-chat__emoji-item--highlight': matches,
                     'str-chat__emoji-item--part': !matches,
-                }), key: "part-".concat(i) }, part));
+                }), key: `part-${i}` }, part));
         });
     };
     return (React.createElement("div", { className: 'str-chat__user-item' },
-        React.createElement(Avatar, { image: entity.image, name: entity.name || entity.id, size: 20 }),
+        React.createElement(Avatar, { className: 'str-chat__avatar--autocomplete-item', image: entity.image, name: entity.name || entity.id }),
         React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName()),
-        themeVersion === '2' && React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
+        React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
 };
-export var UserItem = React.memo(UnMemoizedUserItem);
+export const UserItem = React.memo(UnMemoizedUserItem);

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

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

package/dist/components/UtilityComponents/NullComponent.d.ts

@@ -0,0 +1 @@
+export declare const NullComponent: () => null;

package/dist/components/UtilityComponents/NullComponent.js

@@ -0,0 +1 @@
+export const NullComponent = () => null;

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

@@ -0,0 +1 @@
+export * from './NullComponent';

package/dist/components/UtilityComponents/index.js

@@ -0,0 +1 @@
+export * from './NullComponent';

package/dist/components/Window/Window.d.ts

@@ -10,5 +10,4 @@ export type WindowProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
 /**
  * A UI component for conditionally displaying a Thread or Channel
  */
-export declare const Window: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: React.PropsWithChildren<WindowProps<StreamChatGenerics>>) => React.JSX.Element;
-//# sourceMappingURL=Window.d.ts.map
+export declare const Window: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: PropsWithChildren<WindowProps<StreamChatGenerics>>) => React.JSX.Element;

package/dist/components/Window/Window.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-var UnMemoizedWindow = function (props) {
-    var children = props.children, _a = props.hideOnThread, hideOnThread = _a === void 0 ? false : _a, propThread = props.thread;
-    var contextThread = useChannelStateContext('Window').thread;
+const UnMemoizedWindow = (props) => {
+    const { children, hideOnThread = false, thread: propThread } = props;
+    const { thread: contextThread } = useChannelStateContext('Window');
     return (React.createElement("div", { className: clsx('str-chat__main-panel', {
             'str-chat__main-panel--hideOnThread': hideOnThread && (contextThread || propThread),
         }) }, children));
@@ -11,4 +11,4 @@ var UnMemoizedWindow = function (props) {
 /**
  * A UI component for conditionally displaying a Thread or Channel
  */
-export var Window = React.memo(UnMemoizedWindow);
+export const Window = React.memo(UnMemoizedWindow);

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

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

package/dist/components/index.d.ts

@@ -8,7 +8,6 @@ export * from './ChannelPreview';
 export * from './ChannelSearch';
 export * from './Chat';
 export * from './ChatAutoComplete';
-export * from './ChatDown';
 export * from './CommandItem';
 export * from './DateSeparator';
 export * from './EmoticonItem';
@@ -34,4 +33,3 @@ export * from './UserItem';
 export * from './Window';
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/index.js

@@ -8,7 +8,6 @@ export * from './ChannelPreview';
 export * from './ChannelSearch';
 export * from './Chat';
 export * from './ChatAutoComplete';
-export * from './ChatDown';
 export * from './CommandItem';
 export * from './DateSeparator';
 export * from './EmoticonItem';

package/dist/constants/limits.d.ts

@@ -5,4 +5,3 @@ export declare const DEFAULT_THREAD_PAGE_SIZE = 50;
 export declare const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 export declare const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES: number;
 export declare const DEFAULT_HIGHLIGHT_DURATION = 500;
-//# sourceMappingURL=limits.d.ts.map

package/dist/constants/limits.js

@@ -1,7 +1,7 @@
-export var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
-export var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
-export var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
-export var DEFAULT_THREAD_PAGE_SIZE = 50;
-export var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
-export var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
-export var DEFAULT_HIGHLIGHT_DURATION = 500;
+export const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
+export const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+export const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
+export const DEFAULT_THREAD_PAGE_SIZE = 50;
+export const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
+export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
+export const DEFAULT_HIGHLIGHT_DURATION = 500;

package/dist/constants/messageTypes.d.ts

@@ -2,4 +2,3 @@ export declare const CUSTOM_MESSAGE_TYPE: {
     readonly date: "message.date";
     readonly intro: "channel.intro";
 };
-//# sourceMappingURL=messageTypes.d.ts.map

package/dist/constants/messageTypes.js

@@ -1,4 +1,4 @@
-export var CUSTOM_MESSAGE_TYPE = {
+export const CUSTOM_MESSAGE_TYPE = {
     date: 'message.date',
     intro: 'channel.intro',
 };

package/dist/context/ChannelActionContext.d.ts

@@ -49,7 +49,7 @@ export type ChannelActionContextValue<StreamChatGenerics extends DefaultStreamCh
     updateMessage: (message: StreamMessage<StreamChatGenerics>) => void;
 };
 export declare const ChannelActionContext: React.Context<ChannelActionContextValue<DefaultStreamChatGenerics> | undefined>;
-export declare const ChannelActionProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: React.PropsWithChildren<{
+export declare const ChannelActionProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: PropsWithChildren<{
     value: ChannelActionContextValue<StreamChatGenerics>;
 }>) => React.JSX.Element;
 export declare const useChannelActionContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(componentName?: string) => ChannelActionContextValue<StreamChatGenerics>;
@@ -62,4 +62,3 @@ export declare const withChannelActionContext: <P extends UnknownType, StreamCha
     (props: Omit<P, keyof ChannelActionContextValue<StreamChatGenerics>>): React.JSX.Element;
     displayName: string;
 };
-//# sourceMappingURL=ChannelActionContext.d.ts.map