@sendbird/uikit-react 3.0.0-alpha.1 → 3.0.0-alpha.2

package/cjs/ui/Modal.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var reactDom = require('react-dom');
+var LocalizationContext = require('../LocalizationContext-68e55e2a.js');
+var index = require('../index-aecc8d24.js');
+var ui_IconButton = require('./IconButton.js');
+var ui_Icon = require('./Icon.js');
+var ui_Button = require('../index-1044f1ed.js');
+var ui_Label = require('../index-1468d245.js');
+var utils = require('../utils-3b0815dc.js');
+require('../stringSet-aa544ce5.js');
+require('../index-e2bb862c.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var ModalHeader = function ModalHeader(_ref) {
+  var titleText = _ref.titleText;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__header"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.H_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, titleText));
+};
+ModalHeader.propTypes = {
+  titleText: PropTypes__default["default"].string.isRequired
+};
+var ModalBody = function ModalBody(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__body"
+  }, children);
+};
+ModalBody.propTypes = {
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element.isRequired, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element.isRequired)])
+};
+ModalBody.defaultProps = {
+  children: null
+};
+var ModalFooter = function ModalFooter(_ref3) {
+  var onSubmit = _ref3.onSubmit,
+      onCancel = _ref3.onCancel,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      submitText = _ref3.submitText,
+      type = _ref3.type;
+
+  var _useContext = React.useContext(LocalizationContext.LocalizationContext),
+      stringSet = _useContext.stringSet;
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__footer"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Button.Button, {
+    type: ui_Button.ButtonTypes.SECONDARY,
+    onClick: onCancel
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.BUTTON_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, stringSet.BUTTON__CANCEL)), /*#__PURE__*/React__default["default"].createElement(ui_Button.Button, {
+    type: type,
+    disabled: disabled,
+    onClick: onSubmit
+  }, submitText));
+};
+ModalFooter.propTypes = {
+  onCancel: PropTypes__default["default"].func.isRequired,
+  onSubmit: PropTypes__default["default"].func.isRequired,
+  submitText: PropTypes__default["default"].string.isRequired,
+  disabled: PropTypes__default["default"].bool,
+  type: PropTypes__default["default"].string
+};
+ModalFooter.defaultProps = {
+  disabled: false,
+  type: ui_Button.ButtonTypes.DANGER
+};
+function Modal(props) {
+  var children = props.children,
+      onCancel = props.onCancel,
+      _props$onSubmit = props.onSubmit,
+      onSubmit = _props$onSubmit === void 0 ? utils.noop : _props$onSubmit,
+      disabled = props.disabled,
+      submitText = props.submitText,
+      titleText = props.titleText,
+      hideFooter = props.hideFooter,
+      type = props.type;
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__content"
+  }, /*#__PURE__*/React__default["default"].createElement(ModalHeader, {
+    titleText: titleText
+  }), /*#__PURE__*/React__default["default"].createElement(ModalBody, null, children), !hideFooter && /*#__PURE__*/React__default["default"].createElement(ModalFooter, {
+    disabled: disabled,
+    onCancel: onCancel,
+    onSubmit: onSubmit,
+    submitText: submitText,
+    type: type
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__close"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    width: "32px",
+    height: "32px",
+    onClick: onCancel
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CLOSE,
+    fillColor: ui_Icon.IconColors.DEFAULT,
+    width: "24px",
+    height: "24px"
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-modal__backdrop"
+  })), document.getElementById(index.MODAL_ROOT));
+}
+Modal.propTypes = {
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]),
+  onCancel: PropTypes__default["default"].func.isRequired,
+  onSubmit: PropTypes__default["default"].func,
+  hideFooter: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  type: PropTypes__default["default"].string
+};
+Modal.defaultProps = {
+  children: null,
+  hideFooter: false,
+  disabled: false,
+  type: ui_Button.ButtonTypes.DANGER
+};
+
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports["default"] = Modal;
+//# sourceMappingURL=Modal.js.map

