stream-chat-react 10.10.1 → 10.11.0

package/dist/index.cjs.js

@@ -14,6 +14,8 @@ var i18n = require('i18next');
 var updateLocale = require('dayjs/plugin/updateLocale');
 var localeData = require('dayjs/plugin/localeData');
 var relativeTime = require('dayjs/plugin/relativeTime');
+var utc = require('dayjs/plugin/utc');
+var timezone = require('dayjs/plugin/timezone');
 require('dayjs/locale/de');
 require('dayjs/locale/es');
 require('dayjs/locale/fr');
@@ -88,6 +90,8 @@ var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var updateLocale__default = /*#__PURE__*/_interopDefaultLegacy(updateLocale);
 var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
 var relativeTime__default = /*#__PURE__*/_interopDefaultLegacy(relativeTime);
+var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
+var timezone__default = /*#__PURE__*/_interopDefaultLegacy(timezone);
 var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
@@ -609,6 +613,8 @@ var Cancel="İptal";var Close="Kapat";var Delete="Sil";var Delivered="İletildi"
 var defaultNS = 'translation';
 var defaultLng = 'en';
 Dayjs__default["default"].extend(updateLocale__default["default"]);
+Dayjs__default["default"].extend(utc__default["default"]);
+Dayjs__default["default"].extend(timezone__default["default"]);
 Dayjs__default["default"].updateLocale('de', {
     calendar: {
         lastDay: '[gestern um] LT',
@@ -777,6 +783,9 @@ var en_locale = {
 var isDayJs = function (dateTimeParser) {
     return dateTimeParser.extend !== undefined;
 };
+var supportsTz = function (dateTimeParser) {
+    return dateTimeParser.tz !== undefined;
+};
 /**
  * Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.
  * Instance of this class should be provided to Chat component to handle translations.
@@ -1020,6 +1029,7 @@ var Streami18n = /** @class */ (function () {
         this.logger = finalOptions.logger;
         this.currentLanguage = finalOptions.language;
         this.DateTimeParser = finalOptions.DateTimeParser;
+        this.timezone = finalOptions.timezone;
         try {
             if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {
                 this.DateTimeParser.extend(LocalizedFormat__default["default"]);
@@ -1069,19 +1079,18 @@ var Streami18n = /** @class */ (function () {
                 "register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)");
         }
         this.tDateTimeParser = function (timestamp) {
-            if (finalOptions.disableDateTimeTranslations || !_this.localeExists(_this.currentLanguage)) {
-                /**
-                 * TS needs to know which is being called to accept the chain call
-                 */
-                if (isDayJs(_this.DateTimeParser)) {
-                    return _this.DateTimeParser(timestamp).locale(defaultLng);
-                }
-                return _this.DateTimeParser(timestamp).locale(defaultLng);
-            }
+            var language = finalOptions.disableDateTimeTranslations || !_this.localeExists(_this.currentLanguage)
+                ? defaultLng
+                : _this.currentLanguage;
             if (isDayJs(_this.DateTimeParser)) {
-                return _this.DateTimeParser(timestamp).locale(_this.currentLanguage);
+                return supportsTz(_this.DateTimeParser)
+                    ? _this.DateTimeParser(timestamp).tz(_this.timezone).locale(language)
+                    : _this.DateTimeParser(timestamp).locale(language);
+            }
+            if (supportsTz(_this.DateTimeParser) && _this.timezone) {
+                return _this.DateTimeParser(timestamp).tz(_this.timezone).locale(language);
             }
-            return _this.DateTimeParser(timestamp).locale(_this.currentLanguage);
+            return _this.DateTimeParser(timestamp).locale(language);
         };
     }
     /**
@@ -30422,7 +30431,7 @@ var CooldownTimer = function (_a) {
         }, 1000);
         return function () { return clearInterval(countdownInterval); };
     });
-    return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+    return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
 };
 
 var useCommandTrigger = function () {
@@ -31138,9 +31147,12 @@ var useCooldownTimer = function () {
     }, [messages, (_a = client.user) === null || _a === void 0 ? void 0 : _a.id, latestMessageDatesByChannels, channel.cid]);
     React.useEffect(function () {
         var timeSinceOwnLastMessage = ownLatestMessageDate
-            ? (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000
+            ? // prevent negative values
+                Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
             : undefined;
-        setCooldownRemaining(!skipCooldown && timeSinceOwnLastMessage && cooldownInterval > timeSinceOwnLastMessage
+        setCooldownRemaining(!skipCooldown &&
+            typeof timeSinceOwnLastMessage !== 'undefined' &&
+            cooldownInterval > timeSinceOwnLastMessage
             ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
             : 0);
     }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
@@ -32575,6 +32587,13 @@ var MessageSimpleWithContext = function (props) {
     if (message.deleted_at || message.type === 'deleted') {
         return React__default["default"].createElement(MessageDeleted$1, { message: message });
     }
+    /** FIXME: isReactionEnabled should be removed with next major version and a proper centralized permissions logic should be put in place
+     * With the current permissions implementation it would be sth like:
+     * const messageActions = getMessageActions();
+     * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
+     */
+    var canReact = isReactionEnabled;
+    var canShowReactions = hasReactions;
     var showMetadata = !groupedByUser || endOfGroup;
     var showReplyCountButton = !threadList && !!message.reply_count;
     var allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
@@ -32584,7 +32603,7 @@ var MessageSimpleWithContext = function (props) {
         'pinned-message': message.pinned,
         'str-chat__message--has-attachment': hasAttachment,
         'str-chat__message--highlighted': highlighted,
-        'str-chat__message--with-reactions str-chat__message-with-thread-link': hasReactions && isReactionEnabled,
+        'str-chat__message--with-reactions str-chat__message-with-thread-link': canShowReactions,
         'str-chat__message-send-can-be-retried': (message === null || message === void 0 ? void 0 : message.status) === 'failed' && (message === null || message === void 0 ? void 0 : message.errorStatusCode) !== 403,
         'str-chat__virtual-message__wrapper--end': endOfGroup,
         'str-chat__virtual-message__wrapper--first': firstOfGroup,
@@ -32601,8 +32620,8 @@ var MessageSimpleWithContext = function (props) {
                 }), "data-testid": 'message-inner', onClick: allowRetry ? function () { return handleRetry(message); } : undefined, onKeyUp: allowRetry ? function () { return handleRetry(message); } : undefined },
                 React__default["default"].createElement(MessageOptions$1, null),
                 React__default["default"].createElement("div", { className: 'str-chat__message-reactions-host' },
-                    hasReactions && isReactionEnabled && React__default["default"].createElement(ReactionsList$1, { reverse: true }),
-                    showDetailedReactions && isReactionEnabled && (React__default["default"].createElement(ReactionSelector$1, { ref: reactionSelectorRef }))),
+                    canShowReactions && React__default["default"].createElement(ReactionsList$1, { reverse: true }),
+                    showDetailedReactions && canReact && React__default["default"].createElement(ReactionSelector$1, { ref: reactionSelectorRef })),
                 React__default["default"].createElement("div", { className: 'str-chat__message-bubble' },
                     ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) && !message.quoted_message ? (React__default["default"].createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                     React__default["default"].createElement(MessageText, { message: message, renderText: renderText }),
@@ -32883,6 +32902,64 @@ var makeAddNotifications = function (setNotifications, notificationTimeouts) { r
     notificationTimeouts.push(timeout);
 }; };
 
+/**
+ * prevent from duplicate invocation of channel.watch()
+ * when events 'notification.message_new' and 'notification.added_to_channel' arrive at the same time
+ */
+var WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL = {};
+/**
+ * Calls channel.watch() if it was not already recently called. Waits for watch promise to resolve even if it was invoked previously.
+ * @param client
+ * @param members
+ * @param type
+ * @param id
+ * @param channel
+ */
+var getChannel = function (_a) {
+    var channel = _a.channel, client = _a.client, id = _a.id, members = _a.members, type = _a.type;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var theChannel, originalCid, queryPromise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!channel && !type) {
+                        throw new Error('Channel or channel type have to be provided to query a channel.');
+                    }
+                    theChannel = channel || client.channel(type, id, { members: members });
+                    originalCid = (theChannel === null || theChannel === void 0 ? void 0 : theChannel.id)
+                        ? theChannel.cid
+                        : members && members.length
+                            ? generateChannelTempCid(theChannel.type, members)
+                            : undefined;
+                    if (!originalCid) {
+                        throw new Error('Channel ID or channel members array have to be provided to query a channel.');
+                    }
+                    queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
+                    if (!queryPromise) return [3 /*break*/, 2];
+                    return [4 /*yield*/, queryPromise];
+                case 1:
+                    _b.sent();
+                    return [3 /*break*/, 4];
+                case 2:
+                    WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid] = theChannel.watch();
+                    return [4 /*yield*/, WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid]];
+                case 3:
+                    _b.sent();
+                    delete WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
+                    _b.label = 4;
+                case 4: return [2 /*return*/, theChannel];
+            }
+        });
+    });
+};
+// Channels created without ID need to be referenced by an identifier until the back-end generates the final ID.
+var generateChannelTempCid = function (channelType, members) {
+    if (!members)
+        return;
+    var membersStr = __spreadArray([], members, true).sort().join(',');
+    return "".concat(channelType, ":!members-").concat(membersStr);
+};
+
 var useChannelContainerClasses = function (_a) {
     var _b, _c, _d;
     var customClasses = _a.customClasses;
@@ -33125,22 +33202,40 @@ var ChannelInner = function (props) {
                 markRead();
         };
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var config, e_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var members, _i, _a, member, userId, _b, user, user_id, config, e_1;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         if (!!channel.initialized) return [3 /*break*/, 4];
-                        _a.label = 1;
+                        _d.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, channel.watch()];
+                        _d.trys.push([1, 3, , 4]);
+                        members = [];
+                        if (!channel.id && ((_c = channel.data) === null || _c === void 0 ? void 0 : _c.members)) {
+                            for (_i = 0, _a = channel.data.members; _i < _a.length; _i++) {
+                                member = _a[_i];
+                                userId = void 0;
+                                if (typeof member === 'string') {
+                                    userId = member;
+                                }
+                                else if (typeof member === 'object') {
+                                    _b = member, user = _b.user, user_id = _b.user_id;
+                                    userId = user_id || (user === null || user === void 0 ? void 0 : user.id);
+                                }
+                                if (userId) {
+                                    members.push(userId);
+                                }
+                            }
+                        }
+                        return [4 /*yield*/, getChannel({ channel: channel, client: client, members: members })];
                     case 2:
