@sendbird/uikit-react 3.6.3 → 3.6.4-rc-0

package/dist/cjs/ui/MessageItemMenu.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Icon = require('./Icon.js');
+var ui_IconButton = require('./IconButton.js');
+var index = require('../index-1b3c69da.js');
+var LocalizationContext = require('../LocalizationContext-44d2f61b.js');
+var types = require('../types-df5bd4e5.js');
+require('../_rollupPluginBabelHelpers-21ae158b.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../uuid-dee74248.js');
+require('../index-2bfd366f.js');
+require('prop-types');
+require('../stringSet-7aebf034.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../index-88e8fdfa.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MessageItemMenu(_ref) {
+  var _channel$isGroupChann;
+  let {
+    className,
+    message,
+    channel,
+    isByMe = false,
+    disabled = false,
+    replyType,
+    disableDeleteMessage = null,
+    showEdit,
+    showRemove,
+    resendMessage,
+    setQuoteMessage,
+    setSupposedHover,
+    onReplyInThread,
+    onMoveToParentMessage = null
+  } = _ref;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const triggerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const showMenuItemCopy = index.isUserMessage(message);
+  const showMenuItemEdit = !(channel !== null && channel !== void 0 && channel.isEphemeral) && index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
+  const showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  const showMenuItemDelete = !(channel !== null && channel !== void 0 && channel.isEphemeral) && !index.isPendingMessage(message) && isByMe;
+  const showMenuItemOpenInChannel = onMoveToParentMessage !== null;
+  /**
+   * TODO: Manage timing issue
+   * User delete pending message -> Sending message success
+   */
+  const isReplyTypeEnabled = !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : (_channel$isGroupChann = channel.isGroupChannel) === null || _channel$isGroupChann === void 0 ? void 0 : _channel$isGroupChann.call(channel)) && !(channel !== null && channel !== void 0 && channel.isEphemeral) && ((channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (channel === null || channel === void 0 ? void 0 : channel.myRole) === types.Role.OPERATOR || !(channel !== null && channel !== void 0 && channel.isBroadcast));
+  const showMenuItemReply = isReplyTypeEnabled && replyType === 'QUOTE_REPLY';
+  const showMenuItemThread = isReplyTypeEnabled && replyType === 'THREAD' && !(message !== null && message !== void 0 && message.parentMessageId) && onReplyInThread;
+  if (!(showMenuItemCopy || showMenuItemReply || showMenuItemThread || showMenuItemOpenInChannel || showMenuItemEdit || showMenuItemResend || showMenuItemDelete)) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-message-item-menu']),
+    ref: containerRef
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+      className: "sendbird-message-item-menu__trigger",
+      ref: triggerRef,
+      width: "32px",
+      height: "32px",
+      onClick: () => {
+        toggleDropdown();
+        setSupposedHover(true);
+      },
+      onBlur: () => {
+        setSupposedHover(false);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-message-item-menu__trigger__icon",
+      type: ui_Icon.IconTypes.MORE,
+      fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
+      width: "24px",
+      height: "24px"
+    })),
+    menuItems: close => {
+      var _message$threadInfo;
+      const closeDropdown = () => {
+        close();
+        setSupposedHover(false);
+      };
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        className: "sendbird-message-item-menu__list",
+        parentRef: triggerRef,
+        parentContainRef: containerRef,
+        closeDropdown: closeDropdown,
+        openLeft: isByMe
+      }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-copy",
+        onClick: () => {
+          index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+          closeDropdown();
+        },
+        dataSbId: "ui_message_item_menu_copy"
+      }, stringSet.MESSAGE_MENU__COPY), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-reply",
+        onClick: () => {
+          setQuoteMessage(message);
+          closeDropdown();
+        },
+        disable: (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0,
+        dataSbId: "ui_message_item_menu_reply"
+      }, stringSet.MESSAGE_MENU__REPLY), showMenuItemThread && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-thread",
+        onClick: () => {
+          onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+            message
+          });
+          closeDropdown();
+        },
+        dataSbId: "ui_message_item_menu_thread"
+      }, stringSet.MESSAGE_MENU__THREAD), showMenuItemOpenInChannel && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-open-channel",
+        onClick: () => {
+          onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage();
+          closeDropdown();
+        },
+        dataSbId: "ui_message_item_menu_open_in_channel"
+      }, stringSet.MESSAGE_MENU__OPEN_IN_CHANNEL), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-edit",
+        onClick: () => {
+          if (!disabled) {
+            showEdit(true);
+            closeDropdown();
+          }
+        },
+        dataSbId: "ui_message_item_menu_edit"
+      }, stringSet.MESSAGE_MENU__EDIT), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-resend",
+        onClick: () => {
+          if (!disabled) {
+            resendMessage(message);
+            closeDropdown();
+          }
+        },
+        dataSbId: "ui_message_item_menu_resend"
+      }, stringSet.MESSAGE_MENU__RESEND), showMenuItemDelete && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-delete",
+        onClick: () => {
+          if (!disabled) {
+            showRemove(true);
+            closeDropdown();
+          }
+        },
+        disable: typeof disableDeleteMessage === 'boolean' ? disableDeleteMessage : (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0,
+        dataSbId: "ui_message_item_menu_delete"
+      }, stringSet.MESSAGE_MENU__DELETE));
+    }
+  }));
+}
+
+module.exports = MessageItemMenu;
+//# sourceMappingURL=MessageItemMenu.js.map