package/cjs/ui/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/ui/Modal/index.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { createPortal } from 'react-dom';\n\nimport './index.scss';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { MODAL_ROOT } from '../../hooks/useModal/ModalRoot';\nimport IconButton from '../IconButton';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Button, { ButtonTypes } from '../Button';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { noop } from '../../utils/utils';\n\nexport const ModalHeader = ({ titleText }) => (\n  <div className=\"sendbird-modal__header\">\n    <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n      {titleText}\n    </Label>\n  </div>\n);\nModalHeader.propTypes = {\n  titleText: PropTypes.string.isRequired,\n};\n\nexport const ModalBody = ({ children }) => (\n  <div className=\"sendbird-modal__body\">{children}</div>\n);\nModalBody.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.element.isRequired,\n    PropTypes.arrayOf(PropTypes.element.isRequired),\n  ]),\n};\nModalBody.defaultProps = {\n  children: null,\n};\n\nexport const ModalFooter = ({\n  onSubmit,\n  onCancel,\n  disabled = false,\n  submitText,\n  type,\n}) => {\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\nModalFooter.propTypes = {\n  onCancel: PropTypes.func.isRequired,\n  onSubmit: PropTypes.func.isRequired,\n  submitText: PropTypes.string.isRequired,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\nModalFooter.defaultProps = {\n  disabled: false,\n  type: ButtonTypes.DANGER,\n};\n\nexport default function Modal(props) {\n  const {\n    children,\n    onCancel,\n    onSubmit = noop,\n    disabled,\n    submitText,\n    titleText,\n    hideFooter,\n    type,\n  } = props;\n  return createPortal((\n    <div className=\"sendbird-modal\">\n      <div className=\"sendbird-modal__content\">\n        <ModalHeader titleText={titleText} />\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 className=\"sendbird-modal__backdrop\" />\n    </div>\n  ), document.getElementById(MODAL_ROOT));\n}\n\nModal.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]),\n  onCancel: PropTypes.func.isRequired,\n  onSubmit: PropTypes.func,\n  hideFooter: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\nModal.defaultProps = {\n  children: null,\n  hideFooter: false,\n  disabled: false,\n  type: ButtonTypes.DANGER,\n};\n"],"names":["ModalHeader","titleText","React","Label","LabelTypography","H_1","LabelColors","ONBACKGROUND_1","propTypes","PropTypes","string","isRequired","ModalBody","children","oneOfType","element","arrayOf","defaultProps","ModalFooter","onSubmit","onCancel","disabled","submitText","type","useContext","LocalizationContext","stringSet","Button","ButtonTypes","SECONDARY","BUTTON_1","BUTTON__CANCEL","func","bool","DANGER","Modal","props","noop","hideFooter","createPortal","IconButton","Icon","IconTypes","CLOSE","IconColors","DEFAULT","document","getElementById","MODAL_ROOT"],"mappings":"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"}

package/cjs/ui/MutedAvatarOverlay.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var ui_Icon = require('./Icon.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MutedAvatarOverlay(props) {
+  var _a = props.height,
+      height = _a === void 0 ? 24 : _a,
+      _b = props.width,
+      width = _b === void 0 ? 24 : _b;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-muted-avatar",
+    style: {
+      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: height + "px",
+      width: width + "px"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.MUTE,
+    fillColor: ui_Icon.IconColors.WHITE,
+    width: height - 8 + "px",
+    height: width - 8 + "px"
+  })));
+}
+
+module.exports = MutedAvatarOverlay;
+//# sourceMappingURL=MutedAvatarOverlay.js.map

package/cjs/ui/MutedAvatarOverlay.js.map

