@sendbird/uikit-react 3.5.0-rc.1 → 3.5.0

package/cjs/ui/TooltipWrapper.js

@@ -1,36 +1,33 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-b8ba50ef.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(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);
+const SPACE_FROM_TRIGGER = 8;
+function TooltipWrapper(_ref) {
+  let {
+    className = '',
+    children,
+    hoverTooltip
+    // clickTooltip can be added later
+  } = _ref;
+  const [showHoverTooltip, setShowHoverTooltip] = React.useState(false);
+  const childrenRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip-wrapper'], false).join(' '),
-    onMouseOver: function () {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-tooltip-wrapper'].join(' '),
+    onMouseOver: () => {
       setShowHoverTooltip(true);
     },
-    onFocus: function () {
+    onFocus: () => {
       setShowHoverTooltip(true);
     },
-    onMouseOut: function () {
+    onMouseOut: () => {
       setShowHoverTooltip(false);
     },
-    onBlur: function () {
+    onBlur: () => {
       setShowHoverTooltip(false);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -39,14 +36,14 @@ function TooltipWrapper(_a) {
   }, children), showHoverTooltip && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-tooltip-wrapper__hover-tooltip",
     style: {
-      bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)")
+      bottom: `calc(100% + ${SPACE_FROM_TRIGGER}px)`
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-tooltip-wrapper__hover-tooltip__inner"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container",
     style: {
-      left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)")
+      left: childrenRef.current && `calc(${childrenRef.current.offsetWidth / 2}px - 50%)`
     }
   }, hoverTooltip))));
 }

