@sendbird/uikit-react 3.14.3 → 3.14.4

package/cjs/chunks/{bundle-DR-T3oW9.js.map → bundle-DMGpM9Ye.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-DR-T3oW9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-DMGpM9Ye.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BzR58JaC.js → bundle-DQy218lT.js}

@@ -1,35 +1,35 @@
 'use strict';
 
-function getComponentKeyFromMessage(message) {
-    if ('sendingStatus' in message) {
-        if (message.sendingStatus === 'succeeded')
-            return String(message.messageId);
-        return message.reqId;
-    }
-    return String(message.messageId);
-}
-function isContextMenuClosed() {
-    var _a, _b;
-    return (((_a = document.getElementById('sendbird-dropdown-portal')) === null || _a === void 0 ? void 0 : _a.childElementCount) === 0
-        && ((_b = document.getElementById('sendbird-emoji-list-portal')) === null || _b === void 0 ? void 0 : _b.childElementCount) === 0);
-}
-function getMessageTopOffset(messageCreatedAt) {
-    var _a;
-    var element = (_a = document.querySelectorAll("[data-sb-created-at=\"".concat(messageCreatedAt, "\"]"))) === null || _a === void 0 ? void 0 : _a[0];
-    if (element instanceof HTMLElement) {
-        return element.offsetTop;
-    }
-    return null;
-}
-var isDisabledBecauseFrozen = function (groupChannel) {
-    if (!groupChannel)
-        return false;
-    return groupChannel.isFrozen && groupChannel.myRole !== 'operator';
-};
-var isDisabledBecauseMuted = function (groupChannel) {
-    if (!groupChannel)
-        return false;
-    return groupChannel.myMutedState === 'muted';
+function getComponentKeyFromMessage(message) {
+    if ('sendingStatus' in message) {
+        if (message.sendingStatus === 'succeeded')
+            return String(message.messageId);
+        return message.reqId;
+    }
+    return String(message.messageId);
+}
+function isContextMenuClosed() {
+    var _a, _b;
+    return (((_a = document.getElementById('sendbird-dropdown-portal')) === null || _a === void 0 ? void 0 : _a.childElementCount) === 0
+        && ((_b = document.getElementById('sendbird-emoji-list-portal')) === null || _b === void 0 ? void 0 : _b.childElementCount) === 0);
+}
+function getMessageTopOffset(messageCreatedAt) {
+    var _a;
+    var element = (_a = document.querySelectorAll("[data-sb-created-at=\"".concat(messageCreatedAt, "\"]"))) === null || _a === void 0 ? void 0 : _a[0];
+    if (element instanceof HTMLElement) {
+        return element.offsetTop;
+    }
+    return null;
+}
+var isDisabledBecauseFrozen = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.isFrozen && groupChannel.myRole !== 'operator';
+};
+var isDisabledBecauseMuted = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.myMutedState === 'muted';
 };
 
 exports.getComponentKeyFromMessage = getComponentKeyFromMessage;
@@ -37,4 +37,4 @@ exports.getMessageTopOffset = getMessageTopOffset;
 exports.isContextMenuClosed = isContextMenuClosed;
 exports.isDisabledBecauseFrozen = isDisabledBecauseFrozen;
 exports.isDisabledBecauseMuted = isDisabledBecauseMuted;
-//# sourceMappingURL=bundle-BzR58JaC.js.map
+//# sourceMappingURL=bundle-DQy218lT.js.map

package/cjs/chunks/bundle-DQy218lT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DQy218lT.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BJBClQcM.js → bundle-DRp9IuV2.js}

@@ -1,35 +1,35 @@
 'use strict';
 