@@ -0,0 +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","Icon","IconTypes","MUTE","IconColors","WHITE"],"mappings":";;;;;;;;;;;SAUwBA,mBAAmBC;AACjC,MAAAC,KAA4BD,KAAK,OAAjC;AAAA,MAAAE,MAAM,mBAAG,OAAT;AAAA,MAAaC,KAAeH,KAAK,MAAjC;AAAA,MAAaI,KAAK,mBAAG,OAArB;AACR,sBACEC;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,KAAK,EAAE;AACLH,MAAAA,MAAM,EAAKA,MAAM,OADZ;AAELE,MAAAA,KAAK,EAAKA,KAAK;AAFV;AAFT,kBAOEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,2BADZ;AAEE,IAAA,KAAK,EAAE;AACLH,MAAAA,MAAM,EAAKA,MAAM,OADZ;AAELE,MAAAA,KAAK,EAAKA,KAAK;AAFV;AAFT,IADF,eAQEC,wCAACC,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,IADlB;AAEE,IAAA,SAAS,EAAEC,kBAAU,CAACC,KAFxB;AAGE,IAAA,KAAK,EAAKR,MAAM,GAAG,CAAT,OAHZ;AAIE,IAAA,MAAM,EAAKE,KAAK,GAAG,CAAR;AAJb,IARF,CAPF,CADF;AAyBD;;;;"}

package/cjs/ui/OGMessageItemBody.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('../index-1468d245.js');
+var ui_LinkLabel = require('./LinkLabel.js');
+var ui_Icon = require('./Icon.js');
+var ui_ImageRenderer = require('./ImageRenderer.js');
+var index = require('../index-d4880236.js');
+var uuid = require('../uuid-1d5ec8b2.js');
+var LocalizationContext = require('../LocalizationContext-68e55e2a.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+require('prop-types');
+require('../stringSet-aa544ce5.js');
+require('../tslib.es6-4a281a05.js');
+require('../index-e2bb862c.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;
+
+  var className = _a.className,
+      message = _a.message,
+      _k = _a.isByMe,
+      isByMe = _k === void 0 ? false : _k,
+      _l = _a.mouseHover,
+      mouseHover = _l === void 0 ? false : _l;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+
+  var openOGUrl = function openOGUrl() {
+    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);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-og-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.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("p", {
+    className: "sendbird-og-message-item-body__text-bubble"
+  }, message === null || message === void 0 ? void 0 : message.message.split(' ').map(function (word) {
+    return index.isUrl(word) ? /*#__PURE__*/React__default["default"].createElement(ui_LinkLabel["default"], {
+      className: "sendbird-og-message-item-body__text-bubble__message",
+      key: uuid.uuidv4(),
+      src: word,
+      type: ui_Label.LabelTypography.BODY_1,
+      color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+    }, word) : word + " ";
+  }), 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
+  }, " " + stringSet.MESSAGE_EDITED + " "))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-og-message-item-body__og-thumbnail",
+    onClick: openOGUrl
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+    className: "sendbird-og-message-item-body__og-thumbnail__image",
+    url: ((_d = (_c = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _c === void 0 ? void 0 : _c.defaultImage) === null || _d === void 0 ? void 0 : _d.url) || '',
+    alt: (_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.alt // TODO: Change fixing width and height lengths
+    ,
+    width: "320px",
+    height: "180px",
+    defaultComponent: /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-og-message-item-body__og-thumbnail__place-holder"
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon",
+      type: ui_Icon.IconTypes.THUMBNAIL_NONE,
+      width: "56px",
+      height: "56px"
+    }))
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-og-message-item-body__description",
+    onClick: openOGUrl
+  }, ((_g = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _g === void 0 ? void 0 : _g.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), ((_h = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _h === void 0 ? void 0 : _h.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), ((_j = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _j === void 0 ? void 0 : _j.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
+  }, message.ogMetaData.url)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-og-message-item-body__cover"
+  }));
+}
+
+module.exports = OGMessageItemBody;
+//# sourceMappingURL=OGMessageItemBody.js.map

