stream-chat-react 11.22.0 → 12.0.0-rc.2

package/dist/components/Reactions/ReactionsListModal.js

@@ -1,4 +1,3 @@
-import { __assign, __rest, __spreadArray } from "tslib";
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { Modal } from '../Modal';
@@ -6,49 +5,34 @@ import { useFetchReactions } from './hooks/useFetchReactions';
 import { LoadingIndicator } from '../Loading';
 import { Avatar } from '../Avatar';
 import { useMessageContext } from '../../context';
-var defaultReactionDetailsSort = { created_at: -1 };
-export function ReactionsListModal(_a) {
-    var _b, _c;
-    var handleFetchReactions = _a.handleFetchReactions, onSelectedReactionTypeChange = _a.onSelectedReactionTypeChange, propReactionDetailsSort = _a.reactionDetailsSort, reactions = _a.reactions, selectedReactionType = _a.selectedReactionType, propSortReactionDetails = _a.sortReactionDetails, modalProps = __rest(_a, ["handleFetchReactions", "onSelectedReactionTypeChange", "reactionDetailsSort", "reactions", "selectedReactionType", "sortReactionDetails"]);
-    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 _d = useMessageContext('ReactionsListModal'), contextReactionDetailsSort = _d.reactionDetailsSort, contextSortReactionDetails = _d.sortReactionDetails;
-    var legacySortReactionDetails = propSortReactionDetails !== null && propSortReactionDetails !== void 0 ? propSortReactionDetails : contextSortReactionDetails;
-    var reactionDetailsSort = (_c = propReactionDetailsSort !== null && propReactionDetailsSort !== void 0 ? propReactionDetailsSort : contextReactionDetailsSort) !== null && _c !== void 0 ? _c : defaultReactionDetailsSort;
-    var _e = useFetchReactions({
-        handleFetchReactions: handleFetchReactions,
+const defaultReactionDetailsSort = { created_at: -1 };
+export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }) {
+    const selectedReaction = reactions.find(({ reactionType }) => reactionType === selectedReactionType);
+    const SelectedEmojiComponent = selectedReaction?.EmojiComponent ?? null;
+    const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');
+    const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
+    const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+    const { isLoading: areReactionsLoading, reactions: reactionDetails, } = useFetchReactions({
+        handleFetchReactions,
         reactionType: selectedReactionType,
         shouldFetch: modalProps.open,
         sort: reactionDetailsSort,
-    }), areReactionsLoading = _e.isLoading, reactionDetails = _e.reactions;
-    var reactionDetailsWithLegacyFallback = useMemo(function () {
-        return legacySortReactionDetails
-            ? __spreadArray([], reactionDetails, true).sort(legacySortReactionDetails)
-            : reactionDetails;
-    }, [legacySortReactionDetails, reactionDetails]);
-    return (React.createElement(Modal, __assign({}, modalProps, { className: clsx('str-chat__message-reactions-details-modal', modalProps.className) }),
+    });
+    const reactionDetailsWithLegacyFallback = useMemo(() => legacySortReactionDetails
+        ? [...reactionDetails].sort(legacySortReactionDetails)
+        : reactionDetails, [legacySortReactionDetails, reactionDetails]);
+    return (React.createElement(Modal, { ...modalProps, className: clsx('str-chat__message-reactions-details-modal', modalProps.className) },
         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 str-chat__message-reaction-emoji--with-fallback' },
-                        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--with-fallback str-chat__message-reaction-emoji-big' },
+            React.createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(({ EmojiComponent, reactionCount, reactionType }) => 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-${reactionType}`, key: reactionType, onClick: () => onSelectedReactionTypeChange?.(reactionType) },
+                React.createElement("span", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback' },
+                    React.createElement(EmojiComponent, null)),
+                "\u00A0",
+                React.createElement("span", { className: 'str-chat__message-reaction-count' }, reactionCount))))),
+            SelectedEmojiComponent && (React.createElement("div", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback 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)) : (reactionDetailsWithLegacyFallback.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))));
-            }))))));
+            React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-users', "data-testid": 'all-reacting-users' }, areReactionsLoading ? (React.createElement(LoadingIndicator, null)) : (reactionDetailsWithLegacyFallback.map(({ user }) => (React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-user', key: user?.id },
+                React.createElement(Avatar, { className: 'stream-chat__avatar--reaction', "data-testid": 'avatar', image: user?.image, name: user?.name || user?.id }),
+                React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'reaction-user-username' }, user?.name || user?.id)))))))));
 }

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

@@ -19,4 +19,3 @@ export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamCha
     reactions?: ReactionResponse<StreamChatGenerics>[];
 };
 export declare const SimpleReactionsList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: SimpleReactionsListProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=SimpleReactionsList.d.ts.map

package/dist/components/Reactions/SimpleReactionsList.js

@@ -1,48 +1,36 @@
-import { __rest } from "tslib";
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { PopperTooltip } from '../Tooltip';
-var WithTooltip = function (_a) {
-    var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, title = _a.title;
-    var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
-    var _c = useEnterLeaveHandlers({
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-    }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
-    var themeVersion = useChatContext('WithTooltip').themeVersion;
+const WithTooltip = ({ children, onMouseEnter, onMouseLeave, title, }) => {
+    const [referenceElement, setReferenceElement] = useState(null);
+    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
+        onMouseEnter,
+        onMouseLeave,
+    });
     return (React.createElement(React.Fragment, null,
-        themeVersion === '2' && (React.createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, title)),
+        React.createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, title),
         React.createElement("span", { onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, children)));
 };
-var UnMemoizedSimpleReactionsList = function (props) {
-    var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
-    var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
-    var _a = useProcessReactions(rest), existingReactions = _a.existingReactions, hasReactions = _a.hasReactions, totalReactionCount = _a.totalReactionCount;
-    var _b = useState(undefined), tooltipReactionType = _b[0], setTooltipReactionType = _b[1];
-    var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
-    var handleReaction = propHandleReaction || contextHandleReaction;
+const UnMemoizedSimpleReactionsList = (props) => {
+    const { handleReaction: propHandleReaction, ...rest } = props;
+    const { handleReaction: contextHandleReaction } = useMessageContext('SimpleReactionsList');
+    const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
+    const handleReaction = propHandleReaction || contextHandleReaction;
     if (!hasReactions)
         return null;
     return (React.createElement("div", { className: 'str-chat__message-reactions-container' },
-        React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
-            existingReactions.map(function (_a) {
-                var EmojiComponent = _a.EmojiComponent, isOwnReaction = _a.isOwnReaction, latestReactedUserNames = _a.latestReactedUserNames, reactionType = _a.reactionType;
-                var tooltipVisible = tooltipReactionType === reactionType;
-                var tooltipContent = latestReactedUserNames.join(', ');
+        React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list' },
+            existingReactions.map(({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
+                const tooltipContent = latestReactedUserNames.join(', ');
                 return (EmojiComponent && (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                         'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: reactionType, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
-                    React.createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
-                        React.createElement(EmojiComponent, null),
-                        "\u00A0",
-                        tooltipVisible && themeVersion === '1' && (React.createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
-                            React.createElement("div", { className: 'arrow' }),
-                            tooltipContent))))));
+                    }), key: reactionType, onClick: (event) => handleReaction(reactionType, event), onKeyUp: (event) => handleReaction(reactionType, event) },
+                    React.createElement(WithTooltip, { title: tooltipContent },
+                        React.createElement(EmojiComponent, null)))));
             }),
             React.createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
 };
-export var SimpleReactionsList = React.memo(UnMemoizedSimpleReactionsList);
+export const SimpleReactionsList = React.memo(UnMemoizedSimpleReactionsList);

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

@@ -10,4 +10,3 @@ export type SpriteImageProps = {
     width?: number;
 };
 export declare const SpriteImage: ({ columns, fallback, height, position, rows, spriteUrl, style, width, }: SpriteImageProps) => React.JSX.Element;
-//# sourceMappingURL=SpriteImage.d.ts.map

package/dist/components/Reactions/SpriteImage.js

@@ -1,14 +1,26 @@
-import { __assign } from "tslib";
 import React, { useEffect, useState } from 'react';
 import { getImageDimensions } from './utils/utils';
-export var SpriteImage = function (_a) {
-    var columns = _a.columns, fallback = _a.fallback, height = _a.height, position = _a.position, rows = _a.rows, spriteUrl = _a.spriteUrl, style = _a.style, width = _a.width;
-    var _b = useState([0, 0]), _c = _b[0], spriteWidth = _c[0], spriteHeight = _c[1], setSpriteDimensions = _b[1];
-    useEffect(function () {
+export const SpriteImage = ({ columns, fallback, height, position, rows, spriteUrl, style, width, }) => {
+    const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);
+    useEffect(() => {
         getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
     }, [spriteUrl]);
-    var x = position[0], y = position[1];
+    const [x, y] = position;
     if (!spriteHeight || !spriteWidth)
         return React.createElement(React.Fragment, null, fallback);
-    return (React.createElement("div", { "data-testid": 'sprite-image', style: __assign(__assign(__assign(__assign(__assign({}, style), { '--str-chat__sprite-image-resize-ratio': 'var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))', '--str-chat__sprite-image-resize-ratio-x': 'calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))', '--str-chat__sprite-image-resize-ratio-y': 'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))', '--str-chat__sprite-item-height': "".concat(spriteHeight / rows), '--str-chat__sprite-item-width': "".concat(spriteWidth / columns) }), (Number.isFinite(height) ? { '--str-chat__sprite-image-height': "".concat(height, "px") } : {})), (Number.isFinite(width) ? { '--str-chat__sprite-image-width': "".concat(width, "px") } : {})), { backgroundImage: "url('".concat(spriteUrl, "')"), backgroundPosition: "".concat(x * (100 / (columns - 1)), "% ").concat(y * (100 / (rows - 1)), "%"), backgroundSize: "".concat(columns * 100, "% ").concat(rows * 100, "%"), height: 'var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))', width: 'var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))' }) }));
+    return (React.createElement("div", { "data-testid": 'sprite-image', style: {
+            ...style,
+            '--str-chat__sprite-image-resize-ratio': 'var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))',
+            '--str-chat__sprite-image-resize-ratio-x': 'calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))',
+            '--str-chat__sprite-image-resize-ratio-y': 'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',
+            '--str-chat__sprite-item-height': `${spriteHeight / rows}`,
+            '--str-chat__sprite-item-width': `${spriteWidth / columns}`,
+            ...(Number.isFinite(height) ? { '--str-chat__sprite-image-height': `${height}px` } : {}),
+            ...(Number.isFinite(width) ? { '--str-chat__sprite-image-width': `${width}px` } : {}),
+            backgroundImage: `url('${spriteUrl}')`,
+            backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
+            backgroundSize: `${columns * 100}% ${rows * 100}%`,
+            height: 'var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))',
+            width: 'var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))',
+        } }));
 };

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

@@ -10,9 +10,7 @@ declare const StreamSpriteEmojiPositions: {
     wow: number[];
 };
 type StreamEmojiType = keyof typeof StreamSpriteEmojiPositions;
-export declare const StreamEmoji: ({ fallback, type, }: {
+export declare const StreamEmoji: ({ fallback, type, }: Readable<{
     type: StreamEmojiType;
-    fallback?: React.ReactNode;
-}) => React.JSX.Element;
+} & Pick<SpriteImageProps, 'fallback'>>) => React.JSX.Element;
 export {};
-//# sourceMappingURL=StreamEmoji.d.ts.map

package/dist/components/Reactions/StreamEmoji.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SpriteImage } from './SpriteImage';
-var StreamSpriteEmojiPositions = {
+const StreamSpriteEmojiPositions = {
     angry: [1, 1],
     haha: [1, 0],
     like: [0, 0],
@@ -8,10 +8,9 @@ var StreamSpriteEmojiPositions = {
     sad: [0, 1],
     wow: [0, 2],
 };
-var STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
-export var StreamEmoji = function (_a) {
-    var fallback = _a.fallback, type = _a.type;
-    var position = StreamSpriteEmojiPositions[type];
+const STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
+export const StreamEmoji = ({ fallback, type, }) => {
+    const position = StreamSpriteEmojiPositions[type];
     return (React.createElement(SpriteImage, { columns: 2, fallback: fallback, position: position, rows: 3, spriteUrl: STREAM_SPRITE_URL, style: {
             '--str-chat__sprite-image-height': 'var(--str-chat__stream-emoji-size, 18px)',
         } }));

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

@@ -12,4 +12,3 @@ export declare function useFetchReactions<StreamChatGenerics extends DefaultStre
     isLoading: boolean;
     reactions: ReactionResponse<StreamChatGenerics>[];
 };
-//# sourceMappingURL=useFetchReactions.d.ts.map

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

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

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

@@ -12,4 +12,3 @@ export declare const useProcessReactions: <StreamChatGenerics extends DefaultStr
     totalReactionCount: number;
 };
 export {};
-//# sourceMappingURL=useProcessReactions.d.ts.map

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

@@ -1,59 +1,48 @@
 import { useCallback, useMemo } from 'react';
 import { useComponentContext, useMessageContext } from '../../../context';
-export var defaultReactionsSort = function (a, b) {
+export const defaultReactionsSort = (a, b) => {
     if (a.firstReactionAt && b.firstReactionAt) {
         return +a.firstReactionAt - +b.firstReactionAt;
     }
     return a.reactionType.localeCompare(b.reactionType, 'en');
 };
-export var useProcessReactions = function (params) {
-    var _a;
-    var propOwnReactions = params.own_reactions, propReactionGroups = params.reaction_groups, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
-    var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
-    var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
-    var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
-    var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
-    var latestReactions = propReactions || 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 isOwnReaction = useCallback(function (reactionType) { var _a; return (_a = ownReactions === null || ownReactions === void 0 ? void 0 : ownReactions.some(function (reaction) { return reaction.type === reactionType; })) !== null && _a !== void 0 ? _a : false; }, [ownReactions]);
-    var getEmojiByReactionType = useCallback(function (reactionType) { var _a, _b; return (_b = (_a = reactionOptions.find(function (_a) {
-        var type = _a.type;
-        return type === reactionType;
-    })) === null || _a === void 0 ? void 0 : _a.Component) !== null && _b !== void 0 ? _b : null; }, [reactionOptions]);
-    var isSupportedReaction = useCallback(function (reactionType) {
-        return reactionOptions.some(function (reactionOption) { return reactionOption.type === reactionType; });
-    }, [reactionOptions]);
-    var getLatestReactedUserNames = useCallback(function (reactionType) {
-        var _a;
-        return (_a = latestReactions === null || latestReactions === void 0 ? void 0 : latestReactions.flatMap(function (reaction) {
-            var _a, _b;
-            if (reactionType && reactionType === reaction.type) {
-                var username = ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = reaction.user) === null || _b === void 0 ? void 0 : _b.id);
-                return username ? [username] : [];
-            }
-            return [];
-        })) !== null && _a !== void 0 ? _a : [];
-    }, [latestReactions]);
-    var existingReactions = useMemo(function () {
+export const useProcessReactions = (params) => {
+    const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reactions: propReactions, sortReactions: propSortReactions, } = params;
+    const { message, sortReactions: contextSortReactions } = useMessageContext('useProcessReactions');
+    const { reactionOptions: contextReactionOptions } = useComponentContext('useProcessReactions');
+    const reactionOptions = propReactionOptions ?? contextReactionOptions;
+    const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
+    const latestReactions = propReactions || message.latest_reactions;
+    const ownReactions = propOwnReactions || message?.own_reactions;
+    const reactionGroups = propReactionGroups || message?.reaction_groups;
+    const isOwnReaction = useCallback((reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false, [ownReactions]);
+    const getEmojiByReactionType = useCallback((reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null, [reactionOptions]);
+    const isSupportedReaction = useCallback((reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType), [reactionOptions]);
+    const getLatestReactedUserNames = useCallback((reactionType) => latestReactions?.flatMap((reaction) => {
+        if (reactionType && reactionType === reaction.type) {
+            const username = reaction.user?.name || reaction.user?.id;
+            return username ? [username] : [];
+        }
+        return [];
+    }) ?? [], [latestReactions]);
+    const existingReactions = useMemo(() => {
         if (!reactionGroups) {
             return [];
         }
-        var unsortedReactions = Object.entries(reactionGroups).flatMap(function (_a) {
-            var reactionType = _a[0], _b = _a[1], count = _b.count, first_reaction_at = _b.first_reaction_at, last_reaction_at = _b.last_reaction_at;
+        const unsortedReactions = Object.entries(reactionGroups).flatMap(([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
             if (count === 0 || !isSupportedReaction(reactionType)) {
                 return [];
             }
-            var latestReactedUserNames = getLatestReactedUserNames(reactionType);
+            const latestReactedUserNames = getLatestReactedUserNames(reactionType);
             return [
                 {
                     EmojiComponent: getEmojiByReactionType(reactionType),
                     firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
                     isOwnReaction: isOwnReaction(reactionType),
                     lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
-                    latestReactedUserNames: latestReactedUserNames,
+                    latestReactedUserNames,
                     reactionCount: count,
-                    reactionType: reactionType,
+                    reactionType,
                     unlistedReactedUserCount: count - latestReactedUserNames.length,
                 },
             ];
@@ -67,14 +56,11 @@ export var useProcessReactions = function (params) {
         reactionGroups,
         sortReactions,
     ]);
-    var hasReactions = existingReactions.length > 0;
-    var totalReactionCount = useMemo(function () { return existingReactions.reduce(function (total, _a) {
-        var reactionCount = _a.reactionCount;
-        return total + reactionCount;
-    }, 0); }, [existingReactions]);
+    const hasReactions = existingReactions.length > 0;
+    const totalReactionCount = useMemo(() => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0), [existingReactions]);
     return {
-        existingReactions: existingReactions,
-        hasReactions: hasReactions,
-        totalReactionCount: totalReactionCount,
+        existingReactions,
+        hasReactions,
+        totalReactionCount,
     };
 };

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

@@ -4,4 +4,3 @@ export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';
 export * from './reactionOptions';
-//# sourceMappingURL=index.d.ts.map

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

@@ -5,4 +5,3 @@ export type ReactionOptions = Array<{
     name?: string;
 }>;
 export declare const defaultReactionOptions: ReactionOptions;
-//# sourceMappingURL=reactionOptions.d.ts.map

package/dist/components/Reactions/reactionOptions.js

@@ -2,10 +2,10 @@
 /* eslint-disable react/display-name */
 import React from 'react';
 import { StreamEmoji } from './StreamEmoji';
-export var defaultReactionOptions = [
-    { type: 'haha', Component: function () { return React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }); }, name: 'Joy' },
-    { type: 'like', Component: function () { return React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }); }, name: 'Thumbs up' },
-    { type: 'love', Component: function () { return React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }); }, name: 'Heart' },
-    { type: 'sad', Component: function () { return React.createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }); }, name: 'Sad' },
-    { type: 'wow', Component: function () { return React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }); }, name: 'Astonished' },
+export const defaultReactionOptions = [
+    { type: 'haha', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }), name: 'Joy' },
+    { type: 'like', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }), name: 'Thumbs up' },
+    { type: 'love', Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }), name: 'Heart' },
+    { type: 'sad', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }), name: 'Sad' },
+    { type: 'wow', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }), name: 'Astonished' },
 ];

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

@@ -14,4 +14,3 @@ export interface ReactionSummary {
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
 export type ReactionDetailsComparator<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> = (a: ReactionResponse<StreamChatGenerics>, b: ReactionResponse<StreamChatGenerics>) => number;
 export type ReactionType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ReactionResponse<StreamChatGenerics>['type'];
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,4 +1,3 @@
 import { ForwardedRef, MutableRefObject } from 'react';
-export declare const isMutableRef: <T>(ref: ForwardedRef<T>) => ref is MutableRefObject<T>;
+export declare const isMutableRef: <T>(ref: ForwardedRef<T> | null) => ref is MutableRefObject<T>;
 export declare const getImageDimensions: (source: string) => Promise<[number, number]>;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/Reactions/utils/utils.js

@@ -1,18 +1,16 @@
-export var isMutableRef = function (ref) {
+export const isMutableRef = (ref) => {
     if (ref) {
         return ref.current !== undefined;
     }
     return false;
 };
-export var getImageDimensions = function (source) {
-    return new Promise(function (resolve, reject) {
-        var image = new Image();
-        image.addEventListener('load', function () {
-            resolve([image.width, image.height]);
-        }, { once: true });
-        image.addEventListener('error', function () { return reject("Couldn't load image from ".concat(source)); }, {
-            once: true,
-        });
-        image.src = source;
+export const getImageDimensions = (source) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => {
+        resolve([image.width, image.height]);
+    }, { once: true });
+    image.addEventListener('error', () => reject(`Couldn't load image from ${source}`), {
+        once: true,
     });
-};
+    image.src = source;
+});

