@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/ui/MessageItemMenu.js

@@ -0,0 +1,157 @@
+import React__default, { useContext, useRef } from 'react';
+import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import IconButton from './IconButton.js';
+import { s as isUserMessage, v as isSentMessage, w as isFailedMessage, x as isPendingMessage, j as getClassName, y as copyToClipboard } from '../index-8ee9e1f5.js';
+import { a as LocalizationContext } from '../LocalizationContext-a6aa8be8.js';
+import { R as Role } from '../types-17028dc8.js';
+import '../tslib.es6-cd680863.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../uuid-9f7da91d.js';
+import '../index-67c5e94c.js';
+import 'prop-types';
+import '../stringSet-ad8993d1.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../index-757a563a.js';
+
+function MessageItemMenu(_a) {
+  var _b;
+
+  var className = _a.className,
+      message = _a.message,
+      channel = _a.channel,
+      _c = _a.isByMe,
+      isByMe = _c === void 0 ? false : _c,
+      _d = _a.disabled,
+      disabled = _d === void 0 ? false : _d,
+      replyType = _a.replyType,
+      _e = _a.disableDeleteMessage,
+      disableDeleteMessage = _e === void 0 ? null : _e,
+      showEdit = _a.showEdit,
+      showRemove = _a.showRemove,
+      resendMessage = _a.resendMessage,
+      setQuoteMessage = _a.setQuoteMessage,
+      setSupposedHover = _a.setSupposedHover,
+      onReplyInThread = _a.onReplyInThread,
+      _f = _a.onMoveToParentMessage,
+      onMoveToParentMessage = _f === void 0 ? null : _f;
+  var stringSet = useContext(LocalizationContext).stringSet;
+  var triggerRef = useRef(null);
+  var containerRef = useRef(null);
+  var showMenuItemCopy = isUserMessage(message);
+  var showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+  var showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+  var showMenuItemOpenInChannel = onMoveToParentMessage !== null;
+  /**
+   * TODO: Manage timing issue
+   * User delete pending message -> Sending message success
+   */
+
+  var isReplyTypeEnabled = !isFailedMessage(message) && !isPendingMessage(message) && ((_b = channel === null || channel === void 0 ? void 0 : channel.isGroupChannel) === null || _b === void 0 ? void 0 : _b.call(channel)) && ((channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (channel === null || channel === void 0 ? void 0 : channel.myRole) === Role.OPERATOR || !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+  var showMenuItemReply = isReplyTypeEnabled && replyType === 'QUOTE_REPLY';
+  var showMenuItemThread = isReplyTypeEnabled && replyType === 'THREAD' && !(message === null || message === void 0 ? void 0 : message.parentMessageId) && onReplyInThread;
+
+  if (!(showMenuItemCopy || showMenuItemReply || showMenuItemThread || showMenuItemOpenInChannel || showMenuItemEdit || showMenuItemResend || showMenuItemDelete)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, 'sendbird-message-item-menu']),
+    ref: containerRef
+  }, /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default.createElement(IconButton, {
+        className: "sendbird-message-item-menu__trigger",
+        ref: triggerRef,
+        width: "32px",
+        height: "32px",
+        onClick: function () {
+          toggleDropdown();
+          setSupposedHover(true);
+        },
+        onBlur: function () {
+          setSupposedHover(false);
+        }
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        className: "sendbird-message-item-menu__trigger__icon",
+        type: IconTypes.MORE,
+        fillColor: IconColors.CONTENT_INVERSE,
+        width: "24px",
+        height: "24px"
+      }));
+    },
+    menuItems: function (close) {
+      var _a;
+
+      var closeDropdown = function () {
+        close();
+        setSupposedHover(false);
+      };
+
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        className: "sendbird-message-item-menu__list",
+        parentRef: triggerRef,
+        parentContainRef: containerRef,
+        closeDropdown: closeDropdown,
+        openLeft: isByMe
+      }, showMenuItemCopy && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-copy",
+        onClick: function () {
+          copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+          closeDropdown();
+        }
+      }, stringSet.MESSAGE_MENU__COPY), showMenuItemReply && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-reply",
+        onClick: function () {
+          setQuoteMessage(message);
+          closeDropdown();
+        },
+        disable: (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0
+      }, stringSet.MESSAGE_MENU__REPLY), showMenuItemThread && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-thread",
+        onClick: function () {
+          onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+            message: message
+          });
+          closeDropdown();
+        }
+      }, stringSet.MESSAGE_MENU__THREAD), showMenuItemOpenInChannel && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-open-channel",
+        onClick: function () {
+          onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage();
+          closeDropdown();
+        }
+      }, stringSet.MESSAGE_MENU__OPEN_IN_CHANNEL), showMenuItemEdit && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-edit",
+        onClick: function () {
+          if (!disabled) {
+            showEdit(true);
+            closeDropdown();
+          }
+        }
+      }, stringSet.MESSAGE_MENU__EDIT), showMenuItemResend && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-resend",
+        onClick: function () {
+          if (!disabled) {
+            resendMessage(message);
+            closeDropdown();
+          }
+        }
+      }, stringSet.MESSAGE_MENU__RESEND), showMenuItemDelete && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message-item-menu__list__menu-item menu-item-delete",
+        onClick: function () {
+          if (!disabled) {
+            showRemove(true);
+            closeDropdown();
+          }
+        },
+        disable: typeof disableDeleteMessage === 'boolean' ? disableDeleteMessage : ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0
+      }, stringSet.MESSAGE_MENU__DELETE));
+    }
+  }));
+}
+
+export { MessageItemMenu as default };
+//# sourceMappingURL=MessageItemMenu.js.map