package/dist/cjs/ui/MessageItemReactionMenu.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Icon = require('./Icon.js');
+var ui_IconButton = require('./IconButton.js');
+var ui_ImageRenderer = require('./ImageRenderer.js');
+var ui_ReactionButton = require('./ReactionButton.js');
+var index = require('../index-1b3c69da.js');
+require('../_rollupPluginBabelHelpers-21ae158b.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../uuid-dee74248.js');
+require('../index-2bfd366f.js');
+require('prop-types');
+require('../stringSet-7aebf034.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../useLongPress-83b6a2f1.js');
+require('../MediaQueryContext-5d311a86.js');
+require('../utils-6a748c02.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MessageItemReactionMenu(_ref) {
+  let {
+    className,
+    message,
+    userId,
+    spaceFromTrigger = {
+      x: 0,
+      y: 0
+    },
+    emojiContainer,
+    toggleReaction,
+    setSupposedHover
+  } = _ref;
+  const triggerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  if (index.isPendingMessage(message) || index.isFailedMessage(message)) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-message-item-reaction-menu']),
+    ref: containerRef
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+      className: "sendbird-message-item-reaction-menu__trigger",
+      ref: triggerRef,
+      width: "32px",
+      height: "32px",
+      onClick: () => {
+        toggleDropdown();
+        setSupposedHover(true);
+      },
+      onBlur: () => {
+        setSupposedHover(false);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-message-item-reaction-menu__trigger__icon",
+      type: ui_Icon.IconTypes.EMOJI_MORE,
+      fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
+      width: "24px",
+      height: "24px"
+    })),
+    menuItems: close => {
+      const closeDropdown = () => {
+        close();
+        setSupposedHover(false);
+      };
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
+        parentRef: triggerRef,
+        parentContainRef: containerRef,
+        closeDropdown: closeDropdown,
+        spaceFromTrigger: spaceFromTrigger
+      }, index.getEmojiListAll(emojiContainer).map(emoji => {
+        var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
+        const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
+        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+          key: emoji.key,
+          width: "36px",
+          height: "36px",
+          selected: isReacted,
+          onClick: () => {
+            closeDropdown();
+            toggleReaction(message, emoji.key, isReacted);
+          },
+          dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
+        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+          url: emoji.url,
+          width: "28px",
+          height: "28px",
+          placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
+            style: style
+          }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+            type: ui_Icon.IconTypes.QUESTION,
+            fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+            width: "28px",
+            height: "28px"
+          }))
+        }));
+      }));
+    }
+  }));
+}
+
+module.exports = MessageItemReactionMenu;
+//# sourceMappingURL=MessageItemReactionMenu.js.map

