stream-chat-react 11.4.0 → 11.6.0

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

@@ -0,0 +1,22 @@
+import { StreamMessage } from '../../../../context';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+export type UseUnreadMessagesNotificationParams = {
+    unreadCount: number;
+    lastRead?: Date | null;
+};
+/**
+ * Controls the logic when an `UnreadMessagesNotification` component should be shown.
+ * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.
+ * Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.
+ * If the there are unread messages in the channel and the `VirtualizedMessageList` renders
+ * messages created later than the last read message in the channel, then the
+ * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being
+ * scrolled below the `UnreadMessagesNotification` component.
+ * @param lastRead
+ * @param unreadCount
+ */
+export declare const useUnreadMessagesNotificationVirtualized: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ lastRead, unreadCount, }: UseUnreadMessagesNotificationParams) => {
+    show: boolean;
+    toggleShowUnreadMessagesNotification: (renderedMessages: StreamMessage<StreamChatGenerics>[]) => void;
+};
+//# sourceMappingURL=useUnreadMessagesNotificationVirtualized.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUnreadMessagesNotificationVirtualized.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,MAAM,mCAAmC,GAAG;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wCAAwC,iHAKlD,mCAAmC;;;CAmBrC,CAAC"}

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

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from 'react';
+/**
+ * Controls the logic when an `UnreadMessagesNotification` component should be shown.
+ * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.
+ * Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.
+ * If the there are unread messages in the channel and the `VirtualizedMessageList` renders
+ * messages created later than the last read message in the channel, then the
+ * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being
+ * scrolled below the `UnreadMessagesNotification` component.
+ * @param lastRead
+ * @param unreadCount
+ */
+export var useUnreadMessagesNotificationVirtualized = function (_a) {
+    var lastRead = _a.lastRead, unreadCount = _a.unreadCount;
+    var _b = useState(false), show = _b[0], setShow = _b[1];
+    var toggleShowUnreadMessagesNotification = useCallback(function (renderedMessages) {
+        if (!renderedMessages.length)
+            return;
+        var firstRenderedMessageTimestamp = renderedMessages[0].created_at
+            ? new Date(renderedMessages[0].created_at).getTime()
+            : 0;
+        setShow(unreadCount > 0 && !!lastRead && firstRenderedMessageTimestamp > lastRead.getTime());
+    }, [unreadCount, lastRead]);
+    useEffect(function () {
+        if (!unreadCount)
+            setShow(false);
+    }, [unreadCount]);
+    return { show: show, toggleShowUnreadMessagesNotification: toggleShowUnreadMessagesNotification };
+};

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