-                        _a.sent();
+                        _d.sent();
                         config = channel.getConfig();
                         setChannelConfig(config);
                         return [3 /*break*/, 4];
                     case 3:
-                        e_1 = _a.sent();
+                        e_1 = _d.sent();
                         dispatch({ error: e_1, type: 'setError' });
                         errored = true;
                         return [3 /*break*/, 4];
@@ -33872,52 +33967,6 @@ var useChannelUpdatedListener = function (setChannels, customHandler, forceUpdat
     }, [customHandler]);
 };
 
-/**
- * prevent from duplicate invocation of channel.watch()
- * when events 'notification.message_new' and 'notification.added_to_channel' arrive at the same time
- */
-var WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL = {};
-/**
- * Calls channel.watch() if it was not already recently called. Waits for watch promise to resolve even if it was invoked previously.
- * @param client
- * @param type
- * @param id
- */
-var getChannel = function (client, type, id) { return __awaiter(void 0, void 0, void 0, function () {
-    var channel, queryPromise;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                channel = client.channel(type, id);
-                queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid];
-                if (!queryPromise) return [3 /*break*/, 2];
-                return [4 /*yield*/, queryPromise];
-            case 1:
-                _a.sent();
-                return [3 /*break*/, 4];
-            case 2:
-                WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid] = channel.watch();
-                return [4 /*yield*/, WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid]];
-            case 3:
-                _a.sent();
-                WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid] = undefined;
-                _a.label = 4;
-            case 4: return [2 /*return*/, channel];
-        }
-    });
-}); };
-var MAX_QUERY_CHANNELS_LIMIT = 30;
-var moveChannelUp = function (_a) {
-    var activeChannel = _a.activeChannel, channels = _a.channels, cid = _a.cid;
-    // get index of channel to move up
-    var channelIndex = channels.findIndex(function (channel) { return channel.cid === cid; });
-    if (!activeChannel && channelIndex <= 0)
-        return channels;
-    // get channel to move up
-    var channel = activeChannel || channels[channelIndex];
-    return uniqBy__default["default"](__spreadArray([channel], channels, true), 'cid');
-};
-
 var useChannelVisibleListener = function (setChannels, customHandler) {
     var client = useChatContext('useChannelVisibleListener').client;
     React.useEffect(function () {
@@ -33931,7 +33980,11 @@ var useChannelVisibleListener = function (setChannels, customHandler) {
                         return [3 /*break*/, 3];
                     case 1:
                         if (!(event.type && event.channel_type && event.channel_id)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, getChannel(client, event.channel_type, event.channel_id)];
+                        return [4 /*yield*/, getChannel({
+                                client: client,
+                                id: event.channel_id,
+                                type: event.channel_type,
+                            })];
                     case 2:
                         channel_1 = _a.sent();
                         setChannels(function (channels) { return uniqBy__default["default"](__spreadArray([channel_1], channels, true), 'cid'); });
@@ -33962,6 +34015,18 @@ var useConnectionRecoveredListener = function (forceUpdate) {
     }, []);
 };
 
+var MAX_QUERY_CHANNELS_LIMIT = 30;
+var moveChannelUp = function (_a) {
+    var activeChannel = _a.activeChannel, channels = _a.channels, cid = _a.cid;
+    // get index of channel to move up
+    var channelIndex = channels.findIndex(function (channel) { return channel.cid === cid; });
+    if (!activeChannel && channelIndex <= 0)
+        return channels;
+    // get channel to move up
+    var channel = activeChannel || channels[channelIndex];
+    return uniqBy__default["default"](__spreadArray([channel], channels, true), 'cid');
+};
+
 var useMessageNewListener = function (setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
     if (lockChannelOrder === void 0) { lockChannelOrder = false; }
     if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
@@ -34009,20 +34074,32 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var channel_1;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         if (!(customHandler && typeof customHandler === 'function')) return [3 /*break*/, 1];
                         customHandler(setChannels, event);
                         return [3 /*break*/, 3];
                     case 1:
                         if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
-                        return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
+                        return [4 /*yield*/, getChannel({
+                                client: client,
+                                id: event.channel.id,
+                                members: (_b = event.channel.members) === null || _b === void 0 ? void 0 : _b.reduce(function (acc, _a) {
+                                    var user = _a.user, user_id = _a.user_id;
+                                    var userId = user_id || (user === null || user === void 0 ? void 0 : user.id);
+                                    if (userId) {
+                                        acc.push(userId);
+                                    }
+                                    return acc;
+                                }, []),
+                                type: event.channel.type,
+                            })];
                     case 2:
-                        channel_1 = _b.sent();
+                        channel_1 = _c.sent();
                         setChannels(function (channels) { return uniqBy__default["default"](__spreadArray([channel_1], channels, true), 'cid'); });
-                        _b.label = 3;
+                        _c.label = 3;
                     case 3: return [2 /*return*/];
                 }
             });