package/dist/cjs/ui/MessageSearchFileItem.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('./Avatar.js');
+var ui_Icon = require('./Icon.js');
+var ui_Label = require('../index-2bfd366f.js');
+var LocalizationContext = require('../LocalizationContext-44d2f61b.js');
+var index$1 = require('../index-892b4b7f.js');
+var index = require('../index-24f791d1.js');
+var index$2 = require('../index-1b3c69da.js');
+require('./ImageRenderer.js');
+require('../uuid-dee74248.js');
+require('prop-types');
+require('../stringSet-7aebf034.js');
+require('../index-88e8fdfa.js');
+require('../index-a3268370.js');
+require('../_rollupPluginBabelHelpers-21ae158b.js');
+require('../utils/message/getOutgoingMessageState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function getCreatedAt(_ref) {
+  let {
+    createdAt,
+    locale,
+    stringSet
+  } = _ref;
+  const optionalParam = locale ? {
+    locale
+  } : null;
+  if (!createdAt) {
+    return '';
+  }
+  if (index.isToday(createdAt)) {
+    return index$1.format(createdAt, 'p', optionalParam);
+  }
+  if (index.isYesterday(createdAt)) {
+    return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
+  }
+  if (index.isThisYear(createdAt)) {
+    return index$1.format(createdAt, 'MMM d', optionalParam);
+  }
+  return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
+}
+function getIconOfFileType(message) {
+  const {
+    url
+  } = message;
+  const fileMessageUrl = url;
+  const fileExtension = fileMessageUrl.match(/\.([^.]*?)(?=\?|#|$)/)[1];
+  if (/(jpg|jpeg|png)$/i.test(fileExtension)) {
+    return ui_Icon.IconTypes.PHOTO;
+  } else if (/mp4$/i.test(fileExtension) || index$2.isVoiceMessage(message)) {
+    return ui_Icon.IconTypes.PLAY;
+  } else if (/mp3/i.test(fileExtension)) {
+    return ui_Icon.IconTypes.FILE_AUDIO;
+  } else if (/gif/i.test(fileExtension)) {
+    return ui_Icon.IconTypes.GIF;
+  } else {
+    return ui_Icon.IconTypes.FILE_DOCUMENT;
+  }
+}
+
+function MessageSearchFileItem(props) {
+  const {
+    className,
+    message,
+    selected,
+    onClick
+  } = props;
+  const {
+    createdAt,
+    url,
+    name
+  } = message;
+  // @ts-ignore
+  const sender = message.sender || message._sender;
+  const {
+    profileUrl,
+    nickname
+  } = sender;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const isVoiceMsg = index$2.isVoiceMessage(message);
+  const prettyFilename = isVoiceMsg ? stringSet.VOICE_MESSAGE : name || url;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-message-search-file-item', selected ? 'sendbird-message-search-file-item--selected' : ''].join(' '),
+    onClick: e => {
+      e.stopPropagation();
+      onClick(message);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-file-item__left"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-message-search-file-item__left__sender-avatar",
+    src: profileUrl,
+    alt: "profile image",
+    width: "56px",
+    height: "56px"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-file-item__right"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-file-item__right__sender-name",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, nickname || stringSet.NO_NAME), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-file-item__right__content"
+  }, !isVoiceMsg && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: 'sendbird-message-search-file-item__right__content__type-icon'
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: getIconOfFileType(message),
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "18px",
+    height: "18px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-file-item__right__content__url",
+    type: ui_Label.LabelTypography.BODY_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, prettyFilename))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-file-item__message-created-at",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, getCreatedAt({
+    createdAt,
+    locale: dateLocale,
+    stringSet
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-file-item__right-footer"
+  }));
+}
+
+module.exports = MessageSearchFileItem;
+//# sourceMappingURL=MessageSearchFileItem.js.map

