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

package/dist/components/Chat/Chat.d.ts

@@ -1,29 +1,14 @@
 import React, { PropsWithChildren } from 'react';
-import { CustomStyles } from './hooks/useCustomStyles';
 import { CustomClasses } from '../../context/ChatContext';
 import { SupportedTranslations } from '../../context/TranslationContext';
 import type { StreamChat } from 'stream-chat';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-/**
- * @deprecated will be removed with the complete transition to the theming V2 (next major release - `v11.0.0`)
- */
-export type Theme<T extends string = string> = 'commerce dark' | 'commerce light' | 'livestream dark' | 'livestream light' | 'messaging dark' | 'messaging light' | 'team dark' | 'team light' | T;
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** The StreamChat client object */
     client: StreamChat<StreamChatGenerics>;
     /** Object containing custom CSS classnames to override the library's default container CSS */
     customClasses?: CustomClasses;
-    /**
-     * @desc object containing custom styles to override the default CSS variables
-     * @deprecated will be removed with the complete transition to the theming v2 (next major release - `v11.0.0`)
-     */
-    customStyles?: CustomStyles;
-    /**
-     * @desc if true, toggles the CSS variables to the default dark mode color palette
-     * @deprecated will be removed with the complete transition to the theming v2 (next major release - `v11.0.0`)
-     */
-    darkMode?: boolean;
     /** Sets the default fallback language for UI component translation, defaults to 'en' for English */
     defaultLanguage?: SupportedTranslations;
     /** Instance of Stream i18n */
@@ -45,5 +30,4 @@ export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = Def
  * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
  * as it provides the ChatContext.
  */
-export declare const Chat: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: React.PropsWithChildren<ChatProps<StreamChatGenerics>>) => React.JSX.Element | null;
-//# sourceMappingURL=Chat.d.ts.map
+export declare const Chat: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: PropsWithChildren<ChatProps<StreamChatGenerics>>) => React.JSX.Element | null;

package/dist/components/Chat/Chat.js

@@ -2,39 +2,30 @@ import React from 'react';
 import { useChat } from './hooks/useChat';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useChannelsQueryState } from './hooks/useChannelsQueryState';
-import { darkModeTheme, useCustomStyles } from './hooks/useCustomStyles';
 import { ChatProvider } from '../../context/ChatContext';
 import { TranslationProvider } from '../../context/TranslationContext';
 /**
  * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
  * as it provides the ChatContext.
  */
