@sendbird/uikit-react 3.13.3 → 3.14.0-beta.2

package/cjs/ui/Carousel.js

@@ -0,0 +1,254 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
+var React = require('react');
+
+var PADDING_WIDTH = 24;
+var CONTENT_LEFT_WIDTH = 40;
+var SWIPE_THRESHOLD = 15;
+var LAST_ITEM_RIGHT_SNAP_THRESHOLD = 100;
+/**
+ * fixed sized template items should use its child width.
+ * Whereas flex sized template items should use its parent's width.
+ * @param item
+ */
+function shouldRenderAsFixed(item) {
+    var _a;
+    return ((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed';
+}
+function CarouselItem(_a) {
+    var item = _a.item, defaultWidth = _a.defaultWidth;
+    return React.createElement("div", { style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
+}
+var Carousel = React.memo(function (_a) {
+    var _b, _c;
+    var id = _a.id, items = _a.items, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.classNameWithTouchAction, classNameWithTouchAction = _e === void 0 ? 'sendbird-conversation__messages-padding' : _e;
+    var carouselRef = React.useRef(null);
+    var screenWidth = window.innerWidth;
+    var defaultItemWidth = (_c = (_b = carouselRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
+    var itemWidths = items.map(function (item) {
+        var _a;
+        if (shouldRenderAsFixed(item)) {
+            return (_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.value;
+        }
+        return defaultItemWidth;
+    });
+    var allItemsWidth = itemWidths.reduce(function (prev, curr) { return prev + gap + curr; });
+    var lastItemWidth = itemWidths[itemWidths.length - 1];
+    var isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
+    var isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
+    var itemPositions = getEachItemPositions();
+    var _f = React.useState({
+        scrolling: false,
+        dragging: false,
+        startPos: null,
+        offset: 0,
+        translateX: 0,
+        currentIndex: 0,
+    }), draggingInfo = _f[0], setDraggingInfo = _f[1];
+    var handleMouseDown = function (event) {
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: false, dragging: true, startPos: {
+                x: event.clientX,
+                y: event.clientY,
+            }, offset: 0 }));
+    };
+    var handleMouseMove = function (event) {
+        if (!draggingInfo.dragging)
+            return;
+        var currentX = event.clientX;
+        var newOffset = currentX - draggingInfo.startPos.x;
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { offset: newOffset }));
+    };
+    var handleMouseUp = function () {
+        if (!draggingInfo.dragging)
+            return;
+        handleDragEnd();
+    };
+    var blockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-x';
+        }
+    };
+    var unblockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-y';
+        }
+    };
+    var handleTouchStart = function (event) {
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: false, dragging: false, startPos: {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            }, offset: 0 }));
+    };
+    React.useEffect(function () {
+        if (draggingInfo.scrolling) {
+            unblockScroll();
+        }
+    }, [draggingInfo.scrolling]);
+    var handleTouchMove = function (event) {
+        if (!draggingInfo.startPos || draggingInfo.scrolling)
+            return;
+        var startPos = draggingInfo.startPos;
+        var touchMoveX = event.touches[0].clientX;
+        var touchMoveY = event.touches[0].clientY;
+        var deltaX = Math.abs(touchMoveX - startPos.x);
+        var deltaY = Math.abs(touchMoveY - startPos.y);
+        var newOffset = touchMoveX - startPos.x;
+        if (newOffset === draggingInfo.offset)
+            return;
+        if (draggingInfo.dragging) {
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { offset: newOffset }));
+            return;
+        }
+        if (deltaY > deltaX) {
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: true }));
+        }
+        else {
+            blockScroll();
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { dragging: true, offset: newOffset }));
+        }
+    };
+    var getNewDraggingInfo = function (props) {
+        if (props === void 0) { props = {}; }
+        var newTranslateX = props.newTranslateX, nextIndex = props.nextIndex;
+        var translateX = draggingInfo.translateX, currentIndex = draggingInfo.currentIndex;
+        return {
+            scrolling: false,
+            dragging: false,
+            startPos: null,
+            offset: 0,
+            translateX: newTranslateX !== null && newTranslateX !== void 0 ? newTranslateX : translateX,
+            currentIndex: nextIndex !== null && nextIndex !== void 0 ? nextIndex : currentIndex,
+        };
+    };
+    var handleDragEnd = function () {
+        var offset = draggingInfo.offset;
+        var absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        var currentIndex = draggingInfo.currentIndex;
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+    };
+    var handleTouchEnd = function () {
+        var offset = draggingInfo.offset, currentIndex = draggingInfo.currentIndex;
+        var absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            /**
+             * This is special logic for "더 보기" button for Socar use-case.
+             * The button will have a small width (less than 50px).
+             * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
+             */
+            if (isLastItemNarrow) {
+                if (isLastTwoItemsFitScreen) {
+                    if (nextIndex !== items.length - 1) {
+                        setDraggingInfo(getNewDraggingInfo({
+                            newTranslateX: itemPositions[nextIndex].start,
+                            nextIndex: nextIndex,
+                        }));
+                    }
+                    else {
+                        setDraggingInfo(getNewDraggingInfo());
+                    }
+                }
+                else if (nextIndex !== items.length - 1) {
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: itemPositions[nextIndex].start,
+                        nextIndex: nextIndex,
+                    }));
+                }
+                else {
+                    var translateWidth = itemPositions[nextIndex].start - lastItemWidth;
+                    var rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: translateWidth + rightEmptyWidth,
+                        nextIndex: nextIndex,
+                    }));
+                }
+            }
+            else {
+                setDraggingInfo(getNewDraggingInfo({
+                    newTranslateX: itemPositions[nextIndex].start,
+                    nextIndex: nextIndex,
+                }));
+            }
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+        if (draggingInfo.dragging) {
+            unblockScroll();
+        }
+    };
+    function getCurrentTranslateX() {
+        return draggingInfo.translateX + draggingInfo.offset;
+    }
+    function getIsLastTwoItemsFitScreen() {
+        var restItemsWidth = itemWidths.slice(-2).reduce(function (prev, curr) { return prev + gap + curr; });
+        var restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
+        return restTotalWidth <= screenWidth;
+    }
+    function getEachItemPositions() {
+        var accumulator = 0;
+        return itemWidths.map(function (itemWidth, i) {
+            if (i > 0) {
+                accumulator -= gap;
+            }
+            var itemPosition = {
+                start: accumulator,
+                end: accumulator - itemWidth,
+            };
+            accumulator -= itemWidth;
+            return itemPosition;
+        });
+    }
+    return (React.createElement("div", { id: id, ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: 'sendbird-carousel-items-wrapper', style: {
+            cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
+            transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
+            transform: "translateX(".concat(getCurrentTranslateX(), "px)"),
+            gap: gap,
+        } }, items.map(function (item, index) { return (React.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); })));
+});
+
+exports.Carousel = Carousel;
+exports.default = Carousel;
+//# sourceMappingURL=Carousel.js.map

