@sendbird/uikit-react 3.4.6 → 3.4.7-0

package/cjs/ui/ThreadReplies.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadReplies.js","sources":["../../../src/ui/ThreadReplies/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ThreadInfo } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport Avatar from '../Avatar';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../../ui/Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport uuidv4 from '../../utils/uuid';\n\nexport interface ThreadRepliesProps {\n  className?: string;\n  threadInfo: ThreadInfo;\n  onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport default function ThreadReplies({\n  className,\n  threadInfo,\n  onClick,\n}: ThreadRepliesProps): React.ReactElement {\n  const {\n    mostRepliedUsers = [],\n    replyCount,\n  } = threadInfo;\n  const { stringSet } = useLocalization();\n  return (\n    <div\n      className={`sendbird-ui-thread-replies ${className}`}\n      role=\"button\"\n      onClick={(e) => {\n        onClick(e);\n        e?.stopPropagation();\n      }}\n      onKeyDown={(e) => {\n        onClick(e);\n        e?.stopPropagation();\n      }}\n    >\n      <div className=\"sendbird-ui-thread-replies__user-profiles\">\n        {mostRepliedUsers.slice(0, 4).map((user) => {\n          return (\n            <Avatar\n              key={uuidv4()}\n              className=\"sendbird-ui-thread-replies__user-profiles__avatar\"\n              src={user?.profileUrl}\n              alt=\"user profile\"\n              width=\"20px\"\n              height=\"20px\"\n            />\n          );\n        })}\n        {mostRepliedUsers?.length >= 5 && (\n          <div className=\"sendbird-ui-thread-replies__user-profiles__avatar\">\n            <Avatar\n              className=\"sendbird-ui-thread-replies__user-profiles__avatar__image\"\n              src={mostRepliedUsers?.[4]?.profileUrl}\n              alt=\"user profile\"\n              width=\"20px\"\n              height=\"20px\"\n            />\n            <div className=\"sendbird-ui-thread-replies__user-profiles__avatar__cover\" />\n            <div className=\"sendbird-ui-thread-replies__user-profiles__avatar__plus\">\n              <Icon\n                type={IconTypes.PLUS}\n                fillColor={IconColors.WHITE}\n                width=\"16px\"\n                height=\"16px\"\n              />\n            </div>\n          </div>\n        )}\n      </div>\n      <Label\n        className=\"sendbird-ui-thread-replies__reply-counts\"\n        type={LabelTypography.CAPTION_2}\n        color={LabelColors.PRIMARY}\n      >\n        {\n          replyCount === 1\n            ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}`\n            : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`\n        }\n      </Label>\n      <Icon\n        className=\"sendbird-ui-thread-replies__icon\"\n        type={IconTypes.CHEVRON_RIGHT}\n        fillColor={IconColors.PRIMARY}\n        width=\"16px\"\n        height=\"16px\"\n      />\n    </div>\n  );\n}\n"],"names":["ThreadReplies","_a","className","threadInfo","onClick","_c","mostRepliedUsers","replyCount","stringSet","useLocalization","React","createElement","role","e","stopPropagation","onKeyDown","slice","map","user","Avatar","key","uuidv4","src","profileUrl","alt","width","height","length","_b","Icon","type","IconTypes","PLUS","fillColor","IconColors","WHITE","Label","LabelTypography","CAPTION_2","color","LabelColors","PRIMARY","concat","CHANNEL__THREAD_REPLY","CHANNEL__THREAD_OVER_MAX","CHANNEL__THREAD_REPLIES","CHEVRON_RIGHT"],"mappings":"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"}
+{"version":3,"file":"ThreadReplies.js","sources":["../../../src/ui/ThreadReplies/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ThreadInfo } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport Avatar from '../Avatar';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../../ui/Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport uuidv4 from '../../utils/uuid';\n\nexport interface ThreadRepliesProps {\n  className?: string;\n  threadInfo: ThreadInfo;\n  onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport default function ThreadReplies({\n  className,\n  threadInfo,\n  onClick,\n}: ThreadRepliesProps): React.ReactElement {\n  const {\n    mostRepliedUsers = [],\n    replyCount,\n  } = threadInfo;\n  const { stringSet } = useLocalization();\n  return (\n    <div\n      className={`sendbird-ui-thread-replies ${className}`}\n      role=\"button\"\n      onClick={(e) => {\n        onClick(e);\n        e?.stopPropagation();\n      }}\n      onKeyDown={(e) => {\n        onClick(e);\n        e?.stopPropagation();\n      }}\n    >\n      <div className=\"sendbird-ui-thread-replies__user-profiles\">\n        {mostRepliedUsers.slice(0, 4).map((user) => {\n          return (\n            <Avatar\n              key={uuidv4()}\n              className=\"sendbird-ui-thread-replies__user-profiles__avatar\"\n              src={user?.profileUrl}\n              alt=\"user profile\"\n              width=\"20px\"\n              height=\"20px\"\n            />\n          );\n        })}\n        {mostRepliedUsers?.length >= 5 && (\n          <div className=\"sendbird-ui-thread-replies__user-profiles__avatar\">\n            <Avatar\n              className=\"sendbird-ui-thread-replies__user-profiles__avatar__image\"\n              src={mostRepliedUsers?.[4]?.profileUrl}\n              alt=\"user profile\"\n              width=\"20px\"\n              height=\"20px\"\n            />\n            <div className=\"sendbird-ui-thread-replies__user-profiles__avatar__cover\" />\n            <div className=\"sendbird-ui-thread-replies__user-profiles__avatar__plus\">\n              <Icon\n                type={IconTypes.PLUS}\n                fillColor={IconColors.WHITE}\n                width=\"16px\"\n                height=\"16px\"\n              />\n            </div>\n          </div>\n        )}\n      </div>\n      <Label\n        className=\"sendbird-ui-thread-replies__reply-counts\"\n        type={LabelTypography.CAPTION_2}\n        color={LabelColors.PRIMARY}\n      >\n        {\n          replyCount === 1\n            ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}`\n            : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`\n        }\n      </Label>\n      <Icon\n        className=\"sendbird-ui-thread-replies__icon\"\n        type={IconTypes.CHEVRON_RIGHT}\n        fillColor={IconColors.PRIMARY}\n        width=\"16px\"\n        height=\"16px\"\n      />\n    </div>\n  );\n}\n"],"names":["ThreadReplies","_ref","_mostRepliedUsers$","className","threadInfo","onClick","mostRepliedUsers","replyCount","stringSet","useLocalization","React","createElement","role","e","stopPropagation","onKeyDown","slice","map","user","Avatar","key","uuidv4","src","profileUrl","alt","width","height","length","Icon","type","IconTypes","PLUS","fillColor","IconColors","WHITE","Label","LabelTypography","CAPTION_2","color","LabelColors","PRIMARY","CHANNEL__THREAD_REPLY","CHANNEL__THREAD_OVER_MAX","CHANNEL__THREAD_REPLIES","CHEVRON_RIGHT"],"mappings":";;;;;;;;;;;;;;;;;AAgBe,SAASA,aAAaA,CAAAC,IAAA,EAIM;AAAA,EAAA,IAAAC,kBAAA,CAAA;EAAA,IAJL;IACpCC,SAAS;IACTC,UAAU;AACVC,IAAAA,OAAAA;AACkB,GAAC,GAAAJ,IAAA,CAAA;EACnB,MAAM;AACJK,IAAAA,gBAAgB,GAAG,EAAE;AACrBC,IAAAA,UAAAA;AACF,GAAC,GAAGH,UAAU,CAAA;EACd,MAAM;AAAEI,IAAAA,SAAAA;GAAW,GAAGC,mCAAe,EAAE,CAAA;EACvC,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACER,SAAS,EAAG,CAA6BA,2BAAAA,EAAAA,SAAU,CAAE,CAAA;AACrDS,IAAAA,IAAI,EAAC,QAAQ;IACbP,OAAO,EAAGQ,CAAC,IAAK;MACdR,OAAO,CAACQ,CAAC,CAAC,CAAA;AACVA,MAAAA,CAAC,aAADA,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAADA,CAAC,CAAEC,eAAe,EAAE,CAAA;KACpB;IACFC,SAAS,EAAGF,CAAC,IAAK;MAChBR,OAAO,CAACQ,CAAC,CAAC,CAAA;AACVA,MAAAA,CAAC,aAADA,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAADA,CAAC,CAAEC,eAAe,EAAE,CAAA;AACtB,KAAA;GAEAJ,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAC,2CAAA;AAA2C,GAAA,EACvDG,gBAAgB,CAACU,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAK;AAC1C,IAAA,oBACER,yBAAA,CAAAC,aAAA,CAACQ,oBAAM,EAAA;MACLC,GAAG,EAAEC,WAAM,EAAG;AACdlB,MAAAA,SAAS,EAAC,mDAAmD;AAC7DmB,MAAAA,GAAG,EAAEJ,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEK,UAAW;AACtBC,MAAAA,GAAG,EAAC,cAAc;AAClBC,MAAAA,KAAK,EAAC,MAAM;AACZC,MAAAA,MAAM,EAAC,MAAA;AAAM,KACd,CAAC,CAAA;AAEN,GAAC,CAAC,EACD,CAAApB,gBAAgB,aAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,gBAAgB,CAAEqB,MAAM,KAAI,CAAC,iBAC5BjB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAC,mDAAA;AAAmD,GAAA,eAChEO,yBAAA,CAAAC,aAAA,CAACQ,oBAAM,EAAA;AACLhB,IAAAA,SAAS,EAAC,0DAA0D;AACpEmB,IAAAA,GAAG,EAAEhB,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAJ,kBAAA,GAAhBI,gBAAgB,CAAG,CAAC,CAAC,MAAAJ,IAAAA,IAAAA,kBAAA,KAArBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAAuBqB,UAAW;AACvCC,IAAAA,GAAG,EAAC,cAAc;AAClBC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GACd,CAAC,eACFhB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAC,0DAAA;AAA0D,GAAE,CAAC,eAC5EO,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAC,yDAAA;AAAyD,GAAA,eACtEO,yBAAA,CAAAC,aAAA,CAACiB,kBAAI,EAAA;IACHC,IAAI,EAAEC,iBAAS,CAACC,IAAK;IACrBC,SAAS,EAAEC,kBAAU,CAACC,KAAM;AAC5BT,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;GACR,CACE,CACF,CAEJ,CAAC,eACNhB,yBAAA,CAAAC,aAAA,CAACwB,cAAK,EAAA;AACJhC,IAAAA,SAAS,EAAC,0CAA0C;IACpD0B,IAAI,EAAEO,wBAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,oBAAW,CAACC,OAAAA;AAAQ,GAAA,EAGzBjC,UAAU,KAAK,CAAC,GACX,GAAEA,UAAW,CAAA,CAAA,EAAGC,SAAS,CAACiC,qBAAsB,CAAA,CAAC,GACjD,CAAA,EAAElC,UAAU,GAAG,EAAE,GAAGC,SAAS,CAACkC,wBAAwB,GAAGnC,UAAW,IAAGC,SAAS,CAACmC,uBAAwB,CAAA,CAE3G,CAAC,eACRjC,yBAAA,CAAAC,aAAA,CAACiB,kBAAI,EAAA;AACHzB,IAAAA,SAAS,EAAC,kCAAkC;IAC5C0B,IAAI,EAAEC,iBAAS,CAACc,aAAc;IAC9BZ,SAAS,EAAEC,kBAAU,CAACO,OAAQ;AAC9Bf,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GACd,CACE,CAAC,CAAA;AAEV;;;;"}

package/cjs/ui/ThumbnailMessageItemBody.js

@@ -3,37 +3,34 @@
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var index = require('../index-2ac1f908.js');
+var index = require('../index-f2146bae.js');
 require('prop-types');
-require('../tslib.es6-8f4b0cfe.js');
+require('../_rollupPluginBabelHelpers-c5955c81.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 ThumbnailMessageItemBody(_a) {
-  var _b, _c;
-  var className = _a.className,
-    message = _a.message,
-    _d = _a.isByMe,
-    isByMe = _d === void 0 ? false : _d,
-    _e = _a.mouseHover,
-    mouseHover = _e === void 0 ? false : _e,
-    _f = _a.isReactionEnabled,
-    isReactionEnabled = _f === void 0 ? false : _f,
-    showFileViewer = _a.showFileViewer,
-    _g = _a.style,
-    style = _g === void 0 ? {} : _g;
-  var _h = message.thumbnails,
-    thumbnails = _h === void 0 ? [] : _h;
-  var thumbnailUrl = thumbnails.length > 0 ? (_b = thumbnails[0]) === null || _b === void 0 ? void 0 : _b.url : '';
-  var _j = React.useState(false),
-    imageRendered = _j[0],
-    setImageRendered = _j[1];
+function ThumbnailMessageItemBody(_ref) {
+  var _thumbnails$, _message$reactions;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false,
+    showFileViewer,
+    style = {}
+  } = _ref;
+  const {
+    thumbnails = []
+  } = message;
+  const thumbnailUrl = thumbnails.length > 0 ? (_thumbnails$ = thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
+  const [imageRendered, setImageRendered] = React.useState(false);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) > 0 ? 'reactions' : '']),
-    onClick: function () {
+    className: index.getClassName([className, 'sendbird-thumbnail-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' : '']),
+    onClick: () => {
       if (index.isSentMessage(message)) {
         showFileViewer(true);
       }
@@ -44,22 +41,20 @@ function ThumbnailMessageItemBody(_a) {
     alt: message === null || message === void 0 ? void 0 : message.type,
     width: (style === null || style === void 0 ? void 0 : style.width) || '360px',
     height: (style === null || style === void 0 ? void 0 : style.height) || '270px',
-    onLoad: function () {
+    onLoad: () => {
       setImageRendered(true);
     },
-    placeHolder: function (style_) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "sendbird-thumbnail-message-item-body__placeholder",
-        style: style_
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "sendbird-thumbnail-message-item-body__placeholder__icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.PHOTO,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-        width: "34px",
-        height: "34px"
-      })));
-    }
+    placeHolder: style_ => /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-thumbnail-message-item-body__placeholder",
+      style: style_
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-thumbnail-message-item-body__placeholder__icon"
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.PHOTO,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+      width: "34px",
+      height: "34px"
+    })))
   }), index.isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default["default"].createElement("video", {
     className: "sendbird-thumbnail-message-item-body__video"
   }, /*#__PURE__*/React__default["default"].createElement("source", {

package/cjs/ui/ThumbnailMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailMessageItemBody.js","sources":["../../../src/ui/ThumbnailMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useState } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ImageRenderer from '../ImageRenderer';\nimport { getClassName, isGifMessage, isSentMessage, isVideoMessage } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  showFileViewer?: (bool: boolean) => void;\n  style?: Record<string, any>;\n}\n\nexport default function ThumbnailMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  showFileViewer,\n  style = {},\n}: Props): ReactElement {\n  const { thumbnails = [] } = message;\n  const thumbnailUrl: string = thumbnails.length > 0 ? thumbnails[0]?.url : '';\n  const [imageRendered, setImageRendered] = useState(false);\n  return (\n    <div\n      className={getClassName([\n        className,\n        'sendbird-thumbnail-message-item-body',\n        isByMe ? 'outgoing' : 'incoming',\n        mouseHover ? 'mouse-hover' : '',\n        (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n      ])}\n      onClick={() => {\n        if (isSentMessage(message)) {\n          showFileViewer(true);\n        }\n      }}\n    >\n      <ImageRenderer\n        className=\"sendbird-thumbnail-message-item-body__thumbnail\"\n        url={thumbnailUrl || message?.url}\n        alt={message?.type}\n        width={style?.width || '360px'}\n        height={style?.height || '270px'}\n        onLoad={() => { setImageRendered(true) }}\n        placeHolder={(style_: Record<string, any>) => (\n          <div\n            className=\"sendbird-thumbnail-message-item-body__placeholder\"\n            style={style_}\n          >\n            <div className=\"sendbird-thumbnail-message-item-body__placeholder__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO}\n                fillColor={IconColors.ON_BACKGROUND_2}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )}\n      />\n      {\n        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (\n          <video className=\"sendbird-thumbnail-message-item-body__video\">\n            <source src={message?.url} type={message?.type} />\n          </video>\n        )\n      }\n      <div className=\"sendbird-thumbnail-message-item-body__image-cover\" />\n      {\n        (isVideoMessage(message) || isGifMessage(message)) && (\n          <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper\">\n            <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF}\n                fillColor={IconColors.GRAY}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThumbnailMessageItemBody","_a","className","message","_d","isByMe","_e","mouseHover","_f","isReactionEnabled","showFileViewer","_g","style","_h","thumbnails","thumbnailUrl","length","_b","url","_j","useState","imageRendered","setImageRendered","React","createElement","getClassName","_c","reactions","onClick","isSentMessage","ImageRenderer","alt","type","width","height","onLoad","placeHolder","style_","Icon","isVideoMessage","IconTypes","PLAY","PHOTO","fillColor","IconColors","ON_BACKGROUND_2","src","isGifMessage","GIF","GRAY"],"mappings":"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"}
+{"version":3,"file":"ThumbnailMessageItemBody.js","sources":["../../../src/ui/ThumbnailMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useState } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ImageRenderer from '../ImageRenderer';\nimport { getClassName, isGifMessage, isSentMessage, isVideoMessage } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  showFileViewer?: (bool: boolean) => void;\n  style?: Record<string, any>;\n}\n\nexport default function ThumbnailMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  showFileViewer,\n  style = {},\n}: Props): ReactElement {\n  const { thumbnails = [] } = message;\n  const thumbnailUrl: string = thumbnails.length > 0 ? thumbnails[0]?.url : '';\n  const [imageRendered, setImageRendered] = useState(false);\n  return (\n    <div\n      className={getClassName([\n        className,\n        'sendbird-thumbnail-message-item-body',\n        isByMe ? 'outgoing' : 'incoming',\n        mouseHover ? 'mouse-hover' : '',\n        (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n      ])}\n      onClick={() => {\n        if (isSentMessage(message)) {\n          showFileViewer(true);\n        }\n      }}\n    >\n      <ImageRenderer\n        className=\"sendbird-thumbnail-message-item-body__thumbnail\"\n        url={thumbnailUrl || message?.url}\n        alt={message?.type}\n        width={style?.width || '360px'}\n        height={style?.height || '270px'}\n        onLoad={() => { setImageRendered(true) }}\n        placeHolder={(style_: Record<string, any>) => (\n          <div\n            className=\"sendbird-thumbnail-message-item-body__placeholder\"\n            style={style_}\n          >\n            <div className=\"sendbird-thumbnail-message-item-body__placeholder__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO}\n                fillColor={IconColors.ON_BACKGROUND_2}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )}\n      />\n      {\n        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (\n          <video className=\"sendbird-thumbnail-message-item-body__video\">\n            <source src={message?.url} type={message?.type} />\n          </video>\n        )\n      }\n      <div className=\"sendbird-thumbnail-message-item-body__image-cover\" />\n      {\n        (isVideoMessage(message) || isGifMessage(message)) && (\n          <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper\">\n            <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF}\n                fillColor={IconColors.GRAY}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThumbnailMessageItemBody","_ref","_thumbnails$","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","showFileViewer","style","thumbnails","thumbnailUrl","length","url","imageRendered","setImageRendered","useState","React","createElement","getClassName","reactions","onClick","isSentMessage","ImageRenderer","alt","type","width","height","onLoad","placeHolder","style_","Icon","isVideoMessage","IconTypes","PLAY","PHOTO","fillColor","IconColors","ON_BACKGROUND_2","src","isGifMessage","GIF","GRAY"],"mappings":"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"}

package/cjs/ui/Toggle.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-c5955c81.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * The default value of `checked` should be null
+ * to support both case of controlled and uncontrolled component
+ * ref: https://github.com/aaronshaf/react-toggle#props
+ */
+const noop = () => {/* noop */};
+const TOGGLE_DEFAULT_VALUE = {
+  checked: null,
+  defaultChecked: false,
+  disabled: false,
+  onChange: noop,
+  onFocus: noop,
+  onBlur: noop
+};
+const ToggleContext = /*#__PURE__*/React__default["default"].createContext(TOGGLE_DEFAULT_VALUE);
+function useToggleContext() {
+  const context = React__default["default"].useContext(ToggleContext);
+  if (context === undefined) {
+    throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');
+  }
+  return context;
+}
+
+// Props Explanation https://github.com/aaronshaf/react-toggle#props
+function ToggleContainer(_ref) {
+  let {
+    checked = TOGGLE_DEFAULT_VALUE.checked,
+    // null
+    defaultChecked = TOGGLE_DEFAULT_VALUE.defaultChecked,
+    disabled = TOGGLE_DEFAULT_VALUE.disabled,
+    onChange = TOGGLE_DEFAULT_VALUE.onChange,
+    onFocus = TOGGLE_DEFAULT_VALUE.onFocus,
+    onBlur = TOGGLE_DEFAULT_VALUE.onBlur,
+    children
+  } = _ref;
+  const [isChecked, setChecked] = React.useState(defaultChecked || false);
+  const handleChange = React.useCallback(e => {
+    if (disabled) {
+      return;
+    }
+    if (checked === null) {
+      setChecked(e.currentTarget.checked);
+    }
+    onChange(e);
+  }, [onChange, checked]);
+  return /*#__PURE__*/React__default["default"].createElement(ToggleContext.Provider, {
+    value: {
+      checked: checked !== null ? checked : isChecked,
+      disabled,
+      onChange: handleChange,
+      onFocus: e => {
+        if (!disabled) {
+          onFocus(e);
+        }
+      },
+      onBlur: e => {
+        if (!disabled) {
+          onBlur(e);
+        }
+      }
+    }
+  }, children);
+}
+
+function filterNumber(input) {
+  if (typeof input !== 'string' && typeof input !== 'number') {
+    try {
+      const {
+        config
+      } = useSendbirdStateContext();
+      const {
+        logger
+      } = config;
+      logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);
+    } catch (_) {/* noop */}
+    return [];
+  }
+  if (typeof input === 'number') {
+    return [input];
+  }
+  const regex = /(-?\d+)(\.\d+)?/g;
+  const numbers = input.match(regex) || [];
+  return numbers.map(parseFloat);
+}
+
+function ToggleUI(props) {
+  var _filterNumber;
+  const {
+    reversed = false,
+    width = '40px',
+    animationDuration = '0.5s',
+    style = {},
+    name = '',
+    id = '',
+    ariaLabel = '',
+    ariaLabelledby = ''
+  } = props;
+  const {
+    checked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur
+  } = useToggleContext();
+
+  // animation should not be activated in the initialization step
+  const [animatedClassName, setAnimatedClassName] = React.useState('');
+  const toggleWidth = (_filterNumber = filterNumber(width)) === null || _filterNumber === void 0 ? void 0 : _filterNumber[0];
+  const toggleHeight = toggleWidth / 2;
+  // The size of dot should be 60% of toggle height
+  const dotSize = toggleHeight * 0.6;
+  return /*#__PURE__*/React__default["default"].createElement("label", {
+    className: ['sendbird-input-toggle-button', animatedClassName, checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked', disabled ? 'sendbird-input-toggle-button--disabled' : [], reversed ? 'sendbird-input-toggle-button--reversed' : []].flat().join(' '),
+    style: _rollupPluginBabelHelpers._objectSpread2({
+      width: `${toggleWidth}px`,
+      height: `${toggleHeight}px`,
+      borderRadius: `${dotSize}px`
+    }, style)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ['sendbird-input-toggle-button__inner-dot', checked ? 'sendbird-input-toggle-button__inner-dot--activate' : 'sendbird-input-toggle-button__inner-dot--inactivate'].join(' '),
+    style: {
+      width: `${dotSize}px`,
+      height: `${dotSize}px`,
+      animationDuration
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "checkbox",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    name: name,
+    id: id,
+    checked: checked,
+    disabled: disabled,
+    onChange: e => {
+      onChange(e);
+      setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
+    },
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+}
+
+function Toggle(props) {
+  const {
+    // ToggleProvider
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    // ToggleUI
+    className,
+    reversed,
+    width,
+    // height will be half of width
+    animationDuration,
+    style,
+    name,
+    id,
+    ariaLabel,
+    ariaLabelledby
+  } = props;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-ui-toggle ${className}`
+  }, /*#__PURE__*/React__default["default"].createElement(ToggleContainer, {
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, /*#__PURE__*/React__default["default"].createElement(ToggleUI, {
+    reversed: reversed,
+    width: width,
+    animationDuration: animationDuration,
+    style: style,
+    name: name,
+    id: id,
+    ariaLabel: ariaLabel,
+    ariaLabelledby: ariaLabelledby
+  })));
+}
+
+exports.Toggle = Toggle;
+exports.ToggleContainer = ToggleContainer;
+exports.ToggleUI = ToggleUI;
+exports.useToggleContext = useToggleContext;
+//# sourceMappingURL=Toggle.js.map

package/cjs/ui/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/ui/Toggle/ToggleContext.ts","../../../src/ui/Toggle/ToggleContainer.tsx","../../../src/ui/Toggle/utils.ts","../../../src/ui/Toggle/ToggleUI.tsx","../../../src/ui/Toggle/index.tsx"],"sourcesContent":["import React, { ChangeEventHandler } from 'react';\n\n/**\n * The default value of `checked` should be null\n * to support both case of controlled and uncontrolled component\n * ref: https://github.com/aaronshaf/react-toggle#props\n */\nconst noop = (): void => { /* noop */ };\nexport const TOGGLE_DEFAULT_VALUE = {\n  checked: null,\n  defaultChecked: false,\n  disabled: false,\n  onChange: noop,\n  onFocus: noop,\n  onBlur: noop,\n};\n\nexport interface ToggleContextInterface {\n  checked?: boolean | null;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  onFocus?: ChangeEventHandler<HTMLInputElement>;\n  onBlur?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const ToggleContext = React.createContext<ToggleContextInterface>(TOGGLE_DEFAULT_VALUE);\n\nexport function useToggleContext(): ToggleContextInterface {\n  const context = React.useContext(ToggleContext);\n  if (context === undefined) {\n    throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');\n  }\n  return context;\n}\n","import React, { ChangeEvent, useCallback, useState } from 'react';\n\nimport {\n  ToggleContext,\n  ToggleContextInterface,\n  TOGGLE_DEFAULT_VALUE as Dvalue,\n} from './ToggleContext';\n\nexport interface ToggleContainerProps extends ToggleContextInterface {\n  children?: React.ReactElement;\n}\n\n// Props Explanation https://github.com/aaronshaf/react-toggle#props\nexport function ToggleContainer({\n  checked = Dvalue.checked, // null\n  defaultChecked = Dvalue.defaultChecked,\n  disabled = Dvalue.disabled,\n  onChange = Dvalue.onChange,\n  onFocus = Dvalue.onFocus,\n  onBlur = Dvalue.onBlur,\n  children,\n}: ToggleContainerProps): React.ReactElement {\n  const [isChecked, setChecked] = useState(defaultChecked || false);\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    if (disabled) {\n      return;\n    }\n    if (checked === null) {\n      setChecked(e.currentTarget.checked);\n    }\n    onChange(e);\n  }, [onChange, checked]);\n\n  return (\n    <ToggleContext.Provider value={{\n      checked: checked !== null ? checked : isChecked,\n      disabled,\n      onChange: handleChange,\n      onFocus: (e) => {\n        if (!disabled) {\n          onFocus(e);\n        }\n      },\n      onBlur: (e) => {\n        if (!disabled) {\n          onBlur(e);\n        }\n      },\n    }}>\n      {children}\n    </ToggleContext.Provider>\n  );\n}\n","import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\nexport function filterNumber(input: string | number): Array<number> {\n  if (typeof input !== 'string' && typeof input !== 'number') {\n    try {\n      const { config } = useSendbirdStateContext();\n      const { logger } = config;\n      logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);\n    } catch (_) { /* noop */ }\n    return [];\n  }\n  if (typeof input === 'number') {\n    return [input];\n  }\n  const regex = /(-?\\d+)(\\.\\d+)?/g;\n  const numbers = input.match(regex) || [];\n  return numbers.map(parseFloat);\n}\n","import React, { useState } from 'react';\nimport { useToggleContext } from './ToggleContext';\nimport { filterNumber } from './utils';\n\nexport interface ToggleUIProps {\n  reversed?: boolean;\n  width?: string;\n  animationDuration?: string;\n  style?: Record<string, string>;\n  name?: string;\n  id?: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\n\nexport function ToggleUI(props: ToggleUIProps): React.ReactElement {\n  const {\n    reversed = false,\n    width = '40px',\n    animationDuration = '0.5s',\n    style = {},\n    name = '',\n    id = '',\n    ariaLabel = '',\n    ariaLabelledby = '',\n  } = props;\n  const {\n    checked,\n    disabled,\n    onChange,\n    onFocus,\n    onBlur,\n  } = useToggleContext();\n\n  // animation should not be activated in the initialization step\n  const [animatedClassName, setAnimatedClassName] = useState('');\n\n  const toggleWidth = filterNumber(width)?.[0];\n  const toggleHeight = toggleWidth / 2;\n  // The size of dot should be 60% of toggle height\n  const dotSize = toggleHeight * 0.6;\n\n  return (\n    <label\n      className={[\n        'sendbird-input-toggle-button',\n        animatedClassName,\n        checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked',\n        disabled ? 'sendbird-input-toggle-button--disabled' : [],\n        reversed ? 'sendbird-input-toggle-button--reversed' : [],\n      ].flat().join(' ')}\n      style={{\n        width: `${toggleWidth}px`,\n        height: `${toggleHeight}px`,\n        borderRadius: `${dotSize}px`,\n        ...style,\n      }}\n    >\n      <div\n        className={[\n          'sendbird-input-toggle-button__inner-dot',\n          checked\n            ? 'sendbird-input-toggle-button__inner-dot--activate'\n            : 'sendbird-input-toggle-button__inner-dot--inactivate',\n        ].join(' ')}\n        style={{\n          width: `${dotSize}px`,\n          height: `${dotSize}px`,\n          animationDuration,\n        }}\n      />\n      <input\n        type=\"checkbox\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        name={name}\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        onChange={(e) => {\n          onChange(e);\n          setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');\n        }}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      />\n    </label>\n  );\n}\n","import React from 'react';\nimport './index.scss';\n\nimport { ToggleContainer, ToggleContainerProps } from './ToggleContainer';\nimport { useToggleContext } from './ToggleContext';\nimport { ToggleUI, ToggleUIProps } from './ToggleUI';\n\nexport interface ToggleProps extends ToggleContainerProps, ToggleUIProps {\n  className?: string;\n}\nfunction Toggle(props: ToggleProps): React.ReactElement {\n  const {\n    // ToggleProvider\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    onFocus,\n    onBlur,\n    // ToggleUI\n    className,\n    reversed,\n    width,\n    // height will be half of width\n    animationDuration,\n    style,\n    name,\n    id,\n    ariaLabel,\n    ariaLabelledby,\n  } = props;\n  return (\n    <div className={`sendbird-ui-toggle ${className}`}>\n      <ToggleContainer\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onChange={onChange}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        >\n        <ToggleUI\n          reversed={reversed}\n          width={width}\n          animationDuration={animationDuration}\n          style={style}\n          name={name}\n          id={id}\n          ariaLabel={ariaLabel}\n          ariaLabelledby={ariaLabelledby}\n        />\n      </ToggleContainer>\n    </div>\n  );\n}\n\nexport type { ToggleContainerProps, ToggleUIProps };\nexport { Toggle, ToggleContainer, ToggleUI, useToggleContext };\n"],"names":["noop","TOGGLE_DEFAULT_VALUE","checked","defaultChecked","disabled","onChange","onFocus","onBlur","ToggleContext","React","createContext","useToggleContext","context","useContext","undefined","Error","ToggleContainer","_ref","Dvalue","children","isChecked","setChecked","useState","handleChange","useCallback","e","currentTarget","createElement","Provider","value","filterNumber","input","config","useSendbirdStateContext","logger","warning","_","regex","numbers","match","map","parseFloat","ToggleUI","props","_filterNumber","reversed","width","animationDuration","style","name","id","ariaLabel","ariaLabelledby","animatedClassName","setAnimatedClassName","toggleWidth","toggleHeight","dotSize","className","flat","join","_objectSpread","height","borderRadius","type","Toggle"],"mappings":"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"}

package/cjs/ui/Tooltip.js

@@ -1,22 +1,21 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-8f4b0cfe.js');
 var React = require('react');
-var ui_Label = require('../index-b8a20afd.js');
+var ui_Label = require('../index-73643285.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
+require('../stringSet-68748705.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Tooltip(_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    _c = _a.children,
-    children = _c === void 0 ? '' : _c;
+function Tooltip(_ref) {
+  let {
+    className = '',
+    children = ''
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip'], false).join(' ')
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-tooltip'].join(' ')
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-tooltip__text",
     type: ui_Label.LabelTypography.CAPTION_2,

package/cjs/ui/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/ui/Tooltip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport Label, { LabelColors, LabelTypography } from '../Label';\n\nexport interface TooltipProps {\n  className?: string | Array<string>;\n  children?: string | ReactElement;\n}\nexport default function Tooltip({\n  className = '',\n  children = '',\n}: TooltipProps): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-tooltip',\n      ].join(' ')}\n    >\n      <Label\n        className=\"sendbird-tooltip__text\"\n        type={LabelTypography.CAPTION_2}\n        color={LabelColors.ONCONTENT_1}\n      >\n        {children}\n      </Label>\n    </div>\n  );\n}\n"],"names":["Tooltip","_a","_b","className","_c","children","React","createElement","__spreadArray","Array","isArray","join","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONCONTENT_1"],"mappings":";;;;;;;;;;;;AAUwB,SAAAA,OAAOA,CAACC,EAGjB,EAAA;MAFbC,EAAc,GAAAD,EAAA,CAAAE,SAAA;IAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IACdE,EAAA,GAAAH,EAAA,CAAAI,QAAa;IAAbA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAAA,EAAA,CAAA;EAEb,oBACEE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,uBAAA,CAAAA,uBAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAO,CAACP,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,EAAC,IAAA,CAAA,EAAA,CACvD,kBAAkB,CAClB,EAAA,KAAA,CAAA,CAAAQ,IAAI,CAAC,GAAG,CAAA;AAAE,GAAA,eAEZL,yBAAA,CAAAC,aAAA,CAACK,cAAK,EAAA;AACJT,IAAAA,SAAS,EAAC,wBAAwB;IAClCU,IAAI,EAAEC,wBAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,oBAAW,CAACC,WAAAA;GAElBb,EAAAA,QAAQ,CAEb,CAAM,CAAA;AAEV;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/ui/Tooltip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport Label, { LabelColors, LabelTypography } from '../Label';\n\nexport interface TooltipProps {\n  className?: string | Array<string>;\n  children?: string | ReactElement;\n}\nexport default function Tooltip({\n  className = '',\n  children = '',\n}: TooltipProps): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-tooltip',\n      ].join(' ')}\n    >\n      <Label\n        className=\"sendbird-tooltip__text\"\n        type={LabelTypography.CAPTION_2}\n        color={LabelColors.ONCONTENT_1}\n      >\n        {children}\n      </Label>\n    </div>\n  );\n}\n"],"names":["Tooltip","_ref","className","children","React","createElement","Array","isArray","join","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONCONTENT_1"],"mappings":";;;;;;;;;;;AAUe,SAASA,OAAOA,CAAAC,IAAA,EAGA;EAAA,IAHC;AAC9BC,IAAAA,SAAS,GAAG,EAAE;AACdC,IAAAA,QAAQ,GAAG,EAAA;AACC,GAAC,GAAAF,IAAA,CAAA;EACb,oBACEG,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAE,CACT,IAAII,KAAK,CAACC,OAAO,CAACL,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,kBAAkB,CACnB,CAACM,IAAI,CAAC,GAAG,CAAA;AAAE,GAAA,eAEZJ,yBAAA,CAAAC,aAAA,CAACI,cAAK,EAAA;AACJP,IAAAA,SAAS,EAAC,wBAAwB;IAClCQ,IAAI,EAAEC,wBAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,oBAAW,CAACC,WAAAA;GAElBZ,EAAAA,QACI,CACJ,CAAC,CAAA;AAEV;;;;"}

package/cjs/ui/TooltipWrapper.js

@@ -1,34 +1,33 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-8f4b0cfe.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", {
@@ -37,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","createElement","__spreadArray","Array","isArray","join","onMouseOver","onFocus","onMouseOut","onBlur","ref","style","bottom","left","current","concat","offsetWidth"],"mappings":";;;;;;;;;AAIA,IAAMA,kBAAkB,GAAG,CAAC,CAAA;AAOJ,SAAAC,cAAcA,CAACC,EAKjB,EAAA;MAJpBC,EAAc,GAAAD,EAAA,CAAAE,SAAA;IAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IACdE,QAAQ,GAAAH,EAAA,CAAAG,QAAA;IACRC,YAAY,GAAAJ,EAAA,CAAAI,YAAA,CAAA;AAGN,EAAA,IAAAC,EAAA,GAA0CC,cAAQ,CAAC,KAAK,CAAC;AAAxDC,IAAAA,gBAAgB,GAAAF,EAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,mBAAmB,GAAAH,EAAA,CAAA,CAAA,CAAmB,CAAA;AAC/D,EAAA,IAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;EAEhC,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAEW,uBAAA,CAAAA,uBAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAO,CAACb,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,EAAC,IAAA,CAAA,EAAA,CACvD,0BAA0B,UAC1Bc,IAAI,CAAC,GAAG,CAAE;IACZC,WAAW,EAAE,YAAA;MAAQT,mBAAmB,CAAC,IAAI,CAAC,CAAA;KAAI;IAClDU,OAAO,EAAE,YAAA;MAAQV,mBAAmB,CAAC,IAAI,CAAC,CAAA;KAAI;IAC9CW,UAAU,EAAE,YAAA;MAAQX,mBAAmB,CAAC,KAAK,CAAC,CAAA;KAAI;IAClDY,MAAM,EAAE,YAAA;MAAQZ,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAAE,KAAA;GAE5CG,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAC,oCAAoC;AAC9CmB,IAAAA,GAAG,EAAEZ,WAAAA;AAAY,GAAA,EAEhBN,QAAQ,CAEX,EACEI,gBAAgB,iBACdI,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAC,yCAAyC;AACnDoB,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE,sBAAezB,kBAAkB,EAAA,KAAA,CAAA;AAAO,KAAA;GAEzDa,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKV,IAAAA,SAAS,EAAC,gDAAA;GACbS,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,SAAS,EAAC,mEAAmE;AAC7EoB,IAAAA,KAAK,EAAE;AAAEE,MAAAA,IAAI,EAAEf,WAAW,CAACgB,OAAO,IAAI,OAAA,CAAAC,MAAA,CAAQjB,WAAW,CAACgB,OAAO,CAACE,WAAW,GAAG,CAAC,EAAA,WAAA,CAAA;AAAa,KAAA;AAAC,GAAA,EAE9FvB,YAAY,CAEjB,CACF,CACD,CAEC,CAAA;AAEV;;;;"}
+{"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,QACE,CAAC,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,YACE,CACF,CACF,CAGN,CAAC,CAAA;AAEV;;;;"}

package/cjs/ui/UnknownMessageItemBody.js

@@ -1,32 +1,33 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-b8a20afd.js');
-var index = require('../index-2ac1f908.js');
-var LocalizationContext = require('../LocalizationContext-498cb747.js');
+var ui_Label = require('../index-73643285.js');
+var index = require('../index-f2146bae.js');
+var LocalizationContext = require('../LocalizationContext-af96cf5f.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
-require('../tslib.es6-8f4b0cfe.js');
+require('../stringSet-68748705.js');
+require('../_rollupPluginBabelHelpers-c5955c81.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-8b6bb1ee.js');
+require('../index-83d1d15e.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,
-    _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' : ''])
+    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,