package/ui/MessageItemReactionMenu.js

@@ -0,0 +1,107 @@
+import React__default, { useRef } from 'react';
+import ContextMenu, { EmojiListItems } from './ContextMenu.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import IconButton from './IconButton.js';
+import ImageRenderer from './ImageRenderer.js';
+import ReactionButton from './ReactionButton.js';
+import { x as isPendingMessage, w as isFailedMessage, j as getClassName, z as getEmojiListAll } from '../index-8ee9e1f5.js';
+import '../tslib.es6-cd680863.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../uuid-9f7da91d.js';
+import '../index-67c5e94c.js';
+import 'prop-types';
+import '../stringSet-ad8993d1.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+function MessageItemReactionMenu(_a) {
+  var className = _a.className,
+      message = _a.message,
+      userId = _a.userId,
+      _b = _a.spaceFromTrigger,
+      spaceFromTrigger = _b === void 0 ? {} : _b,
+      emojiContainer = _a.emojiContainer,
+      toggleReaction = _a.toggleReaction,
+      setSupposedHover = _a.setSupposedHover;
+  var triggerRef = useRef(null);
+  var containerRef = useRef(null);
+
+  if (isPendingMessage(message) || isFailedMessage(message)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, 'sendbird-message-item-reaction-menu']),
+    ref: containerRef
+  }, /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default.createElement(IconButton, {
+        className: "sendbird-message-item-reaction-menu__trigger",
+        ref: triggerRef,
+        width: "32px",
+        height: "32px",
+        onClick: function () {
+          toggleDropdown();
+          setSupposedHover(true);
+        },
+        onBlur: function () {
+          setSupposedHover(false);
+        }
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        className: "sendbird-message-item-reaction-menu__trigger__icon",
+        type: IconTypes.EMOJI_MORE,
+        fillColor: IconColors.CONTENT_INVERSE,
+        width: "24px",
+        height: "24px"
+      }));
+    },
+    menuItems: function (close) {
+      var closeDropdown = function () {
+        close();
+        setSupposedHover(false);
+      };
+
+      return /*#__PURE__*/React__default.createElement(EmojiListItems, {
+        parentRef: triggerRef,
+        parentContainRef: containerRef,
+        closeDropdown: closeDropdown,
+        spaceFromTrigger: spaceFromTrigger
+      }, getEmojiListAll(emojiContainer).map(function (emoji) {
+        var _a, _b, _c;
+
+        var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) {
+          return reaction.key === emoji.key;
+        })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
+          return reactorId === userId;
+        });
+        return /*#__PURE__*/React__default.createElement(ReactionButton, {
+          key: emoji.key,
+          width: "36px",
+          height: "36px",
+          selected: isReacted,
+          onClick: function () {
+            closeDropdown();
+            toggleReaction(message, emoji.key, isReacted);
+          }
+        }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+          url: emoji.url,
+          width: "28px",
+          height: "28px",
+          placeHolder: function (style) {
+            return /*#__PURE__*/React__default.createElement("div", {
+              style: style
+            }, /*#__PURE__*/React__default.createElement(Icon, {
+              type: IconTypes.QUESTION,
+              fillColor: IconColors.ON_BACKGROUND_3,
+              width: "28px",
+              height: "28px"
+            }));
+          }
+        }));
+      }));
+    }
+  }));
+}
+
+export { MessageItemReactionMenu as default };
+//# sourceMappingURL=MessageItemReactionMenu.js.map

package/ui/MessageSearchFileItem.js