package/cjs/ui/OGMessageItemBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OGMessageItemBody.js","sources":["../../../src/ui/OGMessageItemBody/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { UserMessage } from 'sendbird';\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport LinkLabel from '../LinkLabel';\nimport Icon, { IconTypes } from '../Icon';\nimport ImageRenderer from '../ImageRenderer';\nimport {\n  getClassName,\n  isEditedMessage,\n  isUrl,\n} from '../../utils';\nimport uuidv4 from '../../utils/uuid';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n}\n\nexport default function OGMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n}: Props): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  const openOGUrl = (): void => {\n    if (message?.ogMetaData?.url) window.open(message?.ogMetaData?.url);\n  };\n\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-og-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      message?.reactions?.length > 0 ? 'reactions' : '',\n    ])}>\n      <Label\n        key={uuidv4()}\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      >\n        <p className=\"sendbird-og-message-item-body__text-bubble\">\n          {\n            message?.message.split(' ').map((word: string) => (\n              isUrl(word)\n                ? (\n                  <LinkLabel\n                    className=\"sendbird-og-message-item-body__text-bubble__message\"\n                    key={uuidv4()}\n                    src={word}\n                    type={LabelTypography.BODY_1}\n                    color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n                  >\n                    {word}\n                  </LinkLabel>\n                )\n                : (`${word} `)\n            ))\n          }\n          {\n            isEditedMessage(message) && (\n              <Label\n                className=\"sendbird-og-message-item-body__text-bubble__message\"\n                type={LabelTypography.BODY_1}\n                color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}\n              >\n                {` ${stringSet.MESSAGE_EDITED} `}\n              </Label>\n            )\n          }\n        </p>\n      </Label>\n      <div\n        className=\"sendbird-og-message-item-body__og-thumbnail\"\n        onClick={openOGUrl}\n      >\n        <ImageRenderer\n          className=\"sendbird-og-message-item-body__og-thumbnail__image\"\n          url={message?.ogMetaData?.defaultImage?.url || ''}\n          alt={message?.ogMetaData?.defaultImage?.alt}\n          // TODO: Change fixing width and height lengths\n          width=\"320px\"\n          height=\"180px\"\n          defaultComponent={(\n            <div className=\"sendbird-og-message-item-body__og-thumbnail__place-holder\">\n              <Icon\n                className=\"sendbird-og-message-item-body__og-thumbnail__place-holder__icon\"\n                type={IconTypes.THUMBNAIL_NONE}\n                width=\"56px\"\n                height=\"56px\"\n              />\n            </div>\n          )}\n        />\n      </div>\n      <div\n        className=\"sendbird-og-message-item-body__description\"\n        onClick={openOGUrl}\n      >\n        {message?.ogMetaData?.title && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__title\"\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.title}\n          </Label>\n        )}\n        {message?.ogMetaData?.description && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__description\"\n            type={LabelTypography.BODY_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.description}\n          </Label>\n        )}\n        {message?.ogMetaData?.url && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__url\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {message.ogMetaData.url}\n          </Label>\n        )}\n      </div>\n      <div className=\"sendbird-og-message-item-body__cover\" />\n    </div>\n  );\n}\n"],"names":["OGMessageItemBody","_a","className","message","_k","isByMe","_l","mouseHover","stringSet","useContext","LocalizationContext","openOGUrl","ogMetaData","url","window","open","React","getClassName","reactions","length","Label","uuidv4","LabelTypography","BODY_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","split","map","word","isUrl","LinkLabel","isEditedMessage","ONCONTENT_2","ONBACKGROUND_2","MESSAGE_EDITED","ImageRenderer","defaultImage","alt","Icon","IconTypes","THUMBNAIL_NONE","title","SUBTITLE_2","description","BODY_2","CAPTION_3"],"mappings":"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"}

