@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/cjs/ui/TooltipWrapper.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
 
-var SPACE_FROM_TRIGGER = 8;
-function TooltipWrapper(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, hoverTooltip = _a.hoverTooltip;
-    var _c = React.useState(false), showHoverTooltip = _c[0], setShowHoverTooltip = _c[1];
-    var childrenRef = React.useRef(null);
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-tooltip-wrapper',
-        ], false).join(' '), onMouseOver: function () { setShowHoverTooltip(true); }, onFocus: function () { setShowHoverTooltip(true); }, onMouseOut: function () { setShowHoverTooltip(false); }, onBlur: function () { setShowHoverTooltip(false); } },
-        React.createElement("div", { className: "sendbird-tooltip-wrapper__children", ref: childrenRef }, children),
-        showHoverTooltip && (React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip", style: { bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)") } },
-            React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner" },
-                React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container", style: { left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)") } }, hoverTooltip))))));
+var SPACE_FROM_TRIGGER = 8;
+function TooltipWrapper(_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, hoverTooltip = _a.hoverTooltip;
+    var _c = React.useState(false), showHoverTooltip = _c[0], setShowHoverTooltip = _c[1];
+    var childrenRef = React.useRef(null);
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-tooltip-wrapper',
+        ], false).join(' '), onMouseOver: function () { setShowHoverTooltip(true); }, onFocus: function () { setShowHoverTooltip(true); }, onMouseOut: function () { setShowHoverTooltip(false); }, onBlur: function () { setShowHoverTooltip(false); } },
+        React.createElement("div", { className: "sendbird-tooltip-wrapper__children", ref: childrenRef }, children),
+        showHoverTooltip && (React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip", style: { bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)") } },
+            React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner" },
+                React.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container", style: { left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)") } }, hoverTooltip))))));
 }
 
 module.exports = TooltipWrapper;

package/cjs/ui/TypingIndicatorBubble.js

@@ -1,67 +1,67 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-BjHWj0YM.js');
-require('../chunks/bundle-BwzMNAFs.js');
+var ui_Avatar = require('../chunks/bundle-DxSB9NRz.js');
+require('../chunks/bundle-HGbi-rCv.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-D1gE5kRR.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-C93-onMF.js');
 require('./Icon.js');
 