package/cjs/ui/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.js","sources":["../../../src/ui/TooltipWrapper/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactElement } from 'react';\n\nimport './index.scss';\n\nconst SPACE_FROM_TRIGGER = 8;\n\nexport interface TooltipWrapperProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  hoverTooltip: ReactElement;\n}\nexport default function TooltipWrapper({\n  className = '',\n  children,\n  hoverTooltip,\n  // clickTooltip can be added later\n}: TooltipWrapperProps): ReactElement {\n  const [showHoverTooltip, setShowHoverTooltip] = useState(false);\n  const childrenRef = useRef(null);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-tooltip-wrapper',\n      ].join(' ')}\n      onMouseOver={() => { setShowHoverTooltip(true); }}\n      onFocus={() => { setShowHoverTooltip(true); }}\n      onMouseOut={() => { setShowHoverTooltip(false); }}\n      onBlur={() => { setShowHoverTooltip(false); }}\n    >\n      <div\n        className=\"sendbird-tooltip-wrapper__children\"\n        ref={childrenRef}\n      >\n        {children}\n      </div>\n      {\n        showHoverTooltip && (\n          <div\n            className=\"sendbird-tooltip-wrapper__hover-tooltip\"\n            style={{ bottom: `calc(100% + ${SPACE_FROM_TRIGGER}px)` }}\n          >\n            <div className=\"sendbird-tooltip-wrapper__hover-tooltip__inner\">\n              <div\n                className=\"sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container\"\n                style={{ left: childrenRef.current && `calc(${childrenRef.current.offsetWidth / 2}px - 50%)` }}\n              >\n                {hoverTooltip}\n              </div>\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["SPACE_FROM_TRIGGER","TooltipWrapper","_a","_b","className","children","hoverTooltip","_c","useState","showHoverTooltip","setShowHoverTooltip","childrenRef","useRef","React","__spreadArray","Array","isArray","join","bottom","left","current","concat","offsetWidth"],"mappings":";;;;;;;;;AAIA,IAAMA,kBAAkB,GAAG,CAA3B,CAAA;AAOwB,SAAAC,cAAA,CAAeC,EAAf,EAKF;MAJpBC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAKA;MACdE,QAAQ,GAAAH,EAAA,CAAAG;MACRC,YAAY,GAAAJ,EAAA,CAAAI;;AAGN,EAAA,IAAAC,EAAA,GAA0CC,cAAQ,CAAC,KAAD,CAAlD;AAAA,MAACC,gBAAgB,GAAAF,EAAA,CAAA,CAAA,CAAjB;AAAA,MAAmBG,mBAAmB,GAAAH,EAAA,CAAA,CAAA,CAAtC,CAAA;;AACN,EAAA,IAAMI,WAAW,GAAGC,YAAM,CAAC,IAAD,CAA1B,CAAA;EAEA,oBACEC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAEC,uBAAA,CAAAA,uBAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAN,CAAcZ,SAAd,CAAA,GAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,EAC8C,IAD9C,CAAA,EAC8C,CACvD,0BADuD,CAD9C,OAAA,CAAA,CAGTa,IAHS,CAGJ,GAHI,CADb;AAKE,IAAA,WAAW,EAAE,YAAA;MAAQP,mBAAmB,CAAC,IAAD,CAAnB,CAAA;KALvB;AAME,IAAA,OAAO,EAAE,YAAA;MAAQA,mBAAmB,CAAC,IAAD,CAAnB,CAAA;KANnB;AAOE,IAAA,UAAU,EAAE,YAAA;MAAQA,mBAAmB,CAAC,KAAD,CAAnB,CAAA;KAPtB;AAQE,IAAA,MAAM,EAAE,YAAA;MAAQA,mBAAmB,CAAC,KAAD,CAAnB,CAAA;AAA6B,KAAA;GAE7C,eAAAG,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAC,oCADZ;AAEE,IAAA,GAAG,EAAEF,WAAAA;AAFP,GAAA,EAIGN,QAJH,CAVF,EAiBII,gBAAgB,iBACdI,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAC,yCADZ;AAEE,IAAA,KAAK,EAAE;AAAEK,MAAAA,MAAM,EAAE,qBAAA,CAAelB,kBAAf,EAAiC,KAAjC,CAAA;AAAV,KAAA;GAEP,eAAAa,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,gDAAA;GACb,eAAAA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAC,mEADZ;AAEE,IAAA,KAAK,EAAE;AAAEM,MAAAA,IAAI,EAAER,WAAW,CAACS,OAAZ,IAAuB,QAAAC,MAAA,CAAQV,WAAW,CAACS,OAAZ,CAAoBE,WAApB,GAAkC,CAA1C,EAA2C,WAA3C,CAAA;AAA/B,KAAA;AAFT,GAAA,EAIGhB,YAJH,CADF,CAJF,CAlBN,CADF,CAAA;AAoCD;;;;"}
+{"version":3,"file":"TooltipWrapper.js","sources":["../../../src/ui/TooltipWrapper/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactElement } from 'react';\n\nimport './index.scss';\n\nconst SPACE_FROM_TRIGGER = 8;\n\nexport interface TooltipWrapperProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  hoverTooltip: ReactElement;\n}\nexport default function TooltipWrapper({\n  className = '',\n  children,\n  hoverTooltip,\n  // clickTooltip can be added later\n}: TooltipWrapperProps): ReactElement {\n  const [showHoverTooltip, setShowHoverTooltip] = useState(false);\n  const childrenRef = useRef(null);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-tooltip-wrapper',\n      ].join(' ')}\n      onMouseOver={() => { setShowHoverTooltip(true); }}\n      onFocus={() => { setShowHoverTooltip(true); }}\n      onMouseOut={() => { setShowHoverTooltip(false); }}\n      onBlur={() => { setShowHoverTooltip(false); }}\n    >\n      <div\n        className=\"sendbird-tooltip-wrapper__children\"\n        ref={childrenRef}\n      >\n        {children}\n      </div>\n      {\n        showHoverTooltip && (\n          <div\n            className=\"sendbird-tooltip-wrapper__hover-tooltip\"\n            style={{ bottom: `calc(100% + ${SPACE_FROM_TRIGGER}px)` }}\n          >\n            <div className=\"sendbird-tooltip-wrapper__hover-tooltip__inner\">\n              <div\n                className=\"sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container\"\n                style={{ left: childrenRef.current && `calc(${childrenRef.current.offsetWidth / 2}px - 50%)` }}\n              >\n                {hoverTooltip}\n              </div>\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["SPACE_FROM_TRIGGER","TooltipWrapper","_ref","className","children","hoverTooltip","showHoverTooltip","setShowHoverTooltip","useState","childrenRef","useRef","React","createElement","Array","isArray","join","onMouseOver","onFocus","onMouseOut","onBlur","ref","style","bottom","left","current","offsetWidth"],"mappings":";;;;;;;;AAIA,MAAMA,kBAAkB,GAAG,CAAC,CAAA;AAOb,SAASC,cAAcA,CAAAC,IAAA,EAKA;EAAA,IALC;AACrCC,IAAAA,SAAS,GAAG,EAAE;IACdC,QAAQ;AACRC,IAAAA,YAAAA;AACA;AACmB,GAAC,GAAAH,IAAA,CAAA;EACpB,MAAM,CAACI,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAC/D,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;EAEhC,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAE,CACT,IAAIU,KAAK,CAACC,OAAO,CAACX,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,0BAA0B,CAC3B,CAACY,IAAI,CAAC,GAAG,CAAE;IACZC,WAAW,EAAEA,MAAM;MAAET,mBAAmB,CAAC,IAAI,CAAC,CAAA;KAAI;IAClDU,OAAO,EAAEA,MAAM;MAAEV,mBAAmB,CAAC,IAAI,CAAC,CAAA;KAAI;IAC9CW,UAAU,EAAEA,MAAM;MAAEX,mBAAmB,CAAC,KAAK,CAAC,CAAA;KAAI;IAClDY,MAAM,EAAEA,MAAM;MAAEZ,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAAE,KAAA;GAE5CI,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACET,IAAAA,SAAS,EAAC,oCAAoC;AAC9CiB,IAAAA,GAAG,EAAEX,WAAAA;AAAY,GAAA,EAEhBL,QAAQ,CACL,EAEJE,gBAAgB,iBACdK,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACET,IAAAA,SAAS,EAAC,yCAAyC;AACnDkB,IAAAA,KAAK,EAAE;MAAEC,MAAM,EAAG,eAActB,kBAAmB,CAAA,GAAA,CAAA;AAAK,KAAA;GAExDW,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAC,gDAAA;GACbQ,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACET,IAAAA,SAAS,EAAC,mEAAmE;AAC7EkB,IAAAA,KAAK,EAAE;AAAEE,MAAAA,IAAI,EAAEd,WAAW,CAACe,OAAO,IAAK,CAAA,KAAA,EAAOf,WAAW,CAACe,OAAO,CAACC,WAAW,GAAG,CAAE,CAAA,SAAA,CAAA;AAAW,KAAA;AAAE,GAAA,EAE9FpB,YAAY,CACT,CACF,CAET,CAEC,CAAA;AAEV;;;;"}

package/cjs/ui/UnknownMessageItemBody.js

@@ -1,35 +1,34 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-5d5497c2.js');
-var index = require('../index-62c1bdfc.js');
-var LocalizationContext = require('../LocalizationContext-bddc5c2b.js');
+var ui_Label = require('../index-6cb0d040.js');
+var index = require('../index-5231fde8.js');
+var LocalizationContext = require('../LocalizationContext-0e429c3d.js');
 require('prop-types');
-require('../stringSet-3e6167ef.js');
-require('../tslib.es6-b8ba50ef.js');
+require('../stringSet-106da549.js');
+require('../_rollupPluginBabelHelpers-c89f311a.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-d14a43c4.js');
+require('../index-016f7106.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function UnknownMessageItemBody(_a) {
-  var _b;
-
-  var className = _a.className,
-      message = _a.message,
-      customText = _a.customText,
-      _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;
+function UnknownMessageItemBody(_ref) {
+  var _message$reactions;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false
+  } = _ref;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
   return /*#__PURE__*/React__default["default"].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' : ''])
-  }, !customText && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: index.getClassName([className, 'sendbird-unknown-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 ? 'reactions' : ''])
+  }, /*#__PURE__*/React__default["default"].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
@@ -37,7 +36,7 @@ function UnknownMessageItemBody(_a) {
     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
-  }, customText || stringSet.UNKNOWN__CANNOT_READ_MESSAGE));
+  }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE));
 }
 
 module.exports = UnknownMessageItemBody;

