@sendbird/uikit-react 3.7.0 → 3.8.0

package/cjs/ui/UserListItem.js

@@ -1,138 +1,71 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-c74b513f.js');
+var _tslib = require('../chunks/bundle-hK4x7nmG.js');
 var React = require('react');
-var UserProfileContext = require('../UserProfileContext-c6d7abb7.js');
-var LocalizationContext = require('../LocalizationContext-58b6ed7c.js');
+var UserProfileContext = require('../chunks/bundle-4bb_98h6.js');
+var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
 var ui_Avatar = require('./Avatar.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('../index-b5a9b4b7.js');
-require('../stringSet-1539ac47.js');
-require('../index-e8928da6.js');
+var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
+require('../chunks/bundle-z-Bvsn0B.js');
+require('../chunks/bundle-n1yh-qDb.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('prop-types');
-require('../uuid-9a117e16.js');
+require('../chunks/bundle-1yOirqug.js');
+require('../chunks/bundle-gMxOq93o.js');
 require('../sendbirdSelectors.js');
 require('../pubSub/topics.js');
-require('../utils-eb6d90e0.js');
 require('./Button.js');
-require('../types-d0d770c3.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-dbe8dd84.js');
+require('../chunks/bundle-FHx0K-3z.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-54279ec2.js');
+require('../chunks/bundle-I_9_5a8a.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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;
-  var uniqueKey = user.userId;
-  var actionRef = React__default["default"].useRef(null);
-  var parentRef = React__default["default"].useRef(null);
-  var avatarRef = React__default["default"].useRef(null);
-  var _c = React.useContext(UserProfileContext.UserProfileContext),
-    disableUserProfile = _c.disableUserProfile,
-    renderUserProfile = _c.renderUserProfile;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-user-list-item'], false).join(' '),
-    ref: parentRef
-  }, (user === null || user === void 0 ? void 0 : user.isMuted) && /*#__PURE__*/React__default["default"].createElement(ui_MutedAvatarOverlay, {
-    height: 40,
-    width: 40
-  }), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-user-list-item__avatar",
-        ref: avatarRef,
-        src: user.profileUrl,
-        width: avatarSize,
-        height: avatarSize,
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown();
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-          }
-        }
-      });
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].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'
-        }
-      }, renderUserProfile ? renderUserProfile({
-        user: user,
-        currentUserId: currentUser,
-        close: closeDropdown
-      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        disableMessaging: disableMessaging,
-        user: user,
-        currentUserId: currentUser,
-        onSuccess: closeDropdown
-      }));
-    }
-  }), /*#__PURE__*/React__default["default"].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 && ' (You)'),
-  // if there is now nickname, display userId
-  !user.nickname && /*#__PURE__*/React__default["default"].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 && /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "sendbird-user-list-item__checkbox",
-    htmlFor: uniqueKey
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Checkbox, {
-    id: uniqueKey,
-    checked: checked,
-    disabled: disabled,
-    onChange: function (event) {
-      return onChange(event);
-    }
-  })), isOperator && /*#__PURE__*/React__default["default"].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
-  }, "Operator"), action && /*#__PURE__*/React__default["default"].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;
+    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.default, { className: "sendbird-user-list-item__avatar", ref: avatarRef, src: user.profileUrl, width: avatarSize, height: avatarSize, onClick: function () {
+                    if (!disableUserProfile) {
+                        toggleDropdown();
+                        onClick === null || onClick === void 0 ? void 0 : onClick();
+                    }
+                } })); }, menuItems: function (closeDropdown) { return (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' } }, renderUserProfile
+                ? renderUserProfile({
+                    user: user,
+                    currentUserId: currentUser,
+                    close: closeDropdown,
+                })
+                : (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) && (' (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); } }))),
+        isOperator && (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 }, "Operator")),
+        action && (React.createElement("div", { className: "sendbird-user-list-item__action", ref: actionRef }, action({ actionRef: actionRef, parentRef: parentRef })))));
 }
 
 module.exports = UserListItem;

