stream-chat-react 11.1.1 → 11.1.2

package/dist/browser.full-bundle.js

@@ -10007,7 +10007,16 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     var ImageGallery = /*@__PURE__*/getDefaultExportFromCjs(imageGallery.exports);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ModalGallery = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var onError = function (e) {
+        // Prevent having alt attribute on img as the img takes the height of the alt text
+        // instead of the CSS / element width & height when the CSS mask (fallback) is applied.
+        e.target.alt = '';
+    };
+    var renderItem = function (_a) {
+        var original = _a.original, originalAlt = _a.originalAlt;
+        return (React__default["default"].createElement(BaseImage, { alt: originalAlt, className: 'image-gallery-image', onError: onError, src: original }));
+    };
+    var ModalGallery = function (props) {
         var images = props.images, index = props.index;
         var t = useTranslationContext('ModalGallery').t;
         var formattedArray = React$2.useMemo(function () {
@@ -10020,7 +10029,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 };
             });
         }, [images]);
-        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedGallery = function (props) {
@@ -43590,6 +43599,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           currentTrigger: null,
           data: null,
           dataLoading: false,
+          isComposing: false,
           left: null,
           selectionEnd: 0,
           selectionStart: 0,
@@ -43640,22 +43650,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           SuggestionItem,
           SuggestionList = List$1
         } = this.props;
+        const {
+          isComposing
+        } = this.state;
         const triggerProps = this.getTriggerProps();
-        if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
-            ref: this.setDropdownRef,
-            style: dropdownStyle
-          }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
-            className: clsx('str-chat__suggestion-list', listClassName),
-            dropdownScroll: this._dropdownScroll,
-            itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
-            itemStyle: itemStyle,
-            onSelect: this._onSelect,
-            SuggestionItem: SuggestionItem
-          }, triggerProps)));
-        }
-        return null;
+        if (isComposing || !triggerProps.values || !triggerProps.currentTrigger || disableMentions && triggerProps.currentTrigger === '@') return null;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
+          ref: this.setDropdownRef,
+          style: dropdownStyle
+        }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
+          className: clsx('str-chat__suggestion-list', listClassName),
+          dropdownScroll: this._dropdownScroll,
+          itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
+          itemStyle: itemStyle,
+          onSelect: this._onSelect,
+          SuggestionItem: SuggestionItem
+        }, triggerProps)));
       }
       render() {
         const {
@@ -43709,6 +43720,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             this._onClickAndBlurHandler(e);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
           },
+          onCompositionEnd: () => this.setState(pv => ({
+            ...pv,
+            isComposing: false
+          })),
+          onCompositionStart: () => this.setState(pv => ({
+            ...pv,
+            isComposing: true
+          })),
           onFocus: e => {
             var _this$props$onFocus, _this$props;
             (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
@@ -47788,19 +47807,22 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
-        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-        var _b = React$2.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+        var cooldownInterval = _a.cooldownInterval;
+        var _b = React$2.useState(), seconds = _b[0], setSeconds = _b[1];
         React$2.useEffect(function () {
-            var countdownInterval = setInterval(function () {
-                if (seconds > 0) {
+            var countdownTimeout;
+            if (typeof seconds === 'number' && seconds > 0) {
+                countdownTimeout = setTimeout(function () {
                     setSeconds(seconds - 1);
-                }
-                else {
-                    setCooldownRemaining(0);
-                }
-            }, 1000);
-            return function () { return clearInterval(countdownInterval); };
-        });
+                }, 1000);
+            }
+            return function () {
+                clearTimeout(countdownTimeout);
+            };
+        }, [seconds]);
+        React$2.useEffect(function () {
+            setSeconds(cooldownInterval !== null && cooldownInterval !== void 0 ? cooldownInterval : 0);
+        }, [cooldownInterval]);
         return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
     };
 
@@ -48530,11 +48552,20 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 ? // prevent negative values
                     Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
                 : undefined;