package/cjs/ui/OpenChannelAdminMessage.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-4a281a05.js');
+var React = require('react');
+var ui_Label = require('../index-1468d245.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+require('prop-types');
+require('../stringSet-aa544ce5.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelAdminMessage(_a) {
+  var className = _a.className,
+      message = _a.message;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-admin-message'], false).join(' ')
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-admin-message__text",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, message.message || ''));
+}
+
+module.exports = OpenChannelAdminMessage;
+//# sourceMappingURL=OpenChannelAdminMessage.js.map

package/cjs/ui/OpenChannelAdminMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenChannelAdminMessage.js","sources":["../../../src/ui/OpenChannelAdminMessage/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { ClientAdminMessage } from '../../index';\nimport './index.scss';\n\nimport Label, { LabelColors, LabelTypography } from '../Label';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: ClientAdminMessage;\n}\n\nexport default function OpenChannelAdminMessage({\n  className,\n  message,\n}: Props): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-openchannel-admin-message',\n      ].join(' ')}\n    >\n      <Label\n        className=\"sendbird-openchannel-admin-message__text\"\n        type={LabelTypography.CAPTION_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {message.message || ''}\n      </Label>\n    </div>\n  );\n}\n"],"names":["OpenChannelAdminMessage","_a","className","message","React","__spreadArray","Array","isArray","join","Label","LabelTypography","CAPTION_2","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;;;;;;;SAWwBA,wBAAwBC;MAC9CC,SAAS;MACTC,OAAO;AAEP,sBACEC;AACE,IAAA,SAAS,EAAEC,oDACLC,KAAK,CAACC,OAAN,CAAcL,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,WAC3C,6CAFS,CAGTM,IAHS,CAGJ,GAHI;AADb,kBAMEJ,wCAACK,cAAD;AACE,IAAA,SAAS,EAAC,0CADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,SAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGV,OAAO,CAACA,OAAR,IAAmB,EALtB,CANF,CADF;AAgBD;;;;"}

package/cjs/ui/OpenChannelAvatar.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('./Avatar.js');
+var LocalizationContext = require('../LocalizationContext-68e55e2a.js');
+var utils = require('../utils-66b3f4ec.js');
+require('../tslib.es6-4a281a05.js');
+require('./ImageRenderer.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+require('prop-types');
+require('./Icon.js');
+require('../uuid-1d5ec8b2.js');
+require('../stringSet-aa544ce5.js');
+require('../index-e2bb862c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ChannelAvatar(_a) {
+  var channel = _a.channel,
+      theme = _a.theme,
+      _b = _a.height,
+      height = _b === void 0 ? 56 : _b,
+      _c = _a.width,
+      width = _c === void 0 ? 56 : _c;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var memoizedAvatar = React.useMemo(function () {
+    return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-chat-header__avatar--open-channel",
+      src: utils.getOpenChannelAvatar(channel),
+      width: width + "px",
+      height: height + "px",
+      alt: channel.name || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE
+    });
+  }, [channel.coverUrl, theme]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, memoizedAvatar);
+}
+
+module.exports = ChannelAvatar;
+//# sourceMappingURL=OpenChannelAvatar.js.map