@@ -0,0 +1,19 @@
+type UseMarkReadParams = {
+    isMessageListScrolledToBottom: boolean;
+    messageListIsThread: boolean;
+    unreadCount: number;
+    markReadOnScrolledToBottom?: boolean;
+};
+/**
+ * Takes care of marking a channel read. The channel is read only if all the following applies:
+ * 1. the message list is not rendered in a thread
+ * 2. the message list is scrolled to the bottom
+ * 3. the channel was not marked unread by the user
+ * @param isMessageListScrolledToBottom
+ * @param messageListIsThread
+ * @param unreadCount
+ * @param wasChannelMarkedUnread
+ */
+export declare const useMarkRead: ({ isMessageListScrolledToBottom, markReadOnScrolledToBottom, messageListIsThread, unreadCount, }: UseMarkReadParams) => void;
+export {};
+//# sourceMappingURL=useMarkRead.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkRead.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useMarkRead.ts"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG;IACvB,6BAA6B,EAAE,OAAO,CAAC;IACvC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,qGAKrB,iBAAiB,SA4BnB,CAAC"}

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

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useChannelActionContext } from '../../../context';
+/**
+ * Takes care of marking a channel read. The channel is read only if all the following applies:
+ * 1. the message list is not rendered in a thread
+ * 2. the message list is scrolled to the bottom
+ * 3. the channel was not marked unread by the user
+ * @param isMessageListScrolledToBottom
+ * @param messageListIsThread
+ * @param unreadCount
+ * @param wasChannelMarkedUnread
+ */
+export var useMarkRead = function (_a) {
+    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, markReadOnScrolledToBottom = _a.markReadOnScrolledToBottom, messageListIsThread = _a.messageListIsThread, unreadCount = _a.unreadCount;
+    var markRead = useChannelActionContext('useMarkRead').markRead;
+    useEffect(function () {
+        var shouldMarkRead = !messageListIsThread &&
+            isMessageListScrolledToBottom &&
+            markReadOnScrolledToBottom &&
+            unreadCount > 0;
+        var onVisibilityChange = function () {
+            if (!document.hidden && shouldMarkRead)
+                markRead();
+        };
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        if (shouldMarkRead)
+            markRead();
+        return function () {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, [
+        isMessageListScrolledToBottom,
+        markRead,
+        messageListIsThread,
+        unreadCount,
+        markReadOnScrolledToBottom,
+    ]);
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/icons.tsx"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,yBAA0B,UAAU,gBAevD,CAAC;AAEF,eAAO,MAAM,SAAS,yBAA0B,UAAU,gBAezD,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/icons.tsx"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,yBAA0B,UAAU,gBAevD,CAAC;AAEF,eAAO,MAAM,SAAS,yBAA0B,UAAU,gBAezD,CAAC;AAEF,eAAO,MAAM,SAAS,mBAIrB,CAAC"}

package/dist/components/MessageList/icons.js

@@ -9,3 +9,5 @@ export var ArrowDown = function (_a) {
     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' }))); };

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

@@ -4,6 +4,8 @@ export * from './MessageList';
 export * from './MessageListNotifications';
 export * from './MessageNotification';
 export * from './ScrollToBottomButton';
+export * from './UnreadMessagesNotification';
+export * from './UnreadMessagesSeparator';
 export * from './VirtualizedMessageList';
 export * from './hooks';
 export * from './renderMessages';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}

package/dist/components/MessageList/index.js

@@ -4,6 +4,8 @@ export * from './MessageList';
 export * from './MessageListNotifications';
 export * from './MessageNotification';
 export * from './ScrollToBottomButton';
+export * from './UnreadMessagesNotification';
+export * from './UnreadMessagesSeparator';
 export * from './VirtualizedMessageList';
 export * from './hooks';
 export * from './renderMessages';

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

@@ -4,19 +4,30 @@ import { StreamMessage } from '../../context/ChannelStateContext';
 import { DefaultStreamChatGenerics } from '../../types/types';
 import { ComponentContextValue, CustomClasses } from '../../context';
 import { GroupStyle } from './utils';
-import { UserResponse } from 'stream-chat';
+import { ChannelState as StreamChannelState, UserResponse } from 'stream-chat';
 export interface RenderMessagesOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
     components: ComponentContextValue<StreamChatGenerics>;
     lastReceivedMessageId: string | null;
     messageGroupStyles: Record<string, GroupStyle>;
     messages: Array<StreamMessage<StreamChatGenerics>>;
+    /**
+     * Object mapping message IDs of own messages to the users who read those messages.
+     */
     readData: Record<string, Array<UserResponse<StreamChatGenerics>>>;
+    /**
+     * Props forwarded to the Message component.
+     */
     sharedMessageProps: SharedMessageProps<StreamChatGenerics>;
     customClasses?: CustomClasses;
+    /**
+     * Current user's read status.
+     * Useful to determine, when a channel has been marked read the last time, the last read message, count of unread messages.
+     */
+    ownReadState?: StreamChannelState<StreamChatGenerics>['read'][keyof StreamChannelState<StreamChatGenerics>['read']];
 }
 export type SharedMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<MessageProps<StreamChatGenerics>, MessagePropsToOmit>;
 export type MessageRenderer<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (options: RenderMessagesOptions<StreamChatGenerics>) => Array<ReactNode>;
 type MessagePropsToOmit = 'channel' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy';
-export declare function defaultRenderMessages<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions<StreamChatGenerics>): JSX.Element[];
+export declare function defaultRenderMessages<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownReadState, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions<StreamChatGenerics>): JSX.Element[];
 export {};
 //# sourceMappingURL=renderMessages.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderMessages.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/renderMessages.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAU,MAAM,eAAe,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,qBAAqB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB;IAEhF,UAAU,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IACtD,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACnD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAClE,kBAAkB,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;AAE/D,MAAM,MAAM,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,CAAC,OAAO,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;AAE7E,KAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,CAAC;AAEb,wBAAgB,qBAAqB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,EACA,UAAU,EACV,aAAa,EACb,qBAAqB,EAAE,cAAc,EACrC,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAAE,YAAY,GACjC,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,iBAyD3C"}