-var TypingDots = function () {
-    return (React.createElement("div", { className: 'typing-dots-container' },
-        React.createElement("span", null),
-        React.createElement("span", null),
-        React.createElement("span", null)));
+var TypingDots = function () {
+    return (React.createElement("div", { className: 'typing-dots-container' },
+        React.createElement("span", null),
+        React.createElement("span", null),
+        React.createElement("span", null)));
 };
 
-var AVATAR_BORDER_SIZE = 2;
-var AVATAR_DIAMETER_WITHOUT_BORDER = 28;
-var AVATAR_DIAMETER = AVATAR_DIAMETER_WITHOUT_BORDER + (AVATAR_BORDER_SIZE * 2);
-var LEFT_GAP = 24;
-var MAX_PROFILES_COUNT = 3;
-var LEFT_FOR_BORDER = AVATAR_BORDER_SIZE;
-var AvatarStack = function (props) {
-    var sources = props.sources, max = props.max;
-    return (React.createElement(React.Fragment, null,
-        " ",
-        sources.slice(0, max).map(function (src, index) { return (React.createElement(ui_Avatar.Avatar, { className: 'sendbird-message-content__left__avatar multiple', src: src || '', key: "avatar_stack_item_".concat(src), 
-            // TODO: Divide getting profileUrl logic to utils
-            width: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), height: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), zIndex: index, left: "".concat(index * LEFT_GAP - LEFT_FOR_BORDER, "px") })); }),
-        " "));
-};
-var TypingIndicatorBubbleAvatar = function (props) {
-    var typingMembers = props.typingMembers;
-    var membersCount = typingMembers.length;
-    var displayCount = Math.min(membersCount, 4);
-    var hiddenCount = membersCount - MAX_PROFILES_COUNT;
-    var superImposedWidth = ((displayCount - 1) * (AVATAR_DIAMETER - LEFT_GAP));
-    var rightPaddingSize = 12;
-    return (React.createElement("div", { className: 'sendbird-message-content__left incoming', style: {
-            minWidth: (displayCount * AVATAR_DIAMETER) - superImposedWidth + rightPaddingSize,
-        } },
-        React.createElement(AvatarStack, { sources: typingMembers.map(function (member) { return member.profileUrl; }), max: MAX_PROFILES_COUNT }),
-        hiddenCount > 0
-            ? React.createElement(ui_Avatar.Avatar, { className: 'sendbird-message-content__left__avatar multiple', 
-                // TODO: Divide getting profileUrl logic to utils
-                width: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), height: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), zIndex: MAX_PROFILES_COUNT, left: "".concat(MAX_PROFILES_COUNT * LEFT_GAP, "px"), customDefaultComponent: function (_a) {
-                    var width = _a.width, height = _a.height;
-                    return (React.createElement(ui_Avatar.AvatarDefault, { width: width, height: height, text: "+".concat(hiddenCount) }));
-                } })
-            : null));
-};
-var TypingIndicatorBubble = function (props) {
-    var typingMembers = props.typingMembers, handleScroll = props.handleScroll;
-    if (typingMembers.length === 0)
-        return null;
-    React.useLayoutEffect(function () {
-        // Keep the scrollBottom value after fetching new message list
-        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
-    }, []);
-    return React.createElement("div", { className: 'sendbird-message-content incoming', style: { marginBottom: '2px' } },
-        React.createElement(TypingIndicatorBubbleAvatar, { typingMembers: typingMembers }),
-        React.createElement("div", { className: 'sendbird-message-content__middle' },
-            React.createElement(TypingDots, null)));
+var AVATAR_BORDER_SIZE = 2;
+var AVATAR_DIAMETER_WITHOUT_BORDER = 28;
+var AVATAR_DIAMETER = AVATAR_DIAMETER_WITHOUT_BORDER + (AVATAR_BORDER_SIZE * 2);
+var LEFT_GAP = 24;
+var MAX_PROFILES_COUNT = 3;
+var LEFT_FOR_BORDER = AVATAR_BORDER_SIZE;
+var AvatarStack = function (props) {
+    var sources = props.sources, max = props.max;
+    return (React.createElement(React.Fragment, null,
+        " ",
+        sources.slice(0, max).map(function (src, index) { return (React.createElement(ui_Avatar.Avatar, { className: 'sendbird-message-content__left__avatar multiple', src: src || '', key: "avatar_stack_item_".concat(src), 
+            // TODO: Divide getting profileUrl logic to utils
+            width: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), height: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), zIndex: index, left: "".concat(index * LEFT_GAP - LEFT_FOR_BORDER, "px") })); }),
+        " "));
+};
+var TypingIndicatorBubbleAvatar = function (props) {
+    var typingMembers = props.typingMembers;
+    var membersCount = typingMembers.length;
+    var displayCount = Math.min(membersCount, 4);
+    var hiddenCount = membersCount - MAX_PROFILES_COUNT;
+    var superImposedWidth = ((displayCount - 1) * (AVATAR_DIAMETER - LEFT_GAP));
+    var rightPaddingSize = 12;
+    return (React.createElement("div", { className: 'sendbird-message-content__left incoming', style: {
+            minWidth: (displayCount * AVATAR_DIAMETER) - superImposedWidth + rightPaddingSize,
+        } },
+        React.createElement(AvatarStack, { sources: typingMembers.map(function (member) { return member.profileUrl; }), max: MAX_PROFILES_COUNT }),
+        hiddenCount > 0
+            ? React.createElement(ui_Avatar.Avatar, { className: 'sendbird-message-content__left__avatar multiple', 
+                // TODO: Divide getting profileUrl logic to utils
+                width: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), height: "".concat(AVATAR_DIAMETER_WITHOUT_BORDER, "px"), zIndex: MAX_PROFILES_COUNT, left: "".concat(MAX_PROFILES_COUNT * LEFT_GAP, "px"), customDefaultComponent: function (_a) {
+                    var width = _a.width, height = _a.height;
+                    return (React.createElement(ui_Avatar.AvatarDefault, { width: width, height: height, text: "+".concat(hiddenCount) }));
+                } })
+            : null));
+};
+var TypingIndicatorBubble = function (props) {
+    var typingMembers = props.typingMembers, handleScroll = props.handleScroll;
+    if (typingMembers.length === 0)
+        return null;
+    React.useLayoutEffect(function () {
+        // Keep the scrollBottom value after fetching new message list
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, []);
+    return React.createElement("div", { className: 'sendbird-message-content incoming', style: { marginBottom: '2px' } },
+        React.createElement(TypingIndicatorBubbleAvatar, { typingMembers: typingMembers }),
+        React.createElement("div", { className: 'sendbird-message-content__middle' },
+            React.createElement(TypingDots, null)));
 };
 
 module.exports = TypingIndicatorBubble;

package/cjs/ui/UnknownMessageItemBody.js

@@ -1,29 +1,28 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-var index = require('../chunks/bundle-BTEk9dhT.js');
-var LocalizationContext = require('../chunks/bundle-Cg6exdly.js');
-require('../chunks/bundle-BwzMNAFs.js');
-require('../chunks/bundle-DXrpp6AJ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+var index = require('../chunks/bundle-wl1uuzU7.js');
+var LocalizationContext = require('../chunks/bundle-oeWNUdCB.js');
+require('../chunks/bundle-HGbi-rCv.js');
+require('../chunks/bundle-gtkPlUrw.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CN-HA7zS.js');
-require('../chunks/bundle-XPPVGabQ.js');
+require('../chunks/bundle-BWGOXLHb.js');
 
-function UnknownMessageItemBody(_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;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement("div", { className: index.getClassName([
-            className,
-            'sendbird-unknown-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' : '',
-        ]) },
-        React.createElement(ui_Label.Label, { className: "sendbird-unknown-message-item-body__header", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE),
-        React.createElement(ui_Label.Label, { className: "sendbird-unknown-message-item-body__description", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE)));
+function UnknownMessageItemBody(_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;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: index.getClassName([
+            className,
+            'sendbird-unknown-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' : '',
+        ]) },
+        React.createElement(ui_Label.Label, { className: "sendbird-unknown-message-item-body__header", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE),
+        React.createElement(ui_Label.Label, { className: "sendbird-unknown-message-item-body__description", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE)));
 }
 
 module.exports = UnknownMessageItemBody;

package/cjs/ui/UnknownMessageItemBody.js.map

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

package/cjs/ui/UserListItem.js

@@ -1,79 +1,79 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
-var UserProfileContext = require('../chunks/bundle-CT33owD4.js');
-var LocalizationContext = require('../chunks/bundle-Cg6exdly.js');
-var ui_Avatar = require('../chunks/bundle-BjHWj0YM.js');
+var UserProfileContext = require('../chunks/bundle-CAUMYdVU.js');
+var LocalizationContext = require('../chunks/bundle-oeWNUdCB.js');
+var ui_Avatar = require('../chunks/bundle-DxSB9NRz.js');
 var ui_MutedAvatarOverlay = require('./MutedAvatarOverlay.js');
 var ui_Checkbox = require('./Checkbox.js');
 var ui_UserProfile = require('./UserProfile.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-XPPVGabQ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-BWGOXLHb.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-D1gE5kRR.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-C93-onMF.js');
 require('./Icon.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-CqfYJ2-A.js');
+require('../chunks/bundle-Dehhi1FZ.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
+require('../chunks/bundle-BTU876jx.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-B0Cl8cKp.js');
-require('../chunks/bundle-BTEk9dhT.js');
+require('../chunks/bundle-1XtsxT8L.js');
+require('../chunks/bundle-wl1uuzU7.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CN-HA7zS.js');
 
-function UserListItem(_a) {
-    var user = _a.user, className = _a.className, checked = _a.checked, checkBox = _a.checkBox, isOperator = _a.isOperator, disabled = _a.disabled, disableMessaging = _a.disableMessaging, currentUser = _a.currentUser, action = _a.action, onChange = _a.onChange, _b = _a.avatarSize, avatarSize = _b === void 0 ? '40px' : _b, onClick = _a.onClick, onUserAvatarClick = _a.onUserAvatarClick;
-    var operator = isOperator !== null && isOperator !== void 0 ? isOperator : (user === null || user === void 0 ? void 0 : user.role) === 'operator';
-    var uniqueKey = user.userId;
-    var actionRef = React.useRef(null);
-    var parentRef = React.useRef(null);
-    var avatarRef = React.useRef(null);
-    var _c = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _c.disableUserProfile, renderUserProfile = _c.renderUserProfile;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-user-list-item',
-        ], false).join(' '), ref: parentRef },
-        (user === null || user === void 0 ? void 0 : user.isMuted) && (React.createElement(ui_MutedAvatarOverlay, { height: 40, width: 40 })),
-        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-user-list-item__avatar", ref: avatarRef, src: (user === null || user === void 0 ? void 0 : user.profileUrl) || (user === null || user === void 0 ? void 0 : user.plainProfileUrl) || '', width: avatarSize, height: avatarSize, onClick: function () {
-                    var _a;
-                    if (!disableUserProfile) {
-                        toggleDropdown();
-                        (_a = (onUserAvatarClick !== null && onUserAvatarClick !== void 0 ? onUserAvatarClick : onClick)) === null || _a === void 0 ? void 0 : _a();
-                    }
-                } })); }, menuItems: function (closeDropdown) { return (renderUserProfile
-                ? renderUserProfile({
-                    user: user,
-                    currentUserId: currentUser,
-                    close: closeDropdown,
-                    avatarRef: avatarRef,
-                })
-                : (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
-                    // for catching location(x, y) of MenuItems
-                    parentContainRef: avatarRef, 
-                    // for toggling more options(menus & reactions)
-                    closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
-                    React.createElement(ui_UserProfile, { disableMessaging: disableMessaging, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } }),
-        React.createElement(ui_Label.Label, { className: "sendbird-user-list-item__title", type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 },
-            user.nickname || stringSet.NO_NAME,
-            (currentUser === user.userId) && (stringSet.CHANNEL_SETTING__MEMBERS__YOU)),
-        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-user-list-item__subtitle", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
-        checkBox && (React.createElement("label", { className: "sendbird-user-list-item__checkbox", htmlFor: uniqueKey },
-            React.createElement(ui_Checkbox, { id: uniqueKey, checked: checked, disabled: disabled, onChange: function (event) { return onChange(event); } }))),
-        operator && (React.createElement(ui_Label.Label, { className: [
-                'sendbird-user-list-item__operator',
-                checkBox ? 'checkbox' : '',
-            ].join(' '), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.LABEL__OPERATOR)),
-        action && (React.createElement("div", { className: "sendbird-user-list-item__action", ref: actionRef }, action({ actionRef: actionRef, parentRef: parentRef })))));
+function UserListItem(_a) {
+    var user = _a.user, className = _a.className, checked = _a.checked, checkBox = _a.checkBox, isOperator = _a.isOperator, disabled = _a.disabled, disableMessaging = _a.disableMessaging, currentUser = _a.currentUser, action = _a.action, onChange = _a.onChange, _b = _a.avatarSize, avatarSize = _b === void 0 ? '40px' : _b, onClick = _a.onClick, onUserAvatarClick = _a.onUserAvatarClick;
+    var operator = isOperator !== null && isOperator !== void 0 ? isOperator : (user === null || user === void 0 ? void 0 : user.role) === 'operator';
+    var uniqueKey = user.userId;
+    var actionRef = React.useRef(null);
+    var parentRef = React.useRef(null);
+    var avatarRef = React.useRef(null);
+    var _c = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _c.disableUserProfile, renderUserProfile = _c.renderUserProfile;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-user-list-item',
+        ], false).join(' '), ref: parentRef },
+        (user === null || user === void 0 ? void 0 : user.isMuted) && (React.createElement(ui_MutedAvatarOverlay, { height: 40, width: 40 })),
+        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-user-list-item__avatar", ref: avatarRef, src: (user === null || user === void 0 ? void 0 : user.profileUrl) || (user === null || user === void 0 ? void 0 : user.plainProfileUrl) || '', width: avatarSize, height: avatarSize, onClick: function () {
+                    var _a;
+                    if (!disableUserProfile) {
+                        toggleDropdown();
+                        (_a = (onUserAvatarClick !== null && onUserAvatarClick !== void 0 ? onUserAvatarClick : onClick)) === null || _a === void 0 ? void 0 : _a();
+                    }
+                } })); }, menuItems: function (closeDropdown) { return (renderUserProfile
+                ? renderUserProfile({
+                    user: user,
+                    currentUserId: currentUser,
+                    close: closeDropdown,
+                    avatarRef: avatarRef,
+                })
+                : (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
+                    // for catching location(x, y) of MenuItems
+                    parentContainRef: avatarRef, 
+                    // for toggling more options(menus & reactions)
+                    closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
+                    React.createElement(ui_UserProfile, { disableMessaging: disableMessaging, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } }),
+        React.createElement(ui_Label.Label, { className: "sendbird-user-list-item__title", type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 },
+            user.nickname || stringSet.NO_NAME,
+            (currentUser === user.userId) && (stringSet.CHANNEL_SETTING__MEMBERS__YOU)), // if there is now nickname, display userId
+        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-user-list-item__subtitle", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
+        checkBox && (React.createElement("label", { className: "sendbird-user-list-item__checkbox", htmlFor: uniqueKey },
+            React.createElement(ui_Checkbox, { id: uniqueKey, checked: checked, disabled: disabled, onChange: function (event) { return onChange(event); } }))),
+        operator && (React.createElement(ui_Label.Label, { className: [
+                'sendbird-user-list-item__operator',
+                checkBox ? 'checkbox' : '',
+            ].join(' '), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.LABEL__OPERATOR)),
+        action && (React.createElement("div", { className: "sendbird-user-list-item__action", ref: actionRef }, action({ actionRef: actionRef, parentRef: parentRef })))));
 }
 
 module.exports = UserListItem;

