stream-chat-react 11.1.1 → 11.2.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icons = require('./icons-a35a8ee7.js');
+var icons = require('./icons-b84cd102.js');
 var React = require('react');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
@@ -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
@@ -36210,22 +36248,27 @@ var moveChannelUp = function (_a) {
     return uniqBy__default["default"](icons.__spreadArray([channel], channels, true), 'cid');
 };
 
-var useMessageNewListener = function (setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
+var useMessageNewListener = function (setChannels, customHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
     if (lockChannelOrder === void 0) { lockChannelOrder = false; }
     if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
     var client = icons.useChatContext('useMessageNewListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
-            setChannels(function (channels) {
-                var channelInList = channels.filter(function (channel) { return channel.cid === event.cid; }).length > 0;
-                if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
-                    var channel = client.channel(event.channel_type, event.channel_id);
-                    return uniqBy__default["default"](icons.__spreadArray([channel], channels, true), 'cid');
-                }
-                if (!lockChannelOrder)
-                    return moveChannelUp({ channels: channels, cid: event.cid || '' });
-                return channels;
-            });
+            if (customHandler && typeof customHandler === 'function') {
+                customHandler(setChannels, event);
+            }
+            else {
+                setChannels(function (channels) {
+                    var channelInList = channels.filter(function (channel) { return channel.cid === event.cid; }).length > 0;
+                    if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
+                        var channel = client.channel(event.channel_type, event.channel_id);
+                        return uniqBy__default["default"](icons.__spreadArray([channel], channels, true), 'cid');
+                    }
+                    if (!lockChannelOrder)
+                        return moveChannelUp({ channels: channels, cid: event.cid || '' });
+                    return channels;
+                });
+            }
         };
         client.on('message.new', handleEvent);
         return function () {
@@ -37063,7 +37106,7 @@ var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
     var _a, _b;
-    var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
+    var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onMessageNewHandler = props.onMessageNewHandler, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
     var _q = icons.useChatContext('ChannelList'), channel = _q.channel, channelsQueryState = _q.channelsQueryState, client = _q.client, closeMobileNav = _q.closeMobileNav, customClasses = _q.customClasses, _r = _q.navOpen, navOpen = _r === void 0 ? false : _r, setActiveChannel = _q.setActiveChannel, theme = _q.theme, useImageFlagEmojisOnWindows = _q.useImageFlagEmojisOnWindows;
     var channelListRef = React.useRef(null);
     var _s = React.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
@@ -37130,7 +37173,7 @@ var UnMemoizedChannelList = function (props) {
     var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
-    useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
+    useMessageNewListener(setChannels, onMessageNewHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
     useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
     useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
     useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
@@ -37186,7 +37229,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.1.1';
+var version = '11.2.0';
 
 var useChat = function (_a) {
     var _b, _c;

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.1";
+export declare const version = "11.2.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.1.1';
+export var version = '11.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.1.1",
+  "version": "11.2.0",
   "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",