package/cjs/ui/UserListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserListItem.js","sources":["../../../src/ui/UserListItem/index.tsx"],"sourcesContent":["import React, { ChangeEvent, MutableRefObject, ReactElement, useContext } from 'react';\nimport { User } from '@sendbird/chat';\nimport { Member } from '@sendbird/chat/groupChannel';\nimport './index.scss';\n\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Avatar from '../Avatar/index';\nimport MutedAvatarOverlay from '../Avatar/MutedAvatarOverlay';\nimport Checkbox from '../Checkbox';\nimport UserProfile from '../UserProfile';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface UserListItemProps {\n  user: User;\n  className?: string;\n  checked?: boolean;\n  checkBox?: boolean;\n  isOperator?: boolean;\n  disabled?: boolean;\n  disableMessaging?: boolean;\n  currentUser?: string;\n  action?({ actionRef, parentRef }: {\n    actionRef: MutableRefObject<any>,\n    parentRef?: MutableRefObject<any>,\n  }): ReactElement;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n  avatarSize?: string;\n  onClick?(): void,\n}\n\nexport default function UserListItem({\n  user,\n  className,\n  checked,\n  checkBox,\n  isOperator,\n  disabled,\n  disableMessaging,\n  currentUser,\n  action,\n  onChange,\n  avatarSize = '40px',\n  onClick,\n}: UserListItemProps): ReactElement {\n  const uniqueKey = user.userId;\n  const actionRef = React.useRef(null);\n  const parentRef = React.useRef(null);\n  const avatarRef = React.useRef(null);\n  const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-user-list-item',\n      ].join(' ')}\n      ref={parentRef}\n    >\n      {\n        (user as Member)?.isMuted && (\n          <MutedAvatarOverlay height={40} width={40} />\n        )\n      }\n      <ContextMenu\n        menuTrigger={(toggleDropdown) => (\n          <Avatar\n            className=\"sendbird-user-list-item__avatar\"\n            ref={avatarRef}\n            src={user.profileUrl}\n            width={avatarSize}\n            height={avatarSize}\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\n                onClick?.();\n              }\n            }}\n          />\n        )}\n        menuItems={(closeDropdown) => (\n          <MenuItems\n            openLeft\n            parentRef={avatarRef}\n            // for catching location(x, y) of MenuItems\n            parentContainRef={avatarRef}\n            // for toggling more options(menus & reactions)\n            closeDropdown={closeDropdown}\n            style={{ paddingTop: '0px', paddingBottom: '0px' }}\n          >\n            {\n              renderUserProfile\n                ? renderUserProfile({\n                  user,\n                  currentUserId: currentUser,\n                  close: closeDropdown,\n                })\n                : (\n                  <UserProfile\n                    disableMessaging={disableMessaging}\n                    user={user}\n                    currentUserId={currentUser}\n                    onSuccess={closeDropdown}\n                  />\n                )\n            }\n          </MenuItems>\n        )}\n      />\n      <Label\n        className=\"sendbird-user-list-item__title\"\n        type={LabelTypography.SUBTITLE_1}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {user.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === user.userId) && (\n            ' (You)'\n          )\n        }\n      </Label>\n      { // if there is now nickname, display userId\n        !user.nickname && (\n          <Label\n            className=\"sendbird-user-list-item__subtitle\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {user.userId}\n          </Label>\n        )\n      }\n      {\n        checkBox && (\n          <label\n            className=\"sendbird-user-list-item__checkbox\"\n            htmlFor={uniqueKey}\n          >\n            <Checkbox\n              id={uniqueKey}\n              checked={checked}\n              disabled={disabled}\n              onChange={(event) => onChange(event)}\n            />\n          </label>\n        )\n      }\n      {\n        isOperator && (\n          <Label\n            className={[\n              'sendbird-user-list-item__operator',\n              checkBox ? 'checkbox' : '',\n            ].join(' ')}\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            Operator\n          </Label>\n        )\n      }\n      {\n        action && (\n          <div\n            className=\"sendbird-user-list-item__action\"\n            ref={actionRef}\n          >\n            {action({ actionRef, parentRef })}\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["UserListItem","_a","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","_b","avatarSize","onClick","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","_c","useContext","UserProfileContext","disableUserProfile","renderUserProfile","stringSet","LocalizationContext","createElement","__spreadArray","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","menuItems","closeDropdown","MenuItems","openLeft","parentContainRef","style","paddingTop","paddingBottom","currentUserId","close","UserProfile","onSuccess","Label","type","LabelTypography","SUBTITLE_1","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","htmlFor","Checkbox","id","event","SUBTITLE_2"],"mappings":"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"}
+{"version":3,"file":"UserListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/ui/UserProfile.js

@@ -1,87 +1,58 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../LocalizationContext-58b6ed7c.js');
-var UserProfileContext = require('../UserProfileContext-c6d7abb7.js');
+var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
+var UserProfileContext = require('../chunks/bundle-4bb_98h6.js');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-b5a9b4b7.js');
+var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
 var ui_Button = require('./Button.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var types = require('../types-d0d770c3.js');
-require('../stringSet-1539ac47.js');
-require('../index-e8928da6.js');
+require('../chunks/bundle-z-Bvsn0B.js');
+require('../chunks/bundle-n1yh-qDb.js');
 require('../pubSub/topics.js');
-require('../utils-eb6d90e0.js');
-require('../tslib.es6-c74b513f.js');
+require('../chunks/bundle-1yOirqug.js');
+require('../chunks/bundle-hK4x7nmG.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('prop-types');
-require('../uuid-9a117e16.js');
+require('../chunks/bundle-gMxOq93o.js');
 require('../withSendbird.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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 /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird__user-profile"
-  }, /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "sendbird__user-profile-avatar"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-    height: "80px",
-    width: "80px",
-    src: user === null || user === void 0 ? void 0 : user.profileUrl
-  })), /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "sendbird__user-profile-name"
-  }, /*#__PURE__*/React__default["default"].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 && /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "sendbird__user-profile-message"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
-    type: types.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)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird__user-profile-separator"
-  }), /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "sendbird__user-profile-userId"
-  }, /*#__PURE__*/React__default["default"].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), /*#__PURE__*/React__default["default"].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.default, { 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/UserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.js","sources":["../../../src/ui/UserProfile/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext } from 'react';\nimport type { GroupChannel, GroupChannelCreateParams } from '@sendbird/chat/groupChannel';\nimport type { User } from '@sendbird/chat';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { getCreateGroupChannel } from '../../lib/selectors';\nimport Avatar from '../Avatar/index';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Button, { ButtonTypes } from '../Button';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface Logger {\n  info?(message: string, channel: GroupChannel): void;\n}\n\ninterface Props {\n  user: User;\n  currentUserId?: string;\n  logger?: Logger;\n  disableMessaging?: boolean;\n  createChannel?(params: GroupChannelCreateParams): Promise<GroupChannel>;\n  onSuccess?: () => void;\n}\n\nfunction UserProfile({\n  user,\n  currentUserId,\n  disableMessaging = false,\n  onSuccess,\n}: Props): ReactElement {\n  const store = useSendbirdStateContext();\n  const createChannel = getCreateGroupChannel(store);\n  const logger = store?.config?.logger;\n  const { stringSet } = useContext(LocalizationContext);\n  const currentUserId_ = currentUserId || store?.config?.userId;\n  const { onUserProfileMessage } = useContext(UserProfileContext);\n  return (\n    <div className=\"sendbird__user-profile\">\n      <section className=\"sendbird__user-profile-avatar\">\n        <Avatar\n          height=\"80px\"\n          width=\"80px\"\n          src={user?.profileUrl}\n        />\n      </section>\n      <section className=\"sendbird__user-profile-name\">\n        <Label\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.nickname || stringSet.NO_NAME}\n        </Label>\n      </section>\n      {\n        (user?.userId !== currentUserId_) && !disableMessaging && (\n          <section className=\"sendbird__user-profile-message\">\n            <Button\n              type={ButtonTypes.SECONDARY}\n              onClick={() => {\n                // Create 1:1 channel\n                const params: GroupChannelCreateParams = {\n                  isDistinct: false,\n                  invitedUserIds: [user?.userId],\n                  operatorUserIds: [currentUserId_],\n                };\n                onSuccess();\n                createChannel(params)\n                  .then((groupChannel) => {\n                    logger.info('UserProfile, channel create', groupChannel);\n                    if (typeof onUserProfileMessage === 'function') {\n                      onUserProfileMessage?.(groupChannel);\n                    }\n                  });\n              }}\n            >\n              {stringSet.USER_PROFILE__MESSAGE}\n            </Button>\n          </section>\n        )\n      }\n      <div className=\"sendbird__user-profile-separator\" />\n      <section className=\"sendbird__user-profile-userId\">\n        <Label\n          className=\"sendbird__user-profile-userId--label\"\n          type={LabelTypography.CAPTION_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {stringSet.USER_PROFILE__USER_ID}\n        </Label>\n        <Label\n          className=\"sendbird__user-profile-userId--value\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.userId}\n        </Label>\n      </section>\n    </div>\n  );\n}\n\nexport default UserProfile;\n"],"names":["UserProfile","_a","user","currentUserId","_d","disableMessaging","onSuccess","store","useSendbirdStateContext","createChannel","getCreateGroupChannel","logger","_b","config","stringSet","useContext","LocalizationContext","currentUserId_","_c","userId","onUserProfileMessage","UserProfileContext","React","createElement","className","Avatar","height","width","src","profileUrl","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","Button","ButtonTypes","SECONDARY","onClick","params","isDistinct","invitedUserIds","operatorUserIds","then","groupChannel","info","USER_PROFILE__MESSAGE","CAPTION_2","ONBACKGROUND_2","USER_PROFILE__USER_ID","BODY_1"],"mappings":"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"}
+{"version":3,"file":"UserProfile.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/ui/VoiceMessageItemBody.js

@@ -8,120 +8,67 @@ var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
 var ui_PlaybackTime = require('./PlaybackTime.js');
 var ui_Loader = require('./Loader.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-b5a9b4b7.js');
-var VoicePlayer_context = require('../index-a95c4ab4.js');
-require('../consts-f54b15c2.js');
+var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
+var VoicePlayer_context = require('../chunks/bundle-BJe68nS0.js');
+require('../chunks/bundle-L9ushBZQ.js');
 require('../VoiceRecorder/context.js');
-require('../LocalizationContext-58b6ed7c.js');
-require('../stringSet-1539ac47.js');
-require('../index-e8928da6.js');
-require('./Modal.js');
+require('../chunks/bundle-QmSa90PC.js');
+require('../chunks/bundle-z-Bvsn0B.js');
+require('../chunks/bundle-n1yh-qDb.js');
+require('../chunks/bundle-UooP2IDU.js');
 require('react-dom');
-require('../utils-eb6d90e0.js');
-require('../tslib.es6-c74b513f.js');
-require('../index-54279ec2.js');
-require('../index-b8ba4548.js');
-require('../MediaQueryContext-6141d955.js');
+require('../chunks/bundle-1yOirqug.js');
+require('../chunks/bundle-Y9TkHVI5.js');
 require('./IconButton.js');
+require('../chunks/bundle-hK4x7nmG.js');
 require('./Button.js');
-require('../types-d0d770c3.js');
-require('prop-types');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var VoiceMessageItemBody = function (_a) {
-  var _b;
-  var className = _a.className,
-    message = _a.message,
-    channelUrl = _a.channelUrl,
-    _c = _a.isByMe,
-    isByMe = _c === void 0 ? false : _c,
-    _d = _a.isReactionEnabled,
-    isReactionEnabled = _d === void 0 ? false : _d;
-  var _e = React.useState(false),
-    usingReaction = _e[0],
-    setUsingReaction = _e[1];
-  var _f = VoicePlayer_useVoicePlayer.useVoicePlayer({
-      channelUrl: channelUrl,
-      key: "".concat(message === null || message === void 0 ? void 0 : message.messageId),
-      audioFileUrl: message === null || message === void 0 ? void 0 : message.url
-    }),
-    play = _f.play,
-    // do not pause on unmount, because on desktop layout
-    // the component can be paused when it is played from
-    // channel and same message is unmounted from the thread
-    pause = _f.pause,
-    _g = _f.playbackTime,
-    playbackTime = _g === void 0 ? 0 : _g,
-    duration = _f.duration,
-    _h = _f.playingStatus,
-    playingStatus = _h === void 0 ? VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE : _h;
-  React.useEffect(function () {
-    var _a;
-    if (isReactionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      setUsingReaction(true);
-    } else {
-      setUsingReaction(false);
-    }
-  }, [isReactionEnabled, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
-  var progresBarMaxSize = React.useMemo(function () {
-    var _a;
-    if (message === null || message === void 0 ? void 0 : message.metaArrays) {
-      var duration_1 = (_a = message === null || message === void 0 ? void 0 : message.metaArrays.find(function (metaArray) {
-        return metaArray.key === 'KEY_VOICE_MESSAGE_DURATION';
-      })) === null || _a === void 0 ? void 0 : _a.value[0];
-      return duration_1 && parseInt(duration_1);
-    }
-    return 1;
-  }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '')
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ProgressBar.ProgressBar, {
-    className: "sendbird-voice-message-item-body__progress-bar",
-    maxSize: duration || progresBarMaxSize,
-    currentSize: playbackTime,
-    colorType: isByMe ? ui_ProgressBar.ProgressBarColorTypes.PRIMARY : ui_ProgressBar.ProgressBarColorTypes.GRAY
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button"
-  }, (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE || playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PAUSED) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button__button",
-    onClick: play
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    width: "18px",
-    height: "18px",
-    type: ui_Icon.IconTypes.PLAY,
-    fillColor: ui_Icon.IconColors.PRIMARY
-  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PREPARING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
-    width: "22.2px",
-    height: "22.2px"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    width: "22.2px",
-    height: "22.2px",
-    type: ui_Icon.IconTypes.SPINNER,
-    fillColor: ui_Icon.IconColors.PRIMARY_2
-  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button__button",
-    onClick: function () {
-      pause();
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button__button__pause"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
-  })))), /*#__PURE__*/React__default["default"].createElement(ui_PlaybackTime.PlaybackTime, {
-    className: "sendbird-voice-message-item-body__playback-time",
-    time: progresBarMaxSize - playbackTime,
-    labelType: ui_Label.LabelTypography.BODY_1,
-    labelColor: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
-  }));
+var VoiceMessageItemBody = function (_a) {
+    var _b;
+    var className = _a.className, message = _a.message, channelUrl = _a.channelUrl, _c = _a.isByMe, isByMe = _c === void 0 ? false : _c, _d = _a.isReactionEnabled, isReactionEnabled = _d === void 0 ? false : _d;
+    var _e = React.useState(false), usingReaction = _e[0], setUsingReaction = _e[1];
+    var _f = VoicePlayer_useVoicePlayer.useVoicePlayer({
+        channelUrl: channelUrl,
+        key: "".concat(message === null || message === void 0 ? void 0 : message.messageId),
+        audioFileUrl: message === null || message === void 0 ? void 0 : message.url,
+    }), play = _f.play, 
+    // do not pause on unmount, because on desktop layout
+    // the component can be paused when it is played from
+    // channel and same message is unmounted from the thread
+    pause = _f.pause, _g = _f.playbackTime, playbackTime = _g === void 0 ? 0 : _g, duration = _f.duration, _h = _f.playingStatus, playingStatus = _h === void 0 ? VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE : _h;
+    React.useEffect(function () {
+        var _a;
+        if (isReactionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            setUsingReaction(true);
+        }
+        else {
+            setUsingReaction(false);
+        }
+    }, [isReactionEnabled, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
+    var progresBarMaxSize = React.useMemo(function () {
+        var _a;
+        if (message === null || message === void 0 ? void 0 : message.metaArrays) {
+            var duration_1 = (_a = message === null || message === void 0 ? void 0 : message.metaArrays.find(function (metaArray) { return metaArray.key === 'KEY_VOICE_MESSAGE_DURATION'; })) === null || _a === void 0 ? void 0 : _a.value[0];
+            return duration_1 && parseInt(duration_1);
+        }
+        return 1;
+    }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
+    return (React.createElement("div", { className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '') },
+        React.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-item-body__progress-bar", maxSize: duration || progresBarMaxSize, currentSize: playbackTime, colorType: isByMe ? ui_ProgressBar.ProgressBarColorTypes.PRIMARY : ui_ProgressBar.ProgressBarColorTypes.GRAY }),
+        React.createElement("div", { className: "sendbird-voice-message-item-body__status-button" },
+            (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE || playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PAUSED) && (React.createElement("div", { className: "sendbird-voice-message-item-body__status-button__button", onClick: play },
+                React.createElement(ui_Icon.default, { width: "18px", height: "18px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.PRIMARY }))),
+            playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PREPARING && (React.createElement(ui_Loader, { width: "22.2px", height: "22.2px" },
+                React.createElement(ui_Icon.default, { width: "22.2px", height: "22.2px", type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY_2 }))),
+            playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING && (React.createElement("div", { className: "sendbird-voice-message-item-body__status-button__button", onClick: function () { pause(); } },
+                React.createElement("div", { className: "sendbird-voice-message-item-body__status-button__button__pause" },
+                    React.createElement("div", { className: "sendbird-voice-message-item-body__status-button__button__pause__inner" }),
+                    React.createElement("div", { className: "sendbird-voice-message-item-body__status-button__button__pause__inner" }))))),
+        React.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-item-body__playback-time", time: progresBarMaxSize - playbackTime, labelType: ui_Label.LabelTypography.BODY_1, labelColor: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 })));
 };
 
 exports.VoiceMessageItemBody = VoiceMessageItemBody;
-exports["default"] = VoiceMessageItemBody;
+exports.default = VoiceMessageItemBody;
 //# sourceMappingURL=VoiceMessageItemBody.js.map

package/cjs/ui/VoiceMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceMessageItemBody.js","sources":["../../../src/ui/VoiceMessageItemBody/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { FileMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\n\nimport ProgressBar, { ProgressBarColorTypes } from '../ProgressBar';\nimport { useVoicePlayer } from '../../hooks/VoicePlayer/useVoicePlayer';\nimport PlaybackTime from '../PlaybackTime';\nimport Loader from '../Loader';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport { LabelTypography, LabelColors } from '../Label';\nimport { VOICE_PLAYER_STATUS } from '../../hooks/VoicePlayer/dux/initialState';\n\nexport interface VoiceMessageItemBodyProps {\n  className?: string;\n  message: FileMessage;\n  channelUrl: string;\n  isByMe?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport const VoiceMessageItemBody = ({\n  className,\n  message,\n  channelUrl,\n  isByMe = false,\n  isReactionEnabled = false,\n}: VoiceMessageItemBodyProps): React.ReactElement => {\n  const [usingReaction, setUsingReaction] = useState(false);\n  const {\n    play,\n    // do not pause on unmount, because on desktop layout\n    // the component can be paused when it is played from\n    // channel and same message is unmounted from the thread\n    pause,\n    playbackTime = 0,\n    duration,\n    playingStatus = VOICE_PLAYER_STATUS.IDLE,\n  } = useVoicePlayer({\n    channelUrl,\n    key: `${message?.messageId}`,\n    audioFileUrl: message?.url,\n  });\n\n  useEffect(() => {\n    if (isReactionEnabled && message?.reactions?.length > 0) {\n      setUsingReaction(true);\n    } else {\n      setUsingReaction(false);\n    }\n  }, [isReactionEnabled, message?.reactions?.length]);\n  const progresBarMaxSize = useMemo(() => {\n    if (message?.metaArrays) {\n      const duration = message?.metaArrays.find((metaArray) => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')?.value[0];\n      return duration && parseInt(duration);\n    }\n    return 1;\n  }, [message?.metaArrays]);\n\n  return (\n    <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>\n      <ProgressBar\n        className=\"sendbird-voice-message-item-body__progress-bar\"\n        maxSize={duration || progresBarMaxSize}\n        currentSize={playbackTime}\n        colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}\n      />\n      <div className=\"sendbird-voice-message-item-body__status-button\">\n        {(playingStatus === VOICE_PLAYER_STATUS.IDLE || playingStatus === VOICE_PLAYER_STATUS.PAUSED) && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={play}\n          >\n            <Icon\n              width=\"18px\"\n              height=\"18px\"\n              type={IconTypes.PLAY}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )}\n        {playingStatus === VOICE_PLAYER_STATUS.PREPARING && (\n          <Loader width=\"22.2px\" height=\"22.2px\">\n            <Icon\n              width=\"22.2px\"\n              height=\"22.2px\"\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY_2}\n            />\n          </Loader>\n        )}\n        {playingStatus === VOICE_PLAYER_STATUS.PLAYING && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={() => { pause(); }}\n          >\n            <div className=\"sendbird-voice-message-item-body__status-button__button__pause\">\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n            </div>\n          </div>\n        )}\n      </div>\n      <PlaybackTime\n        className=\"sendbird-voice-message-item-body__playback-time\"\n        time={progresBarMaxSize - playbackTime}\n        labelType={LabelTypography.BODY_1}\n        labelColor={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      />\n    </div>\n  );\n};\n\nexport default VoiceMessageItemBody;\n"],"names":["VoiceMessageItemBody","_a","className","message","channelUrl","_c","isByMe","_d","isReactionEnabled","_e","useState","usingReaction","setUsingReaction","_f","useVoicePlayer","key","messageId","audioFileUrl","url","play","pause","_g","playbackTime","duration","_h","playingStatus","VOICE_PLAYER_STATUS","IDLE","useEffect","reactions","length","_b","progresBarMaxSize","useMemo","metaArrays","duration_1","find","metaArray","value","parseInt","React","createElement","concat","ProgressBar","maxSize","currentSize","colorType","ProgressBarColorTypes","PRIMARY","GRAY","PAUSED","onClick","Icon","width","height","type","IconTypes","PLAY","fillColor","IconColors","PREPARING","Loader","SPINNER","PRIMARY_2","PLAYING","PlaybackTime","time","labelType","LabelTypography","BODY_1","labelColor","LabelColors","ONCONTENT_1","ONBACKGROUND_1"],"mappings":"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"}
+{"version":3,"file":"VoiceMessageItemBody.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}