stream-chat-react 11.1.0 → 11.1.2

package/dist/index.cjs.js

@@ -296,6 +296,15 @@ var Modal = function (_a) {
         React__default["default"].createElement("div", { className: 'str-chat__modal__inner str-chat-react__modal__inner', ref: innerRef }, children)));
 };
 
+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 = icons.useTranslationContext('ModalGallery').t;
@@ -309,7 +318,7 @@ var ModalGallery = function (props) {
             };
         });
     }, [images]);
-    return (React__default["default"].createElement(ImageGallery__default["default"], { items: formattedArray, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+    return (React__default["default"].createElement(ImageGallery__default["default"], { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };
 
 var UnMemoizedGallery = function (props) {
@@ -31289,6 +31298,7 @@ class ReactTextareaAutocomplete extends React__default["default"].Component {
       currentTrigger: null,
       data: null,
       dataLoading: false,
+      isComposing: false,
       left: null,
       selectionEnd: 0,
       selectionStart: 0,
@@ -31339,22 +31349,23 @@ class ReactTextareaAutocomplete extends React__default["default"].Component {
       SuggestionItem,
       SuggestionList = List
     } = 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__default["default"]({
-        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__default["default"]({
+      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 {
@@ -31408,6 +31419,14 @@ class ReactTextareaAutocomplete extends React__default["default"].Component {
         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);
@@ -32611,19 +32630,22 @@ var FilePreviewItem = function (_a) {
 };
 
 var CooldownTimer = function (_a) {
-    var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-    var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+    var cooldownInterval = _a.cooldownInterval;
+    var _b = React.useState(), seconds = _b[0], setSeconds = _b[1];
     React.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.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));
 };
 
@@ -33353,11 +33375,20 @@ var useCooldownTimer = function () {
             ? // 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,
@@ -35276,9 +35307,9 @@ var ChannelInner = function (props) {
     var markReadThrottled = throttle__default["default"](markRead, 500, { leading: true, trailing: true });
     var handleEvent = function (event) { return icons.__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 icons.__generator(this, function (_m) {
-            switch (_m.label) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return icons.__generator(this, function (_k) {
+            switch (_k.label) {
                 case 0:
                     if (event.message) {
                         dispatch({
@@ -35300,7 +35331,7 @@ var ChannelInner = function (props) {
                         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();
                             }
@@ -35314,9 +35345,9 @@ var ChannelInner = function (props) {
                                 }
                             }
                         }
-                        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] ||
@@ -35326,7 +35357,7 @@ var ChannelInner = function (props) {
                         }
                     }
                     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.
                      */
@@ -35340,8 +35371,8 @@ var ChannelInner = function (props) {
                      * 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*/];
@@ -35403,6 +35434,13 @@ var ChannelInner = function (props) {
                                 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
@@ -37186,7 +37224,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.1.0';
+var version = '11.1.2';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -38756,11 +38794,14 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
     };
 }
 
-var STATUSES_EXCLUDED_FROM_PREPEND = ['sending', 'failed'];
+var STATUSES_EXCLUDED_FROM_PREPEND = {
+    failed: true,
+    sending: true,
+};
 function usePrependedMessagesCount(messages, hasDateSeparator) {
     var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    var firstMessageId = React.useRef();
-    var earliestMessageId = React.useRef();
+    var firstMessageOnFirstLoadedPage = React.useRef();
+    var previousFirstMessageOnFirstLoadedPage = React.useRef();
     var previousNumItemsPrepended = React.useRef(0);
     var numItemsPrepended = React.useMemo(function () {
         var _a, _b;
@@ -38768,47 +38809,43 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
             previousNumItemsPrepended.current = 0;
             return 0;
         }
-        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
-        // if no new messages were prepended, return early (same amount as before)
-        if (currentFirstMessageId === earliestMessageId.current) {
+        var currentFirstMessage = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex];
+        var noNewMessages = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.id) === ((_a = previousFirstMessageOnFirstLoadedPage.current) === null || _a === void 0 ? void 0 : _a.id);
+        // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)
+        // Optimistic UI update, when sending messages, can lead to a situation, when
+        // the order of the messages changes for a moment. This can happen, when a user
+        // sends multiple messages withing few milliseconds. E.g. we send a message A
+        // then message B. At first we have message array with both messages of status "sending"
+        // then response for message A is received with a new - later - created_at timestamp
+        // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageOnFirstLoadedPage.current
+        // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
+        // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
+        // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
+        // not considered as prepended messages.
+        var firstMsgMovedAfterMessagesInExcludedStatus = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.status) && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status];
+        if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
             return previousNumItemsPrepended.current;
         }
-        if (!firstMessageId.current) {
-            firstMessageId.current = currentFirstMessageId;
+        if (!firstMessageOnFirstLoadedPage.current) {
+            firstMessageOnFirstLoadedPage.current = currentFirstMessage;
         }
-        earliestMessageId.current = currentFirstMessageId;
+        previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;
         // if new messages were prepended, find out how many
         // start with this number because there cannot be fewer prepended items than before
-        var adjustPrependedMessageCount = 0;
-        for (var i = previousNumItemsPrepended.current; i < messages.length; i += 1) {
-            // Optimistic UI update, when sending messages, can lead to a situation, when
-            // the order of the messages changes for a moment. This can happen, when a user
-            // sends multiple messages withing few milliseconds. E.g. we send a message A
-            // then message B. At first we have message array with both messages of status "sending"
-            // then response for message A is received with a new - later - created_at timestamp
-            // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageId.current
-            // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
-            // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
-            // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
-            // not considered as prepended messages.
-            if (((_b = messages[i]) === null || _b === void 0 ? void 0 : _b.status) &&
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                STATUSES_EXCLUDED_FROM_PREPEND.includes(messages[i].status) &&
-                messages[i].id !== firstMessageId.current) {
-                adjustPrependedMessageCount++;
-            }
-            if (messages[i].id === firstMessageId.current) {
-                previousNumItemsPrepended.current = i - adjustPrependedMessageCount;
-                return previousNumItemsPrepended.current;
+        for (var prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) {
+            var messageIsFirstOnFirstLoadedPage = messages[prependedMessageCount].id === ((_b = firstMessageOnFirstLoadedPage.current) === null || _b === void 0 ? void 0 : _b.id);
+            if (messageIsFirstOnFirstLoadedPage) {
+                previousNumItemsPrepended.current = prependedMessageCount;
+                return prependedMessageCount;
             }
         }
         // if no match has found, we have jumped - reset the prepended item count.
-        firstMessageId.current = currentFirstMessageId;
+        firstMessageOnFirstLoadedPage.current = currentFirstMessage;
         previousNumItemsPrepended.current = 0;
         return 0;
         // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
         // that's why the second dependency is necessary
-    }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
+    }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return numItemsPrepended;
 }
 

package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss

@@ -191,6 +191,7 @@
       .str-chat__gallery-image {
         padding: 0;
         margin: 0;
+        position: relative;
 
         img {
           width: 100%;

package/dist/scss/v2/vendor/react-image-gallery.scss

@@ -127,6 +127,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   @include vendor-prefix('user-select', none);
   -webkit-tap-highlight-color: $ig-transparent;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &.fullscreen-modal {
     background: $ig-black;
@@ -151,6 +154,22 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   line-height: 0;
   top: 0;
 
+  .image-gallery-slide {
+    background-color: var(--str-chat__secondary-surface-color);
+
+    .str-chat__base-image--load-failed {
+      height: var(--str-chat__attachment-max-width);
+      width: var(--str-chat__attachment-max-width);
+      font-size: 0;
+    }
+
+    .str-chat__message-attachment-file--item-download {
+      position: absolute;
+      left: 0.375rem;
+      top: 0.375rem;
+    }
+  }
+
   &.fullscreen {
     background: $ig-black;
 

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.1.0";
+export declare const version = "11.1.2";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.1.0';
+export var version = '11.1.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.1.0",
+  "version": "11.1.2",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -142,7 +142,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.1.0",
+    "@stream-io/stream-chat-css": "^4.2.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",