-var DEFAULT_URL_PREFIX = 'https://static.sendbird.com/sample/cover/cover_';
-var getOpenChannelAvatar = function (channel) {
-    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
-        return channel.coverUrl;
-    }
-};
-var getChannelAvatarSource = function (channel, currentUserId) {
-    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
-        if (!(new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl))) {
-            return channel.coverUrl;
-        }
-    }
-    return ((channel === null || channel === void 0 ? void 0 : channel.members) || [])
-        .filter(function (member) { return member.userId !== currentUserId; })
-        .map(function (_a) {
-        var profileUrl = _a.profileUrl;
-        return profileUrl;
-    });
-};
-var generateDefaultAvatar = function (channel) {
-    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
-        if (new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl)) {
-            return true;
-        }
-        return false;
-    }
-    return true;
+var DEFAULT_URL_PREFIX = 'https://static.sendbird.com/sample/cover/cover_';
+var getOpenChannelAvatar = function (channel) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        return channel.coverUrl;
+    }
+};
+var getChannelAvatarSource = function (channel, currentUserId) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        if (!(new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl))) {
+            return channel.coverUrl;
+        }
+    }
+    return ((channel === null || channel === void 0 ? void 0 : channel.members) || [])
+        .filter(function (member) { return member.userId !== currentUserId; })
+        .map(function (_a) {
+        var profileUrl = _a.profileUrl;
+        return profileUrl;
+    });
+};
+var generateDefaultAvatar = function (channel) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        if (new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl)) {
+            return true;
+        }
+        return false;
+    }
+    return true;
 };
 
 exports.generateDefaultAvatar = generateDefaultAvatar;
 exports.getChannelAvatarSource = getChannelAvatarSource;
 exports.getOpenChannelAvatar = getOpenChannelAvatar;
-//# sourceMappingURL=bundle-BJBClQcM.js.map
+//# sourceMappingURL=bundle-DRp9IuV2.js.map

package/cjs/chunks/bundle-DRp9IuV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DRp9IuV2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-DbykvtHO.js → bundle-DRy7eNJ0.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var isEmpty = function (val) { return (val === null || val === undefined); };
-// Some Ids return string and number inconsistently
-// only use to compare IDs
-function compareIds(a, b) {
-    if (isEmpty(a) || isEmpty(b)) {
-        return false;
-    }
-    var aString = a.toString();
-    var bString = b.toString();
-    return aString === bString;
+var isEmpty = function (val) { return (val === null || val === undefined); };
+// Some Ids return string and number inconsistently
+// only use to compare IDs
+function compareIds(a, b) {
+    if (isEmpty(a) || isEmpty(b)) {
+        return false;
+    }
+    var aString = a.toString();
+    var bString = b.toString();
+    return aString === bString;
 }
 
 exports.compareIds = compareIds;
-//# sourceMappingURL=bundle-DbykvtHO.js.map
+//# sourceMappingURL=bundle-DRy7eNJ0.js.map

package/cjs/chunks/bundle-DRy7eNJ0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DRy7eNJ0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-ChIhNCh1.js → bundle-DTCz0BH1.js}

@@ -1,184 +1,183 @@
 'use strict';
 
 var React = require('react');
-var _tslib = require('./bundle-CY1bUkfG.js');
+var _tslib = require('./bundle-HGbi-rCv.js');
 var message = require('@sendbird/chat/message');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_ImageRenderer = require('../ui/ImageRenderer.js');
-var index = require('./bundle-D3Gxy8S0.js');
-var ui_FileViewer = require('./bundle-D9hSjP4_.js');
-var index$1 = require('./bundle-Bka-H9ks.js');
+var index = require('./bundle-wl1uuzU7.js');
+var ui_FileViewer = require('./bundle-C6a-umLQ.js');
 
-function ImageGrid(_a) {
-    var _b;
-    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
-    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
-        React.createElement("div", { className: index.getClassName([
-                className,
-                'sendbird-image-grid',
-                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
-            ]) }, children)));
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React.createElement("div", { className: index.getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
 }
 
-var GRID_WIDTH_CHAT_WEB = 400;
-var GRID_SIDE_PADDING = 8;
-var GRID_GAP = 4;
-var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
-var PROFILE_IMAGE_WIDTH = 40;
-var CHAT_MOBILE_SIDE_PADDING = 48;
-var THREAD_PARENT_WIDTH = 320;
-var THREAD_PARENT_SIDE_PADDING = 28;
-var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
-var THREAD_CHILD_WIDTH = 200;
-var THREAD_CHILD_SIDE_PADDING = 8;
-var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
-var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
-var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
-    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
-    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
-    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
-    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
-    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
-    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
-};
-var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
-    CHAT_WEB: '6px',
-    CHAT_MOBILE: '6px',
-    THREAD_PARENT_WEB: '6px',
-    THREAD_PARENT_MOBILE: '6px',
-    THREAD_CHILD_WEB: '6px',
-    THREAD_CHILD_MOBILE: '6px',
-};
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
 var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
 
