@sendbird/uikit-react 3.14.11 → 3.14.12

package/cjs/ui/ContextMenu.js

@@ -2,307 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
-var reactDom = require('react-dom');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
-var SendbirdChat = require('@sendbird/chat');
-var openChannel = require('@sendbird/chat/openChannel');
-var ui_SortByRow = require('./SortByRow.js');
-var index = require('../chunks/bundle-CuZz1sho.js');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
-require('../chunks/bundle-IUGG9gXc.js');
+require('../chunks/bundle-Cu2j1EmN.js');
+require('react');
+var ui_ContextMenu = require('../chunks/bundle-B_eF_lLw.js');
+require('../chunks/bundle-CO52Wsr3.js');
+require('../withSendbird.js');
+require('./IconButton.js');
+require('../chunks/bundle-VyDwmxN4.js');
+require('../chunks/bundle-Bq4FcvTF.js');
+require('@sendbird/chat');
+require('react-dom');
+require('@sendbird/chat/openChannel');
+require('./SortByRow.js');
+require('../chunks/bundle-BkKs2HEQ.js');
+require('../chunks/bundle-BM95N32D.js');
+require('../chunks/bundle-CrkUdg03.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CO6T5RjX.js');
-require('../chunks/bundle-_ghqr1tN.js');
-require('../chunks/bundle-DhdwG-eV.js');
-
-// padding to handle height of last item in message-list
-var HEIGHT_PADDING = 60;
-var MenuItems$1 = /** @class */ (function (_super) {
-    _tslib.__extends(MenuItems, _super);
-    function MenuItems(props) {
-        var _this = _super.call(this, props) || this;
-        _this.menuRef = React.createRef();
-        _this.setupEvents = function () {
-            var closeDropdown = _this.props.closeDropdown;
-            var menuRef = _this.menuRef;
-            var handleClickOutside = function (event) {
-                var _a, _b;
-                if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
-                    closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
-                }
-            };
-            _this.setState({
-                handleClickOutside: handleClickOutside,
-            });
-            document.addEventListener('mousedown', handleClickOutside);
-        };
-        _this.cleanUpEvents = function () {
-            var handleClickOutside = _this.state.handleClickOutside;
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-        _this.getMenuPosition = function () {
-            var _a, _b;
-            var _c = _this.props, parentRef = _c.parentRef, openLeft = _c.openLeft;
-            var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
-            var x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
-            var y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
-            var menuStyle = {
-                top: y,
-                left: x,
-            };
-            if (!_this.menuRef.current)
-                return menuStyle;
-            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
-            var rect = _this.menuRef.current.getBoundingClientRect();
-            if (y + rect.height + HEIGHT_PADDING > innerHeight) {
-                menuStyle.top -= rect.height;
-            }
-            if (x + rect.width > innerWidth && !openLeft) {
-                menuStyle.left -= rect.width;
-            }
-            if (menuStyle.top < 0) {
-                menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
-            }
-            menuStyle.top += 32;
-            if (openLeft) {
-                var padding = Number.isNaN(rect.width - 30)
-                    ? 108 // default
-                    : rect.width - 30;
-                menuStyle.left -= padding;
-            }
-            // warning: this section has to be executed after the openLeft is calculated
-            // menu is outside viewport
-            if (menuStyle.left < 0) {
-                menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
-            }
-            _this.setState({ menuStyle: menuStyle });
-            return menuStyle;
-        };
-        _this.state = {
-            menuStyle: { top: 0, left: 0 },
-            handleClickOutside: function () { },
-        };
-        return _this;
-    }
-    MenuItems.prototype.componentDidMount = function () {
-        this.setupEvents();
-        this.getMenuPosition();
-    };
-    MenuItems.prototype.componentWillUnmount = function () {
-        this.cleanUpEvents();
-    };
-    MenuItems.prototype.render = function () {
-        var portalElement = document.getElementById('sendbird-dropdown-portal');
-        if (!portalElement)
-            return React.createElement(React.Fragment, null);
-        var menuStyle = this.state.menuStyle;
-        var _a = this.props, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, testID = _a.testID, id = _a.id;
-        return (reactDom.createPortal((React.createElement("div", { className: utils.classnames(MENU_OBSERVING_CLASS_NAME, className), "data-testid": testID, id: id },
-            React.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
-            React.createElement("ul", { className: "".concat(className, " sendbird-dropdown__menu"), ref: this.menuRef, style: _tslib.__assign({ display: 'inline-block', position: 'fixed', left: "".concat(Math.round(menuStyle.left), "px"), top: "".concat(Math.round(menuStyle.top), "px") }, style), "data-testid": "sendbird-dropdown-menu" }, children))), portalElement));
-    };
-    return MenuItems;
-}(React.Component));
-
-var MuteMenuItem = function (_a) {
-    var channel = _a.channel, user = _a.user, _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
-    var _g = React.useState(user.isMuted), isMuted = _g[0], setIsMuted = _g[1];
-    var isProcessing = React.useRef(false);
-    var onClickHandler = React.useCallback(function () {
-        if (!isProcessing.current) {
-            isProcessing.current = true;
-            if (isMuted) {
-                channel.unmuteUser(user)
-                    .then(function () {
-                    setIsMuted(false);
-                    onChange(channel, user, false);
-                    isProcessing.current = false;
-                })
-                    .catch(function (err) {
-                    onError(err);
-                    isProcessing.current = false;
-                });
-            }
-            else {
-                channel.muteUser(user)
-                    .then(function () {
-                    setIsMuted(true);
-                    onChange(channel, user, true);
-                    isProcessing.current = false;
-                })
-                    .catch(function (err) {
-                    onError(err);
-                    isProcessing.current = false;
-                });
-            }
-        }
-    }, [isProcessing, isMuted]);
-    return (React.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
-};
-
-var OperatorMenuItem = function (_a) {
-    var channel = _a.channel, user = _a.user, _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
-    var _g = React.useState(channel instanceof openChannel.OpenChannel
-        ? channel.isOperator(user)
-        : user.role === SendbirdChat.Role.OPERATOR), isOperator = _g[0], setIsOperator = _g[1];
-    var isProcessing = React.useRef(false);
-    var onClickHandler = React.useCallback(function () {
-        if (!isProcessing.current) {
-            isProcessing.current = true;
-            if (isOperator) {
-                channel.removeOperators([user.userId])
-                    .then(function () {
-                    setIsOperator(false);
-                    onChange(channel, user, false);
-                    isProcessing.current = false;
-                })
-                    .catch(function (err) {
-                    onError(err);
-                    isProcessing.current = false;
-                });
-            }
-            else {
-                channel.addOperators([user.userId])
-                    .then(function () {
-                    setIsOperator(true);
-                    onChange(channel, user, true);
-                    isProcessing.current = false;
-                })
-                    .catch(function (err) {
-                    onError(err);
-                    isProcessing.current = false;
-                });
-            }
-        }
-    }, [isProcessing, isOperator]);
-    return (React.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
-};
-
-var defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
-var EmojiListItems$1 = function (_a) {
-    var id = _a.id, children = _a.children, parentRef = _a.parentRef, parentContainRef = _a.parentContainRef, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, closeDropdown = _a.closeDropdown;
-    var _c = React.useState({ left: 0, top: 0 }), reactionStyle = _c[0], setReactionStyle = _c[1];
-    var reactionRef = React.useRef(null);
-    /* showParent & hideParent */
-    React.useEffect(function () {
-        if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
-            parentContainRef.current.classList.add('sendbird-reactions--pressed');
-        }
-        return function () {
-            if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
-                parentContainRef.current.classList.remove('sendbird-reactions--pressed');
-            }
-        };
-    }, []);
-    /* setupEvents & cleanupEvents */
-    React.useEffect(function () {
-        var handleClickOutSide = function (event) {
-            var _a, _b;
-            if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
-                closeDropdown();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutSide);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutSide);
-        };
-    }, []);
-    /* getBarPosition */
-    React.useEffect(function () {
-        var _a, _b, _c;
-        var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
-        var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
-        var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : defaultParentRect;
-        var x = parentRect.x || parentRect.left;
-        var y = parentRect.y || parentRect.top;
-        var reactionStyle = {
-            top: y,
-            left: x,
-        };
-        if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
-            setReactionStyle(reactionStyle);
-        }
-        else {
-            var rect = (_c = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-            if (reactionStyle.top < rect.height) {
-                reactionStyle.top += parentRect.height;
-                reactionStyle.top += spaceFromTriggerY;
-            }
-            else {
-                reactionStyle.top -= rect.height;
-                reactionStyle.top -= spaceFromTriggerY;
-            }
-            reactionStyle.left -= rect.width / 2;
-            reactionStyle.left += (parentRect.height / 2) - 2;
-            reactionStyle.left += spaceFromTriggerX;
-            var maximumLeft = window.innerWidth - rect.width;
-            if (maximumLeft < reactionStyle.left) {
-                reactionStyle.left = maximumLeft;
-            }
-            if (reactionStyle.left < 0) {
-                reactionStyle.left = 0;
-            }
-            setReactionStyle(reactionStyle);
-        }
-    }, []);
-    var rootElement = document.getElementById(EMOJI_MENU_ROOT_ID);
-    if (rootElement) {
-        return (reactDom.createPortal(React.createElement("div", { className: MENU_OBSERVING_CLASS_NAME, id: id },
-            React.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
-            React.createElement("ul", { className: "sendbird-dropdown__reaction-bar", "data-testid": "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
-                    display: 'inline-block',
-                    position: 'fixed',
-                    left: "".concat(Math.round(reactionStyle.left), "px"),
-                    top: "".concat(Math.round(reactionStyle.top), "px"),
-                } },
-                React.createElement(ui_SortByRow, { className: "sendbird-dropdown__reaction-bar__row", maxItemCount: 8, itemWidth: 44, itemHeight: 40 }, children))), rootElement));
-    }
-    return null;
-};
-
-var ENTER_KEY = 13;
-// # useElementObserve
-var MENU_OBSERVING_CLASS_NAME = 'sendbird-observing-message-menu';
-var getObservingId = function (txt) { return "m_".concat(txt); };
-var MenuItems = MenuItems$1;
-var EmojiListItems = EmojiListItems$1;
-var MenuItem = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, onClick = _a.onClick, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID;
-    var handleClickEvent = function (e) {
-        if (!disable && onClick) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }
-    };
-    return (React.createElement("li", { className: index.getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']), role: "menuitem", "aria-disabled": disable ? true : false, onClick: handleClickEvent, onKeyPress: function (e) { if (e.keyCode === ENTER_KEY)
-            handleClickEvent(e); }, tabIndex: 0, "data-sb-id": testID !== null && testID !== void 0 ? testID : dataSbId, "data-testid": testID !== null && testID !== void 0 ? testID : dataSbId },
-        React.createElement(ui_Label.Label, { className: "sendbird-dropdown__menu-item__text", type: ui_Label.LabelTypography.SUBTITLE_2, color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1 }, children)));
-};
-var MENU_ROOT_ID = 'sendbird-dropdown-portal';
-var MenuRoot = function () { return (React.createElement("div", { id: MENU_ROOT_ID, className: MENU_ROOT_ID })); };
-// For the test environment
-var EMOJI_MENU_ROOT_ID = 'sendbird-emoji-list-portal';
-var EmojiReactionListRoot = function () { return React.createElement("div", { id: EMOJI_MENU_ROOT_ID }); };
-function ContextMenu(_a) {
-    var menuTrigger = _a.menuTrigger, menuItems = _a.menuItems, isOpen = _a.isOpen, onClick = _a.onClick;
-    var _b = React.useState(false), showMenu = _b[0], setShowMenu = _b[1];
-    return (React.createElement("div", { className: "sendbird-context-menu", style: { display: 'inline' }, onClick: onClick }, menuTrigger === null || menuTrigger === void 0 ? void 0 :
-        menuTrigger(function () { return setShowMenu(!showMenu); }),
-        (showMenu || isOpen) && menuItems(function () { return setShowMenu(false); })));
-}
-
-exports.EMOJI_MENU_ROOT_ID = EMOJI_MENU_ROOT_ID;
-exports.EmojiListItems = EmojiListItems;
-exports.EmojiReactionListRoot = EmojiReactionListRoot;
-exports.MENU_OBSERVING_CLASS_NAME = MENU_OBSERVING_CLASS_NAME;
-exports.MENU_ROOT_ID = MENU_ROOT_ID;
-exports.MenuItem = MenuItem;
-exports.MenuItems = MenuItems;
-exports.MenuRoot = MenuRoot;
-exports.MuteMenuItem = MuteMenuItem;
-exports.OperatorMenuItem = OperatorMenuItem;
-exports.default = ContextMenu;
-exports.getObservingId = getObservingId;
+require('../chunks/bundle-CTW4jbtw.js');
+require('../chunks/bundle-_xb0mhf9.js');
+require('../chunks/bundle-DQG6eG4l.js');
+
+
+
+exports.EMOJI_MENU_ROOT_ID = ui_ContextMenu.EMOJI_MENU_ROOT_ID;
+exports.EmojiListItems = ui_ContextMenu.EmojiListItems;
+exports.EmojiReactionListRoot = ui_ContextMenu.EmojiReactionListRoot;
+exports.MENU_OBSERVING_CLASS_NAME = ui_ContextMenu.MENU_OBSERVING_CLASS_NAME;
+exports.MENU_ROOT_ID = ui_ContextMenu.MENU_ROOT_ID;
+exports.MenuItem = ui_ContextMenu.MenuItem$1;
+exports.MenuItems = ui_ContextMenu.MenuItems;
+exports.MenuRoot = ui_ContextMenu.MenuRoot;
+exports.MuteMenuItem = ui_ContextMenu.MuteMenuItem;
+exports.OperatorMenuItem = ui_ContextMenu.OperatorMenuItem;
+exports.default = ui_ContextMenu.ContextMenu;
+exports.getObservingId = ui_ContextMenu.getObservingId;
 //# sourceMappingURL=ContextMenu.js.map

