@sendbird/uikit-react 3.0.0-alpha

package/dist/ui/ChatHeader.js

@@ -0,0 +1,138 @@
+import React__default, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../index-7a51bd16.js';
+import { a as LocalizationContext } from '../LocalizationContext-e4391013.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import IconButton from './IconButton.js';
+import ChannelAvatar from './ChannelAvatar.js';
+import '../_rollupPluginBabelHelpers-20904f21.js';
+import '../stringSet-4f6eaa60.js';
+import '../index-6ebf7894.js';
+import './Avatar.js';
+import '../tslib.es6-e3c44017.js';
+import './ImageRenderer.js';
+import '../uuid-b0c93400.js';
+import '../utils-08c4dbdc.js';
+
+var getChannelTitle = function getChannelTitle() {
+  var channel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var currentUserId = arguments.length > 1 ? arguments[1] : undefined;
+  var stringSet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LabelStringSet;
+
+  if (!channel || !channel.name && !channel.members) {
+    return stringSet.NO_TITLE;
+  }
+
+  if (channel.name && channel.name !== 'Group Channel') {
+    return channel.name;
+  }
+
+  if (channel.members.length === 1) {
+    return stringSet.NO_MEMBERS;
+  }
+
+  return channel.members.filter(function (_ref) {
+    var userId = _ref.userId;
+    return userId !== currentUserId;
+  }).map(function (_ref2) {
+    var nickname = _ref2.nickname;
+    return nickname || stringSet.NO_NAME;
+  }).join(', ');
+};
+
+// delete
+
+var noop = function noop() {};
+
+function ChatHeader(props) {
+  var currentGroupChannel = props.currentGroupChannel,
+      currentUser = props.currentUser,
+      title = props.title,
+      subTitle = props.subTitle,
+      isMuted = props.isMuted,
+      theme = props.theme,
+      showSearchIcon = props.showSearchIcon,
+      onSearchClick = props.onSearchClick,
+      onActionClick = props.onActionClick;
+  var userId = currentUser.userId;
+
+  var _useContext = useContext(LocalizationContext),
+      stringSet = _useContext.stringSet;
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header__left"
+  }, /*#__PURE__*/React__default.createElement(ChannelAvatar, {
+    theme: theme,
+    channel: currentGroupChannel,
+    userId: userId,
+    height: 32,
+    width: 32
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-chat-header__left__title",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, title || getChannelTitle(currentGroupChannel, userId, stringSet)), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-chat-header__left__subtitle",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, subTitle)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header__right"
+  }, (typeof isMuted === 'string' && isMuted === 'true' || typeof isMuted === 'boolean' && isMuted) && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-chat-header__right__mute",
+    type: IconTypes.NOTIFICATIONS_OFF_FILLED,
+    width: "24px",
+    height: "24px"
+  }), showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-chat-header__right__search",
+    width: "32px",
+    height: "32px",
+    onClick: onSearchClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.SEARCH,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-chat-header__right__info",
+    width: "32px",
+    height: "32px",
+    onClick: onActionClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.INFO,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+}
+ChatHeader.propTypes = {
+  currentGroupChannel: PropTypes.shape({
+    members: PropTypes.arrayOf(PropTypes.shape({})),
+    coverUrl: PropTypes.string
+  }),
+  currentUser: PropTypes.shape({
+    userId: PropTypes.string
+  }),
+  title: PropTypes.string,
+  subTitle: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  isMuted: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  theme: PropTypes.string,
+  showSearchIcon: PropTypes.bool,
+  onSearchClick: PropTypes.func,
+  onActionClick: PropTypes.func
+};
+ChatHeader.defaultProps = {
+  currentGroupChannel: {},
+  currentUser: {},
+  title: '',
+  subTitle: '',
+  isMuted: false,
+  theme: 'light',
+  showSearchIcon: false,
+  onSearchClick: noop,
+  onActionClick: noop
+};
+
+export { ChatHeader as default };
+//# sourceMappingURL=ChatHeader.js.map