+{"version":3,"file":"renderMessages.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/renderMessages.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAU,MAAM,eAAe,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE/E,MAAM,WAAW,qBAAqB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB;IAEhF,UAAU,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IACtD,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAClE;;OAEG;IACH,kBAAkB,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,kBAAkB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;CACrH;AAED,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;AAE/D,MAAM,MAAM,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,CAAC,OAAO,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;AAE7E,KAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,CAAC;AAEb,wBAAgB,qBAAqB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,EACA,UAAU,EACV,aAAa,EACb,qBAAqB,EAAE,cAAc,EACrC,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,kBAAkB,EAAE,YAAY,GACjC,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,iBA6D3C"}

package/dist/components/MessageList/renderMessages.js

@@ -1,16 +1,13 @@
 import { __assign } from "tslib";
-import React from 'react';
+import React, { Fragment } from 'react';
 import { isDate } from '../../context';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { Message } from '../Message/Message';
 export function defaultRenderMessages(_a) {
-    var 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;
-    return messages.map(function (message) {
-        if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-            message.date &&
-            isDate(message.date) &&
-            DateSeparator) {
+    var components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, ownReadState = _a.ownReadState, readData = _a.readData, messageProps = _a.sharedMessageProps;
+    var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem, UnreadMessagesSeparator = components.UnreadMessagesSeparator;
+    return messages.map(function (message, index) {
+        if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
             return (React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
@@ -18,13 +15,21 @@ export function defaultRenderMessages(_a) {
             return (React.createElement("li", { key: 'intro' },
                 React.createElement(HeaderComponent, null)));
         }
-        if (message.type === 'system' && MessageSystem) {
+        if (message.type === 'system') {
             return (React.createElement("li", { key: message.id || message.created_at },
                 React.createElement(MessageSystem, { message: 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);
-        return (React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
-            React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))));
+        var isNewestMessage = index === messages.length - 1;
+        var isLastReadMessage = (ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.last_read_message_id) === message.id;
+        var showUnreadSeparator = isLastReadMessage &&
+            !isNewestMessage &&
+            ((ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.first_unread_message_id) || (ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.unread_messages) > 0); // unread count can be 0 if the user marks unread only own messages
+        return (React.createElement(Fragment, { key: message.id || message.created_at },
+            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))),
+            showUnreadSeparator && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                React.createElement(UnreadMessagesSeparator, { unreadCount: ownReadState.unread_messages })))));
     });
 }

package/dist/components/Reactions/ReactionsList.d.ts

@@ -2,7 +2,8 @@ import type { ReactionResponse } from 'stream-chat';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
-export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import { MessageContextValue } from '../../context';
+export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions'>> & {
     /** Custom on click handler for an individual reaction, defaults to `onReactionListClick` from the `MessageContext` */
     onClick?: ReactEventHandler;
     /** An array of the own reaction objects to distinguish own reactions visually */

package/dist/components/Reactions/ReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgHF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IACnF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8EF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}

package/dist/components/Reactions/ReactionsList.js

@@ -1,49 +1,40 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { useMessageContext } from '../../context/MessageContext';
-import { useChatContext } from '../../context/ChatContext';
 import { useProcessReactions } from './hooks/useProcessReactions';
-import { PopperTooltip } from '../Tooltip';
-import { useEnterLeaveHandlers } from '../Tooltip/hooks';
-var ButtonWithTooltip = function (_a) {
-    var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, rest = __rest(_a, ["children", "onMouseEnter", "onMouseLeave"]);
-    var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
-    var _c = useEnterLeaveHandlers({
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-    }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
-    var themeVersion = useChatContext('ButtonWithTooltip').themeVersion;
-    return (React.createElement(React.Fragment, null,
-        themeVersion === '2' && (React.createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, rest.title)),
-        React.createElement("button", __assign({ onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, rest), children)));
-};
+import { ReactionsListModal } from './ReactionsListModal';
+import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 var UnMemoizedReactionsList = function (props) {
-    var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
-    var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
-    var _b = useProcessReactions(rest), aggregatedUserNamesByType = _b.aggregatedUserNamesByType, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, reactionCounts = _b.reactionCounts, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
-    if (!latestReactions.length)
+    var handleFetchReactions = props.handleFetchReactions, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["handleFetchReactions", "reverse"]);
+    var _b = useProcessReactions(rest), existingReactions = _b.existingReactions, hasReactions = _b.hasReactions, totalReactionCount = _b.totalReactionCount;
+    var _c = useState(null), selectedReactionType = _c[0], setSelectedReactionType = _c[1];
+    var handleReactionButtonClick = function (reactionType) {
+        if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
+            return;
+        }
+        setSelectedReactionType(reactionType);
+    };
+    if (!hasReactions)
         return null;