package/cjs/ui/OpenChannelAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenChannelAvatar.js","sources":["../../../src/ui/ChannelAvatar/OpenChannelAvatar.tsx"],"sourcesContent":["import React, { useMemo, useContext } from 'react';\n\nimport Avatar from '../Avatar/index';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport * as utils from './utils';\n\ninterface Props {\n  channel: SendBird.OpenChannel;\n  theme: string;\n  height?: number;\n  width?: number;\n}\n\nfunction ChannelAvatar({\n  channel,\n  theme,\n  height = 56,\n  width = 56,\n}: Props): JSX.Element{\n  const { stringSet } = useContext(LocalizationContext);\n  const memoizedAvatar = useMemo(() => {\n    return (\n      <Avatar\n        className=\"sendbird-chat-header__avatar--open-channel\"\n        src={utils.getOpenChannelAvatar(channel)}\n        width={`${width}px`}\n        height={`${height}px`}\n        alt={channel.name || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE}\n      />\n    );\n  }, [channel.coverUrl, theme]);\n  return (\n    <>{ memoizedAvatar }</>\n  );\n}\n\nexport default ChannelAvatar;\n"],"names":["ChannelAvatar","_a","channel","theme","_b","height","_c","width","stringSet","useContext","LocalizationContext","memoizedAvatar","useMemo","React","Avatar","utils","name","OPEN_CHANNEL_SETTINGS__NO_TITLE","coverUrl"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,SAASA,aAAT,CAAuBC,EAAvB;MACEC,OAAO;MACPC,KAAK;MACLC;MAAAC,MAAM,mBAAG;MACTC;MAAAC,KAAK,mBAAG;AAEA,MAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd;AACR,MAAMC,cAAc,GAAGC,aAAO,CAAC;AAC7B,wBACEC,wCAACC,oBAAD;AACE,MAAA,SAAS,EAAC,4CADZ;AAEE,MAAA,GAAG,EAAEC,0BAAA,CAA2Bb,OAA3B,CAFP;AAGE,MAAA,KAAK,EAAKK,KAAK,OAHjB;AAIE,MAAA,MAAM,EAAKF,MAAM,OAJnB;AAKE,MAAA,GAAG,EAAEH,OAAO,CAACc,IAAR,IAAgBR,SAAS,CAACS;AALjC,MADF;AASD,GAV6B,EAU3B,CAACf,OAAO,CAACgB,QAAT,EAAmBf,KAAnB,CAV2B,CAA9B;AAWA,sBACEU,kFAAIF,cAAJ,CADF;AAGD;;;;"}

package/cjs/ui/OpenChannelMessageContent.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelMessageContent(_a) {
+  return /*#__PURE__*/React__default["default"].createElement("div", null);
+}
+
+module.exports = OpenChannelMessageContent;
+//# sourceMappingURL=OpenChannelMessageContent.js.map

package/cjs/ui/OpenChannelMessageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenChannelMessageContent.js","sources":["../../../src/ui/OpenChannelMessageContent/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { OpenChannel } from 'sendbird';\nimport './index.scss';\n\ninterface Props {\n  channel: OpenChannel;\n}\n\nexport default function OpenChannelMessageContent({}: Props): ReactElement {\n  return (\n    <div>\n    </div>\n  );\n}\n"],"names":["OpenChannelMessageContent","_a","React"],"mappings":";;;;;;;;SAQwBA,0BAA0BC;AAChD,sBACEC,oDADF;AAID;;;;"}

package/cjs/ui/OpenchannelConversationHeader.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('./Avatar.js');
+var ui_Icon = require('./Icon.js');
+var ui_IconButton = require('./IconButton.js');
+var ui_Label = require('../index-1468d245.js');
+var LocalizationContext = require('../LocalizationContext-68e55e2a.js');
+require('../tslib.es6-4a281a05.js');
+require('./ImageRenderer.js');
+require('../_rollupPluginBabelHelpers-fc14118c.js');
+require('prop-types');
+require('../uuid-1d5ec8b2.js');
+require('../stringSet-aa544ce5.js');
+require('../index-e2bb862c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenchannelConversationHeader(_a) {
+  var coverImage = _a.coverImage,
+      title = _a.title,
+      subTitle = _a.subTitle,
+      amIOperator = _a.amIOperator,
+      onActionClick = _a.onActionClick;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left"
+  }, coverImage ? /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-openchannel-conversation-header__left__cover-image",
+    src: coverImage,
+    alt: "channel cover image",
+    width: "32px",
+    height: "32px"
+  }) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left__cover-image--icon",
+    style: {
+      width: 32,
+      height: 32
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CHANNELS,
+    fillColor: ui_Icon.IconColors.CONTENT,
+    width: "18px",
+    height: "18px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-conversation-header__left__title",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, title || stringSet.NO_TITLE), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-conversation-header__left__sub-title",
+    type: ui_Label.LabelTypography.BODY_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, subTitle || stringSet.NO_TITLE)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__right"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-openchannel-conversation-header__right__trigger",
+    width: "32px",
+    height: "32px",
+    onClick: onActionClick
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: amIOperator ? ui_Icon.IconTypes.INFO : ui_Icon.IconTypes.MEMBERS,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+}
+
+module.exports = OpenchannelConversationHeader;
+//# sourceMappingURL=OpenchannelConversationHeader.js.map