package/dist/ui/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","sources":["../../src/ui/ChatHeader/utils.js","../../src/ui/ChatHeader/index.jsx"],"sourcesContent":["import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict';\nimport { LabelStringSet } from '../Label';\n\nexport const prettyDate = (date) => formatDistanceToNowStrict(date, { addSuffix: true });\n\nexport const getChannelTitle = (channel = {}, currentUserId, stringSet = LabelStringSet) => {\n  if (!channel || (!channel.name && !channel.members)) {\n    return stringSet.NO_TITLE;\n  }\n  if (channel.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel.members.length === 1) {\n    return stringSet.NO_MEMBERS;\n  }\n\n  return channel.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || stringSet.NO_NAME))\n    .join(', ');\n};\n","// delete\nimport React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport * as utils from './utils';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ChannelAvatar from '../ChannelAvatar/index';\n\nconst noop = () => { };\nexport default function ChatHeader(props) {\n  const {\n    currentGroupChannel,\n    currentUser,\n    title,\n    subTitle,\n    isMuted,\n    theme,\n    showSearchIcon,\n    onSearchClick,\n    onActionClick,\n  } = props;\n  const { userId } = currentUser;\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {title || utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n\nChatHeader.propTypes = {\n  currentGroupChannel: PropTypes.shape({\n    members: PropTypes.arrayOf(PropTypes.shape({})),\n    coverUrl: PropTypes.string,\n  }),\n  currentUser: PropTypes.shape({\n    userId: PropTypes.string,\n  }),\n  title: PropTypes.string,\n  subTitle: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.string,\n  ]),\n  isMuted: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  theme: PropTypes.string,\n  showSearchIcon: PropTypes.bool,\n  onSearchClick: PropTypes.func,\n  onActionClick: PropTypes.func,\n};\n\nChatHeader.defaultProps = {\n  currentGroupChannel: {},\n  currentUser: {},\n  title: '',\n  subTitle: '',\n  isMuted: false,\n  theme: 'light',\n  showSearchIcon: false,\n  onSearchClick: noop,\n  onActionClick: noop,\n};\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","userId","map","nickname","NO_NAME","join","noop","ChatHeader","props","currentGroupChannel","currentUser","title","subTitle","isMuted","theme","showSearchIcon","onSearchClick","onActionClick","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","IconTypes","NOTIFICATIONS_OFF_FILLED","SEARCH","IconColors","PRIMARY","INFO","propTypes","PropTypes","shape","arrayOf","coverUrl","string","oneOfType","bool","func","defaultProps"],"mappings":"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"}

package/dist/ui/Checkbox.js

@@ -0,0 +1,42 @@
+import { a as _slicedToArray } from '../_rollupPluginBabelHelpers-20904f21.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+function Checkbox(_ref) {
+  var id = _ref.id,
+      checked = _ref.checked,
+      onChange = _ref.onChange;
+
+  var _useState = useState(checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      isChecked = _useState2[0],
+      setCheck = _useState2[1];
+
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: "sendbird-checkbox",
+    htmlFor: id
+  }, /*#__PURE__*/React__default.createElement("input", {
+    id: id,
+    type: "checkbox",
+    checked: isChecked,
+    onClick: function onClick() {
+      return setCheck(!isChecked);
+    },
+    onChange: onChange
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "sendbird-checkbox--checkmark"
+  }));
+}
+Checkbox.propTypes = {
+  id: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func
+};
+Checkbox.defaultProps = {
+  id: 'sendbird-checkbox-input',
+  checked: false,
+  onChange: function onChange() {}
+};
+
+export { Checkbox as default };
+//# sourceMappingURL=Checkbox.js.map