-            setCooldownRemaining(!skipCooldown &&
+            var remaining = !skipCooldown &&
                 typeof timeSinceOwnLastMessage !== 'undefined' &&
                 cooldownInterval > timeSinceOwnLastMessage
                 ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
-                : 0);
+                : 0;
+            setCooldownRemaining(remaining);
+            if (!remaining)
+                return;
+            var timeout = setTimeout(function () {
+                setCooldownRemaining(0);
+            }, remaining * 1000);
+            return function () {
+                clearTimeout(timeout);
+            };
         }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
         return {
             cooldownInterval: cooldownInterval,
@@ -50461,9 +50492,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var markReadThrottled = lodash_throttle(markRead, 500, { leading: true, trailing: true });
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var mainChannelUpdated, unread, messageDate, cid, oldestID;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return __generator(this, function (_m) {
-                switch (_m.label) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            return __generator(this, function (_k) {
+                switch (_k.label) {
                     case 0:
                         if (event.message) {
                             dispatch({
@@ -50485,7 +50516,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             if (((_a = event.message) === null || _a === void 0 ? void 0 : _a.parent_id) && !((_b = event.message) === null || _b === void 0 ? void 0 : _b.show_in_channel)) {
                                 mainChannelUpdated = false;
                             }
-                            if (mainChannelUpdated && ((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) !== client.userID) {
+                            if (mainChannelUpdated) {
                                 if (!document.hidden) {
                                     markReadThrottled();
                                 }
@@ -50499,9 +50530,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     }
                                 }
                             }
-                            if (((_f = (_e = event.message) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 : _f.id) === client.userID &&
-                                ((_g = event === null || event === void 0 ? void 0 : event.message) === null || _g === void 0 ? void 0 : _g.created_at) &&
-                                ((_h = event === null || event === void 0 ? void 0 : event.message) === null || _h === void 0 ? void 0 : _h.cid)) {
+                            if (((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) === client.userID &&
+                                ((_e = event === null || event === void 0 ? void 0 : event.message) === null || _e === void 0 ? void 0 : _e.created_at) &&
+                                ((_f = event === null || event === void 0 ? void 0 : event.message) === null || _f === void 0 ? void 0 : _f.cid)) {
                                 messageDate = new Date(event.message.created_at);
                                 cid = event.message.cid;
                                 if (!latestMessageDatesByChannels[cid] ||
@@ -50511,7 +50542,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             }
                         }
                         if (!(event.type === 'user.deleted')) return [3 /*break*/, 2];
-                        oldestID = (_l = (_k = (_j = channel.state) === null || _j === void 0 ? void 0 : _j.messages) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.id;
+                        oldestID = (_j = (_h = (_g = channel.state) === null || _g === void 0 ? void 0 : _g.messages) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.id;
                         /**
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
@@ -50525,8 +50556,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
                         // FIXME: we should use channelQueryOptions if they are available
-                        _m.sent();
-                        _m.label = 2;
+                        _k.sent();
+                        _k.label = 2;
                     case 2:
                         throttledCopyStateFromChannel();
                         return [2 /*return*/];
@@ -50588,6 +50619,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     hasMore: hasMoreMessagesProbably(channel.state.messages.length, (_e = (_d = channelQueryOptions === null || channelQueryOptions === void 0 ? void 0 : channelQueryOptions.messages) === null || _d === void 0 ? void 0 : _d.limit) !== null && _e !== void 0 ? _e : DEFAULT_INITIAL_CHANNEL_PAGE_SIZE),
                                     type: 'initStateFromChannel',
                                 });
+                                /**
+                                 * TODO: maybe pass last_read to the countUnread method to get proper value
+                                 * combined with channel.countUnread adjustment (_countMessageAsUnread)
+                                 * to allow counting own messages too
+                                 *
+                                 * const lastRead = channel.state.read[client.userID as string].last_read;
+                                 */
                                 if (channel.countUnread() > 0)
                                     markRead();
                                 // The more complex sync logic is done in Chat
@@ -52387,7 +52425,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.1.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.1.2';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;