@@ -0,0 +1,128 @@
+import { a as __spreadArray } from '../tslib.es6-cd680863.js';
+import React__default from 'react';
+import Avatar from './Avatar.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-67c5e94c.js';
+import { u as useLocalization } from '../LocalizationContext-a6aa8be8.js';
+import { f as format } from '../index-6ccea9a6.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from '../index-7283bb53.js';
+import { d as isVoiceMessage } from '../index-8ee9e1f5.js';
+import './ImageRenderer.js';
+import '../uuid-9f7da91d.js';
+import 'prop-types';
+import '../stringSet-ad8993d1.js';
+import '../index-757a563a.js';
+import '../index-00eb27a6.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+function getCreatedAt(_a) {
+  var createdAt = _a.createdAt,
+      locale = _a.locale,
+      stringSet = _a.stringSet;
+  var optionalParam = locale ? {
+    locale: locale
+  } : null;
+
+  if (!createdAt) {
+    return '';
+  }
+
+  if (isToday(createdAt)) {
+    return format(createdAt, 'p', optionalParam);
+  }
+
+  if (isYesterday(createdAt)) {
+    return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
+  }
+
+  if (isThisYear(createdAt)) {
+    return format(createdAt, 'MMM d', optionalParam);
+  }
+
+  return format(createdAt, 'yyyy/M/d', optionalParam);
+}
+function getIconOfFileType(message) {
+  var url = message.url;
+  var fileMessageUrl = url;
+  var fileExtension = fileMessageUrl.match(/\.([^.]*?)(?=\?|#|$)/)[1];
+
+  if (/(jpg|jpeg|png)$/i.test(fileExtension)) {
+    return IconTypes.PHOTO;
+  } else if (/mp4$/i.test(fileExtension) || isVoiceMessage(message)) {
+    return IconTypes.PLAY;
+  } else if (/mp3/i.test(fileExtension)) {
+    return IconTypes.FILE_AUDIO;
+  } else if (/gif/i.test(fileExtension)) {
+    return IconTypes.GIF;
+  } else {
+    return IconTypes.FILE_DOCUMENT;
+  }
+}
+
+function MessageSearchFileItem(props) {
+  var className = props.className,
+      message = props.message,
+      selected = props.selected,
+      onClick = props.onClick;
+  var createdAt = message.createdAt,
+      url = message.url,
+      name = message.name; // @ts-ignore
+
+  var sender = message.sender || message._sender;
+  var profileUrl = sender.profileUrl,
+      nickname = sender.nickname;
+
+  var _a = useLocalization(),
+      stringSet = _a.stringSet,
+      dateLocale = _a.dateLocale;
+
+  var isVoiceMsg = isVoiceMessage(message);
+  var prettyFilename = isVoiceMsg ? stringSet.VOICE_MESSAGE : name || url;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-message-search-file-item', selected ? 'sendbird-message-search-file-item--selected' : ''], false).join(' '),
+    onClick: function (e) {
+      e.stopPropagation();
+      onClick(message);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-file-item__left"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-message-search-file-item__left__sender-avatar",
+    src: profileUrl,
+    alt: "profile image",
+    width: "56px",
+    height: "56px"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-file-item__right"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-file-item__right__sender-name",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, nickname || stringSet.NO_NAME), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-file-item__right__content"
+  }, !isVoiceMsg && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-file-item__right__content__type-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: getIconOfFileType(message),
+    fillColor: IconColors.PRIMARY,
+    width: "18px",
+    height: "18px"
+  })), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-file-item__right__content__url",
+    type: LabelTypography.BODY_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, prettyFilename))), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-file-item__message-created-at",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, getCreatedAt({
+    createdAt: createdAt,
+    locale: dateLocale,
+    stringSet: stringSet
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-file-item__right-footer"
+  }));
+}
+
+export { MessageSearchFileItem as default };
+//# sourceMappingURL=MessageSearchFileItem.js.map

package/ui/MessageSearchItem.js

