@sendbird/uikit-react 3.4.6 → 3.4.7-rc.0

package/cjs/ui/ChannelAvatar.js

@@ -3,54 +3,51 @@
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../utils-6a97ff3a.js');
-require('../tslib.es6-8f4b0cfe.js');
+var utils = require('../utils-69786374.js');
 require('./ImageRenderer.js');
-require('../uuid-1ffa3b79.js');
+require('../uuid-b0cd103f.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ChannelAvatar(_a) {
-  var channel = _a.channel,
-    userId = _a.userId,
-    theme = _a.theme,
-    _b = _a.width,
-    width = _b === void 0 ? 56 : _b,
-    _c = _a.height,
-    height = _c === void 0 ? 56 : _c;
-  var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
-  var memoizedAvatar = React.useMemo(function () {
-    return isBroadcast ? utils.generateDefaultAvatar(channel) ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "sendbird-chat-header--default-avatar",
-      style: {
-        width: width,
-        height: height,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-      type: ui_Icon.IconTypes.BROADCAST,
-      fillColor: ui_Icon.IconColors.CONTENT,
-      width: width * 0.575,
-      height: height * 0.575
-    })) : /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-      className: "sendbird-chat-header--avatar--broadcast-channel",
-      src: utils.getChannelAvatarSource(channel, userId),
-      width: width,
-      height: height,
-      alt: channel === null || channel === void 0 ? void 0 : channel.name
-    }) : /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-      className: "sendbird-chat-header--avatar--group-channel",
-      src: utils.getChannelAvatarSource(channel, userId),
-      width: "".concat(width, "px"),
-      height: "".concat(height, "px"),
-      alt: channel === null || channel === void 0 ? void 0 : channel.name
-    });
-  }, [channel === null || channel === void 0 ? void 0 : channel.members, channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
+function ChannelAvatar(_ref) {
+  let {
+    channel,
+    userId,
+    theme,
+    width = 56,
+    height = 56
+  } = _ref;
+  const isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
+  const memoizedAvatar = React.useMemo(() => isBroadcast ? utils.generateDefaultAvatar(channel) ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-chat-header--default-avatar",
+    style: {
+      width,
+      height,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.BROADCAST,
+    fillColor: ui_Icon.IconColors.CONTENT,
+    width: width * 0.575,
+    height: height * 0.575
+  })) : /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-chat-header--avatar--broadcast-channel",
+    src: utils.getChannelAvatarSource(channel, userId),
+    width: width,
+    height: height,
+    alt: channel === null || channel === void 0 ? void 0 : channel.name
+  }) : /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-chat-header--avatar--group-channel",
+    src: utils.getChannelAvatarSource(channel, userId),
+    width: `${width}px`,
+    height: `${height}px`,
+    alt: channel === null || channel === void 0 ? void 0 : channel.name
+  }), [channel === null || channel === void 0 ? void 0 : channel.members, channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, memoizedAvatar);
 }
 

