stream-chat-react 11.3.0 → 11.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,MAAM,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;sBA0DvB,aAAa,CAAC,cAAc,CAAC;;;CAgCxC,CAAC"}
+{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,MAAM,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;sBA2DvB,aAAa,CAAC,cAAc,CAAC;;;CAgCxC,CAAC"}

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

@@ -23,6 +23,7 @@ export var useScrollLocationLogic = function (params) {
             setWrapperRect(listElement.getBoundingClientRect());
             scrollToBottom();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
         loadMoreScrollThreshold: loadMoreScrollThreshold,

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

@@ -0,0 +1,7 @@
+export type UseUnreadMessagesNotificationParams = {
+    unreadCount?: number;
+};
+export declare const useUnreadMessagesNotification: ({ unreadCount, }: UseUnreadMessagesNotificationParams) => {
+    show: boolean;
+};
+//# sourceMappingURL=useUnreadMessagesNotification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUnreadMessagesNotification.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,mCAAmC,GAAG;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,6BAA6B,qBAEvC,mCAAmC;;CAwCrC,CAAC"}

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

@@ -0,0 +1,42 @@
+import { useChannelStateContext } from '../../../../context';
+import { useEffect, useState } from 'react';
+import { MESSAGE_LIST_MAIN_PANEL_CLASS } from '../../MessageListMainPanel';
+import { UNREAD_MESSAGE_SEPARATOR_CLASS } from '../../UnreadMessagesSeparator';
+var targetIsVisibleInContainer = function (element, container) {
+    var msgListHeight = container.getBoundingClientRect().height;
+    var targetMessageY = element.getBoundingClientRect().y;
+    return 0 <= targetMessageY && targetMessageY <= msgListHeight;
+};
+export var useUnreadMessagesNotification = function (_a) {
+    var unreadCount = _a.unreadCount;
+    var messages = useChannelStateContext('UnreadMessagesNotification').messages;
+    var _b = useState(false), show = _b[0], setShow = _b[1];
+    var intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';
+    useEffect(function () {
+        if (!(unreadCount && intersectionObserverIsSupported)) {
+            setShow(false);
+            return;
+        }
+        var msgListPanel = document.querySelector(".".concat(MESSAGE_LIST_MAIN_PANEL_CLASS));
+        if (!msgListPanel)
+            return;
+        var observedTarget = document.querySelector(".".concat(UNREAD_MESSAGE_SEPARATOR_CLASS));
+        if (!observedTarget) {
+            setShow(true);
+            return;
+        }
+        setShow(!targetIsVisibleInContainer(observedTarget, msgListPanel));
+        var observer = new IntersectionObserver(function (elements) {
+            if (!elements.length)
+                return;
+            var _a = elements[0], boundingClientRect = _a.boundingClientRect, isIntersecting = _a.isIntersecting, rootBounds = _a.rootBounds;
+            var isScrolledAboveTargetTop = rootBounds && boundingClientRect && rootBounds.bottom < boundingClientRect.top;
+            setShow(!isIntersecting && !isScrolledAboveTargetTop);
+        }, { root: msgListPanel });
+        observer.observe(observedTarget);
+        return function () {
+            observer.disconnect();
+        };
+    }, [intersectionObserverIsSupported, messages, unreadCount]);
+    return { show: show && intersectionObserverIsSupported };
+};

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

@@ -4,4 +4,5 @@ export * from './useNewMessageNotification';
 export * from './usePrependMessagesCount';
 export * from './useScrollToBottomOnNewMessage';
 export * from './useShouldForceScrollToBottom';
+export * from './useUnreadMessagesNotificationVirtualized';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC"}

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

@@ -4,3 +4,4 @@ export * from './useNewMessageNotification';
 export * from './usePrependMessagesCount';
 export * from './useScrollToBottomOnNewMessage';
 export * from './useShouldForceScrollToBottom';
+export * from './useUnreadMessagesNotificationVirtualized';

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

@@ -1 +1 @@
-{"version":3,"file":"useGiphyPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,eAAe,2GAGJ,OAAO;;;CAsB9B,CAAC"}
+{"version":3,"file":"useGiphyPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,eAAe,2GAGJ,OAAO;;;CAuB9B,CAAC"}

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

@@ -13,6 +13,7 @@ export var useGiphyPreview = function (separateGiphyPreview) {
         if (separateGiphyPreview)
             client.on('message.new', handleEvent);
         return function () { return client.off('message.new', handleEvent); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [separateGiphyPreview]);
     return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAOzE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,UAgEzE"}
+{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAOzE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,UAiEzE"}

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

@@ -50,6 +50,7 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         return 0;
         // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
         // that's why the second dependency is necessary
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return numItemsPrepended;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollToBottomOnNewMessage.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,KAAK,mCAAmC,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM;IACN,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,4FAA4F;IAC5F,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,kNA2CzC,CAAC"}
+{"version":3,"file":"useScrollToBottomOnNewMessage.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,KAAK,mCAAmC,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM;IACN,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,4FAA4F;IAC5F,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,kNA4CzC,CAAC"}

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

@@ -24,5 +24,6 @@ export var useScrollToBottomOnNewMessage = function (_a) {
             window.removeEventListener('focus', scrollToBottomIfConfigured);
             window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scrollToBottomIfConfigured]);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useShouldForceScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,wBAAgB,4BAA4B,CAC1C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,iBA2BtE"}
+{"version":3,"file":"useShouldForceScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,wBAAgB,4BAA4B,CAC1C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,iBA4BtE"}

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

@@ -19,6 +19,7 @@ export function useShouldForceScrollToBottom(messages, currentUserId) {
             initialFocusRegistered.current = true;
             recheckForNewOwnMessage();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return recheckForNewOwnMessage;
 }

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,7 +4,10 @@ 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';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

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,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,9 @@ 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';
 export * from './utils';

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { MessageProps } from '../Message/types';
+import { StreamMessage } from '../../context/ChannelStateContext';
+import { DefaultStreamChatGenerics } from '../../types/types';
+import { ComponentContextValue, CustomClasses } from '../../context';
+import { GroupStyle } from './utils';
+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, ownReadState, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions<StreamChatGenerics>): JSX.Element[];
+export {};
+//# sourceMappingURL=renderMessages.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,35 @@
+import { __assign } from "tslib";
+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, 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 })));
+        }
+        if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+            return (React.createElement("li", { key: 'intro' },
+                React.createElement(HeaderComponent, null)));
+        }
+        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);
+        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/MessageList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UAyCF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACnD,CAAC;AAGlC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UAyCF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACpD,CAAC;AAGjC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC"}

package/dist/components/MessageList/utils.js

@@ -217,7 +217,7 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
 //  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;
+    return returnedCountMessages >= limit;
 };
 // @deprecated
 export var hasNotMoreMessages = function (returnedCountMessages, limit) {

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))));
+            }))))));
+}