@@ -0,0 +1,96 @@
+import { a as __spreadArray } from '../tslib.es6-cd680863.js';
+import React__default from 'react';
+import { f as format } from '../index-6ccea9a6.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from '../index-7283bb53.js';
+import Avatar from './Avatar.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-67c5e94c.js';
+import { u as useLocalization } from '../LocalizationContext-a6aa8be8.js';
+import '../index-757a563a.js';
+import '../index-00eb27a6.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import 'prop-types';
+import '../uuid-9f7da91d.js';
+import '../stringSet-ad8993d1.js';
+
+function getCreatedAt (_a) {
+  var createdAt = _a.createdAt,
+      locale = _a.locale,
+      stringSet = _a.stringSet;
+  var optionalParam = locale ? {
+    locale: locale
+  } : null;
+
+  if (!createdAt) {
+    return '';
+  }
+
+  if (isToday(createdAt)) {
+    return format(createdAt, 'p', optionalParam);
+  }
+
+  if (isYesterday(createdAt)) {
+    return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
+  }
+
+  if (isThisYear(createdAt)) {
+    return format(createdAt, 'MMM d', optionalParam);
+  }
+
+  return format(createdAt, 'yyyy/M/d', optionalParam);
+}
+
+function MessageSearchItem(_a) {
+  var className = _a.className,
+      message = _a.message,
+      selected = _a.selected,
+      onClick = _a.onClick;
+  var createdAt = message.createdAt;
+  var messageText = message.message;
+  var sender = message.sender || message._sender;
+  var profileUrl = sender.profileUrl,
+      nickname = sender.nickname;
+
+  var _b = useLocalization(),
+      stringSet = _b.stringSet,
+      dateLocale = _b.dateLocale;
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-message-search-item', selected ? 'sendbird-message-search-item--selected' : ''], false).join(' '),
+    onClick: function (e) {
+      e.stopPropagation();
+      onClick(message);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-item__left"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-message-search-item__left__sender-avatar",
+    src: profileUrl,
+    alt: "profile image",
+    width: "56px",
+    height: "56px"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-item__right"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-item__right__sender-name",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, nickname || stringSet.NO_NAME), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-item__right__message-text",
+    type: LabelTypography.BODY_2,
+    color: LabelColors.ONBACKGROUND_3
+  }, messageText), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-search-item__right__message-created-at",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, getCreatedAt({
+    createdAt: createdAt,
+    locale: dateLocale,
+    stringSet: stringSet
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-search-item__right-footer"
+  }));
+}
+
+export { MessageSearchItem as default };
+//# sourceMappingURL=MessageSearchItem.js.map

package/ui/MessageStatus.js

@@ -0,0 +1,16 @@
+import '../tslib.es6-cd680863.js';
+import 'react';
+import '../index-6ccea9a6.js';
+import './Icon.js';
+import '../index-67c5e94c.js';
+import './Loader.js';
+import '../index-8ee9e1f5.js';
+import '../utils/message/getOutgoingMessageState.js';
+export { e as MessageStatusTypes, M as default } from '../index-c8a147a4.js';
+import '../LocalizationContext-a6aa8be8.js';
+import '../index-757a563a.js';
+import 'prop-types';
+import '../stringSet-ad8993d1.js';
+import '../index-7283bb53.js';
+import '../index-00eb27a6.js';
+//# sourceMappingURL=MessageStatus.js.map

package/ui/Modal.js

@@ -0,0 +1,115 @@
+import React__default, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { M as MODAL_ROOT } from '../index-d4908e3c.js';
+import { a as LocalizationContext } from '../LocalizationContext-a6aa8be8.js';
+import Button, { ButtonTypes } from './Button.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import IconButton from './IconButton.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-67c5e94c.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-a551e770.js';
+import '../stringSet-ad8993d1.js';
+import '../index-757a563a.js';
+import '../tslib.es6-cd680863.js';
+import 'prop-types';
+
+var ModalHeader = function (_a) {
+  var titleText = _a.titleText;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-modal__header"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.H_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, titleText));
+};
+var ModalBody = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-modal__body"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: 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 ? ButtonTypes.DANGER : _c,
+      onSubmit = _a.onSubmit,
+      onCancel = _a.onCancel;
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-modal__footer"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: ButtonTypes.SECONDARY,
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.BUTTON_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.BUTTON__CANCEL)), /*#__PURE__*/React__default.createElement(Button, {
+    type: type,
+    disabled: disabled,
+    onClick: onSubmit
+  }, 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 ? 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 = useMediaQueryContext().isMobile;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", {
+    className: "\n      sendbird-modal ".concat(className, "\n      ").concat(isFullScreenOnMobile && isMobile ? 'sendbird-modal--full-mobile' : '', "\n    ")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-modal__content"
+  }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || /*#__PURE__*/React__default.createElement(ModalHeader, {
+    titleText: titleText
+  }), /*#__PURE__*/React__default.createElement(ModalBody, null, children), !hideFooter && /*#__PURE__*/React__default.createElement(ModalFooter, {
+    disabled: disabled,
+    onCancel: onCancel,
+    onSubmit: onSubmit,
+    submitText: submitText,
+    type: type
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-modal__close"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    width: "32px",
+    height: "32px",
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CLOSE,
+    fillColor: IconColors.DEFAULT,
+    width: "24px",
+    height: "24px"
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "\n          sendbird-modal__backdrop\n          ".concat(isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside', "\n        "),
+    onClick: function (e) {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+
+      if (isCloseOnClickOutside) {
+        onCancel();
+      }
+    }
+  })), document.getElementById(MODAL_ROOT));
+}
+
+export { ModalBody, ModalFooter, ModalHeader, Modal as default };
+//# sourceMappingURL=Modal.js.map