@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-0

package/cjs/ui/MessageSearchItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSearchItem.js","sources":["../../../src/ui/MessageSearchItem/getCreatedAt.ts","../../../src/ui/MessageSearchItem/index.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport format from 'date-fns/format';\nimport isToday from 'date-fns/isToday';\nimport isThisYear from 'date-fns/isThisYear';\nimport isYesterday from 'date-fns/isYesterday';\n\ninterface GetCreatedAtProps {\n  createdAt: number;\n  locale?: Locale;\n  stringSet?: Record<string, string>;\n}\n\n// getCreatedAt\nexport default function ({\n  createdAt,\n  locale,\n  stringSet,\n}: GetCreatedAtProps): string {\n  const optionalParam = locale ? { locale } : null;\n  if (!createdAt) {\n    return '';\n  }\n  if (isToday(createdAt)) {\n    return format(createdAt, 'p', optionalParam);\n  }\n  if (isYesterday(createdAt)) {\n    return stringSet?.MESSAGE_STATUS__YESTERDAY || 'Yesterday';\n  }\n  if (isThisYear(createdAt)) {\n    return format(createdAt, 'MMM d', optionalParam);\n  }\n  return format(createdAt, 'yyyy/M/d', optionalParam);\n}\n","import React from 'react';\nimport './index.scss';\nimport getCreatedAt from './getCreatedAt';\n\nimport Avatar from '../Avatar';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { UserMessage } from '@sendbird/chat/message';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage;\n  selected?: boolean;\n  onClick?: (message: UserMessage) => void;\n}\n\nexport default function MessageSearchItem({\n  className,\n  message,\n  selected,\n  onClick,\n}: Props): JSX.Element {\n  const { createdAt } = message;\n  const messageText = message.message;\n  const sender = message.sender || message._sender;\n  const { profileUrl, nickname } = sender;\n  const { stringSet, dateLocale } = useLocalization();\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-message-search-item',\n        selected ? 'sendbird-message-search-item--selected' : '',\n      ].join(' ')}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick(message);\n      }}\n    >\n      <div className=\"sendbird-message-search-item__left\">\n        <Avatar\n          className=\"sendbird-message-search-item__left__sender-avatar\"\n          src={profileUrl}\n          alt=\"profile image\"\n          width=\"56px\"\n          height=\"56px\"\n        />\n      </div>\n      <div className=\"sendbird-message-search-item__right\">\n        <Label\n          className=\"sendbird-message-search-item__right__sender-name\"\n          type={LabelTypography.SUBTITLE_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {nickname || stringSet.NO_NAME}\n        </Label>\n        <Label\n          className=\"sendbird-message-search-item__right__message-text\"\n          type={LabelTypography.BODY_2}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {messageText}\n        </Label>\n        <Label\n          className=\"sendbird-message-search-item__right__message-created-at\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {getCreatedAt({createdAt, locale: dateLocale, stringSet })}\n        </Label>\n      </div>\n      <div className=\"sendbird-message-search-item__right-footer\" />\n    </div>\n  );\n}\n"],"names":["_a","createdAt","locale","stringSet","optionalParam","isToday","format","isYesterday","MESSAGE_STATUS__YESTERDAY","isThisYear","MessageSearchItem","className","message","selected","onClick","messageText","sender","_sender","profileUrl","nickname","_b","useLocalization","dateLocale","React","__spreadArray","Array","isArray","join","e","stopPropagation","Avatar","Label","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_1","NO_NAME","BODY_2","ONBACKGROUND_3","CAPTION_3","ONBACKGROUND_2","getCreatedAt"],"mappings":"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"}
+{"version":3,"file":"MessageSearchItem.js","sources":["../../../src/ui/MessageSearchItem/getCreatedAt.ts","../../../src/ui/MessageSearchItem/index.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport format from 'date-fns/format';\nimport isToday from 'date-fns/isToday';\nimport isThisYear from 'date-fns/isThisYear';\nimport isYesterday from 'date-fns/isYesterday';\n\ninterface GetCreatedAtProps {\n  createdAt: number;\n  locale?: Locale;\n  stringSet?: Record<string, string>;\n}\n\n// getCreatedAt\nexport default function ({\n  createdAt,\n  locale,\n  stringSet,\n}: GetCreatedAtProps): string {\n  const optionalParam = locale ? { locale } : null;\n  if (!createdAt) {\n    return '';\n  }\n  if (isToday(createdAt)) {\n    return format(createdAt, 'p', optionalParam);\n  }\n  if (isYesterday(createdAt)) {\n    return stringSet?.MESSAGE_STATUS__YESTERDAY || 'Yesterday';\n  }\n  if (isThisYear(createdAt)) {\n    return format(createdAt, 'MMM d', optionalParam);\n  }\n  return format(createdAt, 'yyyy/M/d', optionalParam);\n}\n","import React from 'react';\nimport './index.scss';\nimport getCreatedAt from './getCreatedAt';\n\nimport Avatar from '../Avatar';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { UserMessage } from '@sendbird/chat/message';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage;\n  selected?: boolean;\n  onClick?: (message: UserMessage) => void;\n}\n\nexport default function MessageSearchItem({\n  className,\n  message,\n  selected,\n  onClick,\n}: Props): JSX.Element {\n  const { createdAt } = message;\n  const messageText = message.message;\n  const sender = message.sender || message._sender;\n  const { profileUrl, nickname } = sender;\n  const { stringSet, dateLocale } = useLocalization();\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-message-search-item',\n        selected ? 'sendbird-message-search-item--selected' : '',\n      ].join(' ')}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick(message);\n      }}\n    >\n      <div className=\"sendbird-message-search-item__left\">\n        <Avatar\n          className=\"sendbird-message-search-item__left__sender-avatar\"\n          src={profileUrl}\n          alt=\"profile image\"\n          width=\"56px\"\n          height=\"56px\"\n        />\n      </div>\n      <div className=\"sendbird-message-search-item__right\">\n        <Label\n          className=\"sendbird-message-search-item__right__sender-name\"\n          type={LabelTypography.SUBTITLE_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {nickname || stringSet.NO_NAME}\n        </Label>\n        <Label\n          className=\"sendbird-message-search-item__right__message-text\"\n          type={LabelTypography.BODY_2}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {messageText}\n        </Label>\n        <Label\n          className=\"sendbird-message-search-item__right__message-created-at\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {getCreatedAt({ createdAt, locale: dateLocale, stringSet })}\n        </Label>\n      </div>\n      <div className=\"sendbird-message-search-item__right-footer\" />\n    </div>\n  );\n}\n"],"names":["_ref","createdAt","locale","stringSet","optionalParam","isToday","format","isYesterday","MESSAGE_STATUS__YESTERDAY","isThisYear","MessageSearchItem","className","message","selected","onClick","messageText","sender","_sender","profileUrl","nickname","dateLocale","useLocalization","React","createElement","Array","isArray","join","e","stopPropagation","Avatar","src","alt","width","height","Label","type","LabelTypography","SUBTITLE_2","color","LabelColors","ONBACKGROUND_1","NO_NAME","BODY_2","ONBACKGROUND_3","CAPTION_3","ONBACKGROUND_2","getCreatedAt"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA;AACe,qBAAA,EAAAA,IAAA,EAIe;EAAA,IAJL;IACvBC,SAAS;IACTC,MAAM;AACNC,IAAAA,SAAAA;AACiB,GAAC,GAAAH,IAAA,CAAA;EAClB,MAAMI,aAAa,GAAGF,MAAM,GAAG;AAAEA,IAAAA,MAAAA;AAAO,GAAC,GAAG,IAAI,CAAA;EAChD,IAAI,CAACD,SAAS,EAAE;AACd,IAAA,OAAO,EAAE,CAAA;AACX,GAAA;AACA,EAAA,IAAII,aAAO,CAACJ,SAAS,CAAC,EAAE;AACtB,IAAA,OAAOK,cAAM,CAACL,SAAS,EAAE,GAAG,EAAEG,aAAa,CAAC,CAAA;AAC9C,GAAA;AACA,EAAA,IAAIG,iBAAW,CAACN,SAAS,CAAC,EAAE;IAC1B,OAAO,CAAAE,SAAS,KAATA,IAAAA,IAAAA,SAAS,uBAATA,SAAS,CAAEK,yBAAyB,KAAI,WAAW,CAAA;AAC5D,GAAA;AACA,EAAA,IAAIC,gBAAU,CAACR,SAAS,CAAC,EAAE;AACzB,IAAA,OAAOK,cAAM,CAACL,SAAS,EAAE,OAAO,EAAEG,aAAa,CAAC,CAAA;AAClD,GAAA;AACA,EAAA,OAAOE,cAAM,CAACL,SAAS,EAAE,UAAU,EAAEG,aAAa,CAAC,CAAA;AACrD;;AChBe,SAASM,iBAAiBA,CAAAV,IAAA,EAKlB;EAAA,IALmB;IACxCW,SAAS;IACTC,OAAO;IACPC,QAAQ;AACRC,IAAAA,OAAAA;AACK,GAAC,GAAAd,IAAA,CAAA;EACN,MAAM;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAGW,OAAO,CAAA;AAC7B,EAAA,MAAMG,WAAW,GAAGH,OAAO,CAACA,OAAO,CAAA;EACnC,MAAMI,MAAM,GAAGJ,OAAO,CAACI,MAAM,IAAIJ,OAAO,CAACK,OAAO,CAAA;EAChD,MAAM;IAAEC,UAAU;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGH,MAAM,CAAA;EACvC,MAAM;IAAEb,SAAS;AAAEiB,IAAAA,UAAAA;GAAY,GAAGC,mCAAe,EAAE,CAAA;EAEnD,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAE,CACT,IAAIa,KAAK,CAACC,OAAO,CAACd,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,8BAA8B,EAC9BE,QAAQ,GAAG,wCAAwC,GAAG,EAAE,CACzD,CAACa,IAAI,CAAC,GAAG,CAAE;IACZZ,OAAO,EAAGa,CAAC,IAAK;MACdA,CAAC,CAACC,eAAe,EAAE,CAAA;MACnBd,OAAO,CAACF,OAAO,CAAC,CAAA;AAClB,KAAA;GAEAU,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,SAAS,EAAC,oCAAA;AAAoC,GAAA,eACjDW,yBAAA,CAAAC,aAAA,CAACM,oBAAM,EAAA;AACLlB,IAAAA,SAAS,EAAC,mDAAmD;AAC7DmB,IAAAA,GAAG,EAAEZ,UAAW;AAChBa,IAAAA,GAAG,EAAC,eAAe;AACnBC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,CACb,CACE,eACNX,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,SAAS,EAAC,qCAAA;AAAqC,GAAA,eAClDW,yBAAA,CAAAC,aAAA,CAACW,cAAK,EAAA;AACJvB,IAAAA,SAAS,EAAC,kDAAkD;IAC5DwB,IAAI,EAAEC,wBAAe,CAACC,UAAW;IACjCC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElBrB,EAAAA,QAAQ,IAAIhB,SAAS,CAACsC,OAAO,CACxB,eACRnB,yBAAA,CAAAC,aAAA,CAACW,cAAK,EAAA;AACJvB,IAAAA,SAAS,EAAC,mDAAmD;IAC7DwB,IAAI,EAAEC,wBAAe,CAACM,MAAO;IAC7BJ,KAAK,EAAEC,oBAAW,CAACI,cAAAA;AAAe,GAAA,EAEjC5B,WAAW,CACN,eACRO,yBAAA,CAAAC,aAAA,CAACW,cAAK,EAAA;AACJvB,IAAAA,SAAS,EAAC,yDAAyD;IACnEwB,IAAI,EAAEC,wBAAe,CAACQ,SAAU;IAChCN,KAAK,EAAEC,oBAAW,CAACM,cAAAA;AAAe,GAAA,EAEjCC,YAAY,CAAC;IAAE7C,SAAS;AAAEC,IAAAA,MAAM,EAAEkB,UAAU;AAAEjB,IAAAA,SAAAA;AAAU,GAAC,CAAC,CACrD,CACJ,eACNmB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,SAAS,EAAC,4CAAA;AAA4C,GAAA,CAAG,CAC1D,CAAA;AAEV;;;;"}

package/cjs/ui/MessageStatus.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-43854eb1.js');
 require('react');
-require('../index-73467e1d.js');
+require('../index-60bf4d5c.js');
 require('./Icon.js');
-require('../index-d6ef2a60.js');
+require('../index-44186883.js');
 require('./Loader.js');
-require('../index-21b2339d.js');
+require('../index-bca3d144.js');
 require('../utils/message/getOutgoingMessageState.js');
-var ui_MessageStatus = require('../index-e240e852.js');
-require('../LocalizationContext-2b3f310d.js');
-require('../index-de151767.js');
+var ui_MessageStatus = require('../index-a7025294.js');
+require('../LocalizationContext-461a0816.js');
+require('../index-5e6194f8.js');
 require('prop-types');
-require('../stringSet-91b919f6.js');
-require('../index-0988ab25.js');
-require('../index-2c5dd48c.js');
-require('../index-8de59744.js');
+require('../stringSet-d1cee26a.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
+require('../index-60ea6503.js');
+require('../index-849c0736.js');
 
 
 

package/cjs/ui/MessageStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatus.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageStatus.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/ui/Modal.js

@@ -4,24 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var index = require('../index-c4d4ef49.js');
-var LocalizationContext = require('../LocalizationContext-2b3f310d.js');
+var index = require('../index-7a68d56f.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
 var ui_Button = require('./Button.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../index-d6ef2a60.js');
-var MediaQueryContext = require('../MediaQueryContext-71862be1.js');
-require('../stringSet-91b919f6.js');
-require('../index-de151767.js');
-require('../tslib.es6-43854eb1.js');
+var ui_Label = require('../index-44186883.js');
+var MediaQueryContext = require('../MediaQueryContext-de7c63bc.js');
+require('../stringSet-d1cee26a.js');
+require('../index-5e6194f8.js');
 require('prop-types');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ModalHeader = function (_a) {
-  var titleText = _a.titleText;
+const ModalHeader = _ref => {
+  let {
+    titleText
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-modal__header"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
@@ -29,8 +31,10 @@ var ModalHeader = function (_a) {
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, titleText));
 };
-var ModalBody = function (_a) {
-  var children = _a.children;
+const ModalBody = _ref2 => {
+  let {
+    children
+  } = _ref2;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-modal__body"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
@@ -38,15 +42,17 @@ var ModalBody = function (_a) {
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, children));
 };
-var ModalFooter = function (_a) {
-  var submitText = _a.submitText,
-      _b = _a.disabled,
-      disabled = _b === void 0 ? false : _b,
-      _c = _a.type,
-      type = _c === void 0 ? ui_Button.ButtonTypes.DANGER : _c,
-      onSubmit = _a.onSubmit,
-      onCancel = _a.onCancel;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+const ModalFooter = _ref3 => {
+  let {
+    submitText,
+    disabled = false,
+    type = ui_Button.ButtonTypes.DANGER,
+    onSubmit,
+    onCancel
+  } = _ref3;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-modal__footer"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
@@ -62,30 +68,28 @@ var ModalFooter = function (_a) {
   }, submitText));
 };
 function Modal(props) {
-  var _a = props.children,
-      children = _a === void 0 ? null : _a,
-      _b = props.className,
-      className = _b === void 0 ? '' : _b,
-      _c = props.isCloseOnClickOutside,
-      isCloseOnClickOutside = _c === void 0 ? false : _c,
-      _d = props.isFullScreenOnMobile,
-      isFullScreenOnMobile = _d === void 0 ? false : _d,
-      titleText = props.titleText,
-      submitText = props.submitText,
-      _e = props.disabled,
-      disabled = _e === void 0 ? false : _e,
-      _f = props.hideFooter,
-      hideFooter = _f === void 0 ? false : _f,
-      _g = props.type,
-      type = _g === void 0 ? ui_Button.ButtonTypes.DANGER : _g,
-      _h = props.onCancel,
-      onCancel = _h === void 0 ? function () {} : _h,
-      _j = props.onSubmit,
-      onSubmit = _j === void 0 ? function () {} : _j,
-      renderHeader = props.renderHeader;
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  const {
+    children = null,
+    className = '',
+    isCloseOnClickOutside = false,
+    isFullScreenOnMobile = false,
+    titleText,
+    submitText,
+    disabled = false,
+    hideFooter = false,
+    type = ui_Button.ButtonTypes.DANGER,
+    onCancel = () => {/* noop */},
+    onSubmit = () => {/* noop */},
+    renderHeader
+  } = props;
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
   return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "\n      sendbird-modal ".concat(className, "\n      ").concat(isFullScreenOnMobile && isMobile ? 'sendbird-modal--full-mobile' : '', "\n    ")
+    className: `
+      sendbird-modal ${className}
+      ${isFullScreenOnMobile && isMobile ? 'sendbird-modal--full-mobile' : ''}
+    `
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-modal__content"
   }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || /*#__PURE__*/React__default["default"].createElement(ModalHeader, {
@@ -108,10 +112,12 @@ function Modal(props) {
     width: "24px",
     height: "24px"
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "\n          sendbird-modal__backdrop\n          ".concat(isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside', "\n        "),
-    onClick: function (e) {
+    className: `
+          sendbird-modal__backdrop
+          ${isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside'}
+        `,
+    onClick: e => {
       e === null || e === void 0 ? void 0 : e.stopPropagation();
-
       if (isCloseOnClickOutside) {
         onCancel();
       }

package/cjs/ui/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/ui/Modal/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport './index.scss';\n\nimport { MODAL_ROOT } from '../../hooks/useModal/ModalRoot';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport Button, { ButtonTypes } from '../Button';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\nexport interface ModalHeaderProps {\n  titleText: string;\n}\nexport const ModalHeader = ({ titleText }: ModalHeaderProps): ReactElement => (\n  <div className=\"sendbird-modal__header\">\n    <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n      {titleText}\n    </Label>\n  </div>\n);\n\nexport interface ModalBodyProps {\n  children?: ReactElement;\n}\nexport const ModalBody = ({ children }: ModalBodyProps): ReactElement => (\n  <div className=\"sendbird-modal__body\">\n    <Label\n      type={LabelTypography.SUBTITLE_1}\n      color={LabelColors.ONBACKGROUND_2}\n    >\n      {children}\n    </Label>\n  </div>\n);\n\nexport interface ModalFooterProps {\n  submitText: string;\n  disabled?: boolean;\n  type?: ButtonTypes;\n  onCancel: () => void;\n  onSubmit: (e: SubmitEvent) => void;\n}\nexport const ModalFooter = ({\n  submitText,\n  disabled = false,\n  type = ButtonTypes.DANGER,\n  onSubmit,\n  onCancel,\n}: ModalFooterProps): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-modal__footer\">\n      <Button type={ButtonTypes.SECONDARY} onClick={onCancel}>\n        <Label type={LabelTypography.BUTTON_1} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.BUTTON__CANCEL}\n        </Label>\n      </Button>\n      <Button type={type} disabled={disabled} onClick={onSubmit}>\n        {submitText}\n      </Button>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  children?: ReactElement;\n  className?: string;\n  isCloseOnClickOutside?: boolean;\n  isFullScreenOnMobile?: boolean;\n  titleText?: string;\n  submitText?: string;\n  disabled?: boolean;\n  hideFooter?: boolean;\n  type?: ButtonTypes;\n  onCancel?: () => void;\n  onSubmit?: (e: SubmitEvent) => void;\n  renderHeader?: () => ReactElement;\n}\nexport default function Modal(props: ModalProps): ReactElement {\n  const {\n    children = null,\n    className = '',\n    isCloseOnClickOutside = false,\n    isFullScreenOnMobile = false,\n    titleText,\n    submitText,\n    disabled = false,\n    hideFooter = false,\n    type = ButtonTypes.DANGER,\n    onCancel = () => {/* noop */ },\n    onSubmit = () => {/* noop */ },\n    renderHeader,\n  } = props;\n\n  const { isMobile } = useMediaQueryContext();\n  return createPortal((\n    <div className={`\n      sendbird-modal ${className}\n      ${(isFullScreenOnMobile && isMobile) ? 'sendbird-modal--full-mobile' : ''}\n    `}>\n      <div className=\"sendbird-modal__content\">\n        {renderHeader?.() || (\n          <ModalHeader titleText={titleText} />\n        )}\n        <ModalBody>{children}</ModalBody>\n        {\n          !hideFooter && (\n            <ModalFooter\n              disabled={disabled}\n              onCancel={onCancel}\n              onSubmit={onSubmit}\n              submitText={submitText}\n              type={type}\n            />\n          )\n        }\n        <div className=\"sendbird-modal__close\">\n          <IconButton\n            width=\"32px\"\n            height=\"32px\"\n            onClick={onCancel}\n          >\n            <Icon\n              type={IconTypes.CLOSE}\n              fillColor={IconColors.DEFAULT}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        </div>\n      </div>\n      <div\n        className={`\n          sendbird-modal__backdrop\n          ${isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside'}\n        `}\n        onClick={(e) =>{\n          e?.stopPropagation();\n          if (isCloseOnClickOutside) {\n            onCancel();\n          }\n        }}\n      />\n    </div>\n  ), document.getElementById(MODAL_ROOT));\n}\n"],"names":["ModalHeader","_a","titleText","React","Label","LabelTypography","H_1","LabelColors","ONBACKGROUND_1","ModalBody","children","SUBTITLE_1","ONBACKGROUND_2","ModalFooter","submitText","_b","disabled","_c","type","ButtonTypes","DANGER","onSubmit","onCancel","stringSet","useContext","LocalizationContext","Button","SECONDARY","BUTTON_1","BUTTON__CANCEL","Modal","props","className","isCloseOnClickOutside","_d","isFullScreenOnMobile","_e","_f","hideFooter","_g","_h","_j","renderHeader","isMobile","useMediaQueryContext","createPortal","concat","IconButton","Icon","IconTypes","CLOSE","IconColors","DEFAULT","e","stopPropagation","document","getElementById","MODAL_ROOT"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/ui/Modal/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport './index.scss';\n\nimport { MODAL_ROOT } from '../../hooks/useModal/ModalRoot';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport Button, { ButtonTypes } from '../Button';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\nexport interface ModalHeaderProps {\n  titleText: string;\n}\nexport const ModalHeader = ({ titleText }: ModalHeaderProps): ReactElement => (\n  <div className=\"sendbird-modal__header\">\n    <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n      {titleText}\n    </Label>\n  </div>\n);\n\nexport interface ModalBodyProps {\n  children?: ReactElement;\n}\nexport const ModalBody = ({ children }: ModalBodyProps): ReactElement => (\n  <div className=\"sendbird-modal__body\">\n    <Label\n      type={LabelTypography.SUBTITLE_1}\n      color={LabelColors.ONBACKGROUND_2}\n    >\n      {children}\n    </Label>\n  </div>\n);\n\nexport interface ModalFooterProps {\n  submitText: string;\n  disabled?: boolean;\n  type?: ButtonTypes;\n  onCancel: () => void;\n  onSubmit: (e: SubmitEvent) => void;\n}\nexport const ModalFooter = ({\n  submitText,\n  disabled = false,\n  type = ButtonTypes.DANGER,\n  onSubmit,\n  onCancel,\n}: ModalFooterProps): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-modal__footer\">\n      <Button type={ButtonTypes.SECONDARY} onClick={onCancel}>\n        <Label type={LabelTypography.BUTTON_1} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.BUTTON__CANCEL}\n        </Label>\n      </Button>\n      <Button type={type} disabled={disabled} onClick={onSubmit}>\n        {submitText}\n      </Button>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  children?: ReactElement;\n  className?: string;\n  isCloseOnClickOutside?: boolean;\n  isFullScreenOnMobile?: boolean;\n  titleText?: string;\n  submitText?: string;\n  disabled?: boolean;\n  hideFooter?: boolean;\n  type?: ButtonTypes;\n  onCancel?: () => void;\n  onSubmit?: (e: SubmitEvent) => void;\n  renderHeader?: () => ReactElement;\n}\nexport default function Modal(props: ModalProps): ReactElement {\n  const {\n    children = null,\n    className = '',\n    isCloseOnClickOutside = false,\n    isFullScreenOnMobile = false,\n    titleText,\n    submitText,\n    disabled = false,\n    hideFooter = false,\n    type = ButtonTypes.DANGER,\n    onCancel = () => { /* noop */ },\n    onSubmit = () => { /* noop */ },\n    renderHeader,\n  } = props;\n\n  const { isMobile } = useMediaQueryContext();\n  return createPortal((\n    <div className={`\n      sendbird-modal ${className}\n      ${(isFullScreenOnMobile && isMobile) ? 'sendbird-modal--full-mobile' : ''}\n    `}>\n      <div className=\"sendbird-modal__content\">\n        {renderHeader?.() || (\n          <ModalHeader titleText={titleText} />\n        )}\n        <ModalBody>{children}</ModalBody>\n        {\n          !hideFooter && (\n            <ModalFooter\n              disabled={disabled}\n              onCancel={onCancel}\n              onSubmit={onSubmit}\n              submitText={submitText}\n              type={type}\n            />\n          )\n        }\n        <div className=\"sendbird-modal__close\">\n          <IconButton\n            width=\"32px\"\n            height=\"32px\"\n            onClick={onCancel}\n          >\n            <Icon\n              type={IconTypes.CLOSE}\n              fillColor={IconColors.DEFAULT}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        </div>\n      </div>\n      <div\n        className={`\n          sendbird-modal__backdrop\n          ${isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside'}\n        `}\n        onClick={(e) => {\n          e?.stopPropagation();\n          if (isCloseOnClickOutside) {\n            onCancel();\n          }\n        }}\n      />\n    </div>\n  ), document.getElementById(MODAL_ROOT));\n}\n"],"names":["ModalHeader","_ref","titleText","React","createElement","className","Label","type","LabelTypography","H_1","color","LabelColors","ONBACKGROUND_1","ModalBody","_ref2","children","SUBTITLE_1","ONBACKGROUND_2","ModalFooter","_ref3","submitText","disabled","ButtonTypes","DANGER","onSubmit","onCancel","stringSet","useContext","LocalizationContext","Button","SECONDARY","onClick","BUTTON_1","BUTTON__CANCEL","Modal","props","isCloseOnClickOutside","isFullScreenOnMobile","hideFooter","renderHeader","isMobile","useMediaQueryContext","createPortal","IconButton","width","height","Icon","IconTypes","CLOSE","fillColor","IconColors","DEFAULT","e","stopPropagation","document","getElementById","MODAL_ROOT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAA4B,GAAC,GAAAD,IAAA,CAAA;EAAA,oBACzDE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wBAAA;AAAwB,GAAA,eACrCF,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;IAACC,IAAI,EAAEC,wBAAe,CAACC,GAAI;IAACC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAClDV,EAAAA,SAAS,CACJ,CACJ,CAAA;AAAA,EACP;AAKM,MAAMW,SAAS,GAAGC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAyB,GAAC,GAAAD,KAAA,CAAA;EAAA,oBACpDX,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,sBAAA;AAAsB,GAAA,eACnCF,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;IACJC,IAAI,EAAEC,wBAAe,CAACQ,UAAW;IACjCN,KAAK,EAAEC,oBAAW,CAACM,cAAAA;GAElBF,EAAAA,QAAQ,CACH,CACJ,CAAA;AAAA,EACP;AASYG,MAAAA,WAAW,GAAGC,KAAA,IAMW;EAAA,IANV;IAC1BC,UAAU;AACVC,IAAAA,QAAQ,GAAG,KAAK;IAChBd,IAAI,GAAGe,qBAAW,CAACC,MAAM;IACzBC,QAAQ;AACRC,IAAAA,QAAAA;AACgB,GAAC,GAAAN,KAAA,CAAA;EACjB,MAAM;AAAEO,IAAAA,SAAAA;AAAU,GAAC,GAAGC,gBAAU,CAACC,uCAAmB,CAAC,CAAA;EACrD,oBACEzB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wBAAA;AAAwB,GAAA,eACrCF,yBAAA,CAAAC,aAAA,CAACyB,oBAAM,EAAA;IAACtB,IAAI,EAAEe,qBAAW,CAACQ,SAAU;AAACC,IAAAA,OAAO,EAAEN,QAAAA;AAAS,GAAA,eACrDtB,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;IAACC,IAAI,EAAEC,wBAAe,CAACwB,QAAS;IAACtB,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GACvDc,EAAAA,SAAS,CAACO,cAAc,CACnB,CACD,eACT9B,yBAAA,CAAAC,aAAA,CAACyB,oBAAM,EAAA;AAACtB,IAAAA,IAAI,EAAEA,IAAK;AAACc,IAAAA,QAAQ,EAAEA,QAAS;AAACU,IAAAA,OAAO,EAAEP,QAAAA;GAC9CJ,EAAAA,UAAU,CACJ,CACL,CAAA;AAEV,EAAC;AAgBc,SAASc,KAAKA,CAACC,KAAiB,EAAgB;EAC7D,MAAM;AACJpB,IAAAA,QAAQ,GAAG,IAAI;AACfV,IAAAA,SAAS,GAAG,EAAE;AACd+B,IAAAA,qBAAqB,GAAG,KAAK;AAC7BC,IAAAA,oBAAoB,GAAG,KAAK;IAC5BnC,SAAS;IACTkB,UAAU;AACVC,IAAAA,QAAQ,GAAG,KAAK;AAChBiB,IAAAA,UAAU,GAAG,KAAK;IAClB/B,IAAI,GAAGe,qBAAW,CAACC,MAAM;AACzBE,IAAAA,QAAQ,GAAGA,MAAM,YAAc;AAC/BD,IAAAA,QAAQ,GAAGA,MAAM,YAAc;AAC/Be,IAAAA,YAAAA;AACF,GAAC,GAAGJ,KAAK,CAAA;EAET,MAAM;AAAEK,IAAAA,QAAAA;GAAU,GAAGC,sCAAoB,EAAE,CAAA;AAC3C,EAAA,oBAAOC,qBAAY,eACjBvC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAG,CAAA;AACrB,qBAAA,EAAuBA,SAAU,CAAA;AACjC,MAAA,EAASgC,oBAAoB,IAAIG,QAAQ,GAAI,6BAA6B,GAAG,EAAG,CAAA;AAChF,IAAA,CAAA;GACMrC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,yBAAA;AAAyB,GAAA,EACrC,CAAAkC,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,EAAI,kBACfpC,yBAAA,CAAAC,aAAA,CAACJ,WAAW,EAAA;AAACE,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,CACnC,eACDC,yBAAA,CAAAC,aAAA,CAACS,SAAS,EAAEE,IAAAA,EAAAA,QAAQ,CAAa,EAE/B,CAACuB,UAAU,iBACTnC,yBAAA,CAAAC,aAAA,CAACc,WAAW,EAAA;AACVG,IAAAA,QAAQ,EAAEA,QAAS;AACnBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;AACnBJ,IAAAA,UAAU,EAAEA,UAAW;AACvBb,IAAAA,IAAI,EAAEA,IAAAA;GAET,CAAA,eAEHJ,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,uBAAA;AAAuB,GAAA,eACpCF,yBAAA,CAAAC,aAAA,CAACuC,aAAU,EAAA;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbd,IAAAA,OAAO,EAAEN,QAAAA;AAAS,GAAA,eAElBtB,yBAAA,CAAAC,aAAA,CAAC0C,kBAAI,EAAA;IACHvC,IAAI,EAAEwC,iBAAS,CAACC,KAAM;IACtBC,SAAS,EAAEC,kBAAU,CAACC,OAAQ;AAC9BP,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,CACb,CACS,CACT,CACF,eACN1C,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAG,CAAA;AACpB;AACA,UAAY+B,EAAAA,qBAAqB,IAAI,wCAAyC,CAAA;AAC9E,QAAU,CAAA;IACFL,OAAO,EAAGqB,CAAC,IAAK;AACdA,MAAAA,CAAC,aAADA,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAADA,CAAC,CAAEC,eAAe,EAAE,CAAA;AACpB,MAAA,IAAIjB,qBAAqB,EAAE;AACzBX,QAAAA,QAAQ,EAAE,CAAA;AACZ,OAAA;AACF,KAAA;GACA,CAAA,CACE,EACL6B,QAAQ,CAACC,cAAc,CAACC,gBAAU,CAAC,CAAC,CAAA;AACzC;;;;;;;"}

package/cjs/ui/MutedAvatarOverlay.js

@@ -9,29 +9,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function MutedAvatarOverlay(props) {
-  var _a = props.height,
-      height = _a === void 0 ? 24 : _a,
-      _b = props.width,
-      width = _b === void 0 ? 24 : _b;
+  const {
+    height = 24,
+    width = 24
+  } = props;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-muted-avatar",
     style: {
-      height: "".concat(height, "px"),
-      width: "".concat(width, "px")
+      height: `${height}px`,
+      width: `${width}px`
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-muted-avatar__icon"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-muted-avatar__bg",
     style: {
-      height: "".concat(height, "px"),
-      width: "".concat(width, "px")
+      height: `${height}px`,
+      width: `${width}px`
     }
   }), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     type: ui_Icon.IconTypes.MUTE,
     fillColor: ui_Icon.IconColors.WHITE,
-    width: "".concat(height - 8, "px"),
-    height: "".concat(width - 8, "px")
+    width: `${height - 8}px`,
+    height: `${width - 8}px`
   })));
 }
 

package/cjs/ui/MutedAvatarOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MutedAvatarOverlay.js","sources":["../../../src/ui/Avatar/MutedAvatarOverlay.tsx"],"sourcesContent":["import './muted-avatar-overlay.scss';\n\nimport React, { ReactElement } from 'react'\nimport Icon, { IconTypes, IconColors } from '../Icon';\n\ninterface Props {\n  height?: number;\n  width?: number;\n}\n\nexport default function MutedAvatarOverlay(props: Props): ReactElement {\n  const { height = 24, width = 24 } = props;\n  return (\n    <div\n      className=\"sendbird-muted-avatar\"\n      style={{\n        height: `${height}px`,\n        width: `${width}px`,\n      }}\n    >\n      <div className=\"sendbird-muted-avatar__icon\">\n        <div\n          className=\"sendbird-muted-avatar__bg\"\n          style={{\n            height: `${height}px`,\n            width: `${width}px`,\n          }}\n        />\n        <Icon\n          type={IconTypes.MUTE}\n          fillColor={IconColors.WHITE}\n          width={`${height - 8}px`}\n          height={`${width - 8}px`}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["MutedAvatarOverlay","props","_a","height","_b","width","React","concat","Icon","IconTypes","MUTE","IconColors","WHITE"],"mappings":";;;;;;;;;;AAUwB,SAAAA,kBAAA,CAAmBC,KAAnB,EAA+B;AAC7C,EAAA,IAAAC,KAA4BD,KAAK,CAAAE,MAAjC;MAAAA,MAAM,mBAAG,KAAED,EAAX;AAAA,MAAaE,EAAA,GAAeH,KAAK,CAAVI,KAAvB;MAAaA,KAAK,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,KAArB,CAAA;EACR,oBACEE,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,KAAK,EAAE;AACLH,MAAAA,MAAM,EAAE,EAAGI,CAAAA,MAAH,CAAGJ,MAAH,EAAa,IAAb,CADH;AAELE,MAAAA,KAAK,EAAE,EAAGE,CAAAA,MAAH,CAAGF,KAAH,EAAY,IAAZ,CAAA;AAFF,KAAA;GAKP,eAAAC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,6BAAA;GACb,eAAAA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAC,2BADZ;AAEE,IAAA,KAAK,EAAE;AACLH,MAAAA,MAAM,EAAE,EAAGI,CAAAA,MAAH,CAAGJ,MAAH,EAAa,IAAb,CADH;AAELE,MAAAA,KAAK,EAAE,EAAGE,CAAAA,MAAH,CAAGF,KAAH,EAAY,IAAZ,CAAA;AAFF,KAAA;GAHX,CAAA,eAQEC,wCAACE,kBAAD,EAAA;IACE,IAAI,EAAEC,iBAAS,CAACC,IADlB;IAEE,SAAS,EAAEC,kBAAU,CAACC,KAFxB;IAGE,KAAK,EAAE,GAAGL,MAAH,CAAGJ,MAAM,GAAG,CAAZ,MAAA,CAHT;IAIE,MAAM,EAAE,GAAGI,MAAH,CAAGF,KAAK,GAAG,CAAX,EAAY,IAAZ,CAAA;AAJV,GAAA,CARF,CAPF,CADF,CAAA;AAyBD;;;;"}
+{"version":3,"file":"MutedAvatarOverlay.js","sources":["../../../src/ui/Avatar/MutedAvatarOverlay.tsx"],"sourcesContent":["import './muted-avatar-overlay.scss';\n\nimport React, { ReactElement } from 'react';\nimport Icon, { IconTypes, IconColors } from '../Icon';\n\ninterface Props {\n  height?: number;\n  width?: number;\n}\n\nexport default function MutedAvatarOverlay(props: Props): ReactElement {\n  const { height = 24, width = 24 } = props;\n  return (\n    <div\n      className=\"sendbird-muted-avatar\"\n      style={{\n        height: `${height}px`,\n        width: `${width}px`,\n      }}\n    >\n      <div className=\"sendbird-muted-avatar__icon\">\n        <div\n          className=\"sendbird-muted-avatar__bg\"\n          style={{\n            height: `${height}px`,\n            width: `${width}px`,\n          }}\n        />\n        <Icon\n          type={IconTypes.MUTE}\n          fillColor={IconColors.WHITE}\n          width={`${height - 8}px`}\n          height={`${width - 8}px`}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["MutedAvatarOverlay","props","height","width","React","createElement","className","style","Icon","type","IconTypes","MUTE","fillColor","IconColors","WHITE"],"mappings":";;;;;;;;;;AAUe,SAASA,kBAAkBA,CAACC,KAAY,EAAgB;EACrE,MAAM;AAAEC,IAAAA,MAAM,GAAG,EAAE;AAAEC,IAAAA,KAAK,GAAG,EAAA;AAAG,GAAC,GAAGF,KAAK,CAAA;EACzC,oBACEG,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,uBAAuB;AACjCC,IAAAA,KAAK,EAAE;MACLL,MAAM,EAAG,CAAEA,EAAAA,MAAO,CAAG,EAAA,CAAA;MACrBC,KAAK,EAAG,GAAEA,KAAM,CAAA,EAAA,CAAA;AAClB,KAAA;GAEAC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,6BAAA;GACbF,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,2BAA2B;AACrCC,IAAAA,KAAK,EAAE;MACLL,MAAM,EAAG,CAAEA,EAAAA,MAAO,CAAG,EAAA,CAAA;MACrBC,KAAK,EAAG,GAAEA,KAAM,CAAA,EAAA,CAAA;AAClB,KAAA;AAAE,GAAA,CACF,eACFC,yBAAA,CAAAC,aAAA,CAACG,kBAAI,EAAA;IACHC,IAAI,EAAEC,iBAAS,CAACC,IAAK;IACrBC,SAAS,EAAEC,kBAAU,CAACC,KAAM;AAC5BX,IAAAA,KAAK,EAAG,CAAA,EAAED,MAAM,GAAG,CAAE,CAAI,EAAA,CAAA;AACzBA,IAAAA,MAAM,EAAG,CAAA,EAAEC,KAAK,GAAG,CAAE,CAAA,EAAA,CAAA;AAAI,GAAA,CACzB,CACE,CACF,CAAA;AAEV;;;;"}

package/cjs/ui/OGMessageItemBody.js

@@ -1,101 +1,105 @@
 'use strict';
 
 var React = require('react');
-var ui_Word = require('./Word.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-d6ef2a60.js');
-var uuid = require('../uuid-11d4efe8.js');
-var index = require('../index-21b2339d.js');
-var LocalizationContext = require('../LocalizationContext-2b3f310d.js');
-require('./LinkLabel.js');
+var ui_Label = require('../index-44186883.js');
+var index = require('../index-bca3d144.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+var index$1 = require('../index-f4682499.js');
+var tokenize = require('../tokenize-d3bb1637.js');
+var consts = require('../consts-5851f376.js');
 require('prop-types');
+require('../stringSet-d1cee26a.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../index-5e6194f8.js');
+require('../index.module-10ef9afc.js');
+require('../Message/context.js');
 require('./MentionLabel.js');
 require('./ContextMenu.js');
-require('../tslib.es6-43854eb1.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-91b919f6.js');
+require('../uuid-d86ea01f.js');
 require('./UserProfile.js');
-require('../UserProfileContext-9d60cdc4.js');
+require('../UserProfileContext-1bcc48a2.js');
 require('../sendbirdSelectors.js');
-require('../topics-ac9cf7ed.js');
-require('../utils-1f6c6626.js');
+require('../topics-00c67dd6.js');
+require('../utils-3dacb9bc.js');
 require('./Avatar.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-a7254c9d.js');
-require('../index-de151767.js');
+require('./LinkLabel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function OGMessageItemBody(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-
-  var className = _a.className,
-      message = _a.message,
-      _m = _a.isByMe,
-      isByMe = _m === void 0 ? false : _m,
-      _o = _a.mouseHover,
-      mouseHover = _o === void 0 ? false : _o,
-      _p = _a.isMentionEnabled,
-      isMentionEnabled = _p === void 0 ? false : _p,
-      _q = _a.isReactionEnabled,
-      isReactionEnabled = _q === void 0 ? false : _q;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-
-  var openOGUrl = function () {
-    var _a, _b;
-
-    if ((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url) window.open((_b = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _b === void 0 ? void 0 : _b.url);
+function OGMessageItemBody(_ref) {
+  var _message$mentionedMes, _message$mentionedUse, _message$reactions, _message$ogMetaData3, _message$ogMetaData3$, _message$ogMetaData4, _message$ogMetaData4$, _message$ogMetaData5, _message$ogMetaData5$, _message$ogMetaData6, _message$ogMetaData7, _message$ogMetaData8;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isMentionEnabled = false,
+    isReactionEnabled = false,
+    onMessageHeightChange = () => {/* noop */}
+  } = _ref;
+  const imageRef = React.useRef(null);
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const openOGUrl = () => {
+    var _message$ogMetaData, _message$ogMetaData2;
+    if (message !== null && message !== void 0 && (_message$ogMetaData = message.ogMetaData) !== null && _message$ogMetaData !== void 0 && _message$ogMetaData.url) window.open(message === null || message === void 0 ? void 0 : (_message$ogMetaData2 = message.ogMetaData) === null || _message$ogMetaData2 === void 0 ? void 0 : _message$ogMetaData2.url);
   };
-
-  var isMessageMentioned = isMentionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _c === void 0 ? void 0 : _c.length) > 0;
-  var sentences = React.useMemo(function () {
-    var _a, _b;
-
+  const isMessageMentioned = isMentionEnabled && (message === null || message === void 0 ? void 0 : (_message$mentionedMes = message.mentionedMessageTemplate) === null || _message$mentionedMes === void 0 ? void 0 : _message$mentionedMes.length) > 0 && (message === null || message === void 0 ? void 0 : (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.length) > 0;
+  const tokens = React.useMemo(() => {
     if (isMessageMentioned) {
-      return (_a = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _a === void 0 ? void 0 : _a.split(/\n/).map(function (sentence) {
-        return sentence.split(/\s/);
+      return tokenize.tokenizeMessage({
+        mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+        messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate
       });
     }
-
-    return (_b = message === null || message === void 0 ? void 0 : message.message) === null || _b === void 0 ? void 0 : _b.split(/\n/).map(function (sentence) {
-      return sentence.split(/\s/);
+    return tokenize.tokenizeMessage({
+      messageText: message === null || message === void 0 ? void 0 : message.message
     });
-  }, [message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate]);
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName([className, 'sendbird-og-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0 ? 'reactions' : ''])
+    className: index.getClassName([className, 'sendbird-og-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, {
-    key: uuid.uuidv4(),
     type: ui_Label.LabelTypography.BODY_1,
     color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-og-message-item-body__text-bubble"
-  }, sentences === null || sentences === void 0 ? void 0 : sentences.map(function (sentence, index) {
-    return [sentence === null || sentence === void 0 ? void 0 : sentence.map(function (word) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_Word, {
-        key: uuid.uuidv4(),
-        word: word,
-        message: message,
-        isByMe: isByMe
-      });
-    }), (sentences === null || sentences === void 0 ? void 0 : sentences[index + 1]) ? /*#__PURE__*/React__default["default"].createElement("br", null) : null];
+    className: consts.OG_MESSAGE_BODY_CLASSNAME
+  }, /*#__PURE__*/React__default["default"].createElement(index$1.TextFragment, {
+    tokens: tokens
   }), index.isEditedMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-og-message-item-body__text-bubble__message",
     type: ui_Label.LabelTypography.BODY_1,
     color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2
-  }, " ".concat(stringSet.MESSAGE_EDITED, " ")))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-og-message-item-body__og-thumbnail",
+  }, ` ${stringSet.MESSAGE_EDITED} `))), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: imageRef,
+    className: `sendbird-og-message-item-body__og-thumbnail
+          ${message !== null && message !== void 0 && (_message$ogMetaData3 = message.ogMetaData) !== null && _message$ogMetaData3 !== void 0 && (_message$ogMetaData3$ = _message$ogMetaData3.defaultImage) !== null && _message$ogMetaData3$ !== void 0 && _message$ogMetaData3$.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'}
+        `,
     onClick: openOGUrl
   }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+    onLoad: onMessageHeightChange,
+    onError: () => {
+      try {
+        var _imageRef$current, _imageRef$current$cla;
+        imageRef === null || imageRef === void 0 ? void 0 : (_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : (_imageRef$current$cla = _imageRef$current.classList) === null || _imageRef$current$cla === void 0 ? void 0 : _imageRef$current$cla.add('sendbird-og-message-item-body__og-thumbnail__empty');
+      } catch (error) {
+        // do nothing
+      }
+    },
     className: "sendbird-og-message-item-body__og-thumbnail__image",
-    url: ((_f = (_e = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) === null || _f === void 0 ? void 0 : _f.url) || '',
-    alt: (_h = (_g = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _g === void 0 ? void 0 : _g.defaultImage) === null || _h === void 0 ? void 0 : _h.alt // TODO: Change fixing width and height lengths
+    url: (message === null || message === void 0 ? void 0 : (_message$ogMetaData4 = message.ogMetaData) === null || _message$ogMetaData4 === void 0 ? void 0 : (_message$ogMetaData4$ = _message$ogMetaData4.defaultImage) === null || _message$ogMetaData4$ === void 0 ? void 0 : _message$ogMetaData4$.url) || '',
+    alt: message === null || message === void 0 ? void 0 : (_message$ogMetaData5 = message.ogMetaData) === null || _message$ogMetaData5 === void 0 ? void 0 : (_message$ogMetaData5$ = _message$ogMetaData5.defaultImage) === null || _message$ogMetaData5$ === void 0 ? void 0 : _message$ogMetaData5$.alt
+    // TODO: Change fixing width and height lengths
     ,
     defaultComponent: /*#__PURE__*/React__default["default"].createElement("div", {
       className: "sendbird-og-message-item-body__og-thumbnail__place-holder"
@@ -108,15 +112,15 @@ function OGMessageItemBody(_a) {
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-og-message-item-body__description",
     onClick: openOGUrl
-  }, ((_j = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _j === void 0 ? void 0 : _j.title) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, (message === null || message === void 0 ? void 0 : (_message$ogMetaData6 = message.ogMetaData) === null || _message$ogMetaData6 === void 0 ? void 0 : _message$ogMetaData6.title) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-og-message-item-body__description__title",
     type: ui_Label.LabelTypography.SUBTITLE_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, message.ogMetaData.title), ((_k = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _k === void 0 ? void 0 : _k.description) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, message.ogMetaData.title), (message === null || message === void 0 ? void 0 : (_message$ogMetaData7 = message.ogMetaData) === null || _message$ogMetaData7 === void 0 ? void 0 : _message$ogMetaData7.description) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-og-message-item-body__description__description",
     type: ui_Label.LabelTypography.BODY_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, message.ogMetaData.description), ((_l = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _l === void 0 ? void 0 : _l.url) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, message.ogMetaData.description), (message === null || message === void 0 ? void 0 : (_message$ogMetaData8 = message.ogMetaData) === null || _message$ogMetaData8 === void 0 ? void 0 : _message$ogMetaData8.url) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-og-message-item-body__description__url",
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2