package/dist/components/SafeAnchor/SafeAnchor.d.ts

@@ -15,4 +15,3 @@ export type SafeAnchorProps = {
     target?: string;
 };
 export declare const SafeAnchor: (props: PropsWithChildren<SafeAnchorProps>) => React.JSX.Element | null;
-//# sourceMappingURL=SafeAnchor.d.ts.map

package/dist/components/SafeAnchor/SafeAnchor.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { useTranslationContext } from '../../context';
-var UnMemoizedSafeAnchor = function (props) {
-    var children = props.children, className = props.className, download = props.download, href = props.href, rel = props.rel, target = props.target;
-    var t = useTranslationContext('SafeAnchor').t;
+const UnMemoizedSafeAnchor = (props) => {
+    const { children, className, download, href, rel, target } = props;
+    const { t } = useTranslationContext('SafeAnchor');
     if (!href)
         return null;
-    var sanitized = sanitizeUrl(href);
+    const sanitized = sanitizeUrl(href);
     return (React.createElement("a", { "aria-label": t('aria/Attachment'), className: className, download: download, href: sanitized, rel: rel, target: target }, children));
 };
-export var SafeAnchor = React.memo(UnMemoizedSafeAnchor);
+export const SafeAnchor = React.memo(UnMemoizedSafeAnchor);

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

@@ -1,2 +1 @@
 export * from './SafeAnchor';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Thread/Thread.d.ts

@@ -32,4 +32,3 @@ export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
  * The Thread component renders a parent Message with a list of replies
  */
 export declare const Thread: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: ThreadProps<StreamChatGenerics, V>) => React.JSX.Element | null;
-//# sourceMappingURL=Thread.d.ts.map