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

package/cjs/ui/Accordion.js

@@ -2,51 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 var ui_AccordionGroup = require('./AccordionGroup.js');
-var context = require('../chunks/bundle-BLh1DOSs.js');
-require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle-7SR3bIHI.js');
+require('../chunks/bundle-XORoItM6.js');
 
-function Accordion(_a) {
+var Accordion = function (_a) {
     var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;
-    var _b = React.useState(false), showAccordion = _b[0], setShowAccordion = _b[1];
-    return (React.createElement(context.Consumer, null, 
-    // Function is considered like a react component
-    function (value) {
-        var opened = value.opened, setOpened = value.setOpened; // props from Provider
-        if (id === opened) {
-            setShowAccordion(true);
+    var _b = ui_AccordionGroup.useAccordionGroupContext(), openedListKeys = _b.openedListKeys, addOpenedListKey = _b.addOpenedListKey, removeOpenedListKey = _b.removeOpenedListKey;
+    var isOpened = React.useMemo(function () { return openedListKeys.includes(id); }, [openedListKeys]);
+    var handleClick = function () {
+        if (isOpened) {
+            removeOpenedListKey(id);
         }
         else {
-            setShowAccordion(false);
+            addOpenedListKey(id);
         }
-        var handleClick = function () {
-            if (showAccordion) {
-                setOpened('');
-            }
-            else {
-                setOpened(id);
-            }
-        };
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-                    'sendbird-accordion__panel-header',
-                ], false).join(' '), id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
-                renderTitle(),
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CHEVRON_RIGHT, className: [
-                        'sendbird-accordion__panel-icon-right',
-                        'sendbird-accordion__panel-icon--chevron',
-                        (showAccordion ? 'sendbird-accordion__panel-icon--open' : ''),
-                    ].join(' '), height: "24px", width: "24px" })),
-            showAccordion && (React.createElement("div", { className: "sendbird-accordion" },
-                React.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
-                renderFooter && (React.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
-    }));
-}
-var AccordionGroup = ui_AccordionGroup;
+    };
+    return (React.createElement("div", { className: "sendbird-accordion ".concat(className, " ").concat(isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed') },
+        React.createElement("div", { className: "sendbird-accordion__panel-header", id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
+            renderTitle(),
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CHEVRON_RIGHT, className: [
+                    'sendbird-accordion__panel-icon-right',
+                    'sendbird-accordion__panel-icon--chevron',
+                    (isOpened ? 'sendbird-accordion__panel-icon--open' : ''),
+                ].join(' '), height: "24px", width: "24px" })),
+        isOpened && (React.createElement("div", { className: "sendbird-accordion-opened-list" },
+            React.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
+            renderFooter && (React.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
+};
 
+var AccordionGroup = ui_AccordionGroup.AccordionGroupProvider;
+
+exports.AccordionGroupContext = ui_AccordionGroup.AccordionGroupContext;
+exports.AccordionGroupProvider = ui_AccordionGroup.AccordionGroupProvider;
+exports.useAccordionGroupContext = ui_AccordionGroup.useAccordionGroupContext;
+exports.Accordion = Accordion;
 exports.AccordionGroup = AccordionGroup;
 exports.default = Accordion;
 //# sourceMappingURL=Accordion.js.map

package/cjs/ui/Accordion.js.map

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

package/cjs/ui/AccordionGroup.js

@@ -1,17 +1,53 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
-var context = require('../chunks/bundle-BLh1DOSs.js');
-require('../chunks/bundle-CDBTt08y.js');
+var utils = require('../chunks/bundle-XORoItM6.js');
 
-// Wraps all the accordions in an accordion set
-// keep one accordion open at a time
-function AccordionGroup(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
-    var _c = React.useState(''), opened = _c[0], setOpened = _c[1];
-    return (React.createElement(context.Provider, { value: { opened: opened, setOpened: setOpened } },
-        React.createElement("div", { className: className }, children)));
-}
+var AccordionGroupContext = React.createContext({
+    openedListKeys: [],
+    addOpenedListKey: utils.noop,
+    removeOpenedListKey: utils.noop,
+    clearOpenedListKeys: utils.noop,
+    allowMultipleOpen: false,
+});
+var AccordionGroupProvider = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.allowMultipleOpen, allowMultipleOpen = _b === void 0 ? false : _b;
+    var _c = React.useState([]), openedListKeys = _c[0], setOpenedListKeys = _c[1];
+    var addOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) {
+            if (!allowMultipleOpen) {
+                return [key];
+            }
+            prevList.push(key);
+            return prevList;
+        });
+    };
+    var removeOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) { return prevList.filter(function (k) { return k !== key; }); });
+    };
+    var clearOpenedListKeys = function () {
+        setOpenedListKeys([]);
+    };
+    return (React.createElement("div", { className: "sendbird-accordion-group-provider ".concat(className) },
+        React.createElement(AccordionGroupContext.Provider, { value: {
+                openedListKeys: openedListKeys,
+                addOpenedListKey: addOpenedListKey,
+                removeOpenedListKey: removeOpenedListKey,
+                clearOpenedListKeys: clearOpenedListKeys,
+                allowMultipleOpen: allowMultipleOpen,
+            } }, children)));
+};
+var useAccordionGroupContext = function () {
+    var context = React.useContext(AccordionGroupContext);
+    if (!context)
+        throw new Error('No accordion group context available. Make sure you are rending <AccordionGroupContext />.');
+    return context;
+};
 