-var ThreadMessageKind = {
-    PARENT: 'parent',
-    CHILD: 'child',
-};
-function MultipleFilesMessageItemBody(_a) {
-    var _this = this;
-    var _b, _c;
-    var className = _a.className, message$1 = _a.message, _d = _a.isReactionEnabled, isReactionEnabled = _d === void 0 ? false : _d, threadMessageKindKey = _a.threadMessageKindKey, _e = _a.statefulFileInfoList, statefulFileInfoList = _e === void 0 ? [] : _e, _f = _a.onBeforeDownloadFileMessage, onBeforeDownloadFileMessage = _f === void 0 ? null : _f;
-    var logger = (_c = (_b = useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.logger;
-    var _g = React.useState(-1), currentFileViewerIndex = _g[0], setCurrentFileViewerIndex = _g[1];
-    function onClose() {
-        setCurrentFileViewerIndex(-1);
-    }
-    function onClickLeft() {
-        setCurrentFileViewerIndex(currentFileViewerIndex === 0 ? statefulFileInfoList.length - 1 : currentFileViewerIndex - 1);
-    }
-    function onClickRight() {
-        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
-    }
-    return (threadMessageKindKey && (React.createElement(React.Fragment, null,
-        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.FileViewer, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
-                var allowDownload, err_1;
-                var _a, _b;
-                return _tslib.__generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (!onBeforeDownloadFileMessage) {
-                                return [2 /*return*/, null];
-                            }
-                            _c.label = 1;
-                        case 1:
-                            _c.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message$1, index: currentFileViewerIndex })];
-                        case 2:
-                            allowDownload = _c.sent();
-                            if (!allowDownload) {
-                                e.preventDefault();
-                                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MultipleFilesMessageItemBody: Not allowed to download.');
-                            }
-                            return [3 /*break*/, 4];
-                        case 3:
-                            err_1 = _c.sent();
-                            (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'MultipleFilesMessageItemBody: Error occurred while determining download continuation:', err_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); } })),
-        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
-            var _a, _b, _c;
-            return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
-                React.createElement(ui_ImageRenderer.default, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
-                        var style = _a.style;
-                        if (index.isGif(fileInfo.mimeType))
-                            return React.createElement(ImagePlaceholder.GIF, { style: style });
-                        return React.createElement(ImagePlaceholder.Default, { style: style });
-                    }, defaultComponent: React.createElement(ImagePlaceholder.LoadError, null) })));
-        })))));
-}
-var ImagePlaceholder = {
-    Default: function (_a) {
-        var style = _a.style;
-        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
-    },
-    GIF: function (_a) {
-        var style = _a.style;
-        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
-            React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
-    },
-    LoadError: function () { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
-        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var _this = this;
+    var _b, _c;
+    var className = _a.className, message$1 = _a.message, _d = _a.isReactionEnabled, isReactionEnabled = _d === void 0 ? false : _d, threadMessageKindKey = _a.threadMessageKindKey, _e = _a.statefulFileInfoList, statefulFileInfoList = _e === void 0 ? [] : _e, _f = _a.onBeforeDownloadFileMessage, onBeforeDownloadFileMessage = _f === void 0 ? null : _f;
+    var logger = (_c = (_b = useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.logger;
+    var _g = React.useState(-1), currentFileViewerIndex = _g[0], setCurrentFileViewerIndex = _g[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0 ? statefulFileInfoList.length - 1 : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
+    }
+    return (threadMessageKindKey && (React.createElement(React.Fragment, null,
+        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.FileViewer, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                var allowDownload, err_1;
+                var _a, _b;
+                return _tslib.__generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!onBeforeDownloadFileMessage) {
+                                return [2 /*return*/, null];
+                            }
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message$1, index: currentFileViewerIndex })];
+                        case 2:
+                            allowDownload = _c.sent();
+                            if (!allowDownload) {
+                                e.preventDefault();
+                                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MultipleFilesMessageItemBody: Not allowed to download.');
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            err_1 = _c.sent();
+                            (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'MultipleFilesMessageItemBody: Error occurred while determining download continuation:', err_1);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); } })),
+        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
+            var _a, _b, _c;
+            return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
+                React.createElement(ui_ImageRenderer.default, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
+                        var style = _a.style;
+                        if (index.isGif(fileInfo.mimeType))
+                            return React.createElement(ImagePlaceholder.GIF, { style: style });
+                        return React.createElement(ImagePlaceholder.Default, { style: style });
+                    }, defaultComponent: React.createElement(ImagePlaceholder.LoadError, null) })));
+        })))));
+}
+var ImagePlaceholder = {
+    Default: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
+    },
+    GIF: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
+    },
+    LoadError: function () { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
+        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
 };
 