package/dist/ui/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../src/ui/Checkbox/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\nexport default function Checkbox({\n  id,\n  checked,\n  onChange,\n}) {\n  const [isChecked, setCheck] = useState(checked);\n  return (\n    <label className=\"sendbird-checkbox\" htmlFor={id}>\n      <input\n        id={id}\n        type=\"checkbox\"\n        checked={isChecked}\n        onClick={() => setCheck(!isChecked)}\n        onChange={onChange}\n      />\n      <span className=\"sendbird-checkbox--checkmark\" />\n    </label>\n  );\n}\n\nCheckbox.propTypes = {\n  id: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n};\n\nCheckbox.defaultProps = {\n  id: 'sendbird-checkbox-input',\n  checked: false,\n  onChange: () => { },\n};\n"],"names":["Checkbox","id","checked","onChange","useState","isChecked","setCheck","React","propTypes","PropTypes","string","bool","func","defaultProps"],"mappings":";;;;AAKe,SAASA,QAAT,OAIZ;AAAA,MAHDC,EAGC,QAHDA,EAGC;AAAA,MAFDC,OAEC,QAFDA,OAEC;AAAA,MADDC,QACC,QADDA,QACC;;AACD,kBAA8BC,QAAQ,CAACF,OAAD,CAAtC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,QAAlB;;AACA,sBACEC;AAAO,IAAA,SAAS,EAAC,mBAAjB;AAAqC,IAAA,OAAO,EAAEN;AAA9C,kBACEM;AACE,IAAA,EAAE,EAAEN,EADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,OAAO,EAAEI,SAHX;AAIE,IAAA,OAAO,EAAE;AAAA,aAAMC,QAAQ,CAAC,CAACD,SAAF,CAAd;AAAA,KAJX;AAKE,IAAA,QAAQ,EAAEF;AALZ,IADF,eAQEI;AAAM,IAAA,SAAS,EAAC;AAAhB,IARF,CADF;AAYD;AAEDP,QAAQ,CAACQ,SAAT,GAAqB;AACnBP,EAAAA,EAAE,EAAEQ,SAAS,CAACC,MADK;AAEnBR,EAAAA,OAAO,EAAEO,SAAS,CAACE,IAFA;AAGnBR,EAAAA,QAAQ,EAAEM,SAAS,CAACG;AAHD,CAArB;AAMAZ,QAAQ,CAACa,YAAT,GAAwB;AACtBZ,EAAAA,EAAE,EAAE,yBADkB;AAEtBC,EAAAA,OAAO,EAAE,KAFa;AAGtBC,EAAAA,QAAQ,EAAE,oBAAM;AAHM,CAAxB;;;;"}

package/dist/ui/ConnectionStatus.js

@@ -0,0 +1,28 @@
+import React__default, { useContext } from 'react';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-7a51bd16.js';
+import { a as LocalizationContext } from '../LocalizationContext-e4391013.js';
+import '../_rollupPluginBabelHelpers-20904f21.js';
+import 'prop-types';
+import '../stringSet-4f6eaa60.js';
+import '../index-6ebf7894.js';
+
+function ConnectionStatus() {
+  var _useContext = useContext(LocalizationContext),
+      stringSet = _useContext.stringSet;
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-connection-status"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.BODY_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.TRYING_TO_CONNECT), /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.DISCONNECTED,
+    fillColor: IconColors.SENT,
+    width: "14px",
+    height: "14px"
+  }));
+}
+
+export { ConnectionStatus as default };
+//# sourceMappingURL=ConnectionStatus.js.map

package/dist/ui/ConnectionStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStatus.js","sources":["../../src/ui/ConnectionStatus/index.jsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport './index.scss';\n\nfunction ConnectionStatus() {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-connection-status\">\n      <Label\n        type={LabelTypography.BODY_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.TRYING_TO_CONNECT}\n      </Label>\n      <Icon\n        type={IconTypes.DISCONNECTED}\n        fillColor={IconColors.SENT}\n        width=\"14px\"\n        height=\"14px\"\n      />\n    </div>\n  );\n}\n\nexport default ConnectionStatus;\n"],"names":["ConnectionStatus","useContext","LocalizationContext","stringSet","React","LabelTypography","BODY_2","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","IconTypes","DISCONNECTED","IconColors","SENT"],"mappings":";;;;;;;;;AAQA,SAASA,gBAAT,GAA4B;AAC1B,oBAAsBC,UAAU,CAACC,mBAAD,CAAhC;AAAA,MAAQC,SAAR,eAAQA,SAAR;;AACA,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AACE,IAAA,IAAI,EAAEC,eAAe,CAACC,MADxB;AAEE,IAAA,KAAK,EAAEC,WAAW,CAACC;AAFrB,KAIGL,SAAS,CAACM,iBAJb,CADF,eAOEL,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,YADlB;AAEE,IAAA,SAAS,EAAEC,UAAU,CAACC,IAFxB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,EAAC;AAJT,IAPF,CADF;AAgBD;;;;"}

package/dist/ui/ContextMenu.js

@@ -0,0 +1,417 @@
+import { c as _inherits, d as _createSuper, e as _createClass, f as _classCallCheck, g as _defineProperty, h as _assertThisInitialized, _ as _objectSpread2, a as _slicedToArray } from '../_rollupPluginBabelHelpers-20904f21.js';
+import React__default, { Component, useState } from 'react';
+import PropTypes from 'prop-types';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-7a51bd16.js';
+import { d as getClassName } from '../index-8c72a94a.js';
+import { createPortal } from 'react-dom';
+import SortByRow from './SortByRow.js';
+import '../stringSet-4f6eaa60.js';
+import '../tslib.es6-e3c44017.js';
+
+var MenuItems$1 = /*#__PURE__*/function (_Component) {
+  _inherits(MenuItems, _Component);
+
+  var _super = _createSuper(MenuItems);
+
+  function MenuItems(props) {
+    var _this;
+
+    _classCallCheck(this, MenuItems);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "showParent", function () {
+      var _this$props$parentCon = _this.props.parentContainRef,
+          parentContainRef = _this$props$parentCon === void 0 ? {} : _this$props$parentCon;
+      var current = parentContainRef.current;
+
+      if (parentContainRef && current) {
+        current.classList.add('sendbird-icon--pressed');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hideParent", function () {
+      var _this$props$parentCon2 = _this.props.parentContainRef,
+          parentContainRef = _this$props$parentCon2 === void 0 ? {} : _this$props$parentCon2;
+      var current = parentContainRef.current;
+
+      if (parentContainRef && current) {
+        current.classList.remove('sendbird-icon--pressed');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setupEvents", function () {
+      var closeDropdown = _this.props.closeDropdown;
+
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          menuRef = _assertThisInitialize.menuRef;
+
+      var handleClickOutside = function handleClickOutside(event) {
+        if (menuRef.current && !menuRef.current.contains(event.target)) {
+          closeDropdown();
+        }
+      };
+
+      _this.setState({
+        handleClickOutside: handleClickOutside
+      });
+
+      document.addEventListener('mousedown', handleClickOutside);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "cleanUpEvents", function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getMenuPosition", function () {
+      var _this$props = _this.props,
+          parentRef = _this$props.parentRef,
+          openLeft = _this$props.openLeft;
+      var parentRect = parentRef.current.getBoundingClientRect();
+      var x = parentRect.x || parentRect.left;
+      var y = parentRect.y || parentRect.top;
+      var menuStyle = {
+        top: y,
+        left: x
+      };
+      if (!_this.menuRef.current) return menuStyle;
+      var _window = window,
+          innerWidth = _window.innerWidth,
+          innerHeight = _window.innerHeight;
+
+      var rect = _this.menuRef.current.getBoundingClientRect();
+
+      if (y + rect.height > innerHeight) {
+        menuStyle.top -= rect.height;
+      }
+
+      if (x + rect.width > innerWidth && !openLeft) {
+        menuStyle.left -= rect.width;
+      }
+
+      if (menuStyle.top < 0) {
+        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
+      }
+
+      if (menuStyle.left < 0) {
+        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
+      }
+
+      menuStyle.top += 32;
+
+      if (openLeft) {
+        var padding = Number.isNaN(rect.width - 30) ? 108 // default
+        : rect.width - 30;
+        menuStyle.left -= padding;
+      }
+
+      return _this.setState({
+        menuStyle: menuStyle
+      });
+    });
+
+    _this.menuRef = /*#__PURE__*/React__default.createRef();
+    _this.state = {
+      menuStyle: {},
+      handleClickOutside: function handleClickOutside() {}
+    };
+    return _this;
+  }
+
+  _createClass(MenuItems, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setupEvents();
+      this.getMenuPosition();
+      this.showParent();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanUpEvents();
+      this.hideParent();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var menuStyle = this.state.menuStyle;
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          style = _this$props2.style;
+      return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-dropdown__menu-backdrop"
+      }), /*#__PURE__*/React__default.createElement("ul", {
+        className: "sendbird-dropdown__menu",
+        ref: this.menuRef,
+        style: _objectSpread2({
+          display: 'inline-block',
+          position: 'fixed',
+          left: "".concat(Math.round(menuStyle.left), "px"),
+          top: "".concat(Math.round(menuStyle.top), "px")
+        }, style)
+      }, children)), document.getElementById('sendbird-dropdown-portal'));
+    }
+  }]);
+
+  return MenuItems;
+}(Component);
+MenuItems$1.propTypes = {
+  closeDropdown: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
+  style: PropTypes.shape({}),
+  // https://stackoverflow.com/a/51127130
+  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]).isRequired,
+  parentContainRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]).isRequired,
+  openLeft: PropTypes.bool
+};
+MenuItems$1.defaultProps = {
+  style: {},
+  openLeft: false
+};
+
+var EmojiListItems$1 = /*#__PURE__*/function (_Component) {
+  _inherits(EmojiListItems, _Component);
+
+  var _super = _createSuper(EmojiListItems);
+
+  function EmojiListItems(props) {
+    var _this;
+
+    _classCallCheck(this, EmojiListItems);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "showParent", function () {
+      var _this$props$parentCon = _this.props.parentContainRef,
+          parentContainRef = _this$props$parentCon === void 0 ? {} : _this$props$parentCon;
+      var current = parentContainRef.current;
+
+      if (parentContainRef && current) {
+        current.classList.add('sendbird-reactions--pressed');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hideParent", function () {
+      var _this$props$parentCon2 = _this.props.parentContainRef,
+          parentContainRef = _this$props$parentCon2 === void 0 ? {} : _this$props$parentCon2;
+      var current = parentContainRef.current;
+
+      if (parentContainRef && current) {
+        current.classList.remove('sendbird-reactions--pressed');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setupEvents", function () {
+      var closeDropdown = _this.props.closeDropdown;
+
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          reactionRef = _assertThisInitialize.reactionRef;
+
+      var handleClickOutside = function handleClickOutside(event) {
+        if (reactionRef.current && !reactionRef.current.contains(event.target)) {
+          closeDropdown();
+        }
+      };
+
+      _this.setState({
+        handleClickOutside: handleClickOutside
+      });
+
+      document.addEventListener('mousedown', handleClickOutside);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "cleanUpEvents", function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getBarPosition", function () {
+      // calculate the location that the context menu should be
+      var _this$props = _this.props,
+          parentRef = _this$props.parentRef,
+          spaceFromTrigger = _this$props.spaceFromTrigger;
+      var spaceFromTriggerX = spaceFromTrigger.x || 0;
+      var spaceFromTriggerY = spaceFromTrigger.y || 0;
+      var parentRect = parentRef.current.getBoundingClientRect();
+      var x = parentRect.x || parentRect.left;
+      var y = parentRect.y || parentRect.top;
+      var reactionStyle = {
+        top: y,
+        left: x
+      };
+      if (!_this.reactionRef.current) return reactionStyle;
+
+      var rect = _this.reactionRef.current.getBoundingClientRect();
+
+      if (reactionStyle.top < rect.height) {
+        reactionStyle.top += parentRect.height;
+        reactionStyle.top += spaceFromTriggerY;
+      } else {
+        reactionStyle.top -= rect.height;
+        reactionStyle.top -= spaceFromTriggerY;
+      }
+
+      reactionStyle.left -= rect.width / 2;
+      reactionStyle.left += parentRect.height / 2 - 2;
+      reactionStyle.left += spaceFromTriggerX;
+      var maximumLeft = window.innerWidth - rect.width;
+
+      if (maximumLeft < reactionStyle.left) {
+        reactionStyle.left = maximumLeft;
+      }
+
+      if (reactionStyle.left < 0) {
+        reactionStyle.left = 0;
+      }
+
+      return _this.setState({
+        reactionStyle: reactionStyle
+      });
+    });
+
+    _this.reactionRef = /*#__PURE__*/React__default.createRef();
+    _this.state = {
+      reactionStyle: {},
+      handleClickOutside: function handleClickOutside() {}
+    };
+    return _this;
+  }
+
+  _createClass(EmojiListItems, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setupEvents();
+      this.getBarPosition();
+      this.showParent();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanUpEvents();
+      this.hideParent();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var reactionStyle = this.state.reactionStyle;
+      var children = this.props.children;
+      return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-dropdown__menu-backdrop"
+      }), /*#__PURE__*/React__default.createElement("ul", {
+        className: "sendbird-dropdown__reaction-bar",
+        ref: this.reactionRef,
+        style: {
+          display: 'inline-block',
+          position: 'fixed',
+          left: "".concat(Math.round(reactionStyle.left), "px"),
+          top: "".concat(Math.round(reactionStyle.top), "px")
+        }
+      }, /*#__PURE__*/React__default.createElement(SortByRow, {
+        className: "sendbird-dropdown__reaction-bar__row",
+        maxItemCount: 8,
+        itemWidth: 44,
+        itemHeight: 40
+      }, children))), document.getElementById('sendbird-emoji-list-portal'));
+    }
+  }]);
+
+  return EmojiListItems;
+}(Component);
+EmojiListItems$1.propTypes = {
+  closeDropdown: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
+  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]).isRequired,
+  parentContainRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]).isRequired,
+  spaceFromTrigger: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })
+};
+EmojiListItems$1.defaultProps = {
+  spaceFromTrigger: {}
+};
+
+var ENTER = 13;
+var MenuItems = MenuItems$1;
+var EmojiListItems = EmojiListItems$1;
+var MenuItem = function MenuItem(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      disable = _ref.disable;
+
+  var handleClickEvent = function handleClickEvent(e) {
+    if (!disable) onClick(e);
+  };
+
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']),
+    role: "menuitem",
+    onClick: handleClickEvent,
+    onKeyPress: function onKeyPress(e) {
+      if (e.keyCode === ENTER) handleClickEvent(e);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-dropdown__menu-item__text",
+    type: LabelTypography.SUBTITLE_2,
+    color: disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+  }, children));
+};
+MenuItem.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  onClick: PropTypes.func.isRequired,
+  disable: PropTypes.bool
+};
+MenuItem.defaultProps = {
+  className: '',
+  disable: false
+}; // Root components should be appended before ContextMenu is rendered
+
+var MenuRoot = function MenuRoot() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "sendbird-dropdown-portal"
+  });
+};
+var EmojiReactionListRoot = function EmojiReactionListRoot() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "sendbird-emoji-list-portal"
+  });
+};
+function ContextMenu(_ref2) {
+  var menuTrigger = _ref2.menuTrigger,
+      menuItems = _ref2.menuItems;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-context-menu",
+    style: {
+      display: 'inline'
+    }
+  }, menuTrigger(function () {
+    return setShowMenu(!showMenu);
+  }), showMenu && menuItems(function () {
+    return setShowMenu(false);
+  }));
+}
+ContextMenu.propTypes = {
+  menuTrigger: PropTypes.func.isRequired,
+  menuItems: PropTypes.func.isRequired
+};
+
+export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, ContextMenu as default };
+//# sourceMappingURL=ContextMenu.js.map