-    if (!supportedReactionsArePresent)
-        return null;
-    return (React.createElement("div", { "aria-label": 'Reaction list', className: clsx('str-chat__reaction-list str-chat__message-reactions-container', {
-            'str-chat__reaction-list--reverse': reverse,
-        }), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyUp: onClick || onReactionListClick, role: 'figure' },
-        React.createElement("ul", { className: 'str-chat__message-reactions' },
-            latestReactionTypes.map(function (reactionType) {
-                var ReactionOption = getEmojiByReactionType(reactionType);
-                var isOwnReaction = iHaveReactedWithReaction(reactionType);
-                return (ReactionOption && (React.createElement("li", { className: clsx('str-chat__message-reaction', {
-                        'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: reactionType },
-                    React.createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), "data-testid": "reactions-list-button-".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
-                        React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                            React.createElement(ReactionOption.Component, null)),
-                        "\u00A0",
-                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))));
-            }),
-            React.createElement("li", null,
-                React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "aria-label": 'Reaction list', className: clsx('str-chat__reaction-list str-chat__message-reactions-container', {
+                'str-chat__reaction-list--reverse': reverse,
+            }), "data-testid": 'reaction-list', role: 'figure' },
+            React.createElement("ul", { className: 'str-chat__message-reactions' },
+                existingReactions.map(function (_a) {
+                    var EmojiComponent = _a.EmojiComponent, isOwnReaction = _a.isOwnReaction, reactionCount = _a.reactionCount, reactionType = _a.reactionType;
+                    return EmojiComponent && (React.createElement("li", { className: clsx('str-chat__message-reaction', {
+                            'str-chat__message-reaction-own': isOwnReaction,
+                        }), key: reactionType },
+                        React.createElement("button", { "aria-label": "Reactions: ".concat(reactionType), "data-testid": "reactions-list-button-".concat(reactionType), onClick: function () { return handleReactionButtonClick(reactionType); }, type: 'button' },
+                            React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                                React.createElement(EmojiComponent, null)),
+                            "\u00A0",
+                            React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCount))));
+                }),
+                React.createElement("li", null,
+                    React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))),
+        React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: function () { return setSelectedReactionType(null); }, onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType })));
 };
 /**
  * Component that displays a list of reactions on a message.

package/dist/components/Reactions/ReactionsListModal.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ModalProps } from '../Modal';
+import { ReactionSummary } from './types';
+import { MessageContextValue } from '../../context';
+import { DefaultStreamChatGenerics } from '../../types/types';
+type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions'>> & {
+    reactions: ReactionSummary[];
+    selectedReactionType: string | null;
+    onSelectedReactionTypeChange?: (reactionType: string) => void;
+};
+export declare function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactions, selectedReactionType, ...modalProps }: ReactionsListModalProps): JSX.Element;
+export {};
+//# sourceMappingURL=ReactionsListModal.d.ts.map

package/dist/components/Reactions/ReactionsListModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsListModal.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsListModal.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,KAAK,uBAAuB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,UAAU,GACZ,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAC/E,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEJ,wBAAgB,kBAAkB,CAAC,EACjC,oBAAoB,EACpB,4BAA4B,EAC5B,SAAS,EACT,oBAAoB,EACpB,GAAG,UAAU,EACd,EAAE,uBAAuB,eAyEzB"}

package/dist/components/Reactions/ReactionsListModal.js

@@ -0,0 +1,46 @@
+import { __assign, __rest } from "tslib";
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Modal } from '../Modal';
+import { useFetchReactions } from './hooks/useFetchReactions';
+import { LoadingIndicator } from '../Loading';
+import { Avatar } from '../Avatar';
+export function ReactionsListModal(_a) {
+    var _b;
+    var handleFetchReactions = _a.handleFetchReactions, onSelectedReactionTypeChange = _a.onSelectedReactionTypeChange, reactions = _a.reactions, selectedReactionType = _a.selectedReactionType, modalProps = __rest(_a, ["handleFetchReactions", "onSelectedReactionTypeChange", "reactions", "selectedReactionType"]);
+    var selectedReaction = reactions.find(function (_a) {
+        var reactionType = _a.reactionType;
+        return reactionType === selectedReactionType;
+    });
+    var SelectedEmojiComponent = (_b = selectedReaction === null || selectedReaction === void 0 ? void 0 : selectedReaction.EmojiComponent) !== null && _b !== void 0 ? _b : null;
+    var _c = useFetchReactions({
+        handleFetchReactions: handleFetchReactions,
+        shouldFetch: modalProps.open,
+    }), areReactionsLoading = _c.isLoading, allReactions = _c.reactions;
+    var currentReactions = useMemo(function () {
+        if (!selectedReactionType) {
+            return [];
+        }
+        return allReactions.filter(function (reaction) { return reaction.type === selectedReactionType && reaction.user; });
+    }, [allReactions, selectedReactionType]);
+    return (React.createElement(Modal, __assign({}, modalProps),
+        React.createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
+            React.createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(function (_a) {
+                var EmojiComponent = _a.EmojiComponent, reactionCount = _a.reactionCount, reactionType = _a.reactionType;
+                return EmojiComponent && (React.createElement("div", { className: clsx('str-chat__message-reactions-details-reaction-type', {
+                        'str-chat__message-reactions-details-reaction-type--selected': selectedReactionType === reactionType,
+                    }), "data-testid": "reaction-details-selector-".concat(reactionType), key: reactionType, onClick: function () { return onSelectedReactionTypeChange === null || onSelectedReactionTypeChange === void 0 ? void 0 : onSelectedReactionTypeChange(reactionType); } },
+                    React.createElement("span", { className: 'emoji str-chat__message-reaction-emoji' },
+                        React.createElement(EmojiComponent, null)),
+                    "\u00A0",
+                    React.createElement("span", { className: 'str-chat__message-reaction-count' }, reactionCount)));
+            })),
+            SelectedEmojiComponent && (React.createElement("div", { className: 'emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big' },
+                React.createElement(SelectedEmojiComponent, null))),
+            React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-users', "data-testid": 'all-reacting-users' }, areReactionsLoading ? (React.createElement(LoadingIndicator, null)) : (currentReactions.map(function (_a) {
+                var user = _a.user;
+                return (React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-user', key: user === null || user === void 0 ? void 0 : user.id },
+                    React.createElement(Avatar, { "data-testid": 'avatar', image: user === null || user === void 0 ? void 0 : user.image, name: (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.id) }),
+                    React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'reaction-user-username' }, (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.id))));
+            }))))));
+}

package/dist/components/Reactions/SimpleReactionsList.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
 import type { ReactionResponse } from 'stream-chat';
+import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
-export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
-    handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
+export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An object that keeps track of the count of each type of reaction on a message */