-export var Chat = function (props) {
-    var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
-    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
-    var channelsQueryState = useChannelsQueryState();
-    var themeVersion = typeof window !== 'undefined'
-        ? (window
-            .getComputedStyle(document.documentElement)
-            .getPropertyValue('--str-chat__theme-version')
-            .replace(' ', '') || '1')
-        : '1';
-    useCustomStyles(darkMode ? darkModeTheme : customStyles);
-    var chatContextValue = useCreateChatContext({
-        channel: channel,
-        channelsQueryState: channelsQueryState,
-        client: client,
-        closeMobileNav: closeMobileNav,
-        customClasses: customClasses,
-        getAppSettings: getAppSettings,
-        latestMessageDatesByChannels: latestMessageDatesByChannels,
-        mutes: mutes,
-        navOpen: navOpen,
-        openMobileNav: openMobileNav,
-        setActiveChannel: setActiveChannel,
-        theme: theme,
-        themeVersion: themeVersion,
-        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
+export const Chat = (props) => {
+    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
+    const { channel, closeMobileNav, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, translators, } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
+    const channelsQueryState = useChannelsQueryState();
+    const chatContextValue = useCreateChatContext({
+        channel,
+        channelsQueryState,
+        client,
+        closeMobileNav,
+        customClasses,
+        getAppSettings,
+        latestMessageDatesByChannels,
+        mutes,
+        navOpen,
+        openMobileNav,
+        setActiveChannel,
+        theme,
+        useImageFlagEmojisOnWindows,
     });
     if (!translators.t)
         return null;

package/dist/components/Chat/hooks/useChannelsQueryState.d.ts

@@ -9,4 +9,3 @@ export interface ChannelsQueryState {
 }
 export declare const useChannelsQueryState: () => ChannelsQueryState;
 export {};
-//# sourceMappingURL=useChannelsQueryState.d.ts.map

package/dist/components/Chat/hooks/useChannelsQueryState.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-export var useChannelsQueryState = function () {
-    var _a = useState(null), error = _a[0], setError = _a[1];
-    var _b = useState('uninitialized'), queryInProgress = _b[0], setQueryInProgress = _b[1];
+export const useChannelsQueryState = () => {
+    const [error, setError] = useState(null);
+    const [queryInProgress, setQueryInProgress] = useState('uninitialized');
     return {
-        error: error,
-        queryInProgress: queryInProgress,
-        setError: setError,
-        setQueryInProgress: setQueryInProgress,
+        error,
+        queryInProgress,
+        setError,
+        setQueryInProgress,
     };
 };

package/dist/components/Chat/hooks/useChat.d.ts

@@ -16,10 +16,9 @@ export declare const useChat: <StreamChatGenerics extends DefaultStreamChatGener
     mutes: Mute<StreamChatGenerics>[];
     navOpen: boolean | undefined;
     openMobileNav: () => NodeJS.Timeout;
-    setActiveChannel: (activeChannel?: Channel<StreamChatGenerics> | undefined, watchers?: {
+    setActiveChannel: (activeChannel?: Channel<StreamChatGenerics>, watchers?: {
         limit?: number;
         offset?: number;
     }, event?: React.BaseSyntheticEvent) => Promise<void>;
     translators: TranslationContextValue;
 };
-//# sourceMappingURL=useChat.d.ts.map

package/dist/components/Chat/hooks/useChat.js

@@ -1,99 +1,83 @@
-import { __assign, __awaiter, __generator } from "tslib";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { defaultDateTimeParser, isLanguageSupported, } from '../../../context/TranslationContext';
 import { Streami18n } from '../../../i18n';
 import { version } from '../../../version';
-export var useChat = function (_a) {
-    var _b, _c;
-    var client = _a.client, _d = _a.defaultLanguage, defaultLanguage = _d === void 0 ? 'en' : _d, i18nInstance = _a.i18nInstance, initialNavOpen = _a.initialNavOpen;
-    var _e = useState({
-        t: function (key) { return key; },
+export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
+    const [translators, setTranslators] = useState({
+        t: (key) => key,
         tDateTimeParser: defaultDateTimeParser,
         userLanguage: 'en',
-    }), translators = _e[0], setTranslators = _e[1];
-    var _f = useState(), channel = _f[0], setChannel = _f[1];
-    var _g = useState([]), mutes = _g[0], setMutes = _g[1];
-    var _h = useState(initialNavOpen), navOpen = _h[0], setNavOpen = _h[1];
-    var _j = useState({}), latestMessageDatesByChannels = _j[0], setLatestMessageDatesByChannels = _j[1];
-    var clientMutes = ((_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes) || [];
-    var closeMobileNav = function () { return setNavOpen(false); };
-    var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
-    var appSettings = useRef(null);
-    var getAppSettings = function () {
+    });
+    const [channel, setChannel] = useState();
+    const [mutes, setMutes] = useState([]);
+    const [navOpen, setNavOpen] = useState(initialNavOpen);
+    const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = useState({});
+    const clientMutes = client.user?.mutes || [];
+    const closeMobileNav = () => setNavOpen(false);
+    const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
+    const appSettings = useRef(null);
+    const getAppSettings = () => {
         if (appSettings.current) {
             return appSettings.current;
         }
         appSettings.current = client.getAppSettings();
         return appSettings.current;
     };
-    useEffect(function () {
+    useEffect(() => {
         if (client) {
-            var userAgent = client.getUserAgent();
+            const userAgent = client.getUserAgent();
             if (!userAgent.includes('stream-chat-react')) {
                 // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-                client.setUserAgent("stream-chat-react-".concat(version, "-").concat(userAgent));
+                client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
             }
         }
     }, [client]);
-    useEffect(function () {
+    useEffect(() => {
         setMutes(clientMutes);
-        var handleEvent = function (event) {
-            var _a;
-            setMutes(((_a = event.me) === null || _a === void 0 ? void 0 : _a.mutes) || []);
+        const handleEvent = (event) => {
+            setMutes(event.me?.mutes || []);
         };
         client.on('notification.mutes_updated', handleEvent);
-        return function () { return client.off('notification.mutes_updated', handleEvent); };
+        return () => client.off('notification.mutes_updated', handleEvent);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [clientMutes === null || clientMutes === void 0 ? void 0 : clientMutes.length]);
-    useEffect(function () {
-        var _a;
-        var userLanguage = (_a = client.user) === null || _a === void 0 ? void 0 : _a.language;
+    }, [clientMutes?.length]);
+    useEffect(() => {
+        let userLanguage = client.user?.language;
         if (!userLanguage) {
-            var browserLanguage = window.navigator.language.slice(0, 2); // just get language code, not country-specific version
+            const browserLanguage = window.navigator.language.slice(0, 2); // just get language code, not country-specific version
             userLanguage = isLanguageSupported(browserLanguage) ? browserLanguage : defaultLanguage;
         }
-        var streami18n = i18nInstance || new Streami18n({ language: userLanguage });
-        streami18n.registerSetLanguageCallback(function (t) {
-            return setTranslators(function (prevTranslator) { return (__assign(__assign({}, prevTranslator), { t: t })); });
-        });
-        streami18n.getTranslators().then(function (translator) {
-            setTranslators(__assign(__assign({}, translator), { userLanguage: userLanguage || defaultLanguage }));
+        const streami18n = i18nInstance || new Streami18n({ language: userLanguage });
+        streami18n.registerSetLanguageCallback((t) => setTranslators((prevTranslator) => ({ ...prevTranslator, t })));
+        streami18n.getTranslators().then((translator) => {
+            setTranslators({
+                ...translator,
+                userLanguage: userLanguage || defaultLanguage,
+            });
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [i18nInstance]);
-    var setActiveChannel = useCallback(function (activeChannel, watchers, event) {
-        if (watchers === void 0) { watchers = {}; }
-        return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (event && event.preventDefault)
-                            event.preventDefault();
-                        if (!(activeChannel && Object.keys(watchers).length)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, activeChannel.query({ watch: true, watchers: watchers })];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        setChannel(activeChannel);
-                        closeMobileNav();
-                        return [2 /*return*/];
-                }
-            });
-        });
+    const setActiveChannel = useCallback(async (activeChannel, watchers = {}, event) => {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        if (activeChannel && Object.keys(watchers).length) {
+            await activeChannel.query({ watch: true, watchers });
+        }
+        setChannel(activeChannel);
+        closeMobileNav();
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         setLatestMessageDatesByChannels({});
-    }, [(_c = client.user) === null || _c === void 0 ? void 0 : _c.id]);
+    }, [client.user?.id]);
     return {
-        channel: channel,
-        closeMobileNav: closeMobileNav,
-        getAppSettings: getAppSettings,
-        latestMessageDatesByChannels: latestMessageDatesByChannels,
-        mutes: mutes,
-        navOpen: navOpen,
-        openMobileNav: openMobileNav,
-        setActiveChannel: setActiveChannel,
-        translators: translators,
+        channel,
+        closeMobileNav,
+        getAppSettings,
+        latestMessageDatesByChannels,
+        mutes,
+        navOpen,
+        openMobileNav,
+        setActiveChannel,
+        translators,
     };
 };

package/dist/components/Chat/hooks/useCreateChatClient.d.ts

@@ -7,4 +7,3 @@ export declare const useCreateChatClient: <SCG extends ExtendableGenerics = Defa
     tokenOrProvider: TokenOrProvider;
     userData: OwnUserResponse<SCG> | UserResponse<SCG>;
 }) => StreamChat<SCG> | null;
-//# sourceMappingURL=useCreateChatClient.d.ts.map

package/dist/components/Chat/hooks/useCreateChatClient.js

@@ -3,27 +3,26 @@ import { StreamChat, } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export var useCreateChatClient = function (_a) {
-    var apiKey = _a.apiKey, tokenOrProvider = _a.tokenOrProvider, userData = _a.userData;
-    var _b = useState(null), chatClient = _b[0], setChatClient = _b[1];
-    var _c = useState(userData), cachedUserData = _c[0], setCachedUserData = _c[1];
+export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
+    const [chatClient, setChatClient] = useState(null);
+    const [cachedUserData, setCachedUserData] = useState(userData);
     if (userData.id !== cachedUserData.id) {
         setCachedUserData(userData);
     }
-    useEffect(function () {
-        var client = new StreamChat(apiKey);
-        var didUserConnectInterrupt = false;
-        var connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(function () {
+    useEffect(() => {
+        const client = new StreamChat(apiKey);
+        let didUserConnectInterrupt = false;
+        const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
             if (!didUserConnectInterrupt)
                 setChatClient(client);
         });
-        return function () {
+        return () => {
             didUserConnectInterrupt = true;
             setChatClient(null);
             connectionPromise
-                .then(function () { return client.disconnectUser(); })
-                .then(function () {
-                console.log("Connection for user \"".concat(cachedUserData.id, "\" has been closed"));
+                .then(() => client.disconnectUser())
+                .then(() => {
+                console.log(`Connection for user "${cachedUserData.id}" has been closed`);
             });
         };
     }, [apiKey, cachedUserData, tokenOrProvider]);

package/dist/components/Chat/hooks/useCreateChatContext.d.ts

@@ -1,4 +1,3 @@
 import type { ChatContextValue } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useCreateChatContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(value: ChatContextValue<StreamChatGenerics>) => ChatContextValue<StreamChatGenerics>;
-//# sourceMappingURL=useCreateChatContext.d.ts.map

package/dist/components/Chat/hooks/useCreateChatContext.js

@@ -1,28 +1,27 @@
 import { useMemo } from 'react';
-export var useCreateChatContext = function (value) {
-    var _a;
-    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
-    var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
-    var channelsQueryError = channelsQueryState.error;
-    var channelsQueryInProgress = channelsQueryState.queryInProgress;
-    var clientValues = "".concat(client.clientID).concat(Object.keys(client.activeChannels).length).concat(Object.keys(client.listeners).length).concat(client.mutedChannels.length, "\n  ").concat((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
-    var mutedUsersLength = mutes.length;
-    var chatContext = useMemo(function () { return ({
-        channel: channel,
-        channelsQueryState: channelsQueryState,
-        client: client,
-        closeMobileNav: closeMobileNav,
-        customClasses: customClasses,
-        getAppSettings: getAppSettings,
-        latestMessageDatesByChannels: latestMessageDatesByChannels,
-        mutes: mutes,
-        navOpen: navOpen,
-        openMobileNav: openMobileNav,
-        setActiveChannel: setActiveChannel,
-        theme: theme,
-        themeVersion: themeVersion,
-        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-    }); }, 
+export const useCreateChatContext = (value) => {
+    const { channel, channelsQueryState, client, closeMobileNav, customClasses, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = value;
+    const channelCid = channel?.cid;
+    const channelsQueryError = channelsQueryState.error;
+    const channelsQueryInProgress = channelsQueryState.queryInProgress;
+    const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
+  ${client.user?.id}`;
+    const mutedUsersLength = mutes.length;
+    const chatContext = useMemo(() => ({
+        channel,
+        channelsQueryState,
+        client,
+        closeMobileNav,
+        customClasses,
+        getAppSettings,
+        latestMessageDatesByChannels,
+        mutes,
+        navOpen,
+        openMobileNav,
+        setActiveChannel,
+        theme,
+        useImageFlagEmojisOnWindows,
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         channelCid,

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

@@ -1,5 +1,3 @@
 export * from './Chat';
 export * from './hooks/useChat';
-export * from './hooks/useCustomStyles';
 export * from './hooks/useCreateChatClient';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/index.js

@@ -1,4 +1,3 @@
 export * from './Chat';
 export * from './hooks/useChat';
-export * from './hooks/useCustomStyles';
 export * from './hooks/useCreateChatClient';

package/dist/components/ChatAutoComplete/ChatAutoComplete.d.ts

@@ -74,4 +74,3 @@ export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
 };
 export declare const ChatAutoComplete: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: ChatAutoCompleteProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=ChatAutoComplete.d.ts.map

package/dist/components/ChatAutoComplete/ChatAutoComplete.js

@@ -1,45 +1,33 @@
-import { __awaiter, __generator } from "tslib";
 import React, { useCallback } from 'react';
 import { AutoCompleteTextarea } from '../AutoCompleteTextarea';
 import { LoadingIndicator } from '../Loading/LoadingIndicator';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useComponentContext } from '../../context/ComponentContext';
-var UnMemoizedChatAutoComplete = function (props) {
-    var _a = useComponentContext('ChatAutoComplete'), SuggestionItem = _a.AutocompleteSuggestionItem, SuggestionList = _a.AutocompleteSuggestionList;
-    var t = useTranslationContext('ChatAutoComplete').t;
-    var messageInput = useMessageInputContext('ChatAutoComplete');
-    var cooldownRemaining = messageInput.cooldownRemaining, disabled = messageInput.disabled, emojiSearchIndex = messageInput.emojiSearchIndex, innerRef = messageInput.textareaRef;
-    var placeholder = props.placeholder || t('Type your message');
-    var emojiReplace = props.wordReplace
-        ? function (word) { var _a; return (_a = props.wordReplace) === null || _a === void 0 ? void 0 : _a.call(props, word, emojiSearchIndex); }
-        : function (word) { return __awaiter(void 0, void 0, void 0, function () {
-            var found, emoji, firstSkin;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0: return [4 /*yield*/, (emojiSearchIndex === null || emojiSearchIndex === void 0 ? void 0 : emojiSearchIndex.search(word))];
-                    case 1:
-                        found = (_c.sent()) || [];
-                        emoji = found
-                            .filter(Boolean)
-                            .slice(0, 10)
-                            .find(function (_a) {
-                            var emoticons = _a.emoticons;
-                            return !!(emoticons === null || emoticons === void 0 ? void 0 : emoticons.includes(word));
-                        });
-                        if (!emoji)
-                            return [2 /*return*/, null];
-                        firstSkin = ((_a = emoji.skins) !== null && _a !== void 0 ? _a : [])[0];
-                        return [2 /*return*/, (_b = emoji.native) !== null && _b !== void 0 ? _b : firstSkin.native];
-                }
-            });
-        }); };
-    var updateInnerRef = useCallback(function (ref) {
+const UnMemoizedChatAutoComplete = (props) => {
+    const { AutocompleteSuggestionItem: SuggestionItem, AutocompleteSuggestionList: SuggestionList, } = useComponentContext('ChatAutoComplete');
+    const { t } = useTranslationContext('ChatAutoComplete');
+    const messageInput = useMessageInputContext('ChatAutoComplete');
+    const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef } = messageInput;
+    const placeholder = props.placeholder || t('Type your message');
+    const emojiReplace = props.wordReplace
+        ? (word) => props.wordReplace?.(word, emojiSearchIndex)
+        : async (word) => {
+            const found = (await emojiSearchIndex?.search(word)) || [];
+            const emoji = found
+                .filter(Boolean)
+                .slice(0, 10)
+                .find(({ emoticons }) => !!emoticons?.includes(word));
+            if (!emoji)
+                return null;
+            const [firstSkin] = emoji.skins ?? [];
+            return emoji.native ?? firstSkin.native;
+        };
+    const updateInnerRef = useCallback((ref) => {
         if (innerRef) {
             innerRef.current = ref;
         }
     }, [innerRef]);
-    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
 };
-export var ChatAutoComplete = React.memo(UnMemoizedChatAutoComplete);
+export const ChatAutoComplete = React.memo(UnMemoizedChatAutoComplete);

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

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

package/dist/components/CommandItem/CommandItem.d.ts

@@ -10,4 +10,3 @@ export type CommandItemProps = {
     };
 };
 export declare const CommandItem: (props: PropsWithChildren<CommandItemProps>) => React.JSX.Element;
-//# sourceMappingURL=CommandItem.d.ts.map

package/dist/components/CommandItem/CommandItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-var UnMemoizedCommandItem = function (props) {
-    var entity = props.entity;
+const UnMemoizedCommandItem = (props) => {
+    const { entity } = props;
     return (React.createElement("div", { className: 'str-chat__slash-command' },
         React.createElement("span", { className: 'str-chat__slash-command-header' },
             React.createElement("strong", null, entity.name),
@@ -9,4 +9,4 @@ var UnMemoizedCommandItem = function (props) {
         React.createElement("br", null),
         React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description)));
 };
-export var CommandItem = React.memo(UnMemoizedCommandItem);
+export const CommandItem = React.memo(UnMemoizedCommandItem);

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

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

package/dist/components/DateSeparator/DateSeparator.d.ts

@@ -14,4 +14,3 @@ export type DateSeparatorProps = TimestampFormatterOptions & {
  * A simple date separator between messages.
  */
 export declare const DateSeparator: (props: DateSeparatorProps) => React.JSX.Element;
-//# sourceMappingURL=DateSeparator.d.ts.map

package/dist/components/DateSeparator/DateSeparator.js

@@ -1,17 +1,24 @@
-import { __assign, __rest } from "tslib";
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { getDateString } from '../../i18n/utils';
-var UnMemoizedDateSeparator = function (props) {
-    var _a = props.calendar, calendar = _a === void 0 ? true : _a, messageCreatedAt = props.date, formatDate = props.formatDate, _b = props.position, position = _b === void 0 ? 'right' : _b, unread = props.unread, restTimestampFormatterOptions = __rest(props, ["calendar", "date", "formatDate", "position", "unread"]);
-    var _c = useTranslationContext('DateSeparator'), t = _c.t, tDateTimeParser = _c.tDateTimeParser;
-    var formattedDate = getDateString(__assign(__assign({ calendar: calendar }, restTimestampFormatterOptions), { formatDate: formatDate, messageCreatedAt: messageCreatedAt, t: t, tDateTimeParser: tDateTimeParser, timestampTranslationKey: 'timestamp/DateSeparator' }));
+const UnMemoizedDateSeparator = (props) => {
+    const { calendar = true, date: messageCreatedAt, formatDate, position = 'right', unread, ...restTimestampFormatterOptions } = props;
+    const { t, tDateTimeParser } = useTranslationContext('DateSeparator');
+    const formattedDate = getDateString({
+        calendar,
+        ...restTimestampFormatterOptions,
+        formatDate,
+        messageCreatedAt,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/DateSeparator',
+    });
     return (React.createElement("div", { className: 'str-chat__date-separator', "data-testid": 'date-separator' },
         (position === 'right' || position === 'center') && (React.createElement("hr", { className: 'str-chat__date-separator-line' })),
-        React.createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
+        React.createElement("div", { className: 'str-chat__date-separator-date' }, unread ? `${t('New')} - ${formattedDate}` : formattedDate),
         (position === 'left' || position === 'center') && (React.createElement("hr", { className: 'str-chat__date-separator-line' }))));
 };
 /**
  * A simple date separator between messages.
  */
-export var DateSeparator = React.memo(UnMemoizedDateSeparator);
+export const DateSeparator = React.memo(UnMemoizedDateSeparator);

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

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

package/dist/components/Emojis/EmojiPicker.d.ts

@@ -20,4 +20,3 @@ export type EmojiPickerProps = {
     popperOptions?: Partial<Options>;
 };
 export declare const EmojiPicker: (props: EmojiPickerProps) => React.JSX.Element;
-//# sourceMappingURL=EmojiPicker.d.ts.map