stream-chat-react 10.5.0 → 10.7.0

package/dist/index.cjs.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var sanitizeUrl = require('@braintree/sanitize-url');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
+var sanitizeUrl = require('@braintree/sanitize-url');
 var DefaultEmojiIndex = require('emoji-mart/dist/utils/emoji-index/nimble-emoji-index.js');
 var Dayjs = require('dayjs');
 var calendar = require('dayjs/plugin/calendar');
@@ -1384,7 +1384,7 @@ var UnMemoizedGallery = function (props) {
             React__default["default"].createElement("p", null, t('{{ imageCount }} more', {
                 imageCount: images.length - countImagesDisplayedInPreview,
             })))) : (React__default["default"].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-            React__default["default"].createElement("img", __assign({ alt: 'User uploaded content', src: image.previewUrl || image.image_url || image.thumb_url, style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
+            React__default["default"].createElement("img", __assign({ alt: 'User uploaded content', src: sanitizeUrl.sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
     });
     var className = clsx('str-chat__gallery', {
         'str-chat__gallery--square': images.length > lastImageIndexInPreview,
@@ -1715,6 +1715,18 @@ var renderMedia = function (props) {
     });
 };
 
+var UnsupportedAttachment = function (_a) {
+    var _b;
+    var attachment = _a.attachment;
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement("div", null,
+            "Unsupported attachment type ",
+            React__default["default"].createElement("strong", null, (_b = attachment.type) !== null && _b !== void 0 ? _b : 'unknown')),
+        React__default["default"].createElement("code", null, JSON.stringify(attachment, null, 4)),
+        ";"));
+};
+var NullComponent = function () { return null; };
+
 var AttachmentWithinContainer = function (_a) {
     var _b;
     var _c;
@@ -1852,12 +1864,18 @@ var MediaContainer = function (props) {
             content,
             React__default["default"].createElement(AttachmentActionsContainer, __assign({}, props))))) : (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
 };
+var UnsupportedAttachmentContainer = function (_a) {
+    var attachment = _a.attachment, _b = _a.UnsupportedAttachment, UnsupportedAttachment = _b === void 0 ? NullComponent : _b;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(UnsupportedAttachment, { attachment: attachment })));
+};
 
 var CONTAINER_MAP = {
     audio: AudioContainer,
     card: CardContainer,
     file: FileContainer,
     media: MediaContainer,
+    unsupported: UnsupportedAttachmentContainer,
 };
 var ATTACHMENT_GROUPS_ORDER = [
     'card',
@@ -1866,6 +1884,7 @@ var ATTACHMENT_GROUPS_ORDER = [
     'media',
     'audio',
     'file',
+    'unsupported',
 ];
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
@@ -1877,26 +1896,27 @@ var Attachment = function (props) {
 };
 var renderGroupedAttachments = function (_a) {
     var attachments = _a.attachments, rest = __rest(_a, ["attachments"]);
-    var uploadedImages = [];
-    var containers = attachments.reduce(function (acc, attachment) {
-        if (isUploadedImage(attachment)) {
-            uploadedImages.push(__assign(__assign({}, attachment), { image_url: sanitizeUrl.sanitizeUrl(attachment.image_url), thumb_url: sanitizeUrl.sanitizeUrl(attachment.thumb_url) }));
-        }
-        else {
-            var attachmentType = getAttachmentType(attachment);
-            if (attachmentType) {
-                var Container = CONTAINER_MAP[attachmentType];
-                acc[attachmentType].push(React__default["default"].createElement(Container, __assign({ key: "".concat(attachmentType, "-").concat(acc[attachmentType].length) }, rest, { attachment: attachment })));
-            }
-        }
-        return acc;
+    var uploadedImages = attachments.filter(function (attachment) {
+        return isUploadedImage(attachment);
+    });
+    var containers = attachments
+        .filter(function (attachment) { return !isUploadedImage(attachment); })
+        .reduce(function (typeMap, attachment) {
+        var attachmentType = getAttachmentType(attachment);
+        var Container = CONTAINER_MAP[attachmentType];
+        typeMap[attachmentType].push(React__default["default"].createElement(Container, __assign({ key: "".concat(attachmentType, "-").concat(typeMap[attachmentType].length) }, rest, { attachment: attachment })));
+        return typeMap;
     }, {
         audio: [],
         card: [],
         file: [],
-        gallery: [],
-        image: [],
         media: [],
+        unsupported: [],
+        // not used in reduce
+        // eslint-disable-next-line sort-keys
+        image: [],
+        // eslint-disable-next-line sort-keys
+        gallery: [],
     });
     if (uploadedImages.length > 1) {
         containers['gallery'] = [
@@ -1926,7 +1946,7 @@ var getAttachmentType = function (attachment) {
     else if (isFileAttachment(attachment)) {
         return 'file';
     }
-    return null;
+    return 'unsupported';
 };
 
 var Item = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
@@ -32446,7 +32466,7 @@ var ChannelInner = function (props) {
     };
     /** THREAD */
     var openThread = function (message, event) {
-        event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
         setQuotedMessage(function (current) {
             if ((current === null || current === void 0 ? void 0 : current.parent_id) !== (message === null || message === void 0 ? void 0 : message.parent_id)) {
                 return undefined;
@@ -32458,7 +32478,7 @@ var ChannelInner = function (props) {
         dispatch({ channel: channel, message: message, type: 'openThread' });
     };
     var closeThread = function (event) {
-        event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
         dispatch({ type: 'closeThread' });
     };
     var loadMoreThreadFinished = debounce__default["default"](function (threadHasMore, threadMessages) {
@@ -33778,7 +33798,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.5.0';
+var version = '10.7.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -34784,10 +34804,10 @@ var Message = function (props) {
 };
 
 var UnMemoizedCustomNotification = function (props) {
-    var active = props.active, children = props.children, type = props.type;
+    var active = props.active, children = props.children, className = props.className, type = props.type;
     if (!active)
         return null;
-    return (React__default["default"].createElement("div", { "aria-live": 'polite', className: "str-chat__custom-notification notification-".concat(type, " str-chat__notification"), "data-testid": 'custom-notification' }, children));
+    return (React__default["default"].createElement("div", { "aria-live": 'polite', className: clsx("str-chat__custom-notification notification-".concat(type), "str-chat__notification", className), "data-testid": 'custom-notification' }, children));
 };
 var CustomNotification = React__default["default"].memo(UnMemoizedCustomNotification);
 
@@ -34805,7 +34825,7 @@ var UnMemoizedConnectionStatus = function () {
         client.on('connection.changed', connectionChanged);
         return function () { return client.off('connection.changed', connectionChanged); };
     }, [client, online]);
-    return (React__default["default"].createElement(CustomNotification, { active: !online, type: 'error' }, t('Connection failure, reconnecting now...')));
+    return (React__default["default"].createElement(CustomNotification, { active: !online, className: 'str-chat__connection-status-notification', type: 'error' }, t('Connection failure, reconnecting now...')));
 };
 var ConnectionStatus = React__default["default"].memo(UnMemoizedConnectionStatus);
 
@@ -34870,7 +34890,6 @@ var useMessageListElements = function (props) {
     var lastReceivedId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
     var elements = React.useMemo(function () {
         return enrichedMessages.map(function (message) {
-            var _a;
             if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
                 message.date &&
                 isDate(message.date)) {
@@ -34882,9 +34901,7 @@ var useMessageListElements = function (props) {
                     React__default["default"].createElement(HeaderComponent, null)));
             }
             if (message.type === 'system') {
-                return (React__default["default"].createElement("li", { key: ((_a = message.event) === null || _a === void 0 ? void 0 : _a.created_at) ||
-                        message.created_at ||
-                        '' },
+                return (React__default["default"].createElement("li", { key: message.id || message.created_at },
                     React__default["default"].createElement(MessageSystem, { message: message })));
             }
             var groupStyles = messageGroupStyles[message.id] || '';
@@ -35721,7 +35738,7 @@ var ThreadHeader = function (props) {
         React__default["default"].createElement("div", { className: 'str-chat__thread-header-details' },
             React__default["default"].createElement("div", { className: 'str-chat__thread-header-title' }, t('Thread')),
             React__default["default"].createElement("div", { className: 'str-chat__thread-header-subtitle' }, displayTitle)),
-        React__default["default"].createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: function (event) { return closeThread(event); } },
+        React__default["default"].createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
             React__default["default"].createElement(CloseIcon, null))));
 };
 
@@ -35782,9 +35799,11 @@ var ThreadInner = function (props) {
 };
 
 var UnMemoizedWindow = function (props) {
-    var children = props.children, _a = props.hideOnThread, hideOnThread = _a === void 0 ? false : _a;
-    var thread = useChannelStateContext('Window').thread;
-    return (React__default["default"].createElement("div", { className: "str-chat__main-panel   ".concat(hideOnThread && thread ? 'str-chat__main-panel--hideOnThread' : '') }, children));
+    var children = props.children, _a = props.hideOnThread, hideOnThread = _a === void 0 ? false : _a, propThread = props.thread;
+    var contextThread = useChannelStateContext('Window').thread;
+    return (React__default["default"].createElement("div", { className: clsx('str-chat__main-panel', {
+            'str-chat__main-panel--hideOnThread': hideOnThread && (contextThread || propThread),
+        }) }, children));
 };
 /**
  * A UI component for conditionally displaying a Thread or Channel
@@ -35903,6 +35922,7 @@ exports.MessageText = MessageText;
 exports.MessageTimestamp = MessageTimestamp;
 exports.Modal = Modal;
 exports.ModalGallery = ModalGallery;
+exports.NullComponent = NullComponent;
 exports.PinIcon = PinIcon;
 exports.PinIndicator = PinIndicator;
 exports.PlayButton = PlayButton;
@@ -35938,6 +35958,8 @@ exports.TypingContext = TypingContext;
 exports.TypingIndicator = TypingIndicator;
 exports.TypingProvider = TypingProvider;
 exports.UnMemoizedLoadMorePaginator = UnMemoizedLoadMorePaginator;
+exports.UnsupportedAttachment = UnsupportedAttachment;
+exports.UnsupportedAttachmentContainer = UnsupportedAttachmentContainer;
 exports.UploadIcon = UploadIcon;
 exports.UploadsPreview = UploadsPreview;
 exports.UserItem = UserItem;