package/cjs/ui/UnknownMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnknownMessageItemBody.js","sources":["../../../src/ui/UnknownMessageItemBody/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { getClassName } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { BaseMessage } from '@sendbird/chat/message';\n\ninterface Props {\n  className?: string | Array<string>;\n  isByMe?: boolean;\n  message: BaseMessage;\n  customText?: string;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function UnknownMessageItemBody({\n  className,\n  message,\n  customText,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-unknown-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      {\n        !customText && (\n          <Label\n            className=\"sendbird-unknown-message-item-body__header\"\n            type={LabelTypography.BODY_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE}\n          </Label>\n        )\n      }\n      <Label\n        className=\"sendbird-unknown-message-item-body__description\"\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}\n      >\n        {customText || stringSet.UNKNOWN__CANNOT_READ_MESSAGE}\n      </Label>\n    </div>\n  );\n}\n"],"names":["UnknownMessageItemBody","_a","className","message","customText","_c","isByMe","_d","mouseHover","_e","isReactionEnabled","stringSet","useContext","LocalizationContext","React","getClassName","_b","reactions","length","Label","LabelTypography","BODY_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","UNKNOWN__UNKNOWN_MESSAGE_TYPE","ONCONTENT_2","ONBACKGROUND_2","UNKNOWN__CANNOT_READ_MESSAGE"],"mappings":";;;;;;;;;;;;;;;;AAiBwB,SAAAA,sBAAA,CAAuBC,EAAvB,EAOhB;;;MANNC,SAAS,GAAAD,EAAA,CAAAC;MACTC,OAAO,GAAAF,EAAA,CAAAE;MACPC,UAAU,GAAAH,EAAA,CAAAG;MACVC,EAAA,GAAAJ,EAAA,CAAAK;MAAAA,MAAM,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;MACdE,EAAkB,GAAAN,EAAA,CAAAO;MAAlBA,UAAU,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MAClBE,EAAA,GAAAR,EAAA,CAAAS;MAAAA,iBAAiB,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;AAEjB,EAAA,IAAAE,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd,CAAA;EACR,oBACEC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAEC,kBAAY,CAAC,CAC3Bb,SAD2B,EAE3B,oCAF2B,EAG3BI,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK1BE,iBAAiB,IAAI,CAAA,CAAAM,EAAA,GAAAb,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEc,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAAnD,GAAwD,WAAxD,GAAsE,EAL3C,CAAD,CAAA;AAA5B,GAAA,EAQI,CAACd,UAAD,iBACEU,yBAAA,CAAA,aAAA,CAACK,cAAD,EAAA;AACE,IAAA,SAAS,EAAC,4CADZ;IAEE,IAAI,EAAEC,wBAAe,CAACC,MAFxB;IAGE,KAAK,EAAEf,MAAM,GAAGgB,oBAAW,CAACC,WAAf,GAA6BD,oBAAW,CAACE,cAAAA;AAHxD,GAAA,EAKGb,SAAS,CAACc,6BALb,CATN,eAkBEX,wCAACK,cAAD,EAAA;AACE,IAAA,SAAS,EAAC,iDADZ;IAEE,IAAI,EAAEC,wBAAe,CAACC,MAFxB;IAGE,KAAK,EAAEf,MAAM,GAAGgB,oBAAW,CAACI,WAAf,GAA6BJ,oBAAW,CAACK,cAAAA;AAHxD,GAAA,EAKGvB,UAAU,IAAIO,SAAS,CAACiB,4BAL3B,CAlBF,CADF,CAAA;AA4BD;;;;"}
+{"version":3,"file":"UnknownMessageItemBody.js","sources":["../../../src/ui/UnknownMessageItemBody/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { getClassName } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { BaseMessage } from '@sendbird/chat/message';\n\ninterface Props {\n  className?: string | Array<string>;\n  isByMe?: boolean;\n  message: BaseMessage;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function UnknownMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-unknown-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <Label\n        className=\"sendbird-unknown-message-item-body__header\"\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      >\n        {stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE}\n      </Label>\n      <Label\n        className=\"sendbird-unknown-message-item-body__description\"\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.UNKNOWN__CANNOT_READ_MESSAGE}\n      </Label>\n    </div>\n  );\n}\n"],"names":["UnknownMessageItemBody","_ref","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","stringSet","useContext","LocalizationContext","React","createElement","getClassName","reactions","length","Label","type","LabelTypography","BODY_1","color","LabelColors","ONCONTENT_1","ONBACKGROUND_1","UNKNOWN__UNKNOWN_MESSAGE_TYPE","ONCONTENT_2","ONBACKGROUND_2","UNKNOWN__CANNOT_READ_MESSAGE"],"mappings":";;;;;;;;;;;;;;;;AAgBe,SAASA,sBAAsBA,CAAAC,IAAA,EAMtB;AAAA,EAAA,IAAAC,kBAAA,CAAA;EAAA,IANuB;IAC7CC,SAAS;IACTC,OAAO;AACPC,IAAAA,MAAM,GAAG,KAAK;AACdC,IAAAA,UAAU,GAAG,KAAK;AAClBC,IAAAA,iBAAiB,GAAG,KAAA;AACf,GAAC,GAAAN,IAAA,CAAA;EACN,MAAM;AAAEO,IAAAA,SAAAA;AAAU,GAAC,GAAGC,gBAAU,CAACC,uCAAmB,CAAC,CAAA;EACrD,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKT,SAAS,EAAEU,kBAAY,CAAC,CAC3BV,SAAS,EACT,oCAAoC,EACpCE,MAAM,GAAG,UAAU,GAAG,UAAU,EAChCC,UAAU,GAAG,aAAa,GAAG,EAAE,EAC9BC,iBAAiB,IAAI,CAAAH,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAAF,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,kBAAA,GAAPE,OAAO,CAAEU,SAAS,MAAAZ,IAAAA,IAAAA,kBAAA,uBAAlBA,kBAAA,CAAoBa,MAAM,IAAG,CAAC,GAAI,WAAW,GAAG,EAAE,CACzE,CAAA;AAAE,GAAA,eACDJ,yBAAA,CAAAC,aAAA,CAACI,cAAK,EAAA;AACJb,IAAAA,SAAS,EAAC,4CAA4C;IACtDc,IAAI,EAAEC,wBAAe,CAACC,MAAO;IAC7BC,KAAK,EAAEf,MAAM,GAAGgB,oBAAW,CAACC,WAAW,GAAGD,oBAAW,CAACE,cAAAA;GAErDf,EAAAA,SAAS,CAACgB,6BAA6B,CAClC,eACRb,yBAAA,CAAAC,aAAA,CAACI,cAAK,EAAA;AACJb,IAAAA,SAAS,EAAC,iDAAiD;IAC3Dc,IAAI,EAAEC,wBAAe,CAACC,MAAO;IAC7BC,KAAK,EAAEf,MAAM,GAAGgB,oBAAW,CAACI,WAAW,GAAGJ,oBAAW,CAACK,cAAAA;AAAe,GAAA,EAEpElB,SAAS,CAACmB,4BAA4B,CACjC,CACJ,CAAA;AAEV;;;;"}

package/cjs/ui/UserListItem.js

@@ -1,107 +1,109 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-b8ba50ef.js');
 var React = require('react');
-var UserProfileContext = require('../UserProfileContext-8d0dee57.js');
-var LocalizationContext = require('../LocalizationContext-bddc5c2b.js');
+var UserProfileContext = require('../UserProfileContext-87580795.js');
+var LocalizationContext = require('../LocalizationContext-0e429c3d.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-5d5497c2.js');
+var ui_Label = require('../index-6cb0d040.js');
 require('prop-types');
-require('../stringSet-3e6167ef.js');
-require('../index-d14a43c4.js');
+require('../stringSet-106da549.js');
+require('../index-016f7106.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('../uuid-2475ef6c.js');
+require('../uuid-12b01f73.js');
 require('../sendbirdSelectors.js');
-require('../topics-56842e14.js');
-require('../utils-374d57b4.js');
+require('../_rollupPluginBabelHelpers-c89f311a.js');
+require('../topics-b384e6b3.js');
+require('../utils-ad7b5b82.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-fed1e122.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-62c1bdfc.js');
+require('../index-5231fde8.js');
 require('../utils/message/getOutgoingMessageState.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;
-  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 _b = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _b.disableUserProfile,
-      renderUserProfile = _b.renderUserProfile;
-
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+function UserListItem(_ref) {
+  let {
+    user,
+    className,
+    checked,
+    checkBox,
+    isOperator,
+    disabled,
+    disableMessaging,
+    currentUser,
+    action,
+    onChange,
+    avatarSize = '40px'
+  } = _ref;
+  const uniqueKey = user.userId;
+  const actionRef = React__default["default"].useRef(null);
+  const parentRef = React__default["default"].useRef(null);
+  const avatarRef = React__default["default"].useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
   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(' '),
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-user-list-item'].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: "40px",
-        height: "40px",
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown();
-          }
-        }
-      });
-    },
-    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'
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-user-list-item__avatar",
+      ref: avatarRef,
+      src: user.profileUrl,
+      width: avatarSize,
+      height: avatarSize,
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
         }