package/dist/components/Reactions/SimpleReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAsCzD,MAAM,MAAM,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AA4FF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}
+{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAKtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAoCzD,MAAM,MAAM,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,sBAAsB,GAAG,gBAAgB,CAAC,CAAC,GAAG;IAClF,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AAyEF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}

package/dist/components/Reactions/SimpleReactionsList.js

@@ -6,8 +6,6 @@ import { useMessageContext } from '../../context/MessageContext';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { PopperTooltip } from '../Tooltip';
-// todo: merge with ReactionsList/ButtonWithTooltip
-// avoiding breaking change of replacing <span> with <button>
 var WithTooltip = function (_a) {
     var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, title = _a.title;
     var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
@@ -23,38 +21,23 @@ var WithTooltip = function (_a) {
 var UnMemoizedSimpleReactionsList = function (props) {
     var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
     var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
-    var _a = useProcessReactions(rest), getEmojiByReactionType = _a.getEmojiByReactionType, iHaveReactedWithReaction = _a.iHaveReactedWithReaction, latestReactions = _a.latestReactions, latestReactionTypes = _a.latestReactionTypes, supportedReactionsArePresent = _a.supportedReactionsArePresent, totalReactionCount = _a.totalReactionCount;
+    var _a = useProcessReactions(rest), existingReactions = _a.existingReactions, hasReactions = _a.hasReactions, totalReactionCount = _a.totalReactionCount;
     var _b = useState(undefined), tooltipReactionType = _b[0], setTooltipReactionType = _b[1];
     var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
     var handleReaction = propHandleReaction || contextHandleReaction;
-    if (!latestReactions.length)
+    if (!hasReactions)
         return null;
-    if (!supportedReactionsArePresent)
-        return null;
-    var getUsersPerReactionType = function (type) {
-        return latestReactions
-            .map(function (reaction) {
-            var _a, _b;
-            if (type && reaction.type === type) {
-                return ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = reaction.user) === null || _b === void 0 ? void 0 : _b.id);
-            }
-            return null;
-        })
-            .filter(Boolean);
-    };
     return (React.createElement("div", { className: 'str-chat__message-reactions-container' },
         React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
-            latestReactionTypes.map(function (reactionType) {
-                var _a;
-                var ReactionOption = getEmojiByReactionType(reactionType);
-                var isOwnReaction = iHaveReactedWithReaction(reactionType);
+            existingReactions.map(function (_a) {
+                var EmojiComponent = _a.EmojiComponent, isOwnReaction = _a.isOwnReaction, latestReactedUserNames = _a.latestReactedUserNames, reactionType = _a.reactionType;
                 var tooltipVisible = tooltipReactionType === reactionType;
-                var tooltipContent = (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 : _a.join(', ');
-                return (ReactionOption && (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
+                var tooltipContent = latestReactedUserNames.join(', ');
+                return (EmojiComponent && (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                         'str-chat__message-reaction-own': isOwnReaction,
                     }), key: reactionType, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
                     React.createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
-                        React.createElement(ReactionOption.Component, null),
+                        React.createElement(EmojiComponent, null),
                         "\u00A0",
                         tooltipVisible && themeVersion === '1' && (React.createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
                             React.createElement("div", { className: 'arrow' }),

package/dist/components/Reactions/hooks/useFetchReactions.d.ts

@@ -0,0 +1,12 @@
+import { ReactionResponse } from 'stream-chat';
+import { MessageContextValue } from '../../../context';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+export interface FetchReactionsOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
+    shouldFetch: boolean;
+    handleFetchReactions?: MessageContextValue<StreamChatGenerics>['handleFetchReactions'];
+}
+export declare function useFetchReactions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(options: FetchReactionsOptions): {
+    isLoading: boolean;
+    reactions: ReactionResponse<import("stream-chat").DefaultGenerics>[];
+};
+//# sourceMappingURL=useFetchReactions.d.ts.map

package/dist/components/Reactions/hooks/useFetchReactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useFetchReactions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAqB,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,WAAW,qBAAqB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB;IAEhF,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,sBAAsB,CAAC,CAAC;CACxF;AAED,wBAAgB,iBAAiB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,OAAO,EAAE,qBAAqB;;;EAyC/B"}

package/dist/components/Reactions/hooks/useFetchReactions.js

@@ -0,0 +1,50 @@
+import { __awaiter, __generator } from "tslib";
+import { useEffect, useState } from 'react';
+import { useMessageContext } from '../../../context';
+export function useFetchReactions(options) {
+    var _this = this;
+    var contextHandleFetchReactions = useMessageContext('useFetchReactions').handleFetchReactions;
+    var _a = useState(false), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = useState([]), reactions = _b[0], setReactions = _b[1];
+    var propHandleFetchReactions = options.handleFetchReactions, shouldFetch = options.shouldFetch;
+    var handleFetchReactions = propHandleFetchReactions !== null && propHandleFetchReactions !== void 0 ? propHandleFetchReactions : contextHandleFetchReactions;
+    useEffect(function () {
+        if (!shouldFetch) {
+            return;
+        }
+        var cancel = false;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var reactions_1, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, 3, 4]);
+                        setIsLoading(true);
+                        return [4 /*yield*/, handleFetchReactions()];
+                    case 1:
+                        reactions_1 = _a.sent();
+                        if (!cancel) {
+                            setReactions(reactions_1);
+                        }
+                        return [3 /*break*/, 4];
+                    case 2:
+                        e_1 = _a.sent();
+                        if (!cancel) {
+                            setReactions([]);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        if (!cancel) {
+                            setIsLoading(false);
+                        }
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            cancel = true;
+        };
+    }, [handleFetchReactions, shouldFetch]);
+    return { isLoading: isLoading, reactions: reactions };
+}