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

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js

@@ -1,26 +1,25 @@
 import React, { useCallback, useEffect } from 'react';
-export var useScrollToBottomOnNewMessage = function (_a) {
-    var messages = _a.messages, scrollToBottom = _a.scrollToBottom, scrollToLatestMessageOnFocus = _a.scrollToLatestMessageOnFocus;
-    var _b = React.useState(false), newMessagesReceivedInBackground = _b[0], setNewMessagesReceivedInBackground = _b[1];
-    var resetNewMessagesReceivedInBackground = useCallback(function () {
+export const useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }) => {
+    const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = React.useState(false);
+    const resetNewMessagesReceivedInBackground = useCallback(() => {
         setNewMessagesReceivedInBackground(false);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         setNewMessagesReceivedInBackground(true);
     }, [messages]);
-    var scrollToBottomIfConfigured = useCallback(function (event) {
+    const scrollToBottomIfConfigured = useCallback((event) => {
         if (!scrollToLatestMessageOnFocus ||
             !newMessagesReceivedInBackground ||
             event.target !== window)
             return;
         setTimeout(scrollToBottom, 100);
     }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
-    useEffect(function () {
+    useEffect(() => {
         if (typeof window !== 'undefined') {
             window.addEventListener('focus', scrollToBottomIfConfigured);
             window.addEventListener('blur', resetNewMessagesReceivedInBackground);
         }
-        return function () {
+        return () => {
             window.removeEventListener('focus', scrollToBottomIfConfigured);
             window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
         };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.d.ts

@@ -1,4 +1,3 @@
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function useShouldForceScrollToBottom<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId?: string): () => boolean;
-//# sourceMappingURL=useShouldForceScrollToBottom.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.js

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from 'react';
 export function useShouldForceScrollToBottom(messages, currentUserId) {
-    var lastFocusedOwnMessage = useRef('');
-    var initialFocusRegistered = useRef(false);
+    const lastFocusedOwnMessage = useRef('');
+    const initialFocusRegistered = useRef(false);
     function recheckForNewOwnMessage() {
-        var _a;
         if (messages && messages.length > 0) {
-            var lastMessage = messages[messages.length - 1];
-            if (((_a = lastMessage.user) === null || _a === void 0 ? void 0 : _a.id) === currentUserId &&
+            const lastMessage = messages[messages.length - 1];
+            if (lastMessage.user?.id === currentUserId &&
                 lastFocusedOwnMessage.current !== lastMessage.id) {
                 lastFocusedOwnMessage.current = lastMessage.id;
                 return true;
@@ -14,12 +13,12 @@ export function useShouldForceScrollToBottom(messages, currentUserId) {
         }
         return false;
     }
-    useEffect(function () {
+    useEffect(() => {
         if (messages && messages.length && !initialFocusRegistered.current) {
             initialFocusRegistered.current = true;
             recheckForNewOwnMessage();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
+    }, [messages, messages?.length]);
     return recheckForNewOwnMessage;
 }

package/dist/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.d.ts

@@ -21,4 +21,3 @@ export declare const useUnreadMessagesNotificationVirtualized: <StreamChatGeneri
     show: boolean;
     toggleShowUnreadMessagesNotification: (renderedMessages: StreamMessage<StreamChatGenerics>[]) => void;
 };
-//# sourceMappingURL=useUnreadMessagesNotificationVirtualized.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.js

@@ -11,25 +11,24 @@ import { useCallback, useEffect, useState } from 'react';
  * @param showAlways
  * @param unreadCount
  */
-export var useUnreadMessagesNotificationVirtualized = function (_a) {
-    var lastRead = _a.lastRead, showAlways = _a.showAlways, unreadCount = _a.unreadCount;
-    var _b = useState(false), show = _b[0], setShow = _b[1];
-    var toggleShowUnreadMessagesNotification = useCallback(function (renderedMessages) {
+export const useUnreadMessagesNotificationVirtualized = ({ lastRead, showAlways, unreadCount, }) => {
+    const [show, setShow] = useState(false);
+    const toggleShowUnreadMessagesNotification = useCallback((renderedMessages) => {
         if (!unreadCount)
             return;
-        var firstRenderedMessage = renderedMessages[0];
-        var lastRenderedMessage = renderedMessages.slice(-1)[0];
+        const firstRenderedMessage = renderedMessages[0];
+        const lastRenderedMessage = renderedMessages.slice(-1)[0];
         if (!(firstRenderedMessage && lastRenderedMessage))
             return;
-        var scrolledBelowSeparator = !!lastRead &&
+        const scrolledBelowSeparator = !!lastRead &&
             new Date(firstRenderedMessage.created_at).getTime() > lastRead.getTime();
-        var scrolledAboveSeparator = !!lastRead &&
+        const scrolledAboveSeparator = !!lastRead &&
             new Date(lastRenderedMessage.created_at).getTime() < lastRead.getTime();
         setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
     }, [lastRead, showAlways, unreadCount]);
-    useEffect(function () {
+    useEffect(() => {
         if (!unreadCount)
             setShow(false);
     }, [unreadCount]);
-    return { show: show, toggleShowUnreadMessagesNotification: toggleShowUnreadMessagesNotification };
+    return { show, toggleShowUnreadMessagesNotification };
 };

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

@@ -6,4 +6,3 @@ export * from './useLastReadData';
 export * from './VirtualizedMessageList/useNewMessageNotification';
 export * from './VirtualizedMessageList/usePrependMessagesCount';
 export * from './VirtualizedMessageList/useShouldForceScrollToBottom';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/useLastReadData.d.ts

@@ -12,4 +12,3 @@ type UseLastReadDataParams<StreamChatGenerics extends DefaultStreamChatGenerics
 };
 export declare const useLastReadData: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseLastReadDataParams<StreamChatGenerics>) => Record<string, UserResponse<StreamChatGenerics>[]>;
 export {};
-//# sourceMappingURL=useLastReadData.d.ts.map

package/dist/components/MessageList/hooks/useLastReadData.js

@@ -1,11 +1,6 @@
 import { useMemo } from 'react';
 import { getReadStates } from '../utils';
-export var useLastReadData = function (props) {
-    var messages = props.messages, read = props.read, returnAllReadData = props.returnAllReadData, userID = props.userID;
-    return useMemo(function () {
-        return getReadStates(messages.filter(function (_a) {
-            var user = _a.user;
-            return (user === null || user === void 0 ? void 0 : user.id) === userID;
-        }), read, returnAllReadData);
-    }, [messages, read, returnAllReadData, userID]);
+export const useLastReadData = (props) => {
+    const { messages, read, returnAllReadData, userID } = props;
+    return useMemo(() => getReadStates(messages.filter(({ user }) => user?.id === userID), read, returnAllReadData), [messages, read, returnAllReadData, userID]);
 };

package/dist/components/MessageList/hooks/useMarkRead.d.ts

@@ -17,4 +17,3 @@ type UseMarkReadParams = {
  */
 export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }: UseMarkReadParams) => void;
 export {};
-//# sourceMappingURL=useMarkRead.d.ts.map

package/dist/components/MessageList/hooks/useMarkRead.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import { useEffect, useRef } from 'react';
 import { useChannelActionContext, useChannelStateContext, useChatContext, } from '../../../context';
 /**
@@ -11,39 +10,39 @@ import { useChannelActionContext, useChannelStateContext, useChatContext, } from
  * @param unreadCount
  * @param wasChannelMarkedUnread
  */
-export var useMarkRead = function (_a) {
-    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, messageListIsThread = _a.messageListIsThread, unreadCount = _a.unreadCount, wasMarkedUnread = _a.wasMarkedUnread;
-    var client = useChatContext('useMarkRead').client;
-    var _b = useChannelActionContext('useMarkRead'), markRead = _b.markRead, setChannelUnreadUiState = _b.setChannelUnreadUiState;
-    var channel = useChannelStateContext('useMarkRead').channel;
-    var previousRenderMessageListScrolledToBottom = useRef(isMessageListScrolledToBottom);
-    useEffect(function () {
-        var shouldMarkRead = function (unreadMessages) {
-            return !document.hidden &&
-                !wasMarkedUnread &&
-                !messageListIsThread &&
-                isMessageListScrolledToBottom &&
-                unreadMessages > 0;
-        };
-        var onVisibilityChange = function () {
+export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }) => {
+    const { client } = useChatContext('useMarkRead');
+    const { markRead, setChannelUnreadUiState } = useChannelActionContext('useMarkRead');
+    const { channel } = useChannelStateContext('useMarkRead');
+    const previousRenderMessageListScrolledToBottom = useRef(isMessageListScrolledToBottom);
+    useEffect(() => {
+        const shouldMarkRead = (unreadMessages) => !document.hidden &&
+            !wasMarkedUnread &&
+            !messageListIsThread &&
+            isMessageListScrolledToBottom &&
+            unreadMessages > 0;
+        const onVisibilityChange = () => {
             if (shouldMarkRead(channel.countUnread()))
                 markRead();
         };
-        var handleMessageNew = function (event) {
-            var _a, _b, _c, _d;
-            var newMessageToCurrentChannel = event.cid === channel.cid;
-            var isOwnMessage = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) && event.user.id === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id);
-            var mainChannelUpdated = !((_c = event.message) === null || _c === void 0 ? void 0 : _c.parent_id) || ((_d = event.message) === null || _d === void 0 ? void 0 : _d.show_in_channel);
+        const handleMessageNew = (event) => {
+            const newMessageToCurrentChannel = event.cid === channel.cid;
+            const isOwnMessage = event.user?.id && event.user.id === client.user?.id;
+            const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
             if (isOwnMessage)
                 return;
             if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {
-                setChannelUnreadUiState(function (prev) {
-                    var _a, _b;
-                    var previousUnreadCount = (_a = prev === null || prev === void 0 ? void 0 : prev.unread_messages) !== null && _a !== void 0 ? _a : 0;
-                    var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
-                    return __assign(__assign({}, (prev || {})), { last_read: (_b = prev === null || prev === void 0 ? void 0 : prev.last_read) !== null && _b !== void 0 ? _b : (previousUnreadCount === 0 && (previousLastMessage === null || previousLastMessage === void 0 ? void 0 : previousLastMessage.created_at)
-                            ? new Date(previousLastMessage.created_at)
-                            : new Date(0)), unread_messages: previousUnreadCount + 1 });
+                setChannelUnreadUiState((prev) => {
+                    const previousUnreadCount = prev?.unread_messages ?? 0;
+                    const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+                    return {
+                        ...(prev || {}),
+                        last_read: prev?.last_read ??
+                            (previousUnreadCount === 0 && previousLastMessage?.created_at
+                                ? new Date(previousLastMessage.created_at)
+                                : new Date(0)), // not having information about the last read message means the whole channel is unread,
+                        unread_messages: previousUnreadCount + 1,
+                    };
                 });
             }
             else if (newMessageToCurrentChannel &&
@@ -54,12 +53,12 @@ export var useMarkRead = function (_a) {
         };
         client.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
-        var hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
+        const hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
             isMessageListScrolledToBottom;
         if (hasScrolledToBottom && shouldMarkRead(channel.countUnread()))
             markRead();
         previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
-        return function () {
+        return () => {
             client.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
         };
@@ -77,10 +76,10 @@ export var useMarkRead = function (_a) {
 function getPreviousLastMessage(messages, newMessage) {
     if (!newMessage)
         return;
-    var previousLastMessage;
-    for (var i = messages.length - 1; i >= 0; i--) {
-        var msg = messages[i];
-        if (!(msg === null || msg === void 0 ? void 0 : msg.id))
+    let previousLastMessage;
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const msg = messages[i];
+        if (!msg?.id)
             break;
         if (msg.id !== newMessage.id) {
             previousLastMessage = msg;

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

@@ -7,4 +7,3 @@ export declare const ArrowUp: ({ className, color }: ArrowProps) => React.JSX.El
 export declare const ArrowDown: ({ className, color }: ArrowProps) => React.JSX.Element;
 export declare const CloseIcon: () => React.JSX.Element;
 export {};
-//# sourceMappingURL=icons.d.ts.map

package/dist/components/MessageList/icons.js

@@ -1,13 +1,7 @@
 import React from 'react';
-export var ArrowUp = function (_a) {
-    var className = _a.className, color = _a.color;
-    return (React.createElement("svg", { className: className, "data-testid": 'arrow-up', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("path", { d: 'M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z', fill: color || 'var(--primary-color)' })));
-};
-export var ArrowDown = function (_a) {
-    var className = _a.className, color = _a.color;
-    return (React.createElement("svg", { className: className, "data-testid": 'arrow-down', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("path", { d: 'M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z', fill: color || 'var(--primary-color)' })));
-};
-export var CloseIcon = function () { return (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 13', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { d: 'M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z' }))); };
+export const ArrowUp = ({ className, color }) => (React.createElement("svg", { className: className, "data-testid": 'arrow-up', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z', fill: color || 'var(--primary-color)' })));
+export const ArrowDown = ({ className, color }) => (React.createElement("svg", { className: className, "data-testid": 'arrow-down', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z', fill: color || 'var(--primary-color)' })));
+export const CloseIcon = () => (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 14 13', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z' })));

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

@@ -10,4 +10,3 @@ export * from './VirtualizedMessageList';
 export * from './hooks';
 export * from './renderMessages';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/renderMessages.d.ts

@@ -31,4 +31,3 @@ export type MessageRenderer<StreamChatGenerics extends DefaultStreamChatGenerics
 type MessagePropsToOmit = 'channel' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy';
 export declare function defaultRenderMessages<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions<StreamChatGenerics>): React.JSX.Element[];
 export {};
-//# sourceMappingURL=renderMessages.d.ts.map

package/dist/components/MessageList/renderMessages.js

@@ -1,17 +1,15 @@
-import { __assign } from "tslib";
 import React, { Fragment } from 'react';
 import { isDateSeparatorMessage } from './utils';
 import { Message } from '../Message';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-export function defaultRenderMessages(_a) {
-    var channelUnreadUiState = _a.channelUnreadUiState, components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, readData = _a.readData, messageProps = _a.sharedMessageProps;
-    var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem, UnreadMessagesSeparator = components.UnreadMessagesSeparator;
-    var renderedMessages = [];
-    var firstMessage;
-    for (var index = 0; index < messages.length; index++) {
-        var message = messages[index];
+export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }) {
+    const { DateSeparator, HeaderComponent, MessageSystem, UnreadMessagesSeparator } = components;
+    const renderedMessages = [];
+    let firstMessage;
+    for (let index = 0; index < messages.length; index++) {
+        const message = messages[index];
         if (isDateSeparatorMessage(message)) {
-            renderedMessages.push(React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
+            renderedMessages.push(React.createElement("li", { key: `${message.date.toISOString()}-i` },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
         else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
@@ -26,31 +24,31 @@ export function defaultRenderMessages(_a) {
             if (!firstMessage) {
                 firstMessage = message;
             }
-            var groupStyles = messageGroupStyles[message.id] || '';
-            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-            var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-            var lastReadTimestamp = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read.getTime();
-            var isFirstMessage = (firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.id) && firstMessage.id === message.id;
-            var isNewestMessage = index === messages.length - 1;
-            var isLastReadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) === message.id ||
-                (!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) && createdAtTimestamp === lastReadTimestamp);
-            var isFirstUnreadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) === message.id ||
-                (!!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) &&
+            const groupStyles = messageGroupStyles[message.id] || '';
+            const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
+            const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+            const lastReadTimestamp = channelUnreadUiState?.last_read.getTime();
+            const isFirstMessage = firstMessage?.id && firstMessage.id === message.id;
+            const isNewestMessage = index === messages.length - 1;
+            const isLastReadMessage = channelUnreadUiState?.last_read_message_id === message.id ||
+                (!channelUnreadUiState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
+            const isFirstUnreadMessage = channelUnreadUiState?.first_unread_message_id === message.id ||
+                (!!channelUnreadUiState?.unread_messages &&
                     !!createdAtTimestamp &&
                     !!lastReadTimestamp &&
                     createdAtTimestamp > lastReadTimestamp &&
                     isFirstMessage);
-            var showUnreadSeparatorAbove = !(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) && isFirstUnreadMessage;
-            var showUnreadSeparatorBelow = isLastReadMessage &&
+            const showUnreadSeparatorAbove = !channelUnreadUiState?.last_read_message_id && isFirstUnreadMessage;
+            const showUnreadSeparatorBelow = isLastReadMessage &&
                 !isNewestMessage &&
-                ((channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) || !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages)); // this part has to be here as we do not mark channel read when sending a message
+                (channelUnreadUiState?.first_unread_message_id || !!channelUnreadUiState?.unread_messages); // this part has to be here as we do not mark channel read when sending a message
             renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at },
                 showUnreadSeparatorAbove && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }))),
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
                 React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                    React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
+                    React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps })),
                 showUnreadSeparatorBelow && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })))));
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages })))));
         }
     }
     return renderedMessages;

package/dist/components/MessageList/utils.d.ts

@@ -69,4 +69,3 @@ type DateSeparatorMessage = {
 };
 export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
 export {};
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/MessageList/utils.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 /* eslint-disable no-continue */
 import { nanoid } from 'nanoid';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
@@ -20,16 +19,15 @@ import { isMessageEdited } from '../Message/utils';
  *
  * @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
  */
-export var processMessages = function (params) {
-    var _a, _b;
-    var messages = params.messages, reviewProcessedMessage = params.reviewProcessedMessage, setGiphyPreviewMessage = params.setGiphyPreviewMessage, context = __rest(params, ["messages", "reviewProcessedMessage", "setGiphyPreviewMessage"]);
-    var enableDateSeparator = context.enableDateSeparator, hideDeletedMessages = context.hideDeletedMessages, hideNewMessageSeparator = context.hideNewMessageSeparator, lastRead = context.lastRead, userId = context.userId;
-    var unread = false;
-    var ephemeralMessagePresent = false;
-    var lastDateSeparator;
-    var newMessages = [];
-    for (var i = 0; i < messages.length; i += 1) {
-        var message = messages[i];
+export const processMessages = (params) => {
+    const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
+    const { enableDateSeparator, hideDeletedMessages, hideNewMessageSeparator, lastRead, userId, } = context;
+    let unread = false;
+    let ephemeralMessagePresent = false;
+    let lastDateSeparator;
+    const newMessages = [];
+    for (let i = 0; i < messages.length; i += 1) {
+        const message = messages[i];
         if (hideDeletedMessages && message.type === 'deleted') {
             continue;
         }
@@ -38,22 +36,22 @@ export var processMessages = function (params) {
             setGiphyPreviewMessage(message);
             continue;
         }
-        var changes = [];
-        var messageDate = (message.created_at && isDate(message.created_at) && message.created_at.toDateString()) || '';
-        var previousMessage = messages[i - 1];
-        var prevMessageDate = messageDate;
-        if (enableDateSeparator && (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.created_at) && isDate(previousMessage.created_at)) {
+        const changes = [];
+        const messageDate = (message.created_at && isDate(message.created_at) && message.created_at.toDateString()) || '';
+        const previousMessage = messages[i - 1];
+        let prevMessageDate = messageDate;
+        if (enableDateSeparator && previousMessage?.created_at && isDate(previousMessage.created_at)) {
             prevMessageDate = previousMessage.created_at.toDateString();
         }
         if (!unread && !hideNewMessageSeparator) {
             unread = (lastRead && message.created_at && new Date(lastRead) < message.created_at) || false;
             // do not show date separator for current user's messages
-            if (enableDateSeparator && unread && ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) !== userId) {
+            if (enableDateSeparator && unread && message.user?.id !== userId) {
                 changes.push({
                     customType: CUSTOM_MESSAGE_TYPE.date,
                     date: message.created_at,
                     id: makeDateMessageId(message.created_at),
-                    unread: unread,
+                    unread,
                 });
             }
         }
@@ -62,9 +60,9 @@ export var processMessages = function (params) {
                 messageDate !== prevMessageDate || // add date separator btw. 2 messages created on different date
                 // if hiding deleted messages replace the previous deleted message(s) with A separator if the last rendered message was created on different date
                 (hideDeletedMessages &&
-                    (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.type) === 'deleted' &&
+                    previousMessage?.type === 'deleted' &&
                     lastDateSeparator !== messageDate)) &&
-            ((_b = changes[changes.length - 1]) === null || _b === void 0 ? void 0 : _b.customType) !== CUSTOM_MESSAGE_TYPE.date // do not show two date separators in a row)
+            changes[changes.length - 1]?.customType !== CUSTOM_MESSAGE_TYPE.date // do not show two date separators in a row)
         ) {
             lastDateSeparator = messageDate;
             changes.push({
@@ -76,13 +74,13 @@ export var processMessages = function (params) {
         else {
             changes.push(message);
         }
-        newMessages.push.apply(newMessages, ((reviewProcessedMessage === null || reviewProcessedMessage === void 0 ? void 0 : reviewProcessedMessage({
-            changes: changes,
-            context: context,
+        newMessages.push(...(reviewProcessedMessage?.({
+            changes,
+            context,
             index: i,
-            messages: messages,
+            messages,
             processedMessages: newMessages,
-        })) || changes));
+        }) || changes));
     }
     // clean up the giphy preview component state after a Cancel action
     if (setGiphyPreviewMessage && !ephemeralMessagePresent) {
@@ -90,35 +88,34 @@ export var processMessages = function (params) {
     }
     return newMessages;
 };
-export var makeDateMessageId = function (date) {
-    var idSuffix;
+export const makeDateMessageId = (date) => {
+    let idSuffix;
     try {
         idSuffix = !date ? nanoid() : date instanceof Date ? date.toISOString() : date;
     }
     catch (e) {
         idSuffix = nanoid();
     }
-    return "".concat(CUSTOM_MESSAGE_TYPE.date, "-").concat(idSuffix);
+    return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;
 };
 // fast since it usually iterates just the last few messages
-export var getLastReceived = function (messages) {
-    for (var i = messages.length - 1; i > 0; i -= 1) {
+export const getLastReceived = (messages) => {
+    for (let i = messages.length - 1; i > 0; i -= 1) {
         if (messages[i].status === 'received') {
             return messages[i].id;
         }
     }
     return null;
 };
-export var getReadStates = function (messages, read, returnAllReadData) {
-    if (read === void 0) { read = {}; }
+export const getReadStates = (messages, read = {}, returnAllReadData) => {
     // create object with empty array for each message id
-    var readData = {};
-    Object.values(read).forEach(function (readState) {
+    const readData = {};
+    Object.values(read).forEach((readState) => {
         if (!readState.last_read)
             return;
-        var userLastReadMsgId;
+        let userLastReadMsgId;
         // loop messages sent by current user and add read data for other users in channel
-        messages.forEach(function (msg) {
+        messages.forEach((msg) => {
             if (msg.created_at && msg.created_at < readState.last_read) {
                 userLastReadMsgId = msg.id;
                 // if true, save other user's read data for all messages they've read
@@ -140,9 +137,9 @@ export var getReadStates = function (messages, read, returnAllReadData) {
     });
     return readData;
 };
-export var insertIntro = function (messages, headerPosition) {
-    var newMessages = messages;
-    var intro = {
+export const insertIntro = (messages, headerPosition) => {
+    const newMessages = messages;
+    const intro = {
         customType: CUSTOM_MESSAGE_TYPE.intro,
     };
     // if no headerPosition is set, HeaderComponent will go at the top
@@ -156,11 +153,11 @@ export var insertIntro = function (messages, headerPosition) {
         return newMessages;
     }
     // else loop over the messages
-    for (var i = 0; i < messages.length; i += 1) {
-        var message = messages[i];
-        var messageTime = message.created_at && isDate(message.created_at) ? message.created_at.getTime() : null;
-        var nextMessage = messages[i + 1];
-        var nextMessageTime = nextMessage.created_at && isDate(nextMessage.created_at)
+    for (let i = 0; i < messages.length; i += 1) {
+        const message = messages[i];
+        const messageTime = message.created_at && isDate(message.created_at) ? message.created_at.getTime() : null;
+        const nextMessage = messages[i + 1];
+        const nextMessageTime = nextMessage.created_at && isDate(nextMessage.created_at)
             ? nextMessage.created_at.getTime()
             : null;
         // header position is smaller than message time so comes after;
@@ -182,30 +179,29 @@ export var insertIntro = function (messages, headerPosition) {
     }
     return newMessages;
 };
-export var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser) {
-    var _a, _b, _c, _d, _e, _f, _g;
+export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser) => {
     if (message.customType === CUSTOM_MESSAGE_TYPE.date)
         return '';
     if (message.customType === CUSTOM_MESSAGE_TYPE.intro)
         return '';
-    if (noGroupByUser || ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== 0)
+    if (noGroupByUser || message.attachments?.length !== 0)
         return 'single';
-    var isTopMessage = !previousMessage ||
+    const isTopMessage = !previousMessage ||
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         previousMessage.type === 'system' ||
-        ((_b = previousMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) !== 0 ||
-        ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
+        previousMessage.attachments?.length !== 0 ||
+        message.user?.id !== previousMessage.user?.id ||
         previousMessage.type === 'error' ||
         previousMessage.deleted_at ||
         (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
         isMessageEdited(previousMessage);
-    var isBottomMessage = !nextMessage ||
+    const isBottomMessage = !nextMessage ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         nextMessage.type === 'system' ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
-        ((_e = nextMessage.attachments) === null || _e === void 0 ? void 0 : _e.length) !== 0 ||
-        ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
+        nextMessage.attachments?.length !== 0 ||
+        message.user?.id !== nextMessage.user?.id ||
         nextMessage.type === 'error' ||
         nextMessage.deleted_at ||
         (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
@@ -229,13 +225,9 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
 // FIXME: once the pagination state is moved from Channel to MessageList, these should be moved as well.
 //  The MessageList should have configurable the limit for performing the requests.
 //  This parameter would then be used within these functions
-export var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
-    return returnedCountMessages >= limit;
-};
+export const hasMoreMessagesProbably = (returnedCountMessages, limit) => returnedCountMessages >= limit;
 // @deprecated
-export var hasNotMoreMessages = function (returnedCountMessages, limit) {
-    return returnedCountMessages < limit;
-};
+export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages < limit;
 export function isDateSeparatorMessage(message) {
     return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
 }

package/dist/components/Modal/Modal.d.ts

@@ -8,4 +8,3 @@ export type ModalProps = {
     onClose?: (event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 };
 export declare const Modal: ({ children, className, onClose, open }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;
-//# sourceMappingURL=Modal.d.ts.map