package/cjs/ui/Carousel.js.map

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

package/cjs/ui/ChannelAvatar.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-DkGYX29W.js');
+var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-d3t3a2vc.js');
-require('../chunks/bundle-B3Lu20wG.js');
+var utils = require('../chunks/bundle-BH87xcnc.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-Bc6y_vRE.js');
-require('../chunks/bundle-HXyGAP9T.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle--ToWZ9cj.js');
 
 function ChannelAvatar(_a) {
     var channel = _a.channel, userId = _a.userId, theme = _a.theme, _b = _a.width, width = _b === void 0 ? 56 : _b, _c = _a.height, height = _c === void 0 ? 56 : _c;

package/cjs/ui/ConnectionStatus.js

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-var LocalizationContext = require('../chunks/bundle-DvduWWQk.js');
-require('../chunks/bundle-B3Lu20wG.js');
-require('../chunks/bundle-Bc6y_vRE.js');
-require('../chunks/bundle-prE7SKQr.js');
-require('../chunks/bundle-D_qbYkHk.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
 
 function ConnectionStatus() {
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;

package/cjs/ui/ContextMenu.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var reactDom = require('react-dom');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../chunks/bundle-Tx6vw4BY.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-require('../chunks/bundle-S09sS9Ub.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-DfYperTC.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-HOuE7syZ.js');
-require('../chunks/bundle-prE7SKQr.js');
+require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-CqF06THu.js');
 
 // padding to handle height of last item in message-list
 var HEIGHT_PADDING = 60;

package/cjs/ui/DateSeparator.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var color = require('../chunks/bundle-BpwSTA3F.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-require('../chunks/bundle-prE7SKQr.js');
+var color = require('../chunks/bundle-SIHqK2VF.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-CqF06THu.js');
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;

package/cjs/ui/EmojiReactions.js

@@ -6,41 +6,41 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../chunks/bundle-Tx6vw4BY.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
 var ui_UserListItem = require('./UserListItem.js');
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-1FXPxsfD.js');
-var useLongPress = require('../chunks/bundle-BNCNRHux.js');
-var LocalizationContext = require('../chunks/bundle-DvduWWQk.js');
+var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
+var useLongPress = require('../chunks/bundle-CIswYN43.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-require('../chunks/bundle-prE7SKQr.js');
-require('../chunks/bundle-Bc6y_vRE.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-CDBTt08y.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-S09sS9Ub.js');
+require('../chunks/bundle-DfYperTC.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-HOuE7syZ.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-BJD09510.js');
+require('../chunks/bundle-dNtU9_eg.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-D_qbYkHk.js');
-require('../chunks/bundle-tbYf0yOX.js');
-require('../chunks/bundle-DkGYX29W.js');
-require('../chunks/bundle-HXyGAP9T.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-BF04PgMH.js');
+require('../chunks/bundle-BsGXZt6G.js');
+require('../chunks/bundle--ToWZ9cj.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-DcVYwXP-.js');
+require('../chunks/bundle-BMsGwLym.js');
 require('../withSendbird.js');
 
 var ReactedMembersBottomSheet = function (_a) {

package/cjs/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-DvduWWQk.js');
-var index = require('../chunks/bundle-Tx6vw4BY.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-require('../chunks/bundle-prE7SKQr.js');
-require('../chunks/bundle-D_qbYkHk.js');
-require('../chunks/bundle-B3Lu20wG.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-HOuE7syZ.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/cjs/ui/FileMessageItemBody.js

@@ -1,68 +1,30 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-Tx6vw4BY.js');
-var color = require('../chunks/bundle-BpwSTA3F.js');
-var MediaQueryContext = require('../chunks/bundle-1FXPxsfD.js');
-var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../chunks/bundle-prE7SKQr.js');
-require('../chunks/bundle-Bc6y_vRE.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var color = require('../chunks/bundle-SIHqK2VF.js');
+var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-CDBTt08y.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-HOuE7syZ.js');
-require('../withSendbird.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 
 function FileMessageItemBody(_a) {
-    var _this = this;
-    var _b, _c, _d;
-    var className = _a.className, message = _a.message, _e = _a.isByMe, isByMe = _e === void 0 ? false : _e, _f = _a.mouseHover, mouseHover = _f === void 0 ? false : _f, _g = _a.isReactionEnabled, isReactionEnabled = _g === void 0 ? false : _g, _h = _a.truncateLimit, truncateLimit = _h === void 0 ? null : _h, _j = _a.onBeforeDownloadFileMessage, onBeforeDownloadFileMessage = _j === void 0 ? null : _j;
-    var logger = null;
-    try {
-        logger = (_c = (_b = useSendbirdStateContext.useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.logger;
-    }
-    catch (err) {
-        // TODO: Handle error
-    }
+    var _b;
+    var className = _a.className, message = _a.message, _c = _a.isByMe, isByMe = _c === void 0 ? false : _c, _d = _a.mouseHover, mouseHover = _d === void 0 ? false : _d, _e = _a.isReactionEnabled, isReactionEnabled = _e === void 0 ? false : _e, _f = _a.truncateLimit, truncateLimit = _f === void 0 ? null : _f;
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
     var truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
-    var downloadFileWithUrl = function () { return window.open(message === null || message === void 0 ? void 0 : message.url); };
-    var handleOnClickTextButton = onBeforeDownloadFileMessage
-        ? function () { 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:
-                        _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message })];
-                    case 1:
-                        allowDownload = _c.sent();
-                        if (allowDownload) {
-                            downloadFileWithUrl();
-                        }
-                        else {
-                            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'FileMessageItemBody: Not allowed to download.');
-                        }
-                        return [3 /*break*/, 3];
-                    case 2:
-                        err_1 = _c.sent();
-                        (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'FileMessageItemBody: Error occurred while determining download continuation:', err_1);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); }
-        : downloadFileWithUrl;
     return (React.createElement("div", { className: index.getClassName([
             className,
             'sendbird-file-message-item-body',
             isByMe ? 'outgoing' : 'incoming',
             mouseHover ? 'mouse-hover' : '',
-            (isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0) ? 'reactions' : '',
+            (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
         ]) },
         React.createElement("div", { className: "sendbird-file-message-item-body__file-icon" },
             React.createElement(ui_Icon.default, { className: "sendbird-file-message-item-body__file-icon__icon", type: {
@@ -72,7 +34,7 @@ function FileMessageItemBody(_a) {
                     GIF: ui_Icon.IconTypes.GIF,
                     OTHERS: ui_Icon.IconTypes.FILE_DOCUMENT,
                 }[index.getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)], fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })),
-        React.createElement(ui_TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: handleOnClickTextButton, color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1 },
+        React.createElement(ui_TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: function () { window.open(message === null || message === void 0 ? void 0 : message.url); }, color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1 },
             React.createElement(ui_Label.Label, { className: "sendbird-file-message-item-body__file-name__text", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum)))));
 }
 

package/cjs/ui/FileMessageItemBody.js.map

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

package/cjs/ui/FileViewer.js

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-B3Lu20wG.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-DvduWWQk.js');
+require('../chunks/bundle-CmFB08Wf.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-Tx6vw4BY.js');
-require('../chunks/bundle-Bc6y_vRE.js');
-require('../chunks/bundle-DkGYX29W.js');
-require('../chunks/bundle-B-njjZtk.js');
+require('../chunks/bundle-B1Nml3ap.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle-BsGXZt6G.js');
+require('../chunks/bundle-C88DsCNB.js');
 require('./Icon.js');
-var ui_FileViewer = require('../chunks/bundle-DuHJq3hs.js');
-require('../chunks/bundle-CfRX00vQ.js');
-require('../chunks/bundle-BJD09510.js');
-require('../chunks/bundle-prE7SKQr.js');
-require('../chunks/bundle-D_qbYkHk.js');
-require('../chunks/bundle-HOuE7syZ.js');
-require('../chunks/bundle-1FXPxsfD.js');
+var ui_FileViewer = require('../chunks/bundle-DNP731Dg.js');
+require('../chunks/bundle-tHnRbr7F.js');
+require('../chunks/bundle-dNtU9_eg.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-CsvKRjaK.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-HXyGAP9T.js');
-require('../chunks/bundle-BBS4PSSm.js');
+require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-Dpu1gg5r.js');
 require('@sendbird/uikit-tools');
 
 

package/cjs/ui/Icon.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var utils = require('../chunks/bundle-Bc6y_vRE.js');
+var utils = require('../chunks/bundle-CDBTt08y.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {

package/cjs/ui/ImageRenderer.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var utils = require('../chunks/bundle-Bc6y_vRE.js');
+var utils = require('../chunks/bundle-CDBTt08y.js');
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-require('../chunks/bundle-B3Lu20wG.js');
-require('../chunks/bundle-prE7SKQr.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CqF06THu.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/cjs/ui/Label.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-B3Lu20wG.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('react');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
-require('../chunks/bundle-prE7SKQr.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-CqF06THu.js');
 
 
 
+exports.Label = ui_Label.Label$1;
 exports.LabelColors = ui_Label.LabelColors;
 exports.LabelStringSet = ui_Label.LabelStringSet;
 exports.LabelTypography = ui_Label.LabelTypography;

package/cjs/ui/Label.js.map

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