-function useThreadMessageKindKeySelector(_a) {
-    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
-    var threadMessageKindKey = React.useMemo(function () {
-        return index$1.K(threadMessageKind)
-            .with(ThreadMessageKind.PARENT, function () { return (isMobile
-            ? 'THREAD_PARENT_MOBILE'
-            : 'THREAD_PARENT_WEB'); })
-            .with(ThreadMessageKind.CHILD, function () { return (isMobile
-            ? 'THREAD_CHILD_MOBILE'
-            : 'THREAD_CHILD_WEB'); })
-            .otherwise(function () { return (isMobile
-            ? 'CHAT_MOBILE'
-            : 'CHAT_WEB'); });
-    }, [isMobile, threadMessageKind]);
-    return threadMessageKindKey;
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = React.useMemo(function () {
+        return index.K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
 }
 
-// SendingStatus.SCHEDULED is currently not covered in UIKit
-//  So we can ignore for now, but for future, it is better to explicitly use PENDING, FAILED, or CANCELED.
-var useFileInfoListWithUploaded = function (message$1) {
-    var blobHandler = React.useRef(new Map());
-    var getObjectURL = function (index, blob) {
-        if (!blobHandler.current.has(index) && blob)
-            blobHandler.current.set(index, URL.createObjectURL(blob));
-        return blobHandler.current.get(index);
-    };
-    var revokeURLs = function () {
-        if (blobHandler.current.size > 0) {
-            blobHandler.current.forEach(function (url) { return URL.revokeObjectURL(url); });
-            blobHandler.current.clear();
-        }
-    };
-    React.useEffect(function () {
-        return function () { return revokeURLs(); };
-    }, []);
-    if (!message$1 || !message$1.isMultipleFilesMessage || !message$1.isMultipleFilesMessage()) {
-        return [];
-    }
-    else if (message$1.sendingStatus === message.SendingStatus.SUCCEEDED) {
-        revokeURLs();
-        return message$1.fileInfoList.map(function (it) { return (_tslib.__assign(_tslib.__assign({}, it), { url: it.url, isUploaded: true })); });
-    }
-    else {
-        return message$1.messageParams.fileInfoList.map(function (it, index) {
-            var _a, _b;
-            return (_tslib.__assign(_tslib.__assign({}, it), { url: (_b = (_a = getObjectURL(index)) !== null && _a !== void 0 ? _a : it.fileUrl) !== null && _b !== void 0 ? _b : (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined), isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0 }));
-        });
-    }
+// SendingStatus.SCHEDULED is currently not covered in UIKit
+//  So we can ignore for now, but for future, it is better to explicitly use PENDING, FAILED, or CANCELED.
+var useFileInfoListWithUploaded = function (message$1) {
+    var blobHandler = React.useRef(new Map());
+    var getObjectURL = function (index, blob) {
+        if (!blobHandler.current.has(index) && blob)
+            blobHandler.current.set(index, URL.createObjectURL(blob));
+        return blobHandler.current.get(index);
+    };
+    var revokeURLs = function () {
+        if (blobHandler.current.size > 0) {
+            blobHandler.current.forEach(function (url) { return URL.revokeObjectURL(url); });
+            blobHandler.current.clear();
+        }
+    };
+    React.useEffect(function () {
+        return function () { return revokeURLs(); };
+    }, []);
+    if (!message$1 || !message$1.isMultipleFilesMessage || !message$1.isMultipleFilesMessage()) {
+        return [];
+    }
+    else if (message$1.sendingStatus === message.SendingStatus.SUCCEEDED) {
+        revokeURLs();
+        return message$1.fileInfoList.map(function (it) { return (_tslib.__assign(_tslib.__assign({}, it), { url: it.url, isUploaded: true })); });
+    }
+    else {
+        return message$1.messageParams.fileInfoList.map(function (it, index) {
+            var _a, _b;
+            return (_tslib.__assign(_tslib.__assign({}, it), { url: (_b = (_a = getObjectURL(index)) !== null && _a !== void 0 ? _a : it.fileUrl) !== null && _b !== void 0 ? _b : (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined), isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0 }));
+        });
+    }
 };
 
 exports.MultipleFilesMessageItemBody = MultipleFilesMessageItemBody;
 exports.ThreadMessageKind = ThreadMessageKind;
 exports.useFileInfoListWithUploaded = useFileInfoListWithUploaded;
 exports.useThreadMessageKindKeySelector = useThreadMessageKindKeySelector;
-//# sourceMappingURL=bundle-ChIhNCh1.js.map
+//# sourceMappingURL=bundle-DTCz0BH1.js.map

package/cjs/chunks/bundle-DTCz0BH1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DTCz0BH1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}