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

package/ui/ThreadReplies.js

@@ -1,39 +1,42 @@
 import React__default from 'react';
 import Avatar from './Avatar.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-95ac9232.js';
-import { u as useLocalization } from '../LocalizationContext-60894e38.js';
-import { u as uuidv4 } from '../uuid-968941a0.js';
-import '../tslib.es6-d9fa3716.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e33f7f55.js';
+import { u as useLocalization } from '../LocalizationContext-04c0c9dc.js';
+import { u as uuidv4 } from '../uuid-92d22300.js';
 import './ImageRenderer.js';
 import 'prop-types';
-import '../stringSet-7ace5726.js';
-import '../index-5e776774.js';
+import '../stringSet-e0ee1265.js';
+import '../index-319984d0.js';
 
-function ThreadReplies(_a) {
-  var _b;
-
-  var className = _a.className,
-      threadInfo = _a.threadInfo,
-      onClick = _a.onClick;
-  var _c = threadInfo.mostRepliedUsers,
-      mostRepliedUsers = _c === void 0 ? [] : _c,
-      replyCount = threadInfo.replyCount;
-  var stringSet = useLocalization().stringSet;
+function ThreadReplies(_ref) {
+  var _mostRepliedUsers$;
+  let {
+    className,
+    threadInfo,
+    onClick
+  } = _ref;
+  const {
+    mostRepliedUsers = [],
+    replyCount
+  } = threadInfo;
+  const {
+    stringSet
+  } = useLocalization();
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-ui-thread-replies ".concat(className),
+    className: `sendbird-ui-thread-replies ${className}`,
     role: "button",
-    onClick: function (e) {
+    onClick: e => {
       onClick(e);
       e === null || e === void 0 ? void 0 : e.stopPropagation();
     },
-    onKeyDown: function (e) {
+    onKeyDown: e => {
       onClick(e);
       e === null || e === void 0 ? void 0 : e.stopPropagation();
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-ui-thread-replies__user-profiles"
-  }, mostRepliedUsers.slice(0, 4).map(function (user) {
+  }, mostRepliedUsers.slice(0, 4).map(user => {
     return /*#__PURE__*/React__default.createElement(Avatar, {
       key: uuidv4(),
       className: "sendbird-ui-thread-replies__user-profiles__avatar",
@@ -46,7 +49,7 @@ function ThreadReplies(_a) {
     className: "sendbird-ui-thread-replies__user-profiles__avatar"
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     className: "sendbird-ui-thread-replies__user-profiles__avatar__image",
-    src: (_b = mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers[4]) === null || _b === void 0 ? void 0 : _b.profileUrl,
+    src: mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : (_mostRepliedUsers$ = mostRepliedUsers[4]) === null || _mostRepliedUsers$ === void 0 ? void 0 : _mostRepliedUsers$.profileUrl,
     alt: "user profile",
     width: "20px",
     height: "20px"
@@ -63,7 +66,7 @@ function ThreadReplies(_a) {
     className: "sendbird-ui-thread-replies__reply-counts",
     type: LabelTypography.CAPTION_2,
     color: LabelColors.PRIMARY
-  }, replyCount === 1 ? "".concat(replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLY) : "".concat(replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLIES)), /*#__PURE__*/React__default.createElement(Icon, {
+  }, replyCount === 1 ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}` : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`), /*#__PURE__*/React__default.createElement(Icon, {
     className: "sendbird-ui-thread-replies__icon",
     type: IconTypes.CHEVRON_RIGHT,
     fillColor: IconColors.PRIMARY,

package/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","e","stopPropagation","slice","map","user","uuidv4","profileUrl","length","_b","IconTypes","PLUS","IconColors","WHITE","LabelTypography","CAPTION_2","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":"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"}

package/ui/ThumbnailMessageItemBody.js

@@ -1,62 +1,53 @@
+import { b as _extends } from '../_rollupPluginBabelHelpers-fb0e05a4.js';
 import React__default, { useState } from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ImageRenderer from './ImageRenderer.js';
-import { h as getClassName, s as isSentMessage, q as isVideoMessage, p as isGifMessage } from '../index-58e5d82d.js';
+import { h as getClassName, p as isVideoMessage, o as isGifMessage, C as isSentMessage } from '../index-cf859f03.js';
+import { n as noop } from '../utils-56cb7de5.js';
+import { u as useLongPress } from '../useLongPress-1ab49410.js';
 import 'prop-types';
-import '../tslib.es6-d9fa3716.js';
 import '../utils/message/getOutgoingMessageState.js';
+import '../MediaQueryContext-ff9dca2b.js';
 
-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 = useState(false),
-      imageRendered = _j[0],
-      setImageRendered = _j[1];
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: 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 () {
+function ThumbnailMessageItemBody(_ref) {
+  var _thumbnails$, _message$reactions$le, _message$reactions;
+  let {
+    className = '',
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false,
+    showFileViewer = noop,
+    style = {}
+  } = _ref;
+  const {
+    thumbnails = []
+  } = message;
+  const thumbnailUrl = thumbnails.length > 0 ? (_thumbnails$ = thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
+  const [imageRendered, setImageRendered] = useState(false);
+  const onClickHandler = useLongPress({
+    onLongPress: noop,
+    onClick: () => {
       if (isSentMessage(message)) {
-        showFileViewer(true);
+        showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
       }
     }
-  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) > 0 ? 'reactions' : ''])
+  }, onClickHandler), /*#__PURE__*/React__default.createElement(ImageRenderer, {
     className: "sendbird-thumbnail-message-item-body__thumbnail",
     url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url),
     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 () {
+    width: (style === null || style === void 0 ? void 0 : style.width) || '360px',
+    height: (style === null || style === void 0 ? void 0 : style.height) || '270px',
+    onLoad: () => {
       setImageRendered(true);
     },
-    placeHolder: function (style_) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "sendbird-thumbnail-message-item-body__placeholder",
-        style: style_
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "sendbird-thumbnail-message-item-body__placeholder__icon"
-      }, /*#__PURE__*/React__default.createElement(Icon, {
-        type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO,
-        fillColor: IconColors.ON_BACKGROUND_2,
-        width: "34px",
-        height: "34px"
-      })));
-    }
+    placeHolder: style_ => /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-thumbnail-message-item-body__placeholder",
+      style: style_
+    })
   }), isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default.createElement("video", {
     className: "sendbird-thumbnail-message-item-body__video"
   }, /*#__PURE__*/React__default.createElement("source", {

package/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","getClassName","_c","reactions","isSentMessage","type","width","height","style_","isVideoMessage","IconTypes","PLAY","PHOTO","IconColors","ON_BACKGROUND_2","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';\nimport { noop } from '../../utils/utils';\nimport useLongPress from '../../hooks/useLongPress';\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 = noop,\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\n  const onClickHandler = useLongPress({\n    onLongPress: noop,\n    onClick: () => {\n      if (isSentMessage(message)) {\n        showFileViewer?.(true);\n      }\n    },\n  });\n\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) > 0) ? 'reactions' : '',\n      ])}\n      {...onClickHandler}\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        )}\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$le","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","showFileViewer","noop","style","thumbnails","thumbnailUrl","length","url","imageRendered","setImageRendered","useState","onClickHandler","useLongPress","onLongPress","onClick","isSentMessage","React","createElement","_extends","getClassName","reactions","ImageRenderer","alt","type","width","height","onLoad","placeHolder","style_","isVideoMessage","src","isGifMessage","Icon","IconTypes","PLAY","GIF","fillColor","IconColors","GRAY"],"mappings":"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"}

package/ui/Toggle.js

@@ -0,0 +1,191 @@
+import React__default, { useState, useCallback } from 'react';
+import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-fb0e05a4.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import '../withSendbird.js';
+
+/**
+ * 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.createContext(TOGGLE_DEFAULT_VALUE);
+function useToggleContext() {
+  const context = React__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] = useState(defaultChecked || false);
+  const handleChange = useCallback(e => {
+    if (disabled) {
+      return;
+    }
+    if (checked === null) {
+      setChecked(e.currentTarget.checked);
+    }
+    onChange(e);
+  }, [onChange, checked]);
+  return /*#__PURE__*/React__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] = 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.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: _objectSpread2({
+      width: `${toggleWidth}px`,
+      height: `${toggleHeight}px`,
+      borderRadius: `${dotSize}px`
+    }, style)
+  }, /*#__PURE__*/React__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.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.createElement("div", {
+    className: `sendbird-ui-toggle ${className}`
+  }, /*#__PURE__*/React__default.createElement(ToggleContainer, {
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, /*#__PURE__*/React__default.createElement(ToggleUI, {
+    reversed: reversed,
+    width: width,
+    animationDuration: animationDuration,
+    style: style,
+    name: name,
+    id: id,
+    ariaLabel: ariaLabel,
+    ariaLabelledby: ariaLabelledby
+  })));
+}
+
+export { Toggle, ToggleContainer, ToggleUI, useToggleContext };
+//# sourceMappingURL=Toggle.js.map

package/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/ui/Tooltip.js

@@ -1,16 +1,15 @@
-import { a as __spreadArray } from '../tslib.es6-d9fa3716.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-95ac9232.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e33f7f55.js';
 import 'prop-types';
-import '../stringSet-7ace5726.js';
+import '../stringSet-e0ee1265.js';
 
-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.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip'], false).join(' ')
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-tooltip'].join(' ')
   }, /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-tooltip__text",
     type: LabelTypography.CAPTION_2,

package/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","__spreadArray","Array","isArray","join","LabelTypography","CAPTION_2","LabelColors","ONCONTENT_1"],"mappings":";;;;;;AAUwB,SAAAA,OAAA,CAAQC,EAAR,EAGT;MAFbC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAKA;MACdE,EAAA,GAAAH,EAAA,CAAAI;MAAAA,QAAQ,GAAED,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAEA;EAEZ,oBACEE,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAEC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAN,CAAcN,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,EAC8C,IAD9C,CAAA,EAC8C,CACvD,kBADuD,CAD9C,EAGT,KAHS,CAAA,CAGTO,IAHS,CAGJ,GAHI,CAAA;AADb,GAAA,eAMEJ,6BAAC,KAAD,EAAA;AACE,IAAA,SAAS,EAAC,wBADZ;IAEE,IAAI,EAAEK,eAAe,CAACC,SAFxB;IAGE,KAAK,EAAEC,WAAW,CAACC,WAAAA;GAElBT,EAAAA,QALH,CANF,CADF,CAAA;AAgBD;;;;"}
+{"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,cAAA,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,cAAA,CAAAC,aAAA,CAACI,KAAK,EAAA;AACJP,IAAAA,SAAS,EAAC,wBAAwB;IAClCQ,IAAI,EAAEC,eAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,WAAW,CAACC,WAAAA;GAElBZ,EAAAA,QAAQ,CACH,CACJ,CAAA;AAEV;;;;"}

package/ui/TooltipWrapper.js

@@ -1,30 +1,27 @@
-import { a as __spreadArray } from '../tslib.es6-d9fa3716.js';
 import React__default, { useState, useRef } from '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 = useState(false),
-      showHoverTooltip = _c[0],
-      setShowHoverTooltip = _c[1];
-
-  var childrenRef = useRef(null);
+const SPACE_FROM_TRIGGER = 8;
+function TooltipWrapper(_ref) {
+  let {
+    className = '',
+    children,
+    hoverTooltip
+    // clickTooltip can be added later
+  } = _ref;
+  const [showHoverTooltip, setShowHoverTooltip] = useState(false);
+  const childrenRef = useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__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.createElement("div", {
@@ -33,14 +30,14 @@ function TooltipWrapper(_a) {
   }, children), showHoverTooltip && /*#__PURE__*/React__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.createElement("div", {
     className: "sendbird-tooltip-wrapper__hover-tooltip__inner"
   }, /*#__PURE__*/React__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))));
 }