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

package/dist/components/ReactFileUtilities/ImageDropzone.js

@@ -1,12 +1,10 @@
-import { __assign } from "tslib";
 import clsx from 'clsx';
 import React, { useCallback, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslationContext } from '../../context';
-export var ImageDropzone = function (_a) {
-    var _b = _a.accept, acceptedFiles = _b === void 0 ? [] : _b, children = _a.children, disabled = _a.disabled, handleFiles = _a.handleFiles, maxNumberOfFiles = _a.maxNumberOfFiles, multiple = _a.multiple;
-    var t = useTranslationContext('ImageDropzone').t;
-    var handleDrop = useCallback(function (accepted) {
+export const ImageDropzone = ({ accept: acceptedFiles = [], children, disabled, handleFiles, maxNumberOfFiles, multiple, }) => {
+    const { t } = useTranslationContext('ImageDropzone');
+    const handleDrop = useCallback((accepted) => {
         if (!handleFiles) {
             return;
         }
@@ -14,28 +12,25 @@ export var ImageDropzone = function (_a) {
             handleFiles(accepted);
         }
     }, [handleFiles]);
-    var accept = useMemo(function () {
-        return (typeof acceptedFiles === 'string' ? acceptedFiles.split(',') : acceptedFiles).reduce(function (mediaTypeMap, mediaType) {
-            var _a;
-            (_a = mediaTypeMap[mediaType]) !== null && _a !== void 0 ? _a : (mediaTypeMap[mediaType] = []);
-            return mediaTypeMap;
-        }, {});
-    }, [acceptedFiles]);
-    var _c = useDropzone({
-        accept: accept,
-        disabled: disabled,
+    const accept = useMemo(() => (typeof acceptedFiles === 'string' ? acceptedFiles.split(',') : acceptedFiles).reduce((mediaTypeMap, mediaType) => {
+        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+        return mediaTypeMap;
+    }, {}), [acceptedFiles]);
+    const { getRootProps, isDragAccept, isDragReject } = useDropzone({
+        accept,
+        disabled,
         maxFiles: maxNumberOfFiles,
-        multiple: multiple,
+        multiple,
         noClick: true,
         onDrop: handleDrop,
-    }), getRootProps = _c.getRootProps, isDragAccept = _c.isDragAccept, isDragReject = _c.isDragReject;
-    return (React.createElement("div", __assign({}, getRootProps({
-        className: clsx('rfu-dropzone', {
-            'rfu-dropzone--accept': isDragAccept,
-            'rfu-dropzone--reject': isDragReject,
-        }),
-        style: { position: 'relative' },
-    }), { tabIndex: -1 }),
+    });
+    return (React.createElement("div", { ...getRootProps({
+            className: clsx('rfu-dropzone', {
+                'rfu-dropzone--accept': isDragAccept,
+                'rfu-dropzone--reject': isDragReject,
+            }),
+            style: { position: 'relative' },
+        }), tabIndex: -1 },
         React.createElement("div", { className: 'rfu-dropzone__notifier' },
             React.createElement("div", { className: 'rfu-dropzone__inner' },
                 React.createElement("svg", { height: '41', viewBox: '0 0 41 41', width: '41', xmlns: 'http://www.w3.org/2000/svg' },

package/dist/components/ReactFileUtilities/LoadingIndicator.d.ts

@@ -6,4 +6,3 @@ export type LoadingIndicatorProps = {
     width?: number;
 };
 export declare const LoadingIndicator: ({ backgroundColor, color, size, width, }: LoadingIndicatorProps) => React.JSX.Element;
-//# sourceMappingURL=LoadingIndicator.d.ts.map

package/dist/components/ReactFileUtilities/LoadingIndicator.js

@@ -1,12 +1,9 @@
 import React from 'react';
-export var LoadingIndicator = function (_a) {
-    var backgroundColor = _a.backgroundColor, color = _a.color, _b = _a.size, size = _b === void 0 ? 20 : _b, _c = _a.width, width = _c === void 0 ? 2 : _c;
-    return (React.createElement("div", { className: 'rfu-loading-indicator__spinner', style: {
-            borderColor: backgroundColor ? backgroundColor : '',
-            borderTopColor: color ? color : '',
-            borderWidth: width ? width : '',
-            height: size ? size : '',
-            margin: '0 auto',
-            width: size ? size : '',
-        } }));
-};
+export const LoadingIndicator = ({ backgroundColor, color, size = 20, width = 2, }) => (React.createElement("div", { className: 'rfu-loading-indicator__spinner', style: {
+        borderColor: backgroundColor ? backgroundColor : '',
+        borderTopColor: color ? color : '',
+        borderWidth: width ? width : '',
+        height: size ? size : '',
+        margin: '0 auto',
+        width: size ? size : '',
+    } }));

package/dist/components/ReactFileUtilities/UploadButton.d.ts

@@ -4,4 +4,3 @@ export type UploadButtonProps = {
     resetOnChange?: boolean;
 } & Omit<ComponentProps<'input'>, 'type' | 'onChange'>;
 export declare const UploadButton: ({ onFileChange, resetOnChange, ...rest }: UploadButtonProps) => React.JSX.Element;
-//# sourceMappingURL=UploadButton.d.ts.map

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -1,8 +1,6 @@
-import { __assign, __rest } from "tslib";
 import React from 'react';
 import { useHandleFileChangeWrapper } from './utils';
-export var UploadButton = function (_a) {
-    var onFileChange = _a.onFileChange, _b = _a.resetOnChange, resetOnChange = _b === void 0 ? true : _b, rest = __rest(_a, ["onFileChange", "resetOnChange"]);
-    var handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
-    return React.createElement("input", __assign({ onChange: handleInputChange, type: 'file' }, rest));
+export const UploadButton = ({ onFileChange, resetOnChange = true, ...rest }) => {
+    const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
+    return React.createElement("input", { onChange: handleInputChange, type: 'file', ...rest });
 };

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

@@ -1,14 +1,6 @@
 export * from './FileIcon';
-export * from './FilePreviewer';
-export * from './FileUploadButton';
 export * from './ImageDropzone';
-export * from './ImagePreviewer';
-export * from './ImageUploadButton';
 export * from './LoadingIndicator';
-export * from './Thumbnail';
-export * from './ThumbnailPlaceholder';
 export * from './UploadButton';
 export * from './types';
 export * from './utils';
-export { AttachmentIcon, PictureIcon } from './icons';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ReactFileUtilities/index.js

@@ -1,13 +1,6 @@
 export * from './FileIcon';
-export * from './FilePreviewer';
-export * from './FileUploadButton';
 export * from './ImageDropzone';
-export * from './ImagePreviewer';
-export * from './ImageUploadButton';
 export * from './LoadingIndicator';
-export * from './Thumbnail';
-export * from './ThumbnailPlaceholder';
 export * from './UploadButton';
 export * from './types';
 export * from './utils';
-export { AttachmentIcon, PictureIcon } from './icons';

package/dist/components/ReactFileUtilities/types.d.ts

@@ -29,4 +29,3 @@ export type ImageUpload = {
     };
     previewUri?: string;
 } & UploadInfo;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,6 +1,6 @@
 import { FileLike, RecordedMediaType } from './types';
 import { ChangeEvent } from 'react';
-export declare const useHandleFileChangeWrapper: (resetOnChange?: boolean, handler?: ((files: Array<File>) => void) | undefined) => ({ currentTarget }: ChangeEvent<HTMLInputElement>) => void;
+export declare const useHandleFileChangeWrapper: (resetOnChange?: boolean, handler?: (files: Array<File>) => void) => ({ currentTarget }: ChangeEvent<HTMLInputElement>) => void;
 export declare function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean;
 export declare function dataTransferItemsToFiles(items?: DataTransferItem[]): Promise<FileLike[]>;
 export declare const createFileFromBlobs: ({ blobsArray, fileName, mimeType, }: {
@@ -11,4 +11,3 @@ export declare const createFileFromBlobs: ({ blobsArray, fileName, mimeType, }:
 export declare const getExtensionFromMimeType: (mimeType: string) => string | null;
 export declare const getRecordedMediaTypeFromMimeType: (mimeType: string) => RecordedMediaType | null;
 export declare const readFileAsArrayBuffer: (file: File) => Promise<ArrayBuffer>;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/ReactFileUtilities/utils.js

@@ -1,89 +1,58 @@
-import { __awaiter, __generator } from "tslib";
 import { useCallback } from 'react';
-export var useHandleFileChangeWrapper = function (resetOnChange, handler) {
-    if (resetOnChange === void 0) { resetOnChange = false; }
-    return useCallback(function (_a) {
-        var currentTarget = _a.currentTarget;
-        var files = currentTarget.files;
-        if (!files)
-            return;
-        try {
-            handler === null || handler === void 0 ? void 0 : handler(Array.from(files));
-        }
-        catch (error) {
-            console.error(error);
-        }
-        if (resetOnChange)
-            currentTarget.value = '';
-    }, [handler, resetOnChange]);
-};
+export const useHandleFileChangeWrapper = (resetOnChange = false, handler) => useCallback(({ currentTarget }) => {
+    const { files } = currentTarget;
+    if (!files)
+        return;
+    try {
+        handler?.(Array.from(files));
+    }
+    catch (error) {
+        console.error(error);
+    }
+    if (resetOnChange)
+        currentTarget.value = '';
+}, [handler, resetOnChange]);
 export function dataTransferItemsHaveFiles(items) {
     if (!items || !items.length) {
         return false;
     }
-    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-        var item = items_1[_i];
+    for (const item of items) {
         if (item.kind === 'file' || item.type === 'text/html') {
             return true;
         }
     }
     return false;
 }
-export function dataTransferItemsToFiles(items) {
-    return __awaiter(this, void 0, void 0, function () {
-        var fileLikes, blobPromises, _loop_1, _i, items_2, item;
-        var _this = this;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!items || !items.length) {
-                        return [2 /*return*/, []];
-                    }
-                    fileLikes = getFileLikes(items);
-                    if (fileLikes.length) {
-                        return [2 /*return*/, fileLikes];
-                    }
-                    blobPromises = [];
-                    _loop_1 = function (item) {
-                        if (item.type === 'text/html') {
-                            blobPromises.push(new Promise(function (accept) {
-                                item.getAsString(function (s) { return __awaiter(_this, void 0, void 0, function () {
-                                    var imagePromises;
-                                    return __generator(this, function (_a) {
-                                        switch (_a.label) {
-                                            case 0:
-                                                imagePromises = extractImageSources(s).map(function (src) {
-                                                    return getImageSource(fileLikes, src);
-                                                });
-                                                return [4 /*yield*/, Promise.all(imagePromises)];
-                                            case 1:
-                                                _a.sent();
-                                                accept();
-                                                return [2 /*return*/];
-                                        }
-                                    });
-                                }); });
-                            }));
-                        }
-                    };
-                    for (_i = 0, items_2 = items; _i < items_2.length; _i++) {
-                        item = items_2[_i];
-                        _loop_1(item);
-                    }
-                    return [4 /*yield*/, Promise.all(blobPromises)];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/, fileLikes];
-            }
-        });
-    });
+export async function dataTransferItemsToFiles(items) {
+    if (!items || !items.length) {
+        return [];
+    }
+    // If there are files inside the DataTransferItem prefer those
+    const fileLikes = getFileLikes(items);
+    if (fileLikes.length) {
+        return fileLikes;
+    }
+    // Otherwise extract images from html
+    const blobPromises = [];
+    for (const item of items) {
+        if (item.type === 'text/html') {
+            blobPromises.push(new Promise((accept) => {
+                item.getAsString(async (s) => {
+                    const imagePromises = extractImageSources(s).map((src) => getImageSource(fileLikes, src));
+                    await Promise.all(imagePromises);
+                    accept();
+                });
+            }));
+        }
+    }
+    await Promise.all(blobPromises);
+    return fileLikes;
 }
 function getFileLikes(items) {
-    var fileLikes = [];
-    for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
-        var item = items_3[_i];
+    const fileLikes = [];
+    for (const item of items) {
         if (item.kind === 'file') {
-            var file = item.getAsFile();
+            const file = item.getAsFile();
             if (file) {
                 fileLikes.push(file);
             }
@@ -91,58 +60,42 @@ function getFileLikes(items) {
     }
     return fileLikes;
 }
-function getImageSource(fileLikes, src) {
-    return __awaiter(this, void 0, void 0, function () {
-        var res, e_1, contentType, buf, blob;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, fetch(src)];
-                case 1:
-                    res = _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    e_1 = _a.sent();
-                    return [2 /*return*/];
-                case 3:
-                    contentType = res.headers.get('Content-type') || 'application/octet-stream';
-                    return [4 /*yield*/, res.arrayBuffer()];
-                case 4:
-                    buf = _a.sent();
-                    blob = new Blob([buf], { type: contentType });
-                    fileLikes.push(blob);
-                    return [2 /*return*/];
-            }
-        });
-    });
+async function getImageSource(fileLikes, src) {
+    let res;
+    try {
+        res = await fetch(src);
+    }
+    catch (e) {
+        return;
+    }
+    const contentType = res.headers.get('Content-type') || 'application/octet-stream';
+    const buf = await res.arrayBuffer();
+    const blob = new Blob([buf], { type: contentType });
+    fileLikes.push(blob);
 }
-var extractImageSources = function (s) {
-    var imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
-    return Array.from(imageTags, function (tag) { return tag.src; }).filter(function (tag) { return tag; });
+const extractImageSources = (s) => {
+    const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
+    return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
 };
-export var createFileFromBlobs = function (_a) {
-    var blobsArray = _a.blobsArray, fileName = _a.fileName, mimeType = _a.mimeType;
-    var concatenatedBlob = new Blob(blobsArray, { type: mimeType });
+export const createFileFromBlobs = ({ blobsArray, fileName, mimeType, }) => {
+    const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
     return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
 };
-export var getExtensionFromMimeType = function (mimeType) {
-    var match = mimeType.match(/\/([^/;]+)/);
+export const getExtensionFromMimeType = (mimeType) => {
+    const match = mimeType.match(/\/([^/;]+)/);
     return match && match[1];
 };
-export var getRecordedMediaTypeFromMimeType = function (mimeType) {
-    var match = mimeType.match(/^(audio|video)\/.*$/);
+export const getRecordedMediaTypeFromMimeType = (mimeType) => {
+    const match = mimeType.match(/^(audio|video)\/.*$/);
     return match && match[1];
 };
-export var readFileAsArrayBuffer = function (file) {
-    return new Promise(function (resolve, reject) {
-        var fileReader = new FileReader();
-        fileReader.onload = function () {
-            resolve(fileReader.result);
-        };
-        fileReader.onerror = function () {
-            reject(fileReader.error);
-        };
-        fileReader.readAsArrayBuffer(file);
-    });
-};
+export const readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+        resolve(fileReader.result);
+    };
+    fileReader.onerror = () => {
+        reject(fileReader.error);
+    };
+    fileReader.readAsArrayBuffer(file);
+});

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

@@ -30,4 +30,3 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
  * Component that allows a user to select a reaction.
  */
 export declare const ReactionSelector: React.ForwardRefExoticComponent<ReactionSelectorProps<DefaultStreamChatGenerics> & React.RefAttributes<HTMLDivElement | null>>;
-//# sourceMappingURL=ReactionSelector.d.ts.map

package/dist/components/Reactions/ReactionSelector.js

@@ -4,85 +4,73 @@ import { isMutableRef } from './utils/utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
-var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
-    var _a;
-    var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionGroups = props.reaction_groups, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
-    var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
-    var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
-    var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
-    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 reactionGroups = propReactionGroups || (message === null || message === void 0 ? void 0 : message.reaction_groups) || {};
-    var _f = useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
-    var _g = useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
-    var targetRef = useRef(null);
-    var tooltipRef = useRef(null);
-    var showTooltip = useCallback(function (event, reactionType) {
+const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
+    const { Avatar: propAvatar, detailedView = true, handleReaction: propHandleReaction, latest_reactions: propLatestReactions, own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reverse = false, } = props;
+    const { Avatar: contextAvatar, reactionOptions: contextReactionOptions, } = useComponentContext('ReactionSelector');
+    const { handleReaction: contextHandleReaction, message, } = useMessageContext('ReactionSelector');
+    const reactionOptions = propReactionOptions ?? contextReactionOptions;
+    const Avatar = propAvatar || contextAvatar || DefaultAvatar;
+    const handleReaction = propHandleReaction || contextHandleReaction;
+    const latestReactions = propLatestReactions || message?.latest_reactions || [];
+    const ownReactions = propOwnReactions || message?.own_reactions || [];
+    const reactionGroups = propReactionGroups || message?.reaction_groups || {};
+    const [tooltipReactionType, setTooltipReactionType] = useState(null);
+    const [tooltipPositions, setTooltipPositions] = useState(null);
+    const targetRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const showTooltip = useCallback((event, reactionType) => {
         targetRef.current = event.currentTarget;
         setTooltipReactionType(reactionType);
     }, []);
-    var hideTooltip = useCallback(function () {
+    const hideTooltip = useCallback(() => {
         setTooltipReactionType(null);
         setTooltipPositions(null);
     }, []);
-    useEffect(function () {
-        var _a, _b, _c;
+    useEffect(() => {
         if (tooltipReactionType) {
-            var tooltip = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var target = (_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            var container = isMutableRef(ref) ? (_c = ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect() : null;
+            const tooltip = tooltipRef.current?.getBoundingClientRect();
+            const target = targetRef.current?.getBoundingClientRect();
+            const container = isMutableRef(ref) ? ref.current?.getBoundingClientRect() : null;
             if (!tooltip || !target || !container)
                 return;
-            var tooltipPosition = tooltip.width === container.width || tooltip.x < container.x
+            const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x
                 ? 0
                 : target.left + target.width / 2 - container.left - tooltip.width / 2;
-            var arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
+            const arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
             setTooltipPositions({
                 arrow: arrowPosition,
                 tooltip: tooltipPosition,
             });
         }
     }, [tooltipReactionType, ref]);
-    var getUsersPerReactionType = function (type) {
-        return latestReactions
-            .map(function (reaction) {
-            var _a, _b;
-            if (reaction.type === type) {
-                return ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = reaction.user) === null || _b === void 0 ? void 0 : _b.id);
-            }
-            return null;
-        })
-            .filter(Boolean);
-    };
-    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;
-    };
+    const getUsersPerReactionType = (type) => latestReactions
+        .map((reaction) => {
+        if (reaction.type === type) {
+            return reaction.user?.name || reaction.user?.id;
+        }
+        return null;
+    })
+        .filter(Boolean);
+    const iHaveReactedWithReaction = (reactionType) => ownReactions.find((reaction) => reaction.type === reactionType);
+    const getLatestUserForReactionType = (type) => latestReactions.find((reaction) => reaction.type === type && !!reaction.user)?.user ||
+        undefined;
     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,
+                left: 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-".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 (_a) {
-            var _b, _c;
-            var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
-            var latestUser = getLatestUserForReactionType(reactionType);
-            var count = (_c = (_b = reactionGroups[reactionType]) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
+            React.createElement("div", { className: 'arrow', style: { left: tooltipPositions?.arrow } }),
+            getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => (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 str-chat__message-reactions-options' }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
+            const latestUser = getLatestUserForReactionType(reactionType);
+            const count = reactionGroups[reactionType]?.count ?? 0;
             return (React.createElement("li", { key: reactionType },
-                React.createElement("button", { "aria-label": "Select Reaction: ".concat(reactionName || reactionType), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
+                React.createElement("button", { "aria-label": `Select Reaction: ${reactionName || reactionType}`, className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
                         'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
-                    }), "data-text": reactionType, onClick: function (event) { return handleReaction(reactionType, event); } },
-                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionType); }, onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
+                    }), "data-text": reactionType, onClick: (event) => handleReaction(reactionType, event) },
+                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: (e) => showTooltip(e, reactionType), 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("span", { className: 'str-chat__message-reaction-emoji' },
                         React.createElement(Component, null)),
                     Boolean(count) && detailedView && (React.createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
@@ -91,4 +79,4 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
 /**
  * Component that allows a user to select a reaction.
  */
-export var ReactionSelector = React.memo(UnMemoizedReactionSelector);
+export const ReactionSelector = React.memo(UnMemoizedReactionSelector);

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

@@ -34,4 +34,3 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
  * Component that displays a list of reactions on a message.
  */
 export declare const ReactionsList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ReactionsListProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=ReactionsList.d.ts.map

package/dist/components/Reactions/ReactionsList.js

@@ -1,16 +1,15 @@
-import { __rest } from "tslib";
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { ReactionsListModal } from './ReactionsListModal';
 import { useTranslationContext } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
-var UnMemoizedReactionsList = function (props) {
-    var handleFetchReactions = props.handleFetchReactions, reactionDetailsSort = props.reactionDetailsSort, _a = props.reverse, reverse = _a === void 0 ? false : _a, sortReactionDetails = props.sortReactionDetails, rest = __rest(props, ["handleFetchReactions", "reactionDetailsSort", "reverse", "sortReactionDetails"]);
-    var _b = useProcessReactions(rest), existingReactions = _b.existingReactions, hasReactions = _b.hasReactions, totalReactionCount = _b.totalReactionCount;
-    var _c = useState(null), selectedReactionType = _c[0], setSelectedReactionType = _c[1];
-    var t = useTranslationContext('ReactionsList').t;
-    var handleReactionButtonClick = function (reactionType) {
+const UnMemoizedReactionsList = (props) => {
+    const { handleFetchReactions, reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
+    const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
+    const [selectedReactionType, setSelectedReactionType,] = useState(null);
+    const { t } = useTranslationContext('ReactionsList');
+    const handleReactionButtonClick = (reactionType) => {
         if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
             return;
         }
@@ -20,25 +19,23 @@ var UnMemoizedReactionsList = function (props) {
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { "aria-label": t('aria/Reaction list'), className: clsx('str-chat__reaction-list str-chat__message-reactions-container', {
+                // we are stuck with both classes as both are used in CSS
                 '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))));
-                }),
+                existingReactions.map(({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && (React.createElement("li", { className: clsx('str-chat__message-reaction', {
+                        'str-chat__message-reaction-own': isOwnReaction,
+                    }), key: reactionType },
+                    React.createElement("button", { "aria-label": `Reactions: ${reactionType}`, "data-testid": `reactions-list-button-${reactionType}`, onClick: () => 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)))),
-        selectedReactionType !== null && (React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: function () { return setSelectedReactionType(null); }, onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType, sortReactionDetails: sortReactionDetails }))));
+        selectedReactionType !== null && (React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: () => setSelectedReactionType(null), onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType, sortReactionDetails: sortReactionDetails }))));
 };
 /**
  * Component that displays a list of reactions on a message.
  */
-export var ReactionsList = React.memo(UnMemoizedReactionsList);
+export const ReactionsList = React.memo(UnMemoizedReactionsList);

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

@@ -14,4 +14,3 @@ type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGeneric
 };
 export declare function ReactionsListModal<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps<StreamChatGenerics>): React.JSX.Element;
 export {};
-//# sourceMappingURL=ReactionsListModal.d.ts.map