package/cjs/ui/ChannelAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelAvatar.js","sources":["../../../src/ui/ChannelAvatar/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { useMemo } from 'react';\n\nimport type { GroupChannel } from '@sendbird/chat/groupChannel';\n\nimport Avatar from '../Avatar/index';\nimport Icon, { IconTypes, IconColors } from '../Icon';\n\nimport * as utils from './utils';\n\ninterface Props {\n  channel: GroupChannel;\n  userId: string;\n  theme: string;\n  width?: number,\n  height?: number,\n}\n\nfunction ChannelAvatar({\n  channel,\n  userId,\n  theme,\n  width = 56,\n  height = 56,\n}: Props): JSX.Element {\n  const isBroadcast = channel?.isBroadcast;\n  const memoizedAvatar = useMemo(() => (\n    isBroadcast\n      ? (\n        utils.generateDefaultAvatar(channel)\n          ? (\n            <div\n              className=\"sendbird-chat-header--default-avatar\"\n              style={{\n                width,\n                height,\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n              }}\n            >\n              <Icon\n                type={IconTypes.BROADCAST}\n                fillColor={IconColors.CONTENT}\n                width={width * 0.575}\n                height={height * 0.575}\n              />\n            </div>\n          )\n          : (\n            <Avatar\n              className=\"sendbird-chat-header--avatar--broadcast-channel\"\n              src={utils.getChannelAvatarSource(channel, userId)}\n              width={width}\n              height={height}\n              alt={channel?.name}\n            />\n          )\n      )\n      : (\n        <Avatar\n          className=\"sendbird-chat-header--avatar--group-channel\"\n          src={utils.getChannelAvatarSource(channel, userId)}\n          width={`${width}px`}\n          height={`${height}px`}\n          alt={channel?.name}\n        />\n      )\n  ), [channel?.members, channel?.coverUrl, theme]);\n  return (\n    <>{ memoizedAvatar }</>\n  );\n}\n\nexport default ChannelAvatar;\n"],"names":["ChannelAvatar","_a","channel","userId","theme","_b","width","_c","height","isBroadcast","memoizedAvatar","useMemo","utils","React","createElement","className","style","display","justifyContent","alignItems","Icon","type","IconTypes","BROADCAST","fillColor","IconColors","CONTENT","Avatar","src","alt","name","concat","members","coverUrl","Fragment"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAASA,aAAaA,CAACC,EAMf,EAAA;MALNC,OAAO,GAAAD,EAAA,CAAAC,OAAA;IACPC,MAAM,GAAAF,EAAA,CAAAE,MAAA;IACNC,KAAK,GAAAH,EAAA,CAAAG,KAAA;IACLC,EAAU,GAAAJ,EAAA,CAAAK,KAAA;IAAVA,KAAK,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA;IACVE,EAAA,GAAAN,EAAA,CAAAO,MAAW;IAAXA,MAAM,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA,CAAA;AAEX,EAAA,IAAME,WAAW,GAAGP,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEO,WAAW,CAAA;AACxC,EAAA,IAAMC,cAAc,GAAGC,aAAO,CAAC,YAAM;IAAA,OACnCF,WAAW,GAEPG,2BAA2B,CAACV,OAAO,CAAC,gBAEhCW,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,SAAS,EAAC,sCAAsC;AAChDC,MAAAA,KAAK,EAAE;AACLV,QAAAA,KAAK,EAAAA,KAAA;AACLE,QAAAA,MAAM,EAAAA,MAAA;AACNS,QAAAA,OAAO,EAAE,MAAM;AACfC,QAAAA,cAAc,EAAE,QAAQ;AACxBC,QAAAA,UAAU,EAAE,QAAA;AACb,OAAA;AAAC,KAAA,eAEFN,yBAAA,CAAAC,aAAA,CAACM,kBAAI,EAAA;MACHC,IAAI,EAAEC,iBAAS,CAACC,SAAU;MAC1BC,SAAS,EAAEC,kBAAU,CAACC,OAAQ;MAC9BpB,KAAK,EAAEA,KAAK,GAAG,KAAM;MACrBE,MAAM,EAAEA,MAAM,GAAG,KAAA;AAAM,KAAA,CAE3B,CAAM,gBAGNK,yBAAA,CAAAC,aAAA,CAACa,oBAAM,EAAA;AACLZ,MAAAA,SAAS,EAAC,iDAAiD;MAC3Da,GAAG,EAAEhB,4BAA4B,CAACV,OAAO,EAAEC,MAAM,CAAE;AACnDG,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,MAAM,EAAEA,MAAO;AACfqB,MAAAA,GAAG,EAAE3B,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAE4B,IAAAA;AAAK,KAAA,CAEtB,gBAGHjB,yBAAA,CAAAC,aAAA,CAACa,oBAAM,EAAA;AACLZ,MAAAA,SAAS,EAAC,6CAA6C;MACvDa,GAAG,EAAEhB,4BAA4B,CAACV,OAAO,EAAEC,MAAM,CAAE;MACnDG,KAAK,EAAE,EAAG,CAAAyB,MAAA,CAAAzB,KAAK,EAAI,IAAA,CAAC;MACpBE,MAAM,EAAE,EAAA,CAAAuB,MAAA,CAAGvB,MAAM,EAAI,IAAA,CAAC;AACtBqB,MAAAA,GAAG,EAAE3B,OAAO,KAAP,IAAA,IAAAA,OAAO,uBAAPA,OAAO,CAAE4B,IAAAA;KAEjB,CAAA,CAAA;AAzCgC,GA0CpC,EAAE,CAAC5B,OAAO,KAAP,IAAA,IAAAA,OAAO,uBAAPA,OAAO,CAAE8B,OAAO,EAAE9B,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAE+B,QAAQ,EAAE7B,KAAK,CAAC,CAAC,CAAA;EAChD,oBACES,yBAAA,CAAAC,aAAA,CAAAD,yBAAA,CAAAqB,QAAA,EAAIxB,IAAAA,EAAAA,cAAc,CAAK,CAAA;AAE3B;;;;"}
+{"version":3,"file":"ChannelAvatar.js","sources":["../../../src/ui/ChannelAvatar/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { useMemo } from 'react';\n\nimport type { GroupChannel } from '@sendbird/chat/groupChannel';\n\nimport Avatar from '../Avatar/index';\nimport Icon, { IconTypes, IconColors } from '../Icon';\n\nimport * as utils from './utils';\n\ninterface Props {\n  channel: GroupChannel;\n  userId: string;\n  theme: string;\n  width?: number,\n  height?: number,\n}\n\nfunction ChannelAvatar({\n  channel,\n  userId,\n  theme,\n  width = 56,\n  height = 56,\n}: Props): JSX.Element {\n  const isBroadcast = channel?.isBroadcast;\n  const memoizedAvatar = useMemo(() => (\n    isBroadcast\n      ? (\n        utils.generateDefaultAvatar(channel)\n          ? (\n            <div\n              className=\"sendbird-chat-header--default-avatar\"\n              style={{\n                width,\n                height,\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n              }}\n            >\n              <Icon\n                type={IconTypes.BROADCAST}\n                fillColor={IconColors.CONTENT}\n                width={width * 0.575}\n                height={height * 0.575}\n              />\n            </div>\n          )\n          : (\n            <Avatar\n              className=\"sendbird-chat-header--avatar--broadcast-channel\"\n              src={utils.getChannelAvatarSource(channel, userId)}\n              width={width}\n              height={height}\n              alt={channel?.name}\n            />\n          )\n      )\n      : (\n        <Avatar\n          className=\"sendbird-chat-header--avatar--group-channel\"\n          src={utils.getChannelAvatarSource(channel, userId)}\n          width={`${width}px`}\n          height={`${height}px`}\n          alt={channel?.name}\n        />\n      )\n  ), [channel?.members, channel?.coverUrl, theme]);\n  return (\n    <>{ memoizedAvatar }</>\n  );\n}\n\nexport default ChannelAvatar;\n"],"names":["ChannelAvatar","_ref","channel","userId","theme","width","height","isBroadcast","memoizedAvatar","useMemo","utils","React","createElement","className","style","display","justifyContent","alignItems","Icon","type","IconTypes","BROADCAST","fillColor","IconColors","CONTENT","Avatar","src","alt","name","members","coverUrl","Fragment"],"mappings":";;;;;;;;;;;;;;AAkBA,SAASA,aAAaA,CAAAC,IAAA,EAMC;EAAA,IANA;IACrBC,OAAO;IACPC,MAAM;IACNC,KAAK;AACLC,IAAAA,KAAK,GAAG,EAAE;AACVC,IAAAA,MAAM,GAAG,EAAA;AACJ,GAAC,GAAAL,IAAA,CAAA;EACN,MAAMM,WAAW,GAAGL,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAEK,WAAW,CAAA;AACxC,EAAA,MAAMC,cAAc,GAAGC,aAAO,CAAC,MAC7BF,WAAW,GAEPG,2BAA2B,CAACR,OAAO,CAAC,gBAEhCS,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,sCAAsC;AAChDC,IAAAA,KAAK,EAAE;MACLT,KAAK;MACLC,MAAM;AACNS,MAAAA,OAAO,EAAE,MAAM;AACfC,MAAAA,cAAc,EAAE,QAAQ;AACxBC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAA;AAAE,GAAA,eAEFN,yBAAA,CAAAC,aAAA,CAACM,kBAAI,EAAA;IACHC,IAAI,EAAEC,iBAAS,CAACC,SAAU;IAC1BC,SAAS,EAAEC,kBAAU,CAACC,OAAQ;IAC9BnB,KAAK,EAAEA,KAAK,GAAG,KAAM;IACrBC,MAAM,EAAEA,MAAM,GAAG,KAAA;AAAM,GACxB,CACE,CAAC,gBAGNK,yBAAA,CAAAC,aAAA,CAACa,oBAAM,EAAA;AACLZ,IAAAA,SAAS,EAAC,iDAAiD;IAC3Da,GAAG,EAAEhB,4BAA4B,CAACR,OAAO,EAAEC,MAAM,CAAE;AACnDE,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,MAAM,EAAEA,MAAO;AACfqB,IAAAA,GAAG,EAAEzB,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAE0B,IAAAA;AAAK,GACpB,CACF,gBAGHjB,yBAAA,CAAAC,aAAA,CAACa,oBAAM,EAAA;AACLZ,IAAAA,SAAS,EAAC,6CAA6C;IACvDa,GAAG,EAAEhB,4BAA4B,CAACR,OAAO,EAAEC,MAAM,CAAE;IACnDE,KAAK,EAAG,CAAEA,EAAAA,KAAM,CAAI,EAAA,CAAA;IACpBC,MAAM,EAAG,CAAEA,EAAAA,MAAO,CAAI,EAAA,CAAA;AACtBqB,IAAAA,GAAG,EAAEzB,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAE0B,IAAAA;GACf,CAEN,EAAE,CAAC1B,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAE2B,OAAO,EAAE3B,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAE4B,QAAQ,EAAE1B,KAAK,CAAC,CAAC,CAAA;EAChD,oBACEO,yBAAA,CAAAC,aAAA,CAAAD,yBAAA,CAAAoB,QAAA,EAAIvB,IAAAA,EAAAA,cAAkB,CAAC,CAAA;AAE3B;;;;"}

package/cjs/ui/Checkbox.js

@@ -6,15 +6,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Checkbox(_a) {
-  var id = _a.id,
-    _b = _a.checked,
-    checked = _b === void 0 ? false : _b,
-    disabled = _a.disabled,
-    onChange = _a.onChange;
-  var _c = React.useState(checked),
-    isChecked = _c[0],
-    setIsCheck = _c[1];
+function Checkbox(_ref) {
+  let {
+    id,
+    checked = false,
+    disabled,
+    onChange
+  } = _ref;
+  const [isChecked, setIsCheck] = React.useState(checked);
   return /*#__PURE__*/React__default["default"].createElement("label", {
     className: ['sendbird-checkbox', disabled ? 'disabled' : ''].join(' '),
     htmlFor: id
@@ -23,7 +22,7 @@ function Checkbox(_a) {
     id: id,
     type: "checkbox",
     checked: isChecked,
-    onClick: function () {
+    onClick: () => {
       if (!disabled) setIsCheck(!isChecked);
     },
     onChange: onChange

package/cjs/ui/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/ui/Checkbox/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ReactElement, useState } from 'react';\nimport './index.scss';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport default function Checkbox({\n  id,\n  checked = false,\n  disabled,\n  onChange,\n}: CheckboxProps): ReactElement {\n  const [isChecked, setIsCheck] = useState(checked);\n  return (\n    <label\n      className={[\n        'sendbird-checkbox',\n        disabled ? 'disabled' : '',\n      ].join(' ')}\n      htmlFor={id}\n    >\n      <input\n        disabled={disabled}\n        id={id}\n        type=\"checkbox\"\n        checked={isChecked}\n        onClick={() => {\n          if (!disabled) setIsCheck(!isChecked);\n        }}\n        onChange={onChange}\n      />\n      <span\n        className={[\n          'sendbird-checkbox--checkmark',\n          disabled ? 'disabled' : '',\n        ].join(' ')}\n      />\n    </label>\n  );\n}\n"],"names":["Checkbox","_a","id","_b","checked","disabled","onChange","_c","useState","isChecked","setIsCheck","React","createElement","className","join","htmlFor","type","onClick"],"mappings":";;;;;;;;AAUwB,SAAAA,QAAQA,CAACC,EAKjB,EAAA;AAJd,EAAA,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAA;IACFC,EAAe,GAAAF,EAAA,CAAAG,OAAA;IAAfA,OAAO,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;IACfE,QAAQ,GAAAJ,EAAA,CAAAI,QAAA;IACRC,QAAQ,GAAAL,EAAA,CAAAK,QAAA,CAAA;AAEF,EAAA,IAAAC,EAAA,GAA0BC,cAAQ,CAACJ,OAAO,CAAC;AAA1CK,IAAAA,SAAS,GAAAF,EAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,UAAU,GAAAH,EAAA,CAAA,CAAA,CAAqB,CAAA;EACjD,oBACEI,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,SAAS,EAAE,CACT,mBAAmB,EACnBR,QAAQ,GAAG,UAAU,GAAG,EAAE,CAC3B,CAACS,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,OAAO,EAAEb,EAAAA;GAETS,eAAAA,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEP,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,EAAE,EAAEA,EAAG;AACPc,IAAAA,IAAI,EAAC,UAAU;AACfZ,IAAAA,OAAO,EAAEK,SAAU;IACnBQ,OAAO,EAAE,YAAA;AACP,MAAA,IAAI,CAACZ,QAAQ,EAAEK,UAAU,CAAC,CAACD,SAAS,CAAC,CAAA;KACrC;AACFH,IAAAA,QAAQ,EAAEA,QAAAA;GAEZ,CAAA,eAAAK,yBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEC,IAAAA,SAAS,EAAE,CACT,8BAA8B,EAC9BR,QAAQ,GAAG,UAAU,GAAG,EAAE,CAC3B,CAACS,IAAI,CAAC,GAAG,CAAA;AAAE,GAAA,CAEhB,CAAQ,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/ui/Checkbox/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ReactElement, useState } from 'react';\nimport './index.scss';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport default function Checkbox({\n  id,\n  checked = false,\n  disabled,\n  onChange,\n}: CheckboxProps): ReactElement {\n  const [isChecked, setIsCheck] = useState(checked);\n  return (\n    <label\n      className={[\n        'sendbird-checkbox',\n        disabled ? 'disabled' : '',\n      ].join(' ')}\n      htmlFor={id}\n    >\n      <input\n        disabled={disabled}\n        id={id}\n        type=\"checkbox\"\n        checked={isChecked}\n        onClick={() => {\n          if (!disabled) setIsCheck(!isChecked);\n        }}\n        onChange={onChange}\n      />\n      <span\n        className={[\n          'sendbird-checkbox--checkmark',\n          disabled ? 'disabled' : '',\n        ].join(' ')}\n      />\n    </label>\n  );\n}\n"],"names":["Checkbox","_ref","id","checked","disabled","onChange","isChecked","setIsCheck","useState","React","createElement","className","join","htmlFor","type","onClick"],"mappings":";;;;;;;;AAUe,SAASA,QAAQA,CAAAC,IAAA,EAKA;EAAA,IALC;IAC/BC,EAAE;AACFC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;AACRC,IAAAA,QAAAA;AACa,GAAC,GAAAJ,IAAA,CAAA;EACd,MAAM,CAACK,SAAS,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAACL,OAAO,CAAC,CAAA;EACjD,oBACEM,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,SAAS,EAAE,CACT,mBAAmB,EACnBP,QAAQ,GAAG,UAAU,GAAG,EAAE,CAC3B,CAACQ,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,OAAO,EAAEX,EAAAA;GAETO,eAAAA,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEN,IAAAA,QAAQ,EAAEA,QAAS;AACnBF,IAAAA,EAAE,EAAEA,EAAG;AACPY,IAAAA,IAAI,EAAC,UAAU;AACfX,IAAAA,OAAO,EAAEG,SAAU;IACnBS,OAAO,EAAEA,MAAM;AACb,MAAA,IAAI,CAACX,QAAQ,EAAEG,UAAU,CAAC,CAACD,SAAS,CAAC,CAAA;KACrC;AACFD,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GACpB,CAAC,eACFI,yBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEC,IAAAA,SAAS,EAAE,CACT,8BAA8B,EAC9BP,QAAQ,GAAG,UAAU,GAAG,EAAE,CAC3B,CAACQ,IAAI,CAAC,GAAG,CAAA;AAAE,GACb,CACI,CAAC,CAAA;AAEZ;;;;"}

package/cjs/ui/ConnectionStatus.js

@@ -2,18 +2,20 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-b8a20afd.js');
-var LocalizationContext = require('../LocalizationContext-498cb747.js');
+var ui_Label = require('../index-9c5f3445.js');
+var LocalizationContext = require('../LocalizationContext-08499fd8.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
-require('../index-8b6bb1ee.js');
+require('../stringSet-43ba803e.js');
+require('../index-d817af55.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ConnectionStatus() {
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-connection-status"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {

package/cjs/ui/ConnectionStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionStatus.js","sources":["../../../src/ui/ConnectionStatus/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport './index.scss';\n\nfunction ConnectionStatus(): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-connection-status\">\n      <Label\n        type={LabelTypography.BODY_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.TRYING_TO_CONNECT}\n      </Label>\n      <Icon\n        type={IconTypes.DISCONNECTED}\n        fillColor={IconColors.SENT}\n        width=\"14px\"\n        height=\"14px\"\n      />\n    </div>\n  );\n}\n\nexport default ConnectionStatus;\n"],"names":["ConnectionStatus","stringSet","useContext","LocalizationContext","React","createElement","className","Label","type","LabelTypography","BODY_2","color","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","Icon","IconTypes","DISCONNECTED","fillColor","IconColors","SENT","width","height"],"mappings":";;;;;;;;;;;;;;AAQA,SAASA,gBAAgBA,GAAA;AACf,EAAA,IAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAmB,CAAC,UAApC,CAAA;EACjB,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,4BAAA;AAA4B,GAAA,eACzCF,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;IACJC,IAAI,EAAEC,wBAAe,CAACC,MAAO;IAC7BC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,iBAAiB,CAE9B,eAAAV,yBAAA,CAAAC,aAAA,CAACU,kBAAI,EAAA;IACHP,IAAI,EAAEQ,iBAAS,CAACC,YAAa;IAC7BC,SAAS,EAAEC,kBAAU,CAACC,IAAK;AAC3BC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,CAEjB,CAAM,CAAA;AAEV;;;;"}
+{"version":3,"file":"ConnectionStatus.js","sources":["../../../src/ui/ConnectionStatus/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport './index.scss';\n\nfunction ConnectionStatus(): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-connection-status\">\n      <Label\n        type={LabelTypography.BODY_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.TRYING_TO_CONNECT}\n      </Label>\n      <Icon\n        type={IconTypes.DISCONNECTED}\n        fillColor={IconColors.SENT}\n        width=\"14px\"\n        height=\"14px\"\n      />\n    </div>\n  );\n}\n\nexport default ConnectionStatus;\n"],"names":["ConnectionStatus","stringSet","useContext","LocalizationContext","React","createElement","className","Label","type","LabelTypography","BODY_2","color","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","Icon","IconTypes","DISCONNECTED","fillColor","IconColors","SENT","width","height"],"mappings":";;;;;;;;;;;;;;AAQA,SAASA,gBAAgBA,GAAiB;EACxC,MAAM;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAGC,gBAAU,CAACC,uCAAmB,CAAC,CAAA;EACrD,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,4BAAA;AAA4B,GAAA,eACzCF,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;IACJC,IAAI,EAAEC,wBAAe,CAACC,MAAO;IAC7BC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,iBACN,CAAC,eACRV,yBAAA,CAAAC,aAAA,CAACU,kBAAI,EAAA;IACHP,IAAI,EAAEQ,iBAAS,CAACC,YAAa;IAC7BC,SAAS,EAAEC,kBAAU,CAACC,IAAK;AAC3BC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GACd,CACE,CAAC,CAAA;AAEV;;;;"}

package/cjs/ui/ContextMenu.js

@@ -3,61 +3,69 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('../tslib.es6-8f4b0cfe.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-c04a5857.js');
 var reactDom = require('react-dom');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../index-2ac1f908.js');
-var ui_Label = require('../index-b8a20afd.js');
-require('../uuid-1ffa3b79.js');
+var index = require('../index-99e85757.js');
+var ui_Label = require('../index-9c5f3445.js');
+require('../uuid-b0cd103f.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
+require('../stringSet-43ba803e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // padding to handle height of last item in message-list
-var HEIGHT_PADDING = 60;
-var MenuItems$1 = /** @class */function (_super) {
-  tslib_es6.__extends(MenuItems, _super);
-  function MenuItems(props) {
-    var _this = _super.call(this, props) || this;
-    _this.menuRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.setupEvents = function () {
-      var closeDropdown = _this.props.closeDropdown;
-      var menuRef = _this.menuRef;
-      var handleClickOutside = function (event) {
-        var _a, _b;
-        if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+const HEIGHT_PADDING = 60;
+class MenuItems$1 extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
+    _rollupPluginBabelHelpers._defineProperty(this, "menuRef", /*#__PURE__*/React__default["default"].createRef());
+    _rollupPluginBabelHelpers._defineProperty(this, "setupEvents", () => {
+      const {
+        closeDropdown
+      } = this.props;
+      const {
+        menuRef
+      } = this;
+      const handleClickOutside = event => {
+        var _menuRef$current, _menuRef$current$cont;
+        if (menuRef !== null && menuRef !== void 0 && menuRef.current && !(menuRef !== null && menuRef !== void 0 && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && (_menuRef$current$cont = _menuRef$current.contains) !== null && _menuRef$current$cont !== void 0 && _menuRef$current$cont.call(_menuRef$current, event.target))) {
           closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
         }
       };
-      _this.setState({
-        handleClickOutside: handleClickOutside
+      this.setState({
+        handleClickOutside
       });
       document.addEventListener('mousedown', handleClickOutside);
-    };
-    _this.cleanUpEvents = function () {
-      var handleClickOutside = _this.state.handleClickOutside;
+    });
+    _rollupPluginBabelHelpers._defineProperty(this, "cleanUpEvents", () => {
+      const {
+        handleClickOutside
+      } = this.state;
       document.removeEventListener('mousedown', handleClickOutside);
-    };
-    _this.getMenuPosition = function () {
-      var _a, _b;
-      var _c = _this.props,
-        parentRef = _c.parentRef,
-        openLeft = _c.openLeft;
-      var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
-      var x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
-      var y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
-      var menuStyle = {
+    });
+    _rollupPluginBabelHelpers._defineProperty(this, "getMenuPosition", () => {
+      var _parentRef$current, _parentRef$current$ge;
+      const {
+        parentRef,
+        openLeft
+      } = this.props;
+      const parentRect = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$ge = _parentRef$current.getBoundingClientRect) === null || _parentRef$current$ge === void 0 ? void 0 : _parentRef$current$ge.call(_parentRef$current);
+      const x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
+      const y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
+      const menuStyle = {
         top: y,
         left: x
       };
-      if (!_this.menuRef.current) return menuStyle;
-      var innerWidth = window.innerWidth,
-        innerHeight = window.innerHeight;
-      var rect = _this.menuRef.current.getBoundingClientRect();
+      if (!this.menuRef.current) return menuStyle;
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      const rect = this.menuRef.current.getBoundingClientRect();
       if (y + rect.height + HEIGHT_PADDING > innerHeight) {
         menuStyle.top -= rect.height;
       }
@@ -69,7 +77,7 @@ var MenuItems$1 = /** @class */function (_super) {
       }
       menuStyle.top += 32;
       if (openLeft) {
-        var padding = Number.isNaN(rect.width - 30) ? 108 // default
+        const padding = Number.isNaN(rect.width - 30) ? 108 // default
         : rect.width - 30;
         menuStyle.left -= padding;
       }
@@ -78,107 +86,110 @@ var MenuItems$1 = /** @class */function (_super) {
       if (menuStyle.left < 0) {
         menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
       }
-      _this.setState({
-        menuStyle: menuStyle
+      this.setState({
+        menuStyle
       });
       return menuStyle;
-    };
-    _this.state = {
+    });
+    this.state = {
       menuStyle: {},
-      handleClickOutside: function () {}
+      handleClickOutside: () => {/* noop */}
     };
-    return _this;
   }
-  MenuItems.prototype.componentDidMount = function () {
+  componentDidMount() {
     this.setupEvents();
     this.getMenuPosition();
-  };
-  MenuItems.prototype.componentWillUnmount = function () {
+  }
+  componentWillUnmount() {
     this.cleanUpEvents();
-  };
-  MenuItems.prototype.render = function () {
-    var _a;
-    var menuStyle = this.state.menuStyle;
-    var _b = this.props,
-      children = _b.children,
-      style = _b.style,
-      _c = _b.className,
-      className = _c === void 0 ? '' : _c;
+  }
+  render() {
+    var _this$props;
+    const {
+      menuStyle
+    } = this.state;
+    const {
+      children,
+      style,
+      className = ''
+    } = this.props;
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
-      className: (_a = this.props) === null || _a === void 0 ? void 0 : _a.className
+      className: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.className
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "sendbird-dropdown__menu-backdrop"
     }), /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "".concat(className, " sendbird-dropdown__menu"),
+      className: `${className} sendbird-dropdown__menu`,
       ref: this.menuRef,
-      style: tslib_es6.__assign({
+      style: _rollupPluginBabelHelpers._objectSpread2({
         display: 'inline-block',
         position: 'fixed',
-        left: "".concat(Math.round(menuStyle.left), "px"),
-        top: "".concat(Math.round(menuStyle.top), "px")
+        left: `${Math.round(menuStyle.left)}px`,
+        top: `${Math.round(menuStyle.top)}px`
       }, style)
     }, children)), document.getElementById('sendbird-dropdown-portal'));
-  };
-  return MenuItems;
-}(React__default["default"].Component);
+  }
+}
 
-var EmojiListItems$1 = function (_a) {
-  var children = _a.children,
-    parentRef = _a.parentRef,
-    parentContainRef = _a.parentContainRef,
-    _b = _a.spaceFromTrigger,
-    spaceFromTrigger = _b === void 0 ? {
+const EmojiListItems$1 = _ref => {
+  let {
+    children,
+    parentRef,
+    parentContainRef,
+    spaceFromTrigger = {
       x: 0,
       y: 0
-    } : _b,
-    closeDropdown = _a.closeDropdown;
-  var _c = React.useState({
-      left: 0,
-      top: 0
-    }),
-    reactionStyle = _c[0],
-    setReactionStyle = _c[1];
-  var reactionRef = React.useRef(null);
+    },
+    closeDropdown
+  } = _ref;
+  const [reactionStyle, setReactionStyle] = React.useState({
+    left: 0,
+    top: 0
+  });
+  const reactionRef = React.useRef(null);
+
   /* showParent & hideParent */
-  React.useEffect(function () {
-    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+  React.useEffect(() => {
+    if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
       parentContainRef.current.classList.add('sendbird-reactions--pressed');
     }
-    return function () {
-      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+    return () => {
+      if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
         parentContainRef.current.classList.remove('sendbird-reactions--pressed');
       }
     };
   }, []);
+
   /* setupEvents & cleanupEvents */
-  React.useEffect(function () {
-    var handleClickOutSide = function (event) {
-      var _a, _b;
-      if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+  React.useEffect(() => {
+    const handleClickOutSide = event => {
+      var _reactionRef$current, _reactionRef$current$;
+      if (reactionRef !== null && reactionRef !== void 0 && reactionRef.current && !(reactionRef !== null && reactionRef !== void 0 && (_reactionRef$current = reactionRef.current) !== null && _reactionRef$current !== void 0 && (_reactionRef$current$ = _reactionRef$current.contains) !== null && _reactionRef$current$ !== void 0 && _reactionRef$current$.call(_reactionRef$current, event.target))) {
         closeDropdown();
       }
     };
     document.addEventListener('mousedown', handleClickOutSide);
-    return function () {
+    return () => {
       document.removeEventListener('mousedown', handleClickOutSide);
     };
   }, []);
+
   /* getBarPosition */
-  React.useEffect(function () {
-    var _a, _b;
-    var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
-    var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
-    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    var x = parentRect.x || parentRect.left;
-    var y = parentRect.y || parentRect.top;
-    var reactionStyle = {
+  React.useEffect(() => {
+    var _parentRef$current;
+    const spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
+    const spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
+    const parentRect = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect();
+    const x = parentRect.x || parentRect.left;
+    const y = parentRect.y || parentRect.top;
+    const reactionStyle = {
       top: y,
       left: x
     };
-    if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
+    if (!(reactionRef !== null && reactionRef !== void 0 && reactionRef.current)) {
       setReactionStyle(reactionStyle);
     } else {
-      var rect = (_b = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+      var _reactionRef$current2;
+      const rect = reactionRef === null || reactionRef === void 0 ? void 0 : (_reactionRef$current2 = reactionRef.current) === null || _reactionRef$current2 === void 0 ? void 0 : _reactionRef$current2.getBoundingClientRect();
       if (reactionStyle.top < rect.height) {
         reactionStyle.top += parentRect.height;
         reactionStyle.top += spaceFromTriggerY;
@@ -189,7 +200,7 @@ var EmojiListItems$1 = function (_a) {
       reactionStyle.left -= rect.width / 2;
       reactionStyle.left += parentRect.height / 2 - 2;
       reactionStyle.left += spaceFromTriggerX;
-      var maximumLeft = window.innerWidth - rect.width;
+      const maximumLeft = window.innerWidth - rect.width;
       if (maximumLeft < reactionStyle.left) {
         reactionStyle.left = maximumLeft;
       }
@@ -207,8 +218,8 @@ var EmojiListItems$1 = function (_a) {
     style: {
       display: 'inline-block',
       position: 'fixed',
-      left: "".concat(Math.round(reactionStyle.left), "px"),
-      top: "".concat(Math.round(reactionStyle.top), "px")
+      left: `${Math.round(reactionStyle.left)}px`,
+      top: `${Math.round(reactionStyle.top)}px`
     }
   }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
     className: "sendbird-dropdown__reaction-bar__row",
@@ -218,17 +229,17 @@ var EmojiListItems$1 = function (_a) {
   }, children))), document.getElementById('sendbird-emoji-list-portal'));
 };
 
-var ENTER_KEY = 13;
-var MenuItems = MenuItems$1;
-var EmojiListItems = EmojiListItems$1;
-var MenuItem = function (_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    children = _a.children,
-    onClick = _a.onClick,
-    _c = _a.disable,
-    disable = _c === void 0 ? false : _c;
-  var handleClickEvent = function (e) {
+const ENTER_KEY = 13;
+const MenuItems = MenuItems$1;
+const EmojiListItems = EmojiListItems$1;
+const MenuItem = _ref => {
+  let {
+    className = '',
+    children,
+    onClick,
+    disable = false
+  } = _ref;
+  const handleClickEvent = e => {
     if (!disable && onClick) {
       onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }
@@ -238,7 +249,7 @@ var MenuItem = function (_a) {
     role: "menuitem",
     "aria-disabled": disable ? true : false,
     onClick: handleClickEvent,
-    onKeyPress: function (e) {
+    onKeyPress: e => {
       if (e.keyCode === ENTER_KEY) handleClickEvent(e);
     },
     tabIndex: 0
@@ -248,35 +259,28 @@ var MenuItem = function (_a) {
     color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
   }, children));
 };
-var MenuRoot = function () {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    id: "sendbird-dropdown-portal",
-    className: "sendbird-dropdown-portal"
-  });
-};
+const MenuRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
+  id: "sendbird-dropdown-portal",
+  className: "sendbird-dropdown-portal"
+});
+
 // For the test environment
-var EmojiReactionListRoot = function () {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    id: "sendbird-emoji-list-portal"
-  });
-};
-function ContextMenu(_a) {
-  var menuTrigger = _a.menuTrigger,
-    menuItems = _a.menuItems,
-    isOpen = _a.isOpen;
-  var _b = React.useState(false),
-    showMenu = _b[0],
-    setShowMenu = _b[1];
+const EmojiReactionListRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
+  id: "sendbird-emoji-list-portal"
+});
+function ContextMenu(_ref2) {
+  let {
+    menuTrigger,
+    menuItems,
+    isOpen
+  } = _ref2;
+  const [showMenu, setShowMenu] = React.useState(false);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-context-menu",
     style: {
       display: 'inline'
     }
-  }, menuTrigger === null || menuTrigger === void 0 ? void 0 : menuTrigger(function () {
-    return setShowMenu(!showMenu);
-  }), (showMenu || isOpen) && menuItems(function () {
-    return setShowMenu(false);
-  }));
+  }, menuTrigger === null || menuTrigger === void 0 ? void 0 : menuTrigger(() => setShowMenu(!showMenu)), (showMenu || isOpen) && menuItems(() => setShowMenu(false)));
 }
 
 exports.EmojiListItems = EmojiListItems;