package/cjs/ui/ContextMenu.js.map

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

package/cjs/ui/DateSeparator.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
-var color = require('../chunks/bundle-pHnJ7iYa.js');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
-require('../chunks/bundle-DhdwG-eV.js');
+var color = require('../chunks/bundle-8gOOVKMq.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
+require('../chunks/bundle-CrkUdg03.js');
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? undefined : _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

@@ -5,48 +5,48 @@ var ui_ReactionBadge = require('./ReactionBadge.js');
 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-CuZz1sho.js');
+var ui_ContextMenu = require('../chunks/bundle-B_eF_lLw.js');
+var index = require('../chunks/bundle-VyDwmxN4.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
 var ui_UserListItem = require('./UserListItem.js');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var utils = require('../chunks/bundle-CO52Wsr3.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-BtRbaZbx.js');
-var useLongPress = require('../chunks/bundle-1gIzHc0z.js');
-var LocalizationContext = require('../chunks/bundle-NcZ2-bR4.js');
+var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
+var useLongPress = require('../chunks/bundle-BHieBSdL.js');
+var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var getIsReactionEnabled = require('../chunks/bundle-O3OF5I9b.js');
-require('../chunks/bundle-DhdwG-eV.js');
+var getIsReactionEnabled = require('../chunks/bundle-Cv85GW-0.js');
+require('../chunks/bundle-CrkUdg03.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-IUGG9gXc.js');
+require('../chunks/bundle-BkKs2HEQ.js');
+require('../withSendbird.js');
+require('./IconButton.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CO6T5RjX.js');
-require('../chunks/bundle-_ghqr1tN.js');
-require('../chunks/bundle-DgLInKvx.js');
-require('./IconButton.js');
+require('../chunks/bundle-CTW4jbtw.js');
+require('../chunks/bundle-_xb0mhf9.js');
+require('../chunks/bundle-1dGjBLMq.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
-require('../withSendbird.js');
 require('css-vars-ponyfill');
-require('../chunks/bundle-DL9-hPIm.js');
-require('../chunks/bundle-BLhYL7sf.js');
-require('../chunks/bundle-DSebafRU.js');
-require('../chunks/bundle-DTwSpi6H.js');
-require('../chunks/bundle-C1OSi3PG.js');
-require('../chunks/bundle-BnPisbbq.js');
+require('../chunks/bundle-D60dip73.js');
+require('../chunks/bundle-DsscLs3k.js');
+require('../chunks/bundle-DQG6eG4l.js');
+require('../chunks/bundle-_cqjcInH.js');
+require('../chunks/bundle-B56LqPOh.js');
+require('../chunks/bundle-CQbuVhqz.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-CYeiwVvG.js');
+require('../chunks/bundle-CI9mjpa7.js');
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;
@@ -75,7 +75,7 @@ var ReactedMembersBottomSheet = function (_a) {
             })),
             React.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
             ((_d = (_c = message.reactions) === null || _c === void 0 ? void 0 : _c.find(function (reaction) { return reaction.key === selectedEmoji; })) === null || _d === void 0 ? void 0 : _d.userIds.map(function (userId) { return members.find(function (member) { return member.userId === userId; }); }).filter(function (member) { return member !== undefined; }))
-                .map(function (member) { return (React.createElement(ui_UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onUserAvatarClick: onPressUserProfileCallBack })); })))));
+                .map(function (member) { return (React.createElement(ui_UserListItem.UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onUserAvatarClick: onPressUserProfileCallBack })); })))));
 };
 
 function ReactionItem(_a) {
@@ -173,7 +173,7 @@ var EmojiReactions = function (_a) {
         (((_e = (_d = message.reactions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) > 0) && ((_f = message.reactions) === null || _f === void 0 ? void 0 : _f.map(function (reaction) {
             return (React.createElement(ReactionItem, { key: reaction === null || reaction === void 0 ? void 0 : reaction.key, reaction: reaction, memberNicknamesMap: memberNicknamesMap, setEmojiKey: setSelectedEmojiKey, toggleReaction: toggleReaction, emojisMap: emojisMap, channel: channel, message: message }));
         })),
-        (!isMobile && showAddReactionBadge) && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", testID: "sendbird-emoji-reactions__add-reaction-badge", ref: addReactionRef, isAdd: true, onClick: function (e) {
+        (!isMobile && showAddReactionBadge) && (React.createElement(ui_ContextMenu.ContextMenu, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", testID: "sendbird-emoji-reactions__add-reaction-badge", ref: addReactionRef, isAdd: true, onClick: function (e) {
                     var _a;
                     toggleDropdown();
                     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);

package/cjs/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-NcZ2-bR4.js');
-var index = require('../chunks/bundle-CuZz1sho.js');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
-require('../chunks/bundle-BOmwadBI.js');
-require('../chunks/bundle-DhdwG-eV.js');
-require('../chunks/bundle-DSebafRU.js');
+var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
+var index = require('../chunks/bundle-VyDwmxN4.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
+require('../chunks/bundle-Cu2j1EmN.js');
+require('../chunks/bundle-CrkUdg03.js');
+require('../chunks/bundle-DQG6eG4l.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CO6T5RjX.js');
-require('../chunks/bundle-_ghqr1tN.js');
+require('../chunks/bundle-CTW4jbtw.js');
+require('../chunks/bundle-_xb0mhf9.js');
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/cjs/ui/FileMessageItemBody.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-CuZz1sho.js');
-var color = require('../chunks/bundle-pHnJ7iYa.js');
-var MediaQueryContext = require('../chunks/bundle-BtRbaZbx.js');
+var index = require('../chunks/bundle-VyDwmxN4.js');
+var color = require('../chunks/bundle-8gOOVKMq.js');
+var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
-require('../chunks/bundle-DhdwG-eV.js');
+var utils = require('../chunks/bundle-CO52Wsr3.js');
+require('../chunks/bundle-CrkUdg03.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CO6T5RjX.js');
-require('../chunks/bundle-_ghqr1tN.js');
+require('../chunks/bundle-CTW4jbtw.js');
+require('../chunks/bundle-_xb0mhf9.js');
 require('../withSendbird.js');
 
 function FileMessageItemBody(_a) {

package/cjs/ui/FileViewer.js

@@ -2,39 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('../chunks/bundle-NcZ2-bR4.js');
-var ui_Modal = require('../chunks/bundle-DgLInKvx.js');
-var index = require('../chunks/bundle-CuZz1sho.js');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
-var ui_Avatar = require('../chunks/bundle-C1OSi3PG.js');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
+var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
+var ui_Modal = require('../chunks/bundle-1dGjBLMq.js');
+var index = require('../chunks/bundle-VyDwmxN4.js');
+var utils = require('../chunks/bundle-CO52Wsr3.js');
+var ui_Avatar = require('../chunks/bundle-B56LqPOh.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
 var ui_Icon = require('./Icon.js');
-var consts = require('../chunks/bundle-BLhYL7sf.js');
-var useKeyDown = require('../chunks/bundle-CBh1SxbG.js');
-require('../chunks/bundle-DhdwG-eV.js');
-require('../chunks/bundle-DSebafRU.js');
-require('../chunks/bundle-BtRbaZbx.js');
+var consts = require('../chunks/bundle-DsscLs3k.js');
+var useKeyDown = require('../chunks/bundle-QTX1PYil.js');
+require('../chunks/bundle-CrkUdg03.js');
+require('../chunks/bundle-DQG6eG4l.js');
+require('../chunks/bundle-D0U-xAFE.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
 require('../withSendbird.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
-require('../chunks/bundle-IUGG9gXc.js');
+require('../chunks/bundle-BkKs2HEQ.js');
 require('@sendbird/chat/openChannel');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-DL9-hPIm.js');
+require('../chunks/bundle-D60dip73.js');
 require('../useSendbirdStateContext.js');
-require('../chunks/bundle-CO6T5RjX.js');
-require('./ContextMenu.js');
+require('../chunks/bundle-CTW4jbtw.js');
+require('../chunks/bundle-B_eF_lLw.js');
 require('./SortByRow.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-_ghqr1tN.js');
+require('../chunks/bundle-_xb0mhf9.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-BnPisbbq.js');
+require('../chunks/bundle-CQbuVhqz.js');
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 var ViewerTypes = {

package/cjs/ui/Header.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-ChQCtrna.js');
-var MediaQueryContext = require('../chunks/bundle-BtRbaZbx.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
+var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
 var ui_TextButton = require('./TextButton.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
-require('../chunks/bundle-DhdwG-eV.js');
-require('../chunks/bundle-pHnJ7iYa.js');
+var utils = require('../chunks/bundle-CO52Wsr3.js');
+require('../chunks/bundle-CrkUdg03.js');
+require('../chunks/bundle-8gOOVKMq.js');
 
 var Header = function (_a) {
     var _b;

package/cjs/ui/Icon.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
+var utils = require('../chunks/bundle-CO52Wsr3.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-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.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-BOmwadBI.js');
+var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
 var React = require('react');
-var utils = require('../chunks/bundle-Cslxj9Oh.js');
+var utils = require('../chunks/bundle-CO52Wsr3.js');
 
 var numberToPx = (function (value) {
     if (value === null)

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-ChQCtrna.js');
-require('../chunks/bundle-BOmwadBI.js');
-require('../chunks/bundle-DhdwG-eV.js');
+var ui_Label = require('../chunks/bundle-BM95N32D.js');
+require('../chunks/bundle-Cu2j1EmN.js');
+require('../chunks/bundle-CrkUdg03.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;