package/cjs/ui/UserProfile.js

@@ -1,58 +1,58 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-Cg6exdly.js');
-var UserProfileContext = require('../chunks/bundle-CT33owD4.js');
+var LocalizationContext = require('../chunks/bundle-oeWNUdCB.js');
+var UserProfileContext = require('../chunks/bundle-CAUMYdVU.js');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
-var ui_Avatar = require('../chunks/bundle-BjHWj0YM.js');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
+var ui_Avatar = require('../chunks/bundle-DxSB9NRz.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
 var ui_Button = require('./Button.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-XPPVGabQ.js');
-require('../chunks/bundle-CqfYJ2-A.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-BwzMNAFs.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-BWGOXLHb.js');
+require('../chunks/bundle-Dehhi1FZ.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-HGbi-rCv.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-D1gE5kRR.js');
+require('../chunks/bundle-C93-onMF.js');
 require('./Icon.js');
 require('../withSendbird.js');
 
-function UserProfile(_a) {
-    var _b, _c;
-    var user = _a.user, currentUserId = _a.currentUserId, _d = _a.disableMessaging, disableMessaging = _d === void 0 ? false : _d, onSuccess = _a.onSuccess;
-    var store = useSendbirdStateContext.useSendbirdStateContext();
-    var createChannel = sendbirdSelectors.getCreateGroupChannel(store);
-    var logger = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.logger;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    var currentUserId_ = currentUserId || ((_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId);
-    var onUserProfileMessage = React.useContext(UserProfileContext.UserProfileContext).onUserProfileMessage;
-    return (React.createElement("div", { className: "sendbird__user-profile" },
-        React.createElement("section", { className: "sendbird__user-profile-avatar" },
-            React.createElement(ui_Avatar.Avatar, { height: "80px", width: "80px", src: user === null || user === void 0 ? void 0 : user.profileUrl })),
-        React.createElement("section", { className: "sendbird__user-profile-name" },
-            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, (user === null || user === void 0 ? void 0 : user.nickname) || stringSet.NO_NAME)),
-        ((user === null || user === void 0 ? void 0 : user.userId) !== currentUserId_) && !disableMessaging && (React.createElement("section", { className: "sendbird__user-profile-message" },
-            React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, onClick: function () {
-                    // Create 1:1 channel
-                    var params = {
-                        isDistinct: false,
-                        invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
-                        operatorUserIds: [currentUserId_],
-                    };
-                    onSuccess();
-                    createChannel(params)
-                        .then(function (groupChannel) {
-                        logger.info('UserProfile, channel create', groupChannel);
-                        if (typeof onUserProfileMessage === 'function') {
-                            onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);
-                        }
-                    });
-                } }, stringSet.USER_PROFILE__MESSAGE))),
-        React.createElement("div", { className: "sendbird__user-profile-separator" }),
-        React.createElement("section", { className: "sendbird__user-profile-userId" },
-            React.createElement(ui_Label.Label, { className: "sendbird__user-profile-userId--label", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.USER_PROFILE__USER_ID),
-            React.createElement(ui_Label.Label, { className: "sendbird__user-profile-userId--value", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, user === null || user === void 0 ? void 0 : user.userId))));
+function UserProfile(_a) {
+    var _b, _c;
+    var user = _a.user, currentUserId = _a.currentUserId, _d = _a.disableMessaging, disableMessaging = _d === void 0 ? false : _d, onSuccess = _a.onSuccess;
+    var store = useSendbirdStateContext.useSendbirdStateContext();
+    var createChannel = sendbirdSelectors.getCreateGroupChannel(store);
+    var logger = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.logger;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var currentUserId_ = currentUserId || ((_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId);
+    var onUserProfileMessage = React.useContext(UserProfileContext.UserProfileContext).onUserProfileMessage;
+    return (React.createElement("div", { className: "sendbird__user-profile" },
+        React.createElement("section", { className: "sendbird__user-profile-avatar" },
+            React.createElement(ui_Avatar.Avatar, { height: "80px", width: "80px", src: user === null || user === void 0 ? void 0 : user.profileUrl })),
+        React.createElement("section", { className: "sendbird__user-profile-name" },
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, (user === null || user === void 0 ? void 0 : user.nickname) || stringSet.NO_NAME)),
+        ((user === null || user === void 0 ? void 0 : user.userId) !== currentUserId_) && !disableMessaging && (React.createElement("section", { className: "sendbird__user-profile-message" },
+            React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, onClick: function () {
+                    // Create 1:1 channel
+                    var params = {
+                        isDistinct: false,
+                        invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
+                        operatorUserIds: [currentUserId_],
+                    };
+                    onSuccess();
+                    createChannel(params)
+                        .then(function (groupChannel) {
+                        logger.info('UserProfile, channel create', groupChannel);
+                        if (typeof onUserProfileMessage === 'function') {
+                            onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);
+                        }
+                    });
+                } }, stringSet.USER_PROFILE__MESSAGE))),
+        React.createElement("div", { className: "sendbird__user-profile-separator" }),
+        React.createElement("section", { className: "sendbird__user-profile-userId" },
+            React.createElement(ui_Label.Label, { className: "sendbird__user-profile-userId--label", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.USER_PROFILE__USER_ID),
+            React.createElement(ui_Label.Label, { className: "sendbird__user-profile-userId--value", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, user === null || user === void 0 ? void 0 : user.userId))));
 }
 
 module.exports = UserProfile;

package/cjs/ui/VoiceMessageInput.js

@@ -5,15 +5,15 @@ require('./PlaybackTime.js');
 require('./ProgressBar.js');
 require('./TextButton.js');
 require('./Icon.js');
-require('../chunks/bundle-Cm_quRwQ.js');
-require('../chunks/bundle-Cg6exdly.js');
-var ui_VoiceMessageInput = require('../chunks/bundle-xeBPrPlZ.js');
-require('../chunks/bundle-BgJJI84U.js');
-require('../chunks/bundle-BwzMNAFs.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-Bu7SLdLc.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-XPPVGabQ.js');
+require('../chunks/bundle-5_kPn4wU.js');
+require('../chunks/bundle-oeWNUdCB.js');
+var ui_VoiceMessageInput = require('../chunks/bundle-BTod-EOk.js');
+require('../chunks/bundle-DfcEln0Z.js');
+require('../chunks/bundle-HGbi-rCv.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-DAxedY0T.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-BWGOXLHb.js');