package/dist/cjs/ui/MessageSearchItem.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('../index-892b4b7f.js');
+var index = require('../index-24f791d1.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_Label = require('../index-2bfd366f.js');
+var LocalizationContext = require('../LocalizationContext-44d2f61b.js');
+require('../index-88e8fdfa.js');
+require('../index-a3268370.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('prop-types');
+require('../uuid-dee74248.js');
+require('../stringSet-7aebf034.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// getCreatedAt
+function getCreatedAt (_ref) {
+  let {
+    createdAt,
+    locale,
+    stringSet
+  } = _ref;
+  const optionalParam = locale ? {
+    locale
+  } : null;
+  if (!createdAt) {
+    return '';
+  }
+  if (index.isToday(createdAt)) {
+    return index$1.format(createdAt, 'p', optionalParam);
+  }
+  if (index.isYesterday(createdAt)) {
+    return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
+  }
+  if (index.isThisYear(createdAt)) {
+    return index$1.format(createdAt, 'MMM d', optionalParam);
+  }
+  return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
+}
+
+function MessageSearchItem(_ref) {
+  let {
+    className,
+    message,
+    selected,
+    onClick
+  } = _ref;
+  const {
+    createdAt
+  } = message;
+  const messageText = message.message;
+  const sender = message.sender || message._sender;
+  const {
+    profileUrl,
+    nickname
+  } = sender;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-message-search-item', selected ? 'sendbird-message-search-item--selected' : ''].join(' '),
+    onClick: e => {
+      e.stopPropagation();
+      onClick(message);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-item__left"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-message-search-item__left__sender-avatar",
+    src: profileUrl,
+    alt: "profile image",
+    width: "56px",
+    height: "56px"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-item__right"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-item__right__sender-name",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, nickname || stringSet.NO_NAME), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-item__right__message-text",
+    type: ui_Label.LabelTypography.BODY_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_3
+  }, messageText), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-message-search-item__right__message-created-at",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, getCreatedAt({
+    createdAt,
+    locale: dateLocale,
+    stringSet
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message-search-item__right-footer"
+  }));
+}
+
+module.exports = MessageSearchItem;
+//# sourceMappingURL=MessageSearchItem.js.map

package/dist/cjs/ui/MessageStatus.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../index-892b4b7f.js');
+require('./Icon.js');
+require('../index-2bfd366f.js');
+require('./Loader.js');
+require('../index-1b3c69da.js');
+require('../utils/message/getOutgoingMessageState.js');
+var ui_MessageStatus = require('../index-b6657c80.js');
+require('../LocalizationContext-44d2f61b.js');
+require('../index-88e8fdfa.js');
+require('prop-types');
+require('../stringSet-7aebf034.js');
+require('../_rollupPluginBabelHelpers-21ae158b.js');
+require('../index-24f791d1.js');
+require('../index-a3268370.js');
+
+
+
+exports.MessageStatusTypes = ui_MessageStatus.MessageStatusTypes;
+exports["default"] = ui_MessageStatus.MessageStatus;
+//# sourceMappingURL=MessageStatus.js.map

package/dist/cjs/ui/Modal.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactDom = require('react-dom');
+var index = require('../index-0a446cca.js');
+var LocalizationContext = require('../LocalizationContext-44d2f61b.js');
+var ui_Button = require('./Button.js');
+var ui_Icon = require('./Icon.js');
+var ui_IconButton = require('./IconButton.js');
+var ui_Label = require('../index-2bfd366f.js');
+var MediaQueryContext = require('../MediaQueryContext-5d311a86.js');
+require('../stringSet-7aebf034.js');
+require('../index-88e8fdfa.js');
+require('prop-types');
+require('../_rollupPluginBabelHelpers-21ae158b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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, {
+    type: ui_Label.LabelTypography.H_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, titleText));
+};
+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, {
+    type: ui_Label.LabelTypography.SUBTITLE_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, children));
+};
+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"], {
+    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["default"], {
+    type: type,
+    disabled: disabled,
+    onClick: onSubmit
+  }, submitText));
+};
+function Modal(props) {
+  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: `
+      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, {
+    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
+          ${isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside'}
+        `,
+    onClick: e => {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      if (isCloseOnClickOutside) {
+        onCancel();
+      }
+    }
+  })), document.getElementById(index.MODAL_ROOT));
+}
+
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports["default"] = Modal;
+//# sourceMappingURL=Modal.js.map