package/cjs/ui/OpenchannelConversationHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenchannelConversationHeader.js","sources":["../../../src/ui/OpenchannelConversationHeader/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport './index.scss';\n\nimport Avatar from '../Avatar';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport IconButton from '../IconButton';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  coverImage?: string;\n  title?: string;\n  subTitle?: string;\n  amIOperator?: boolean;\n  onActionClick?(): void;\n}\n\nexport default function OpenchannelConversationHeader({\n  coverImage,\n  title,\n  subTitle,\n  amIOperator,\n  onActionClick,\n}: Props): JSX.Element {\n  const { stringSet } = useContext(LocalizationContext);\n\n  return (\n    <div className=\"sendbird-openchannel-conversation-header\">\n      <div className=\"sendbird-openchannel-conversation-header__left\">\n        {\n          coverImage ? (\n            <Avatar\n              className=\"sendbird-openchannel-conversation-header__left__cover-image\"\n              src={coverImage}\n              alt=\"channel cover image\"\n              width=\"32px\"\n              height=\"32px\"\n            />\n          ) : (\n            <div\n              className=\"sendbird-openchannel-conversation-header__left__cover-image--icon\"\n              style={{ width: 32, height: 32 }}\n            >\n              <Icon\n                type={IconTypes.CHANNELS}\n                fillColor={IconColors.CONTENT}\n                width=\"18px\"\n                height=\"18px\"\n              />\n            </div>\n          )\n        }\n        <Label\n          className=\"sendbird-openchannel-conversation-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {title || stringSet.NO_TITLE}\n        </Label>\n        <Label\n          className=\"sendbird-openchannel-conversation-header__left__sub-title\"\n          type={LabelTypography.BODY_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle || stringSet.NO_TITLE}\n        </Label>\n      </div>\n      <div className=\"sendbird-openchannel-conversation-header__right\">\n        <IconButton\n          className=\"sendbird-openchannel-conversation-header__right__trigger\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onActionClick}\n        >\n          <Icon\n            type={(\n              amIOperator\n              ? IconTypes.INFO\n              : IconTypes.MEMBERS\n            )}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n"],"names":["OpenchannelConversationHeader","_a","coverImage","title","subTitle","amIOperator","onActionClick","stringSet","useContext","LocalizationContext","React","Avatar","width","height","Icon","IconTypes","CHANNELS","IconColors","CONTENT","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","NO_TITLE","BODY_2","ONBACKGROUND_2","IconButton","INFO","MEMBERS","PRIMARY"],"mappings":";;;;;;;;;;;;;;;;;;;;SAiBwBA,8BAA8BC;MACpDC,UAAU;MACVC,KAAK;MACLC,QAAQ;MACRC,WAAW;MACXC,aAAa;AAEL,MAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd;AAER,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,KAEIR,UAAU,gBACRQ,wCAACC,oBAAD;AACE,IAAA,SAAS,EAAC,6DADZ;AAEE,IAAA,GAAG,EAAET,UAFP;AAGE,IAAA,GAAG,EAAC,qBAHN;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,MAAM,EAAC;AALT,IADQ,gBASRQ;AACE,IAAA,SAAS,EAAC,mEADZ;AAEE,IAAA,KAAK,EAAE;AAAEE,MAAAA,KAAK,EAAE,EAAT;AAAaC,MAAAA,MAAM,EAAE;AAArB;AAFT,kBAIEH,wCAACI,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,QADlB;AAEE,IAAA,SAAS,EAAEC,kBAAU,CAACC,OAFxB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,EAAC;AAJT,IAJF,CAXN,eAwBER,wCAACS,cAAD;AACE,IAAA,SAAS,EAAC,uDADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,GAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGpB,KAAK,IAAII,SAAS,CAACiB,QALtB,CAxBF,eA+BEd,wCAACS,cAAD;AACE,IAAA,SAAS,EAAC,2DADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACK,MAFxB;AAGE,IAAA,KAAK,EAAEH,oBAAW,CAACI;AAHrB,KAKGtB,QAAQ,IAAIG,SAAS,CAACiB,QALzB,CA/BF,CADF,eAwCEd;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACiB,aAAD;AACE,IAAA,SAAS,EAAC,0DADZ;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,OAAO,EAAErB;AAJX,kBAMEI,wCAACI,kBAAD;AACE,IAAA,IAAI,EACFT,WAAW,GACTU,iBAAS,CAACa,IADD,GAETb,iBAAS,CAACc,OAJhB;AAME,IAAA,SAAS,EAAEZ,kBAAU,CAACa,OANxB;AAOE,IAAA,KAAK,EAAC,MAPR;AAQE,IAAA,MAAM,EAAC;AART,IANF,CADF,CAxCF,CADF;AA8DD;;;;"}