stream-chat-react 9.5.0 → 10.0.0-theming-v2.3

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

@@ -24,7 +24,9 @@ export function useMessageListScrollManager(params) {
                 // messages added to the top
                 if ((lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.id) === lastNewMessage.id) {
                     var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
-                    onScrollBy(listHeightDelta);
+                    if (scrollTop.current === 0) {
+                        onScrollBy(listHeightDelta);
+                    }
                 }
                 // messages added to the bottom
                 else {

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

@@ -2,7 +2,9 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
     atBottom: import("react").MutableRefObject<boolean>;
+    isMessageListScrolledToBottom: boolean;
     newMessagesNotification: boolean;
+    setIsMessageListScrolledToBottom: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     setNewMessagesNotification: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 //# sourceMappingURL=useNewMessageNotification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useNewMessageNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useNewMessageNotification.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAEhF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAC7C,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,YAAY,CAAC,EAAE,OAAO;;;;EAsCvB"}
+{"version":3,"file":"useNewMessageNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useNewMessageNotification.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAEhF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAC7C,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,YAAY,CAAC,EAAE,OAAO;;;;;;EA6CvB"}

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 export function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
     var _a = useState(false), newMessagesNotification = _a[0], setNewMessagesNotification = _a[1];
+    var _b = useState(true), isMessageListScrolledToBottom = _b[0], setIsMessageListScrolledToBottom = _b[1];
     /**
      * use the flag to avoid the initial "new messages" quick blink
      */
@@ -32,5 +33,11 @@ export function useNewMessageNotification(messages, currentUserId, hasMoreNewer)
         }
         didMount.current = true;
     }, [currentUserId, messages, hasMoreNewer]);
-    return { atBottom: atBottom, newMessagesNotification: newMessagesNotification, setNewMessagesNotification: setNewMessagesNotification };
+    return {
+        atBottom: atBottom,
+        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        newMessagesNotification: newMessagesNotification,
+        setIsMessageListScrolledToBottom: setIsMessageListScrolledToBottom,
+        setNewMessagesNotification: setNewMessagesNotification,
+    };
 }

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

@@ -5,14 +5,13 @@ export declare type UseScrollLocationLogicParams<StreamChatGenerics extends Defa
     hasMoreNewer: boolean;
     listElement: HTMLDivElement | null;
     suppressAutoscroll: boolean;
-    ulElement: HTMLUListElement | null;
     currentUserId?: string;
     messages?: StreamMessage<StreamChatGenerics>[];
     scrolledUpThreshold?: number;
 };
 export declare const useScrollLocationLogic: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseScrollLocationLogicParams<StreamChatGenerics>) => {
     hasNewMessages: boolean;
-    listElement: HTMLDivElement | null;
+    isMessageListScrolledToBottom: boolean;
     onMessageLoadCaptured: () => void;
     onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
     scrollToBottom: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAKzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAKtE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;sBAoFvB,aAAa,CAAC,cAAc,CAAC;;;CAqCxC,CAAC"}
+{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;sBAwDvB,aAAa,CAAC,cAAc,CAAC;;;CA2CxC,CAAC"}

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

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useMessageListScrollManager } from './useMessageListScrollManager';
-var isBrowser = typeof window !== 'undefined';
-var ResizeObserver = (isBrowser && window.ResizeObserver) || Polyfill;
 export var useScrollLocationLogic = function (params) {
-    var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement, ulElement = params.ulElement;
+    var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
     var _c = useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
     var _d = useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
+    var _e = useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
     var closeToBottom = useRef(false);
     var closeToTop = useRef(false);
     var scrollCounter = useRef({ autoScroll: 0, scroll: 0 });
@@ -20,29 +18,6 @@ export var useScrollLocationLogic = function (params) {
         });
         setHasNewMessages(false);
     }, [listElement, hasMoreNewer, suppressAutoscroll]);