@@ -34049,7 +34126,11 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, al
                         return [3 /*break*/, 3];
                     case 1:
                         if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
-                        return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
+                        return [4 /*yield*/, getChannel({
+                                client: client,
+                                id: event.channel.id,
+                                type: event.channel.type,
+                            })];
                     case 2:
                         channel_1 = _b.sent();
                         setChannels(function (channels) { return uniqBy__default["default"](__spreadArray([channel_1], channels, true), 'cid'); });
@@ -34806,7 +34887,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.10.1';
+var version = '10.11.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -35458,7 +35539,7 @@ notifications) {
 var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments.\nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
 var useReactionHandler = function (message) {
     var updateMessage = useChannelActionContext('useReactionHandler').updateMessage;
-    var channel = useChannelStateContext('useReactionHandler').channel;
+    var _a = useChannelStateContext('useReactionHandler'), channel = _a.channel, channelCapabilities = _a.channelCapabilities;
     var client = useChatContext('useReactionHandler').client;
     var createMessagePreview = React.useCallback(function (add, reaction, message) {
         var _a, _b;
@@ -35482,7 +35563,7 @@ var useReactionHandler = function (message) {
             ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
         return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
     }, [client.user, client.userID]);
-    var creatReactionPreview = function (type) {
+    var createReactionPreview = function (type) {
         var _a;
         return ({
             message_id: message === null || message === void 0 ? void 0 : message.id,
@@ -35494,33 +35575,32 @@ var useReactionHandler = function (message) {
     };
     var toggleReaction = throttle__default["default"](function (id, type, add) { return __awaiter(void 0, void 0, void 0, function () {
         var newReaction, tempMessage, messageResponse, _a;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    if (!message || ((_b = channel.data) === null || _b === void 0 ? void 0 : _b.frozen))
+                    if (!message || !channelCapabilities['send-reaction'])
                         return [2 /*return*/];
-                    newReaction = creatReactionPreview(type);
+                    newReaction = createReactionPreview(type);
                     tempMessage = createMessagePreview(add, newReaction, message);
-                    _c.label = 1;
+                    _b.label = 1;
                 case 1:
-                    _c.trys.push([1, 6, , 7]);
+                    _b.trys.push([1, 6, , 7]);
                     updateMessage(tempMessage);
                     if (!add) return [3 /*break*/, 3];
                     return [4 /*yield*/, channel.sendReaction(id, { type: type })];
                 case 2:
-                    _a = _c.sent();
+                    _a = _b.sent();
                     return [3 /*break*/, 5];
                 case 3: return [4 /*yield*/, channel.deleteReaction(id, type)];
                 case 4:
-                    _a = _c.sent();
-                    _c.label = 5;
+                    _a = _b.sent();
+                    _b.label = 5;
                 case 5:
                     messageResponse = _a;
                     updateMessage(messageResponse.message);
                     return [3 /*break*/, 7];
                 case 6:
-                    _c.sent();
+                    _b.sent();
                     // revert to the original message if the API call fails
                     updateMessage(message);
                     return [3 /*break*/, 7];
@@ -35575,12 +35655,10 @@ var useReactionHandler = function (message) {
     }); };
 };
 var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef, closeReactionSelectorOnClick) {
-    var _a;
-    var _b = useChannelStateContext('useReactionClick'), channel = _b.channel, _c = _b.channelCapabilities, channelCapabilities = _c === void 0 ? {} : _c, channelConfig = _b.channelConfig;
-    var _d = React.useState(false), showDetailedReactions = _d[0], setShowDetailedReactions = _d[1];
+    var _a = useChannelStateContext('useReactionClick').channelCapabilities, channelCapabilities = _a === void 0 ? {} : _a;
+    var _b = React.useState(false), showDetailedReactions = _b[0], setShowDetailedReactions = _b[1];
     var hasListener = React.useRef(false);
-    var isFrozen = !!((_a = channel.data) === null || _a === void 0 ? void 0 : _a.frozen);
-    var isReactionEnabled = ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction']) || isFrozen;
+    var isReactionEnabled = channelCapabilities['send-reaction'];
     var messageDeleted = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
     var closeDetailedReactions = React.useCallback(function (event) {
         var _a;
@@ -35628,9 +35706,8 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         }
     }, [messageDeleted, closeDetailedReactions, messageWrapperRef]);
     var onReactionListClick = function (event) {
-        if (event === null || event === void 0 ? void 0 : event.stopPropagation) {
-            event.stopPropagation();
-        }
+        var _a;
+        (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
         setShowDetailedReactions(function (prev) { return !prev; });
     };
     return {