-      }, renderUserProfile ? renderUserProfile({
-        user: user,
-        currentUserId: currentUser,
-        close: closeDropdown
-      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        disableMessaging: disableMessaging,
-        user: user,
-        currentUserId: currentUser,
-        onSuccess: closeDropdown
-      }));
-    }
+      }
+    }),
+    menuItems: closeDropdown => /*#__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,
+      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 || 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,
@@ -113,19 +115,17 @@ function UserListItem(_a) {
     id: uniqueKey,
     checked: checked,
     disabled: disabled,
-    onChange: function (event) {
-      return onChange(event);
-    }
+    onChange: event => onChange(event)
   })), isOperator && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    className: ["sendbird-user-list-item__operator", checkBox ? "checkbox" : ""].join(' '),
+    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
+    actionRef,
+    parentRef
   })));
 }
 

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}\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}: 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 {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(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=\"40px\"\n            height=\"40px\"\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\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","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","_b","useContext","UserProfileContext","disableUserProfile","renderUserProfile","stringSet","LocalizationContext","__spreadArray","Array","isArray","join","isMuted","MutedAvatarOverlay","ContextMenu","toggleDropdown","Avatar","profileUrl","closeDropdown","MenuItems","paddingTop","paddingBottom","currentUserId","close","UserProfile","Label","LabelTypography","SUBTITLE_1","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","Checkbox","event","SUBTITLE_2"],"mappings":"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"}
+{"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}\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}: 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 {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(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              }\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","_ref","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","avatarSize","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","disableUserProfile","renderUserProfile","useContext","UserProfileContext","stringSet","LocalizationContext","createElement","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","onClick","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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"}

package/cjs/ui/UserProfile.js

@@ -1,44 +1,47 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../LocalizationContext-bddc5c2b.js');
-var UserProfileContext = require('../UserProfileContext-8d0dee57.js');
+var LocalizationContext = require('../LocalizationContext-0e429c3d.js');
+var UserProfileContext = require('../UserProfileContext-87580795.js');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-5d5497c2.js');
+var ui_Label = require('../index-6cb0d040.js');
 var ui_Button = require('./Button.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../stringSet-3e6167ef.js');
-require('../index-d14a43c4.js');
+require('../stringSet-106da549.js');
+require('../index-016f7106.js');
 require('prop-types');
-require('../topics-56842e14.js');
-require('../utils-374d57b4.js');
-require('../tslib.es6-b8ba50ef.js');
+require('../_rollupPluginBabelHelpers-c89f311a.js');
+require('../topics-b384e6b3.js');
+require('../utils-ad7b5b82.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('../uuid-2475ef6c.js');
+require('../uuid-12b01f73.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-fed1e122.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();
-  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); // @ts-ignore
-
-  var onUserProfileMessage = React.useContext(UserProfileContext.UserProfileContext).onUserProfileMessage;
+function UserProfile(_ref) {
+  var _store$config, _store$config2;
+  let {
+    user,
+    currentUserId,
+    disableMessaging = false,
+    onSuccess
+  } = _ref;
+  const store = useSendbirdStateContext();
+  const createChannel = sendbirdSelectors.getCreateGroupChannel(store);
+  const logger = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.logger;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const currentUserId_ = currentUserId || (store === null || store === void 0 ? void 0 : (_store$config2 = store.config) === null || _store$config2 === void 0 ? void 0 : _store$config2.userId);
+  // @ts-ignore
+  const {
+    onUserProfileMessage
+  } = React.useContext(UserProfileContext.UserProfileContext);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird__user-profile"
   }, /*#__PURE__*/React__default["default"].createElement("section", {
@@ -56,17 +59,16 @@ function UserProfile(_a) {
     className: "sendbird__user-profile-message"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
     type: ui_Button.ButtonTypes.SECONDARY,
-    onClick: function () {
+    onClick: () => {
       // Create 1:1 channel
-      var params = {
+      const params = {
         isDistinct: false,
         invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
         operatorUserIds: [currentUserId_]
       };
       onSuccess();
-      createChannel(params).then(function (groupChannel) {
+      createChannel(params).then(groupChannel => {
         logger.info('UserProfile, channel create', groupChannel);
-
         if (typeof onUserProfileMessage === 'function') {
           onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);
         }

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  // @ts-ignore\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","Avatar","profileUrl","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","Button","ButtonTypes","SECONDARY","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":["../../../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  // @ts-ignore\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","_ref","_store$config","_store$config2","user","currentUserId","disableMessaging","onSuccess","store","useSendbirdStateContext","createChannel","getCreateGroupChannel","logger","config","stringSet","useContext","LocalizationContext","currentUserId_","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":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAASA,WAAWA,CAAAC,IAAA,EAKI;EAAA,IAAAC,aAAA,EAAAC,cAAA,CAAA;EAAA,IALH;IACnBC,IAAI;IACJC,aAAa;AACbC,IAAAA,gBAAgB,GAAG,KAAK;AACxBC,IAAAA,SAAAA;AACK,GAAC,GAAAN,IAAA,CAAA;EACN,MAAMO,KAAK,GAAGC,uBAAuB,EAAE,CAAA;AACvC,EAAA,MAAMC,aAAa,GAAGC,uCAAqB,CAACH,KAAK,CAAC,CAAA;AAClD,EAAA,MAAMI,MAAM,GAAGJ,KAAK,KAALA,IAAAA,IAAAA,KAAK,wBAAAN,aAAA,GAALM,KAAK,CAAEK,MAAM,MAAAX,IAAAA,IAAAA,aAAA,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAA,CAAeU,MAAM,CAAA;EACpC,MAAM;AAAEE,IAAAA,SAAAA;AAAU,GAAC,GAAGC,gBAAU,CAACC,uCAAmB,CAAC,CAAA;AACrD,EAAA,MAAMC,cAAc,GAAGZ,aAAa,KAAIG,KAAK,KAAA,IAAA,IAALA,KAAK,KAAAL,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,cAAA,GAALK,KAAK,CAAEK,MAAM,MAAA,IAAA,IAAAV,cAAA,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,cAAA,CAAee,MAAM,CAAA,CAAA;AAC7D;EACA,MAAM;AAAEC,IAAAA,oBAAAA;AAAqB,GAAC,GAAGJ,gBAAU,CAACK,qCAAkB,CAAC,CAAA;EAC/D,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wBAAA;GACbF,eAAAA,yBAAA,CAAAC,aAAA,CAAA,SAAA,EAAA;AAASC,IAAAA,SAAS,EAAC,+BAAA;AAA+B,GAAA,eAChDF,yBAAA,CAAAC,aAAA,CAACE,oBAAM,EAAA;AACLC,IAAAA,MAAM,EAAC,MAAM;AACbC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,GAAG,EAAEvB,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJA,IAAI,CAAEwB,UAAAA;AAAW,GAAA,CACtB,CACM,eACVP,yBAAA,CAAAC,aAAA,CAAA,SAAA,EAAA;AAASC,IAAAA,SAAS,EAAC,6BAAA;AAA6B,GAAA,eAC9CF,yBAAA,CAAAC,aAAA,CAACO,cAAK,EAAA;IACJC,IAAI,EAAEC,wBAAe,CAACC,GAAI;IAC1BC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;AAAe,GAAA,EAEjC,CAAA/B,IAAI,KAAJA,IAAAA,IAAAA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEgC,QAAQ,KAAItB,SAAS,CAACuB,OAAO,CAC9B,CACA,EAEP,CAAAjC,IAAI,KAAJA,IAAAA,IAAAA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEc,MAAM,MAAKD,cAAc,IAAK,CAACX,gBAAgB,iBACpDe,yBAAA,CAAAC,aAAA,CAAA,SAAA,EAAA;AAASC,IAAAA,SAAS,EAAC,gCAAA;AAAgC,GAAA,eACjDF,yBAAA,CAAAC,aAAA,CAACgB,oBAAM,EAAA;IACLR,IAAI,EAAES,qBAAW,CAACC,SAAU;IAC5BC,OAAO,EAAEA,MAAM;AACb;AACA,MAAA,MAAMC,MAAgC,GAAG;AACvCC,QAAAA,UAAU,EAAE,KAAK;QACjBC,cAAc,EAAE,CAACxC,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEc,MAAM,CAAC;QAC9B2B,eAAe,EAAE,CAAC5B,cAAc,CAAA;OACjC,CAAA;AACDV,MAAAA,SAAS,EAAE,CAAA;AACXG,MAAAA,aAAa,CAACgC,MAAM,CAAC,CAClBI,IAAI,CAAEC,YAAY,IAAK;AACtBnC,QAAAA,MAAM,CAACoC,IAAI,CAAC,6BAA6B,EAAED,YAAY,CAAC,CAAA;AACxD,QAAA,IAAI,OAAO5B,oBAAoB,KAAK,UAAU,EAAE;AAC9CA,UAAAA,oBAAoB,aAApBA,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,oBAAoB,CAAG4B,YAAY,CAAC,CAAA;AACtC,SAAA;AACF,OAAC,CAAC,CAAA;AACN,KAAA;GAECjC,EAAAA,SAAS,CAACmC,qBAAqB,CACzB,CAEZ,eAEH5B,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,kCAAA;GAAqC,CAAA,eACpDF,yBAAA,CAAAC,aAAA,CAAA,SAAA,EAAA;AAASC,IAAAA,SAAS,EAAC,+BAAA;AAA+B,GAAA,eAChDF,yBAAA,CAAAC,aAAA,CAACO,cAAK,EAAA;AACJN,IAAAA,SAAS,EAAC,sCAAsC;IAChDO,IAAI,EAAEC,wBAAe,CAACmB,SAAU;IAChCjB,KAAK,EAAEC,oBAAW,CAACiB,cAAAA;GAElBrC,EAAAA,SAAS,CAACsC,qBAAqB,CAC1B,eACR/B,yBAAA,CAAAC,aAAA,CAACO,cAAK,EAAA;AACJN,IAAAA,SAAS,EAAC,sCAAsC;IAChDO,IAAI,EAAEC,wBAAe,CAACsB,MAAO;IAC7BpB,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElB/B,EAAAA,IAAI,aAAJA,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJA,IAAI,CAAEc,MAAM,CACP,CACA,CACN,CAAA;AAEV;;;;"}