-    useEffect(function () {
-        if (!listElement)
-            return;
-        var observer = new ResizeObserver(scrollToBottom);
-        var cancelObserverOnUserScroll = function () {
-            scrollCounter.current.scroll += 1;
-            var userScrolled = scrollCounter.current.autoScroll < scrollCounter.current.scroll;
-            if (ulElement && userScrolled) {
-                observer.unobserve(ulElement);
-                listElement === null || listElement === void 0 ? void 0 : listElement.removeEventListener('scroll', cancelObserverOnUserScroll);
-            }
-        };
-        if (ulElement) {
-            observer.observe(ulElement);
-        }
-        listElement.addEventListener('scroll', cancelObserverOnUserScroll);
-        return function () {
-            observer.disconnect();
-            if (listElement) {
-                listElement.removeEventListener('scroll', cancelObserverOnUserScroll);
-            }
-        };
-    }, [ulElement, scrollToBottom]);
     useLayoutEffect(function () {
         if (listElement) {
             setWrapperRect(listElement.getBoundingClientRect());
@@ -68,24 +43,31 @@ export var useScrollLocationLogic = function (params) {
         updateScrollTop(scrollTop);
         var offsetHeight = element.offsetHeight;
         var scrollHeight = element.scrollHeight;
+        var prevCloseToBottom = closeToBottom.current;
         closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
         closeToTop.current = scrollTop < scrolledUpThreshold;
         if (closeToBottom.current) {
             setHasNewMessages(false);
         }
+        if (prevCloseToBottom && !closeToBottom.current) {
+            setIsMessageListScrolledToBottom(false);
+        }
+        else if (!prevCloseToBottom && closeToBottom.current) {
+            setIsMessageListScrolledToBottom(true);
+        }
     }, [updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold]);
     var onMessageLoadCaptured = useCallback(function () {
         /**
          * A load event (emitted by e.g. an <img>) was captured on a message.
          * In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
          */
-        if (closeToBottom.current && !closeToTop.current) {
+        if (closeToBottom.current) {
             scrollToBottom();
         }
     }, [closeToTop, closeToBottom, scrollToBottom]);
     return {
         hasNewMessages: hasNewMessages,
-        listElement: listElement,
+        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
         onMessageLoadCaptured: onMessageLoadCaptured,
         onScroll: onScroll,
         scrollToBottom: scrollToBottom,

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

@@ -0,0 +1,8 @@
+interface ArrowProps {
+    className?: string;
+    color?: string;
+}
+export declare const ArrowUp: ({ className, color }: ArrowProps) => JSX.Element;
+export declare const ArrowDown: ({ className, color }: ArrowProps) => JSX.Element;
+export {};
+//# sourceMappingURL=icons.d.ts.map

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

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

package/dist/components/MessageList/icons.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export var ArrowUp = function (_a) {
+    var className = _a.className, color = _a.color;
+    return (React.createElement("svg", { className: className, "data-testid": 'arrow-up', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z', fill: color || 'var(--primary-color)' })));
+};
+export var ArrowDown = function (_a) {
+    var className = _a.className, color = _a.color;
+    return (React.createElement("svg", { className: className, "data-testid": 'arrow-down', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z', fill: color || 'var(--primary-color)' })));
+};

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

@@ -2,6 +2,7 @@ export * from './ConnectionStatus';
 export * from './GiphyPreviewMessage';
 export * from './MessageList';
 export * from './MessageNotification';
+export * from './ScrollToBottomButton';
 export * from './VirtualizedMessageList';
 export * from './hooks';
 export * from './utils';

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,uBAAuB,CAAC;AACtC,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,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/components/MessageList/index.js

@@ -2,6 +2,7 @@ export * from './ConnectionStatus'; // TODO: export this under its own folder
 export * from './GiphyPreviewMessage';
 export * from './MessageList';
 export * from './MessageNotification';
+export * from './ScrollToBottomButton';
 export * from './VirtualizedMessageList';
 export * from './hooks';
 export * from './utils';

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

@@ -32,14 +32,16 @@ declare type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatG
  * @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
  */
 export declare const processMessages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: ProcessMessagesParams<StreamChatGenerics>) => StreamMessage<StreamChatGenerics>[];
-export declare const makeDateMessageId: (date?: string | Date | undefined) => string;
+export declare const makeDateMessageId: (date?: string | Date) => string;
 export declare const getLastReceived: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[]) => string | null;
 export declare const getReadStates: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], read: Record<string, {
     last_read: Date;
     user: UserResponse<StreamChatGenerics>;
 }> | undefined, returnAllReadData: boolean) => Record<string, UserResponse<StreamChatGenerics>[]>;
-export declare const insertIntro: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], headerPosition?: number | undefined) => StreamMessage<StreamChatGenerics>[];
+export declare const insertIntro: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], headerPosition?: number) => StreamMessage<StreamChatGenerics>[];
 export declare type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 export declare const getGroupStyles: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+export declare const hasMoreMessagesProbably: (returnedCountMessages: number, limit: number) => boolean;
+export declare const hasNotMoreMessages: (returnedCountMessages: number, limit: number) => boolean;
 export {};
 //# sourceMappingURL=utils.d.ts.map

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,aAAK,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,8CAQ7B,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,+MAoDvB,CAAC;AAEF,oBAAY,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UAuCF,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,aAAK,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,oBAAY,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;AAElC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC"}

package/dist/components/MessageList/utils.js

@@ -87,7 +87,7 @@ export var makeDateMessageId = function (date) {
     catch (e) {
         idSuffix = nanoid();
     }
-    return CUSTOM_MESSAGE_TYPE.date + "-" + idSuffix;
+    return "".concat(CUSTOM_MESSAGE_TYPE.date, "-").concat(idSuffix);
 };
 // fast since it usually iterates just the last few messages
 export var getLastReceived = function (messages) {
@@ -186,7 +186,8 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
         ((_b = previousMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) !== 0 ||
         ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
         previousMessage.type === 'error' ||
-        previousMessage.deleted_at;
+        previousMessage.deleted_at ||
+        (message.reaction_counts && Object.keys(message.reaction_counts).length > 0);
     var isBottomMessage = !nextMessage ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         nextMessage.type === 'system' ||
@@ -194,7 +195,8 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
         ((_e = nextMessage.attachments) === null || _e === void 0 ? void 0 : _e.length) !== 0 ||
         ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
         nextMessage.type === 'error' ||
-        nextMessage.deleted_at;
+        nextMessage.deleted_at ||
+        (nextMessage.reaction_counts && Object.keys(nextMessage.reaction_counts).length > 0);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')
             return 'single';
@@ -209,3 +211,14 @@ export var getGroupStyles = function (message, previousMessage, nextMessage, noG
         return 'top';
     return '';
 };
+// "Probably" included, because it may happen that the last page was returned and it has exactly the size of the limit
+// but the back-end cannot provide us with information on whether it has still more messages in the DB
+// FIXME: once the pagination state is moved from Channel to MessageList, these should be moved as well.
+//  The MessageList should have configurable the limit for performing the requests.
+//  This parameter would then be used within these functions
+export var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
+    return returnedCountMessages === limit;
+};
+export var hasNotMoreMessages = function (returnedCountMessages, limit) {
+    return returnedCountMessages < limit;
+};

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

@@ -3,7 +3,7 @@ export declare type ModalProps = {
     /** If true, modal is opened or visible. */
     open: boolean;
     /** Callback handler for closing of modal. */
-    onClose?: () => void | ((event?: React.BaseSyntheticEvent) => void);
+    onClose?: (event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 };
-export declare const Modal: (props: PropsWithChildren<ModalProps>) => JSX.Element | null;
+export declare const Modal: ({ children, onClose, open }: PropsWithChildren<ModalProps>) => JSX.Element | null;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAIpE,oBAAY,UAAU,GAAG;IACvB,2CAA2C;IAC3C,IAAI,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC;CACrE,CAAC;AAEF,eAAO,MAAM,KAAK,UAAW,kBAAkB,UAAU,CAAC,uBA8CzD,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAMpE,oBAAY,UAAU,GAAG;IACvB,2CAA2C;IAC3C,IAAI,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,KAC9E,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,KAAK,gCAAiC,kBAAkB,UAAU,CAAC,uBAiD/E,CAAC"}

package/dist/components/Modal/Modal.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useRef } from 'react';
-import { useTranslationContext } from '../../context/TranslationContext';
-export var Modal = function (props) {
-    var children = props.children, onClose = props.onClose, open = props.open;
+import { CloseIconRound } from './icons';
+import { useChatContext, useTranslationContext } from '../../context';
+export var Modal = function (_a) {
+    var children = _a.children, onClose = _a.onClose, open = _a.open;
     var t = useTranslationContext('Modal').t;
+    var themeVersion = useChatContext('Modal').themeVersion;
     var innerRef = useRef(null);
     var closeRef = useRef(null);
     var handleClick = function (event) {
@@ -10,25 +12,26 @@ export var Modal = function (props) {
         if (!innerRef.current || !closeRef.current)
             return;
         if (!innerRef.current.contains(target) || closeRef.current.contains(target))
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose(event);
     };
     useEffect(function () {
         if (!open)
             return;
-        var handleEscKey = function (event) {
+        var handleKeyDown = function (event) {
             if (event.key === 'Escape')
-                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
         };
-        document.addEventListener('keydown', handleEscKey);
-        return function () { return document.removeEventListener('keydown', handleEscKey); };
+        document.addEventListener('keydown', handleKeyDown);
+        return function () { return document.removeEventListener('keydown', handleKeyDown); };
     }, [onClose, open]);
-    var openClasses = open ? 'str-chat__modal--open' : 'str-chat__modal--closed';
     if (!open)
         return null;
-    return (React.createElement("div", { className: "str-chat__modal " + openClasses, onClick: handleClick },
-        React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: 'Close' },
-            t('Close'),
-            React.createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
-                React.createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' }))),
-        React.createElement("div", { className: 'str-chat__modal__inner', ref: innerRef }, children)));
+    return (React.createElement("div", { className: 'str-chat__modal str-chat__modal--open', onClick: handleClick },
+        React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: t('Close') },
+            themeVersion === '2' && React.createElement(CloseIconRound, null),
+            themeVersion === '1' && (React.createElement(React.Fragment, null,
+                t('Close'),
+                React.createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
+                    React.createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' }))))),
+        React.createElement("div", { className: 'str-chat__modal__inner str-chat-react__modal__inner', ref: innerRef }, children)));
 };

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

@@ -0,0 +1,2 @@
+export declare const CloseIconRound: () => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/icons.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,mBAkB1B,CAAC"}

package/dist/components/Modal/icons.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var CloseIconRound = function () { return (React.createElement("svg", { "data-testid": 'close-icon-round', fill: 'none', height: '28', viewBox: '0 0 28 28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("rect", { fill: '#72767E', height: '28', rx: '14', width: '28' }),
+    React.createElement("circle", { cx: '14', cy: '14', fill: '#72767E', r: '12' }),
+    React.createElement("path", { clipRule: 'evenodd', d: 'M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z', fill: 'white', fillRule: 'evenodd' }))); };

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

@@ -15,6 +15,8 @@ export declare type ReactionSelectorProps<StreamChatGenerics extends DefaultStre
     handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
     /** An array of the reaction objects to display in the list */
     latest_reactions?: ReactionResponse<StreamChatGenerics>[];
+    /** 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 */
     reaction_counts?: {
         [key: string]: number;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AACjE,OAAO,EAAwB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAsLF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}
+{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAK3F,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AACjE,OAAO,EAAwB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,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,aAAa,EAAE,CAAC;IAClC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAiMF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}

package/dist/components/Reactions/ReactionSelector.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
 import { isMutableRef } from './utils/utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { getStrippedEmojiData } from '../Channel/emojiData';
@@ -18,7 +19,7 @@ import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
 var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
     var _a;
-    var _b = props.additionalEmojiProps, additionalEmojiProps = _b === void 0 ? {} : _b, propAvatar = props.Avatar, _c = props.detailedView, detailedView = _c === void 0 ? true : _c, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _d = props.reverse, reverse = _d === void 0 ? false : _d;
+    var _b = props.additionalEmojiProps, additionalEmojiProps = _b === void 0 ? {} : _b, propAvatar = props.Avatar, _c = props.detailedView, detailedView = _c === void 0 ? true : _c, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _d = props.reverse, reverse = _d === void 0 ? false : _d;
     var contextAvatar = useComponentContext('ReactionSelector').Avatar;
     var _e = useEmojiContext('ReactionSelector'), Emoji = _e.Emoji, emojiConfig = _e.emojiConfig;
     var _f = useMessageContext('ReactionSelector'), contextHandleReaction = _f.handleReaction, message = _f.message;
@@ -26,6 +27,7 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
     var Avatar = propAvatar || contextAvatar || DefaultAvatar;
     var handleReaction = propHandleReaction || contextHandleReaction;
     var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
+    var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
     var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
     var reactionOptions = propReactionOptions || defaultMinimalEmojis;
     var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
@@ -71,27 +73,34 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
         })
             .filter(Boolean);
     };
+    var iHaveReactedWithReaction = function (reactionType) {
+        return ownReactions.find(function (reaction) { return reaction.type === reactionType; });
+    };
     var getLatestUserForReactionType = function (type) {
         var _a;
         return ((_a = latestReactions.find(function (reaction) { return reaction.type === type && !!reaction.user; })) === null || _a === void 0 ? void 0 : _a.user) ||
             undefined;
     };
-    return (React.createElement("div", { className: "str-chat__reaction-selector " + (reverse ? 'str-chat__reaction-selector--reverse' : ''), "data-testid": 'reaction-selector', ref: ref },
+    return (React.createElement("div", { className: clsx('str-chat__reaction-selector str-chat__message-reaction-selector', {
+            'str-chat__reaction-selector--reverse': reverse,
+        }), "data-testid": 'reaction-selector', ref: ref },
         !!tooltipReactionType && detailedView && (React.createElement("div", { className: 'str-chat__reaction-selector-tooltip', ref: tooltipRef, style: {
                 left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.tooltip,
                 visibility: tooltipPositions ? 'visible' : 'hidden',
             } },
             React.createElement("div", { className: 'arrow', style: { left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.arrow } }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
-            _a.map(function (user, i, users) { return (React.createElement("span", { className: 'latest-user-username', key: "key-" + i + "-" + user }, "" + user + (i < users.length - 1 ? ', ' : ''))); }))),
-        React.createElement("ul", { className: 'str-chat__message-reactions-list' }, reactionOptions.map(function (reactionOption) {
+            _a.map(function (user, i, users) { return (React.createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
+        React.createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (reactionOption) {
             var latestUser = getLatestUserForReactionType(reactionOption.id);
             var count = reactionCounts && reactionCounts[reactionOption.id];
-            return (React.createElement("li", { key: "item-" + reactionOption.id },
-                React.createElement("button", { "aria-label": "Select Reaction: " + reactionOption.name, className: 'str-chat__message-reactions-list-item', "data-text": reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
-                    !!count && detailedView && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: 'latest-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' }))))),
+            return (React.createElement("li", { key: "item-".concat(reactionOption.id) },
+                React.createElement("button", { "aria-label": "Select Reaction: ".concat(reactionOption.name), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
+                        'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionOption.id),
+                    }), "data-text": reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
+                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
                     React.createElement(Suspense, { fallback: null },
-                        React.createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
+                        React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                            React.createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef))))),
                     Boolean(count) && detailedView && (React.createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
         }))));
 });

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

@@ -1,13 +1,15 @@
-import { ReactionEmoji } from '../Channel/emojiData';
 import type { NimbleEmojiProps } from 'emoji-mart';
 import type { ReactionResponse } from 'stream-chat';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ReactionEmoji } from '../Channel/emojiData';
 export declare type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart` */
     additionalEmojiProps?: Partial<NimbleEmojiProps>;
     /** 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 */
+    own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An object that keeps track of the count of each type of reaction on a message */
     reaction_counts?: {
         [key: string]: number;

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":"AAEA,OAAO,EAAwB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyGF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1D,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,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;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyHF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}

package/dist/components/Reactions/ReactionsList.js

@@ -9,64 +9,65 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { Suspense, useMemo } from 'react';
-import { getStrippedEmojiData } from '../Channel/emojiData';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Suspense, useState } from 'react';
+import clsx from 'clsx';
 import { useEmojiContext } from '../../context/EmojiContext';
 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)));
+};
 var UnMemoizedReactionsList = function (props) {
-    var additionalEmojiProps = props.additionalEmojiProps, onClick = props.onClick, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, propReactions = props.reactions, _a = props.reverse, reverse = _a === void 0 ? false : _a;
+    var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
     var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
-    var _c = useMessageContext('ReactionsList'), message = _c.message, onReactionListClick = _c.onReactionListClick;
-    var _d = emojiConfig || {}, defaultMinimalEmojis = _d.defaultMinimalEmojis, fullEmojiData = _d.emojiData, emojiSetDef = _d.emojiSetDef;
-    var reactions = propReactions || message.latest_reactions || [];
-    var reactionCounts = propReactionCounts || message.reaction_counts || {};
-    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
-    var emojiData = useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-    if (!reactions.length)
+    var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
+    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, aggregatedUserNamesByType = _c.aggregatedUserNamesByType, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
+    if (!latestReactions.length)
         return null;
-    var getTotalReactionCount = function () {
-        return Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0);
-    };
-    var getCurrentMessageReactionTypes = function () {
-        var reactionTypes = [];
-        reactions.forEach(function (_a) {
-            var type = _a.type;
-            if (reactionTypes.indexOf(type) === -1) {
-                reactionTypes.push(type);
-            }
-        });
-        return reactionTypes;
-    };
-    var getEmojiByReactionType = function (type) {
-        var reactionEmoji = reactionOptions.find(function (option) { return option.id === type; });
-        return reactionEmoji;
-    };
-    var getSupportedReactionMap = function () {
-        var reactionMap = {};
-        reactionOptions.forEach(function (_a) {
-            var id = _a.id;
-            return (reactionMap[id] = true);
-        });
-        return reactionMap;
-    };
-    var messageReactionTypes = getCurrentMessageReactionTypes();
-    var supportedReactionMap = getSupportedReactionMap();
-    var supportedReactionsArePresent = messageReactionTypes.some(function (type) { return supportedReactionMap[type]; });
     if (!supportedReactionsArePresent)
         return null;
-    return (React.createElement("div", { "aria-label": 'Reaction list', className: "str-chat__reaction-list " + (reverse ? 'str-chat__reaction-list--reverse' : ''), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyPress: onClick || onReactionListClick, role: 'figure' },
-        React.createElement("ul", null,
-            messageReactionTypes.map(function (reactionType) {
+    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 emojiObject = getEmojiByReactionType(reactionType);
-                return emojiObject ? (React.createElement("li", { key: emojiObject.id },
-                    React.createElement("button", { "aria-label": "Reactions: " + reactionType },
+                var isOwnReaction = iHaveReactedWithReaction(reactionType);
+                return emojiObject ? (React.createElement("li", { className: clsx('str-chat__message-reaction', {
+                        'str-chat__message-reaction-own': isOwnReaction,
+                    }), key: emojiObject.id },
+                    React.createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
                         React.createElement(Suspense, { fallback: null },
-                            React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
-                        "\u00A0"))) : null;
+                            React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                                React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),
+                        "\u00A0",
+                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))) : null;
             }),
             React.createElement("li", null,
-                React.createElement("span", { className: 'str-chat__reaction-list--counter' }, getTotalReactionCount())))));
+                React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));
 };
 /**
  * Component that displays a list of reactions on a message.