-module.exports = AccordionGroup;
+exports.AccordionGroupContext = AccordionGroupContext;
+exports.AccordionGroupProvider = AccordionGroupProvider;
+exports.default = AccordionGroupProvider;
+exports.useAccordionGroupContext = useAccordionGroupContext;
 //# sourceMappingURL=AccordionGroup.js.map

package/cjs/ui/AccordionGroup.js.map

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

package/cjs/ui/AdminMessage.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-require('../chunks/bundle-CqF06THu.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+require('../chunks/bundle-CcICQ161.js');
 
 function AdminMessage(_a) {
     var _b;

package/cjs/ui/Avatar.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-7SR3bIHI.js');
 require('react');
 require('./ImageRenderer.js');
-var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle--ToWZ9cj.js');
+var ui_Avatar = require('../chunks/bundle-1Lraxvfp.js');
+require('../chunks/bundle-XORoItM6.js');
+require('../chunks/bundle-pJv3Q0cb.js');
 require('./Icon.js');
 
 

package/cjs/ui/Badge.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-1hCsXfVb.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+var LocalizationContext = require('../chunks/bundle-DDm1Q65G.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-BDam-wvP.js');
 
 function Badge(_a) {
     var count = _a.count, _b = _a.maxLevel, maxLevel = _b === void 0 ? 2 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;

package/cjs/ui/BottomSheet.js

@@ -3,17 +3,17 @@
 var React = require('react');
 var reactDom = require('react-dom');
 require('../hooks/useModal.js');
-var ui_Modal = require('../chunks/bundle-dNtU9_eg.js');
-require('../chunks/bundle-Q5_I3n-8.js');
-require('../chunks/bundle-Cmmi9pdk.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-CmFB08Wf.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-1hCsXfVb.js');
-require('../chunks/bundle-CsvKRjaK.js');
+var ui_Modal = require('../chunks/bundle-DOVeRCEG.js');
+require('../chunks/bundle-7SR3bIHI.js');
+require('../chunks/bundle-nbIOXEwY.js');
+require('../chunks/bundle-XORoItM6.js');
+require('../chunks/bundle-DDm1Q65G.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-BDam-wvP.js');
+require('../chunks/bundle-B04GCotY.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-BvwX2pXU.js');
 require('./Icon.js');
 
 var BottomSheet = function (props) {

package/cjs/ui/Button.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-require('../chunks/bundle-CqF06THu.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+require('../chunks/bundle-CcICQ161.js');
 
 exports.ButtonTypes = void 0;
 (function (ButtonTypes) {

package/cjs/ui/ChannelAvatar.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
+var ui_Avatar = require('../chunks/bundle-1Lraxvfp.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-BH87xcnc.js');
-require('../chunks/bundle-Q5_I3n-8.js');
+var utils = require('../chunks/bundle-DSsqgxx7.js');
+require('../chunks/bundle-7SR3bIHI.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-XORoItM6.js');
+require('../chunks/bundle-pJv3Q0cb.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-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');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+var LocalizationContext = require('../chunks/bundle-DDm1Q65G.js');
+require('../chunks/bundle-7SR3bIHI.js');
+require('../chunks/bundle-XORoItM6.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-BDam-wvP.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-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.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-B1Nml3ap.js');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-require('../chunks/bundle-DfYperTC.js');
+var index = require('../chunks/bundle-DYH-Fpti.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+require('../chunks/bundle-mgZT4o2L.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Cmmi9pdk.js');
-require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-nbIOXEwY.js');
+require('../chunks/bundle-CcICQ161.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-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var color = require('../chunks/bundle-SIHqK2VF.js');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-require('../chunks/bundle-CqF06THu.js');
+var color = require('../chunks/bundle-DoE4Q2WU.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+require('../chunks/bundle-CcICQ161.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,42 @@ 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-B1Nml3ap.js');
+var index = require('../chunks/bundle-DYH-Fpti.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
 var ui_UserListItem = require('./UserListItem.js');
-var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
-var useLongPress = require('../chunks/bundle-CIswYN43.js');
-var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
+var MediaQueryContext = require('../chunks/bundle-B04GCotY.js');
+var useLongPress = require('../chunks/bundle-vsCAD9Ej.js');
+var LocalizationContext = require('../chunks/bundle-DDm1Q65G.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-CDBTt08y.js');
+var getIsReactionEnabled = require('../chunks/bundle-k-Y_BM9m.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-XORoItM6.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-DfYperTC.js');
+require('../chunks/bundle-mgZT4o2L.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-nbIOXEwY.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-dNtU9_eg.js');
+require('../chunks/bundle-DOVeRCEG.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-1hCsXfVb.js');
-require('../chunks/bundle-BF04PgMH.js');
-require('../chunks/bundle-BsGXZt6G.js');
-require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-BDam-wvP.js');
+require('../chunks/bundle-CcejNHwV.js');
+require('../chunks/bundle-1Lraxvfp.js');
+require('../chunks/bundle-pJv3Q0cb.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-BMsGwLym.js');
+require('../chunks/bundle-BwuEkyq5.js');
 require('../withSendbird.js');
 
 var ReactedMembersBottomSheet = function (_a) {
@@ -144,6 +145,17 @@ var MobileEmojisBottomSheet = function (_a) {
 var EmojiReactions = function (_a) {
     var _b, _c, _d, _e, _f;
     var _g = _a.className, className = _g === void 0 ? '' : _g, userId = _a.userId, message = _a.message, channel = _a.channel, emojiContainer = _a.emojiContainer, memberNicknamesMap = _a.memberNicknamesMap, _h = _a.spaceFromTrigger, spaceFromTrigger = _h === void 0 ? { x: 0, y: 0 } : _h, _j = _a.isByMe, isByMe = _j === void 0 ? false : _j, toggleReaction = _a.toggleReaction, onPressUserProfile = _a.onPressUserProfile;
+    var showTheReactedMembers = false;
+    try {
+        var config = useSendbirdStateContext.useSendbirdStateContext().config;
+        showTheReactedMembers = getIsReactionEnabled.getIsReactionEnabled({
+            channel: channel,
+            config: config,
+        });
+    }
+    catch (err) {
+        // TODO: Handle error
+    }
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
     var addReactionRef = React.useRef(null);
     var _k = React.useState(false), showEmojiList = _k[0], setShowEmojiList = _k[1];
@@ -182,7 +194,7 @@ var EmojiReactions = function (_a) {
         (isMobile && showEmojiList) && (React.createElement(MobileEmojisBottomSheet, { userId: userId, message: message, emojiContainer: emojiContainer, hideMenu: function () {
                 setShowEmojiList(false);
             }, toggleReaction: toggleReaction })),
-        (isMobile && selectedEmojiKey && channel !== null) && (React.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
+        (isMobile && selectedEmojiKey && channel !== null && showTheReactedMembers) && (React.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
                 setSelectedEmojiKey('');
             }, emojiContainer: emojiContainer, onPressUserProfileHandler: onPressUserProfile }))));
 };

package/cjs/ui/EmojiReactions.js.map

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

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-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');
+var LocalizationContext = require('../chunks/bundle-DDm1Q65G.js');
+var index = require('../chunks/bundle-DYH-Fpti.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-BDam-wvP.js');
+require('../chunks/bundle-7SR3bIHI.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-nbIOXEwY.js');
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/cjs/ui/FileMessageItemBody.js

@@ -1,30 +1,68 @@
 'use strict';
 
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var ui_Label = require('../chunks/bundle-BvwX2pXU.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.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');
+var index = require('../chunks/bundle-DYH-Fpti.js');
+var color = require('../chunks/bundle-DoE4Q2WU.js');
+var MediaQueryContext = require('../chunks/bundle-B04GCotY.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-XORoItM6.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-nbIOXEwY.js');
+require('../withSendbird.js');
 
 function FileMessageItemBody(_a) {
-    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 _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 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 && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            (isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.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: {
@@ -34,7 +72,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: 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_TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: handleOnClickTextButton, 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-Q5_I3n-8.js');
+require('../chunks/bundle-7SR3bIHI.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-CmFB08Wf.js');
+require('../chunks/bundle-DDm1Q65G.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-B1Nml3ap.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-BsGXZt6G.js');
-require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-DYH-Fpti.js');
+require('../chunks/bundle-XORoItM6.js');
+require('../chunks/bundle-1Lraxvfp.js');
+require('../chunks/bundle-BvwX2pXU.js');
 require('./Icon.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');
+var ui_FileViewer = require('../chunks/bundle-lg2VZUfB.js');
+require('../chunks/bundle-CYRD0mhW.js');
+require('../chunks/bundle-DOVeRCEG.js');
+require('../chunks/bundle-CcICQ161.js');
+require('../chunks/bundle-BDam-wvP.js');
+require('../chunks/bundle-nbIOXEwY.js');
+require('../chunks/bundle-B04GCotY.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle--ToWZ9cj.js');
-require('../chunks/bundle-Dpu1gg5r.js');
+require('../chunks/bundle-pJv3Q0cb.js');
+require('../chunks/bundle-pW3_ob-0.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-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
-var utils = require('../chunks/bundle-CDBTt08y.js');
+var utils = require('../chunks/bundle-XORoItM6.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-Q5_I3n-8.js');
+var _tslib = require('../chunks/bundle-7SR3bIHI.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {