@sendbird/uikit-react 3.0.0-beta.4 → 3.0.0-rc.0

package/cjs/ui/ContextMenu.js

@@ -0,0 +1,410 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-d984e855.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var ui_Label = require('../index-df05e765.js');
+var index = require('../index-40d245a3.js');
+var reactDom = require('react-dom');
+var ui_SortByRow = require('./SortByRow.js');
+require('../stringSet-2f3588b5.js');
+require('../tslib.es6-d9c7aa8b.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 MenuItems$1 = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers._inherits(MenuItems, _Component);
+
+  var _super = _rollupPluginBabelHelpers._createSuper(MenuItems);
+
+  function MenuItems(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers._classCallCheck(this, MenuItems);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "setupEvents", function () {
+      var closeDropdown = _this.props.closeDropdown;
+
+      var _assertThisInitialize = _rollupPluginBabelHelpers._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);
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "cleanUpEvents", function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._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["default"].createRef();
+    _this.state = {
+      menuStyle: {},
+      handleClickOutside: function handleClickOutside() {}
+    };
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers._createClass(MenuItems, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setupEvents();
+      this.getMenuPosition();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanUpEvents();
+    }
+  }, {
+    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__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-dropdown__menu-backdrop"
+      }), /*#__PURE__*/React__default["default"].createElement("ul", {
+        className: "sendbird-dropdown__menu",
+        ref: this.menuRef,
+        style: _rollupPluginBabelHelpers._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;
+}(React.Component);
+MenuItems$1.propTypes = {
+  closeDropdown: PropTypes__default["default"].func.isRequired,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]).isRequired,
+  style: PropTypes__default["default"].shape({}),
+  // https://stackoverflow.com/a/51127130
+  parentRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].instanceOf(Element)
+  })]).isRequired,
+  // parentContainRef: PropTypes.oneOfType([
+  //   PropTypes.func,
+  //   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  // ]).isRequired,
+  openLeft: PropTypes__default["default"].bool
+};
+MenuItems$1.defaultProps = {
+  style: {},
+  openLeft: false
+};
+
+var EmojiListItems$1 = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers._inherits(EmojiListItems, _Component);
+
+  var _super = _rollupPluginBabelHelpers._createSuper(EmojiListItems);
+
+  function EmojiListItems(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers._classCallCheck(this, EmojiListItems);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._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');
+      }
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._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');
+      }
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "setupEvents", function () {
+      var closeDropdown = _this.props.closeDropdown;
+
+      var _assertThisInitialize = _rollupPluginBabelHelpers._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);
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "cleanUpEvents", function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._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["default"].createRef();
+    _this.state = {
+      reactionStyle: {},
+      handleClickOutside: function handleClickOutside() {}
+    };
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers._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__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-dropdown__menu-backdrop"
+      }), /*#__PURE__*/React__default["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["default"].createElement(ui_SortByRow, {
+        className: "sendbird-dropdown__reaction-bar__row",
+        maxItemCount: 8,
+        itemWidth: 44,
+        itemHeight: 40
+      }, children))), document.getElementById('sendbird-emoji-list-portal'));
+    }
+  }]);
+
+  return EmojiListItems;
+}(React.Component);
+EmojiListItems$1.propTypes = {
+  closeDropdown: PropTypes__default["default"].func.isRequired,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]).isRequired,
+  parentRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].instanceOf(Element)
+  })]).isRequired,
+  parentContainRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].instanceOf(Element)
+  })]).isRequired,
+  spaceFromTrigger: PropTypes__default["default"].shape({
+    x: PropTypes__default["default"].number,
+    y: PropTypes__default["default"].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["default"].createElement("li", {
+    className: index.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["default"].createElement(ui_Label.Label, {
+    className: "sendbird-dropdown__menu-item__text",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
+  }, children));
+};
+MenuItem.propTypes = {
+  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].element]).isRequired,
+  onClick: PropTypes__default["default"].func.isRequired,
+  disable: PropTypes__default["default"].bool
+};
+MenuItem.defaultProps = {
+  className: '',
+  disable: false
+}; // Root components should be appended before ContextMenu is rendered
+
+var MenuRoot = function MenuRoot() {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: "sendbird-dropdown-portal"
+  });
+};
+var EmojiReactionListRoot = function EmojiReactionListRoot() {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: "sendbird-emoji-list-portal"
+  });
+};
+function ContextMenu(_ref2) {
+  var menuTrigger = _ref2.menuTrigger,
+      menuItems = _ref2.menuItems;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  return /*#__PURE__*/React__default["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__default["default"].func.isRequired,
+  menuItems: PropTypes__default["default"].func.isRequired
+};
+
+exports.EmojiListItems = EmojiListItems;
+exports.EmojiReactionListRoot = EmojiReactionListRoot;
+exports.MenuItem = MenuItem;
+exports.MenuItems = MenuItems;
+exports.MenuRoot = MenuRoot;
+exports["default"] = ContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

package/cjs/ui/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/ui/ContextMenu/items/MenuItems.jsx","../../../src/ui/ContextMenu/items/EmojiListItems.jsx","../../../src/ui/ContextMenu/index.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nexport default class MenuItems extends Component {\n  constructor(props) {\n    super(props);\n    this.menuRef = React.createRef();\n    this.state = {\n      menuStyle: {},\n      handleClickOutside: () => { },\n    };\n  }\n\n  componentDidMount() {\n    this.setupEvents();\n    this.getMenuPosition();\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEvents();\n  }\n\n  setupEvents = () => {\n    const { closeDropdown } = this.props;\n    const { menuRef } = this;\n    const handleClickOutside = (event) => {\n      if (menuRef.current && !menuRef.current.contains(event.target)) {\n        closeDropdown();\n      }\n    };\n    this.setState({\n      handleClickOutside,\n    });\n\n    document.addEventListener('mousedown', handleClickOutside);\n  }\n\n  cleanUpEvents = () => {\n    const {\n      handleClickOutside,\n    } = this.state;\n    document.removeEventListener('mousedown', handleClickOutside);\n  }\n\n  getMenuPosition = () => {\n    const { parentRef, openLeft } = this.props;\n    const parentRect = parentRef.current.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const menuStyle = {\n      top: y,\n      left: x,\n    };\n\n    if (!this.menuRef.current) return menuStyle;\n\n    const { innerWidth, innerHeight } = window;\n    const rect = this.menuRef.current.getBoundingClientRect();\n    if (y + rect.height > innerHeight) {\n      menuStyle.top -= rect.height;\n    }\n\n    if (x + rect.width > innerWidth && !openLeft) {\n      menuStyle.left -= rect.width;\n    }\n\n    if (menuStyle.top < 0) {\n      menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;\n    }\n\n    if (menuStyle.left < 0) {\n      menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n    }\n\n    menuStyle.top += 32;\n    if (openLeft) {\n      const padding = Number.isNaN(rect.width - 30)\n        ? 108 // default\n        : rect.width - 30;\n      menuStyle.left -= padding;\n    }\n\n    return this.setState({ menuStyle });\n  }\n\n  render() {\n    const { menuStyle } = this.state;\n    const { children, style } = this.props;\n    return (\n      createPortal(\n        (\n          <>\n            <div className=\"sendbird-dropdown__menu-backdrop\" />\n            <ul\n              className=\"sendbird-dropdown__menu\"\n              ref={this.menuRef}\n              style={{\n                display: 'inline-block',\n                position: 'fixed',\n                left: `${Math.round(menuStyle.left)}px`,\n                top: `${Math.round(menuStyle.top)}px`,\n                ...style,\n              }}\n            >\n              {children}\n            </ul>\n          </>\n        ),\n        document.getElementById('sendbird-dropdown-portal'),\n      )\n    );\n  }\n}\nMenuItems.propTypes = {\n  closeDropdown: PropTypes.func.isRequired,\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n  style: PropTypes.shape({}),\n  // https://stackoverflow.com/a/51127130\n  parentRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  // parentContainRef: PropTypes.oneOfType([\n  //   PropTypes.func,\n  //   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  // ]).isRequired,\n  openLeft: PropTypes.bool,\n};\nMenuItems.defaultProps = {\n  style: {},\n  openLeft: false,\n};\n","import React, { Component } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport SortByRow from '../../SortByRow';\n\nexport default class EmojiListItems extends Component {\n  constructor(props) {\n    super(props);\n    this.reactionRef = React.createRef();\n    this.state = {\n      reactionStyle: {},\n      handleClickOutside: () => { },\n    };\n  }\n\n  componentDidMount() {\n    this.setupEvents();\n    this.getBarPosition();\n    this.showParent();\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEvents();\n    this.hideParent();\n  }\n\n  showParent = () => {\n    const { parentContainRef = {} } = this.props;\n    const { current } = parentContainRef;\n    if (parentContainRef && current) {\n      current.classList.add('sendbird-reactions--pressed');\n    }\n  }\n\n  hideParent = () => {\n    const { parentContainRef = {} } = this.props;\n    const { current } = parentContainRef;\n    if (parentContainRef && current) {\n      current.classList.remove('sendbird-reactions--pressed');\n    }\n  }\n\n  setupEvents = () => {\n    const { closeDropdown } = this.props;\n    const { reactionRef } = this;\n    const handleClickOutside = (event) => {\n      if (reactionRef.current && !reactionRef.current.contains(event.target)) {\n        closeDropdown();\n      }\n    };\n    this.setState({\n      handleClickOutside,\n    });\n    document.addEventListener('mousedown', handleClickOutside);\n  }\n\n  cleanUpEvents = () => {\n    const {\n      handleClickOutside,\n    } = this.state;\n    document.removeEventListener('mousedown', handleClickOutside);\n  }\n\n  getBarPosition = () => {\n    // calculate the location that the context menu should be\n    const {\n      parentRef,\n      spaceFromTrigger,\n    } = this.props;\n    const spaceFromTriggerX = spaceFromTrigger.x || 0;\n    const spaceFromTriggerY = spaceFromTrigger.y || 0;\n\n    const parentRect = parentRef.current.getBoundingClientRect();\n\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n\n    const reactionStyle = {\n      top: y,\n      left: x,\n    };\n\n    if (!this.reactionRef.current) return reactionStyle;\n    const rect = this.reactionRef.current.getBoundingClientRect();\n\n    if (reactionStyle.top < rect.height) {\n      reactionStyle.top += parentRect.height;\n      reactionStyle.top += spaceFromTriggerY;\n    } else {\n      reactionStyle.top -= rect.height;\n      reactionStyle.top -= spaceFromTriggerY;\n    }\n\n    reactionStyle.left -= (rect.width / 2);\n    reactionStyle.left += (parentRect.height / 2) - 2;\n    reactionStyle.left += spaceFromTriggerX;\n\n    const maximumLeft = (window.innerWidth - rect.width);\n    if (maximumLeft < reactionStyle.left) {\n      reactionStyle.left = maximumLeft;\n    }\n    if (reactionStyle.left < 0) {\n      reactionStyle.left = 0;\n    }\n\n    return this.setState({ reactionStyle });\n  }\n\n  render() {\n    const { reactionStyle } = this.state;\n    const { children } = this.props;\n    return (\n      createPortal(\n        <>\n          <div className=\"sendbird-dropdown__menu-backdrop\" />\n          <ul\n            className=\"sendbird-dropdown__reaction-bar\"\n            ref={this.reactionRef}\n            style={{\n              display: 'inline-block',\n              position: 'fixed',\n              left: `${Math.round(reactionStyle.left)}px`,\n              top: `${Math.round(reactionStyle.top)}px`,\n            }}\n          >\n            <SortByRow\n              className=\"sendbird-dropdown__reaction-bar__row\"\n              maxItemCount={8}\n              itemWidth={44}\n              itemHeight={40}\n            >\n              {children}\n            </SortByRow>\n          </ul>\n        </>,\n        document.getElementById('sendbird-emoji-list-portal'),\n      )\n    );\n  }\n}\nEmojiListItems.propTypes = {\n  closeDropdown: PropTypes.func.isRequired,\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n  parentRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  parentContainRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  spaceFromTrigger: PropTypes.shape({\n    x: PropTypes.number,\n    y: PropTypes.number,\n  }),\n};\nEmojiListItems.defaultProps = {\n  spaceFromTrigger: {},\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { getClassName } from '../../utils';\n\nimport MenuItems_ from './items/MenuItems';\nimport EmojiListItems_ from './items/EmojiListItems';\n\nconst ENTER = 13;\n\nexport const MenuItems = MenuItems_;\nexport const EmojiListItems = EmojiListItems_;\n\nexport const MenuItem = ({\n  className,\n  children,\n  onClick,\n  disable,\n}) => {\n  const handleClickEvent = (e) => { if (!disable) onClick(e); };\n  return (\n    <li\n      className={getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : ''])}\n      role=\"menuitem\"\n      onClick={handleClickEvent}\n      onKeyPress={(e) => { if (e.keyCode === ENTER) handleClickEvent(e); }}\n      tabIndex={0}\n    >\n      <Label\n        className=\"sendbird-dropdown__menu-item__text\"\n        type={LabelTypography.SUBTITLE_2}\n        color={disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1}\n      >\n        {children}\n      </Label>\n    </li>\n  );\n};\n\nMenuItem.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n  ]).isRequired,\n  onClick: PropTypes.func.isRequired,\n  disable: PropTypes.bool,\n};\n\nMenuItem.defaultProps = {\n  className: '',\n  disable: false,\n};\n\n// Root components should be appended before ContextMenu is rendered\nexport const MenuRoot = () => (\n  <div id=\"sendbird-dropdown-portal\" />\n);\nexport const EmojiReactionListRoot = () => (\n  <div id=\"sendbird-emoji-list-portal\" />\n);\n\nexport default function ContextMenu({ menuTrigger, menuItems }) {\n  const [showMenu, setShowMenu] = useState(false);\n\n  return (\n    <div className=\"sendbird-context-menu\" style={{ display: 'inline' }}>\n      {menuTrigger(() => setShowMenu(!showMenu))}\n      {showMenu && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n\nContextMenu.propTypes = {\n  menuTrigger: PropTypes.func.isRequired,\n  menuItems: PropTypes.func.isRequired,\n};\n"],"names":["MenuItems","props","closeDropdown","menuRef","handleClickOutside","event","current","contains","target","setState","document","addEventListener","state","removeEventListener","parentRef","openLeft","parentRect","getBoundingClientRect","x","left","y","top","menuStyle","window","innerWidth","innerHeight","rect","height","width","padding","Number","isNaN","React","createRef","setupEvents","getMenuPosition","cleanUpEvents","children","style","createPortal","display","position","Math","round","getElementById","Component","propTypes","PropTypes","func","isRequired","oneOfType","element","arrayOf","shape","instanceOf","Element","bool","defaultProps","EmojiListItems","parentContainRef","classList","add","remove","reactionRef","spaceFromTrigger","spaceFromTriggerX","spaceFromTriggerY","reactionStyle","maximumLeft","getBarPosition","showParent","hideParent","SortByRow","number","ENTER","MenuItems_","EmojiListItems_","MenuItem","className","onClick","disable","handleClickEvent","e","getClassName","keyCode","Label","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","string","MenuRoot","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","useState","showMenu","setShowMenu"],"mappings":";;;;;;;;;;;;;;;;;;;IAIqBA;;;;;AACnB,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB,sHAkBL,YAAM;AAClB,UAAQC,aAAR,GAA0B,MAAKD,KAA/B,CAAQC,aAAR;;AACA;AAAA,UAAQC,OAAR,yBAAQA,OAAR;;AACA,UAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAW;AACpC,YAAIF,OAAO,CAACG,OAAR,IAAmB,CAACH,OAAO,CAACG,OAAR,CAAgBC,QAAhB,CAAyBF,KAAK,CAACG,MAA/B,CAAxB,EAAgE;AAC9DN,UAAAA,aAAa;AACd;AACF,OAJD;;AAKA,YAAKO,QAAL,CAAc;AACZL,QAAAA,kBAAkB,EAAlBA;AADY,OAAd;;AAIAM,MAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCP,kBAAvC;AACD,KA/BkB;;AAAA,wHAiCH,YAAM;AACpB,UACEA,kBADF,GAEI,MAAKQ,KAFT,CACER,kBADF;AAGAM,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,WAA7B,EAA0CT,kBAA1C;AACD,KAtCkB;;AAAA,0HAwCD,YAAM;AACtB,wBAAgC,MAAKH,KAArC;AAAA,UAAQa,SAAR,eAAQA,SAAR;AAAA,UAAmBC,QAAnB,eAAmBA,QAAnB;AACA,UAAMC,UAAU,GAAGF,SAAS,CAACR,OAAV,CAAkBW,qBAAlB,EAAnB;AACA,UAAMC,CAAC,GAAGF,UAAU,CAACE,CAAX,IAAgBF,UAAU,CAACG,IAArC;AACA,UAAMC,CAAC,GAAGJ,UAAU,CAACI,CAAX,IAAgBJ,UAAU,CAACK,GAArC;AACA,UAAMC,SAAS,GAAG;AAChBD,QAAAA,GAAG,EAAED,CADW;AAEhBD,QAAAA,IAAI,EAAED;AAFU,OAAlB;AAKA,UAAI,CAAC,MAAKf,OAAL,CAAaG,OAAlB,EAA2B,OAAOgB,SAAP;AAE3B,oBAAoCC,MAApC;AAAA,UAAQC,UAAR,WAAQA,UAAR;AAAA,UAAoBC,WAApB,WAAoBA,WAApB;;AACA,UAAMC,IAAI,GAAG,MAAKvB,OAAL,CAAaG,OAAb,CAAqBW,qBAArB,EAAb;;AACA,UAAIG,CAAC,GAAGM,IAAI,CAACC,MAAT,GAAkBF,WAAtB,EAAmC;AACjCH,QAAAA,SAAS,CAACD,GAAV,IAAiBK,IAAI,CAACC,MAAtB;AACD;;AAED,UAAIT,CAAC,GAAGQ,IAAI,CAACE,KAAT,GAAiBJ,UAAjB,IAA+B,CAACT,QAApC,EAA8C;AAC5CO,QAAAA,SAAS,CAACH,IAAV,IAAkBO,IAAI,CAACE,KAAvB;AACD;;AAED,UAAIN,SAAS,CAACD,GAAV,GAAgB,CAApB,EAAuB;AACrBC,QAAAA,SAAS,CAACD,GAAV,GAAgBK,IAAI,CAACC,MAAL,GAAcF,WAAd,GAA4B,CAACA,WAAW,GAAGC,IAAI,CAACC,MAApB,IAA8B,CAA1D,GAA8D,CAA9E;AACD;;AAED,UAAIL,SAAS,CAACH,IAAV,GAAiB,CAArB,EAAwB;AACtBG,QAAAA,SAAS,CAACH,IAAV,GAAiBO,IAAI,CAACE,KAAL,GAAaJ,UAAb,GAA0B,CAACA,UAAU,GAAGE,IAAI,CAACE,KAAnB,IAA4B,CAAtD,GAA0D,CAA3E;AACD;;AAEDN,MAAAA,SAAS,CAACD,GAAV,IAAiB,EAAjB;;AACA,UAAIN,QAAJ,EAAc;AACZ,YAAMc,OAAO,GAAGC,MAAM,CAACC,KAAP,CAAaL,IAAI,CAACE,KAAL,GAAa,EAA1B,IACZ,GADY;AAAA,UAEZF,IAAI,CAACE,KAAL,GAAa,EAFjB;AAGAN,QAAAA,SAAS,CAACH,IAAV,IAAkBU,OAAlB;AACD;;AAED,aAAO,MAAKpB,QAAL,CAAc;AAAEa,QAAAA,SAAS,EAATA;AAAF,OAAd,CAAP;AACD,KA/EkB;;AAEjB,UAAKnB,OAAL,gBAAe6B,yBAAK,CAACC,SAAN,EAAf;AACA,UAAKrB,KAAL,GAAa;AACXU,MAAAA,SAAS,EAAE,EADA;AAEXlB,MAAAA,kBAAkB,EAAE,8BAAM;AAFf,KAAb;AAHiB;AAOlB;;;;WAED,6BAAoB;AAClB,WAAK8B,WAAL;AACA,WAAKC,eAAL;AACD;;;WAED,gCAAuB;AACrB,WAAKC,aAAL;AACD;;;WAiED,kBAAS;AACP,UAAQd,SAAR,GAAsB,KAAKV,KAA3B,CAAQU,SAAR;AACA,yBAA4B,KAAKrB,KAAjC;AAAA,UAAQoC,QAAR,gBAAQA,QAAR;AAAA,UAAkBC,KAAlB,gBAAkBA,KAAlB;AACA,0BACEC,qBAAY,eAERP,+FACEA;AAAK,QAAA,SAAS,EAAC;AAAf,QADF,eAEEA;AACE,QAAA,SAAS,EAAC,yBADZ;AAEE,QAAA,GAAG,EAAE,KAAK7B,OAFZ;AAGE,QAAA,KAAK;AACHqC,UAAAA,OAAO,EAAE,cADN;AAEHC,UAAAA,QAAQ,EAAE,OAFP;AAGHtB,UAAAA,IAAI,YAAKuB,IAAI,CAACC,KAAL,CAAWrB,SAAS,CAACH,IAArB,CAAL,OAHD;AAIHE,UAAAA,GAAG,YAAKqB,IAAI,CAACC,KAAL,CAAWrB,SAAS,CAACD,GAArB,CAAL;AAJA,WAKAiB,KALA;AAHP,SAWGD,QAXH,CAFF,CAFQ,EAmBV3B,QAAQ,CAACkC,cAAT,CAAwB,0BAAxB,CAnBU,CADd;AAuBD;;;;EA5GoCC;AA8GvC7C,WAAS,CAAC8C,SAAV,GAAsB;AACpB5C,EAAAA,aAAa,EAAE6C,6BAAS,CAACC,IAAV,CAAeC,UADV;AAEpBZ,EAAAA,QAAQ,EAAEU,6BAAS,CAACG,SAAV,CAAoB,CAC5BH,6BAAS,CAACI,OADkB,EAE5BJ,6BAAS,CAACK,OAAV,CAAkBL,6BAAS,CAACI,OAA5B,CAF4B,CAApB,EAGPF,UALiB;AAMpBX,EAAAA,KAAK,EAAES,6BAAS,CAACM,KAAV,CAAgB,EAAhB,CANa;AAOpB;AACAvC,EAAAA,SAAS,EAAEiC,6BAAS,CAACG,SAAV,CAAoB,CAC7BH,6BAAS,CAACC,IADmB,EAE7BD,6BAAS,CAACM,KAAV,CAAgB;AAAE/C,IAAAA,OAAO,EAAEyC,6BAAS,CAACO,UAAV,CAAqBC,OAArB;AAAX,GAAhB,CAF6B,CAApB,EAGRN,UAXiB;AAYpB;AACA;AACA;AACA;AACAlC,EAAAA,QAAQ,EAAEgC,6BAAS,CAACS;AAhBA,CAAtB;AAkBAxD,WAAS,CAACyD,YAAV,GAAyB;AACvBnB,EAAAA,KAAK,EAAE,EADgB;AAEvBvB,EAAAA,QAAQ,EAAE;AAFa,CAAzB;;IC9HqB2C;;;;;AACnB,0BAAYzD,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB,qHAoBN,YAAM;AACjB,kCAAkC,MAAKA,KAAvC,CAAQ0D,gBAAR;AAAA,UAAQA,gBAAR,sCAA2B,EAA3B;AACA,UAAQrD,OAAR,GAAoBqD,gBAApB,CAAQrD,OAAR;;AACA,UAAIqD,gBAAgB,IAAIrD,OAAxB,EAAiC;AAC/BA,QAAAA,OAAO,CAACsD,SAAR,CAAkBC,GAAlB,CAAsB,6BAAtB;AACD;AACF,KA1BkB;;AAAA,qHA4BN,YAAM;AACjB,mCAAkC,MAAK5D,KAAvC,CAAQ0D,gBAAR;AAAA,UAAQA,gBAAR,uCAA2B,EAA3B;AACA,UAAQrD,OAAR,GAAoBqD,gBAApB,CAAQrD,OAAR;;AACA,UAAIqD,gBAAgB,IAAIrD,OAAxB,EAAiC;AAC/BA,QAAAA,OAAO,CAACsD,SAAR,CAAkBE,MAAlB,CAAyB,6BAAzB;AACD;AACF,KAlCkB;;AAAA,sHAoCL,YAAM;AAClB,UAAQ5D,aAAR,GAA0B,MAAKD,KAA/B,CAAQC,aAAR;;AACA;AAAA,UAAQ6D,WAAR,yBAAQA,WAAR;;AACA,UAAM3D,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAW;AACpC,YAAI0D,WAAW,CAACzD,OAAZ,IAAuB,CAACyD,WAAW,CAACzD,OAAZ,CAAoBC,QAApB,CAA6BF,KAAK,CAACG,MAAnC,CAA5B,EAAwE;AACtEN,UAAAA,aAAa;AACd;AACF,OAJD;;AAKA,YAAKO,QAAL,CAAc;AACZL,QAAAA,kBAAkB,EAAlBA;AADY,OAAd;;AAGAM,MAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCP,kBAAvC;AACD,KAhDkB;;AAAA,wHAkDH,YAAM;AACpB,UACEA,kBADF,GAEI,MAAKQ,KAFT,CACER,kBADF;AAGAM,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,WAA7B,EAA0CT,kBAA1C;AACD,KAvDkB;;AAAA,yHAyDF,YAAM;AACrB;AACA,wBAGI,MAAKH,KAHT;AAAA,UACEa,SADF,eACEA,SADF;AAAA,UAEEkD,gBAFF,eAEEA,gBAFF;AAIA,UAAMC,iBAAiB,GAAGD,gBAAgB,CAAC9C,CAAjB,IAAsB,CAAhD;AACA,UAAMgD,iBAAiB,GAAGF,gBAAgB,CAAC5C,CAAjB,IAAsB,CAAhD;AAEA,UAAMJ,UAAU,GAAGF,SAAS,CAACR,OAAV,CAAkBW,qBAAlB,EAAnB;AAEA,UAAMC,CAAC,GAAGF,UAAU,CAACE,CAAX,IAAgBF,UAAU,CAACG,IAArC;AACA,UAAMC,CAAC,GAAGJ,UAAU,CAACI,CAAX,IAAgBJ,UAAU,CAACK,GAArC;AAEA,UAAM8C,aAAa,GAAG;AACpB9C,QAAAA,GAAG,EAAED,CADe;AAEpBD,QAAAA,IAAI,EAAED;AAFc,OAAtB;AAKA,UAAI,CAAC,MAAK6C,WAAL,CAAiBzD,OAAtB,EAA+B,OAAO6D,aAAP;;AAC/B,UAAMzC,IAAI,GAAG,MAAKqC,WAAL,CAAiBzD,OAAjB,CAAyBW,qBAAzB,EAAb;;AAEA,UAAIkD,aAAa,CAAC9C,GAAd,GAAoBK,IAAI,CAACC,MAA7B,EAAqC;AACnCwC,QAAAA,aAAa,CAAC9C,GAAd,IAAqBL,UAAU,CAACW,MAAhC;AACAwC,QAAAA,aAAa,CAAC9C,GAAd,IAAqB6C,iBAArB;AACD,OAHD,MAGO;AACLC,QAAAA,aAAa,CAAC9C,GAAd,IAAqBK,IAAI,CAACC,MAA1B;AACAwC,QAAAA,aAAa,CAAC9C,GAAd,IAAqB6C,iBAArB;AACD;;AAEDC,MAAAA,aAAa,CAAChD,IAAd,IAAuBO,IAAI,CAACE,KAAL,GAAa,CAApC;AACAuC,MAAAA,aAAa,CAAChD,IAAd,IAAuBH,UAAU,CAACW,MAAX,GAAoB,CAArB,GAA0B,CAAhD;AACAwC,MAAAA,aAAa,CAAChD,IAAd,IAAsB8C,iBAAtB;AAEA,UAAMG,WAAW,GAAI7C,MAAM,CAACC,UAAP,GAAoBE,IAAI,CAACE,KAA9C;;AACA,UAAIwC,WAAW,GAAGD,aAAa,CAAChD,IAAhC,EAAsC;AACpCgD,QAAAA,aAAa,CAAChD,IAAd,GAAqBiD,WAArB;AACD;;AACD,UAAID,aAAa,CAAChD,IAAd,GAAqB,CAAzB,EAA4B;AAC1BgD,QAAAA,aAAa,CAAChD,IAAd,GAAqB,CAArB;AACD;;AAED,aAAO,MAAKV,QAAL,CAAc;AAAE0D,QAAAA,aAAa,EAAbA;AAAF,OAAd,CAAP;AACD,KApGkB;;AAEjB,UAAKJ,WAAL,gBAAmB/B,yBAAK,CAACC,SAAN,EAAnB;AACA,UAAKrB,KAAL,GAAa;AACXuD,MAAAA,aAAa,EAAE,EADJ;AAEX/D,MAAAA,kBAAkB,EAAE,8BAAM;AAFf,KAAb;AAHiB;AAOlB;;;;WAED,6BAAoB;AAClB,WAAK8B,WAAL;AACA,WAAKmC,cAAL;AACA,WAAKC,UAAL;AACD;;;WAED,gCAAuB;AACrB,WAAKlC,aAAL;AACA,WAAKmC,UAAL;AACD;;;WAoFD,kBAAS;AACP,UAAQJ,aAAR,GAA0B,KAAKvD,KAA/B,CAAQuD,aAAR;AACA,UAAQ9B,QAAR,GAAqB,KAAKpC,KAA1B,CAAQoC,QAAR;AACA,0BACEE,qBAAY,eACVP,+FACEA;AAAK,QAAA,SAAS,EAAC;AAAf,QADF,eAEEA;AACE,QAAA,SAAS,EAAC,iCADZ;AAEE,QAAA,GAAG,EAAE,KAAK+B,WAFZ;AAGE,QAAA,KAAK,EAAE;AACLvB,UAAAA,OAAO,EAAE,cADJ;AAELC,UAAAA,QAAQ,EAAE,OAFL;AAGLtB,UAAAA,IAAI,YAAKuB,IAAI,CAACC,KAAL,CAAWwB,aAAa,CAAChD,IAAzB,CAAL,OAHC;AAILE,UAAAA,GAAG,YAAKqB,IAAI,CAACC,KAAL,CAAWwB,aAAa,CAAC9C,GAAzB,CAAL;AAJE;AAHT,sBAUEW,wCAACwC,YAAD;AACE,QAAA,SAAS,EAAC,sCADZ;AAEE,QAAA,YAAY,EAAE,CAFhB;AAGE,QAAA,SAAS,EAAE,EAHb;AAIE,QAAA,UAAU,EAAE;AAJd,SAMGnC,QANH,CAVF,CAFF,CADU,EAuBV3B,QAAQ,CAACkC,cAAT,CAAwB,4BAAxB,CAvBU,CADd;AA2BD;;;;EArIyCC;AAuI5Ca,gBAAc,CAACZ,SAAf,GAA2B;AACzB5C,EAAAA,aAAa,EAAE6C,6BAAS,CAACC,IAAV,CAAeC,UADL;AAEzBZ,EAAAA,QAAQ,EAAEU,6BAAS,CAACG,SAAV,CAAoB,CAC5BH,6BAAS,CAACI,OADkB,EAE5BJ,6BAAS,CAACK,OAAV,CAAkBL,6BAAS,CAACI,OAA5B,CAF4B,CAApB,EAGPF,UALsB;AAMzBnC,EAAAA,SAAS,EAAEiC,6BAAS,CAACG,SAAV,CAAoB,CAC7BH,6BAAS,CAACC,IADmB,EAE7BD,6BAAS,CAACM,KAAV,CAAgB;AAAE/C,IAAAA,OAAO,EAAEyC,6BAAS,CAACO,UAAV,CAAqBC,OAArB;AAAX,GAAhB,CAF6B,CAApB,EAGRN,UATsB;AAUzBU,EAAAA,gBAAgB,EAAEZ,6BAAS,CAACG,SAAV,CAAoB,CACpCH,6BAAS,CAACC,IAD0B,EAEpCD,6BAAS,CAACM,KAAV,CAAgB;AAAE/C,IAAAA,OAAO,EAAEyC,6BAAS,CAACO,UAAV,CAAqBC,OAArB;AAAX,GAAhB,CAFoC,CAApB,EAGfN,UAbsB;AAczBe,EAAAA,gBAAgB,EAAEjB,6BAAS,CAACM,KAAV,CAAgB;AAChCnC,IAAAA,CAAC,EAAE6B,6BAAS,CAAC0B,MADmB;AAEhCrD,IAAAA,CAAC,EAAE2B,6BAAS,CAAC0B;AAFmB,GAAhB;AAdO,CAA3B;AAmBAf,gBAAc,CAACD,YAAf,GAA8B;AAC5BO,EAAAA,gBAAgB,EAAE;AADU,CAA9B;;ACrJA,IAAMU,KAAK,GAAG,EAAd;IAEa1E,SAAS,GAAG2E;IACZjB,cAAc,GAAGkB;IAEjBC,QAAQ,GAAG,SAAXA,QAAW,OAKlB;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJzC,QAGI,QAHJA,QAGI;AAAA,MAFJ0C,OAEI,QAFJA,OAEI;AAAA,MADJC,OACI,QADJA,OACI;;AACJ,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAO;AAAE,QAAI,CAACF,OAAL,EAAcD,OAAO,CAACG,CAAD,CAAP;AAAa,GAA7D;;AACA,sBACElD;AACE,IAAA,SAAS,EAAEmD,kBAAY,CAAC,CAACL,SAAD,EAAY,8BAAZ,EAA4CE,OAAO,GAAG,SAAH,GAAe,EAAlE,CAAD,CADzB;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,OAAO,EAAEC,gBAHX;AAIE,IAAA,UAAU,EAAE,oBAACC,CAAD,EAAO;AAAE,UAAIA,CAAC,CAACE,OAAF,KAAcV,KAAlB,EAAyBO,gBAAgB,CAACC,CAAD,CAAhB;AAAsB,KAJtE;AAKE,IAAA,QAAQ,EAAE;AALZ,kBAOElD,wCAACqD,cAAD;AACE,IAAA,SAAS,EAAC,oCADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,UAFxB;AAGE,IAAA,KAAK,EAAEP,OAAO,GAAGQ,oBAAW,CAACC,cAAf,GAAgCD,oBAAW,CAACE;AAH5D,KAKGrD,QALH,CAPF,CADF;AAiBD;AAEDwC,QAAQ,CAAC/B,SAAT,GAAqB;AACnBgC,EAAAA,SAAS,EAAE/B,6BAAS,CAACG,SAAV,CAAoB,CAC7BH,6BAAS,CAAC4C,MADmB,EAE7B5C,6BAAS,CAACK,OAAV,CAAkBL,6BAAS,CAAC4C,MAA5B,CAF6B,CAApB,CADQ;AAKnBtD,EAAAA,QAAQ,EAAEU,6BAAS,CAACG,SAAV,CAAoB,CAC5BH,6BAAS,CAAC4C,MADkB,EAE5B5C,6BAAS,CAACI,OAFkB,CAApB,EAGPF,UARgB;AASnB8B,EAAAA,OAAO,EAAEhC,6BAAS,CAACC,IAAV,CAAeC,UATL;AAUnB+B,EAAAA,OAAO,EAAEjC,6BAAS,CAACS;AAVA,CAArB;AAaAqB,QAAQ,CAACpB,YAAT,GAAwB;AACtBqB,EAAAA,SAAS,EAAE,EADW;AAEtBE,EAAAA,OAAO,EAAE;AAFa,CAAxB;;IAMaY,QAAQ,GAAG,SAAXA,QAAW;AAAA,sBACtB5D;AAAK,IAAA,EAAE,EAAC;AAAR,IADsB;AAAA;IAGX6D,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,sBACnC7D;AAAK,IAAA,EAAE,EAAC;AAAR,IADmC;AAAA;AAItB,SAAS8D,WAAT,QAAiD;AAAA,MAA1BC,WAA0B,SAA1BA,WAA0B;AAAA,MAAbC,SAAa,SAAbA,SAAa;;AAC9D,kBAAgCC,cAAQ,CAAC,KAAD,CAAxC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,sBACEnE;AAAK,IAAA,SAAS,EAAC,uBAAf;AAAuC,IAAA,KAAK,EAAE;AAAEQ,MAAAA,OAAO,EAAE;AAAX;AAA9C,KACGuD,WAAW,CAAC;AAAA,WAAMI,WAAW,CAAC,CAACD,QAAF,CAAjB;AAAA,GAAD,CADd,EAEGA,QAAQ,IAAIF,SAAS,CAAC;AAAA,WAAMG,WAAW,CAAC,KAAD,CAAjB;AAAA,GAAD,CAFxB,CADF;AAMD;AAEDL,WAAW,CAAChD,SAAZ,GAAwB;AACtBiD,EAAAA,WAAW,EAAEhD,6BAAS,CAACC,IAAV,CAAeC,UADN;AAEtB+C,EAAAA,SAAS,EAAEjD,6BAAS,CAACC,IAAV,CAAeC;AAFJ,CAAxB;;;;;;;;;"}

package/cjs/ui/DateSeparator.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-d984e855.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var color = require('../color-b30f84a2.js');
+var ui_Label = require('../index-df05e765.js');
+require('../stringSet-2f3588b5.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);
+
+function DateSeparator(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      separatorColor = _ref.separatorColor;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-separator']).join(' ')
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ['sendbird-separator__left', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-separator__text"
+  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ['sendbird-separator__right', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+  }));
+}
+DateSeparator.propTypes = {
+  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].element]),
+  separatorColor: PropTypes__default["default"].oneOf(['ONBACKGROUND_1', 'ONBACKGROUND_2', 'ONBACKGROUND_3', 'ONBACKGROUND_4', 'ONCONTENT_1', 'PRIMARY', 'ERROR'])
+};
+DateSeparator.defaultProps = {
+  className: '',
+  children: /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, "Date Separator"),
+  separatorColor: color.Colors.ONBACKGROUND_4
+};
+
+module.exports = DateSeparator;
+//# sourceMappingURL=DateSeparator.js.map

package/cjs/ui/DateSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSeparator.js","sources":["../../../src/ui/DateSeparator/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport { changeColorToClassName, Colors } from '../../utils/color';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport default function DateSeparator({\n  className,\n  children,\n  separatorColor,\n}) {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">{children}</div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n}\n\nDateSeparator.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.element,\n  ]),\n  separatorColor: PropTypes.oneOf([\n    'ONBACKGROUND_1',\n    'ONBACKGROUND_2',\n    'ONBACKGROUND_3',\n    'ONBACKGROUND_4',\n    'ONCONTENT_1',\n    'PRIMARY',\n    'ERROR',\n  ]),\n};\n\nDateSeparator.defaultProps = {\n  className: '',\n  children: (\n    <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n      Date Separator\n    </Label>\n  ),\n  separatorColor: Colors.ONBACKGROUND_4,\n};\n"],"names":["DateSeparator","className","children","separatorColor","React","Array","isArray","join","changeColorToClassName","propTypes","PropTypes","oneOfType","string","arrayOf","element","oneOf","defaultProps","Label","LabelTypography","CAPTION_2","LabelColors","ONBACKGROUND_2","Colors","ONBACKGROUND_4"],"mappings":";;;;;;;;;;;;;;AAOe,SAASA,aAAT,OAIZ;AAAA,MAHDC,SAGC,QAHDA,SAGC;AAAA,MAFDC,QAEC,QAFDA,QAEC;AAAA,MADDC,cACC,QADDA,cACC;AACD,sBACEC;AACE,IAAA,SAAS,EAAE,uDACLC,KAAK,CAACC,OAAN,CAAcL,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,IAET,oBAFS,GAGTM,IAHS,CAGJ,GAHI;AADb,kBAMEH;AAAK,IAAA,SAAS,EAAE,CAAC,0BAAD,YAAgCI,4BAAsB,CAACL,cAAD,CAAtD,yBAA4FI,IAA5F,CAAiG,GAAjG;AAAhB,IANF,eAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,KAA2CF,QAA3C,CAPF,eAQEE;AAAK,IAAA,SAAS,EAAE,CAAC,2BAAD,YAAiCI,4BAAsB,CAACL,cAAD,CAAvD,yBAA6FI,IAA7F,CAAkG,GAAlG;AAAhB,IARF,CADF;AAYD;AAEDP,aAAa,CAACS,SAAd,GAA0B;AACxBR,EAAAA,SAAS,EAAES,6BAAS,CAACC,SAAV,CAAoB,CAC7BD,6BAAS,CAACE,MADmB,EAE7BF,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACE,MAA5B,CAF6B,CAApB,CADa;AAKxBV,EAAAA,QAAQ,EAAEQ,6BAAS,CAACC,SAAV,CAAoB,CAC5BD,6BAAS,CAACE,MADkB,EAE5BF,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACE,MAA5B,CAF4B,EAG5BF,6BAAS,CAACI,OAHkB,CAApB,CALc;AAUxBX,EAAAA,cAAc,EAAEO,6BAAS,CAACK,KAAV,CAAgB,CAC9B,gBAD8B,EAE9B,gBAF8B,EAG9B,gBAH8B,EAI9B,gBAJ8B,EAK9B,aAL8B,EAM9B,SAN8B,EAO9B,OAP8B,CAAhB;AAVQ,CAA1B;AAqBAf,aAAa,CAACgB,YAAd,GAA6B;AAC3Bf,EAAAA,SAAS,EAAE,EADgB;AAE3BC,EAAAA,QAAQ,eACNE,wCAACa,cAAD;AAAO,IAAA,IAAI,EAAEC,wBAAe,CAACC,SAA7B;AAAwC,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAA3D,sBAHyB;AAO3BlB,EAAAA,cAAc,EAAEmB,YAAM,CAACC;AAPI,CAA7B;;;;"}

package/cjs/ui/Dropdown.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-d984e855.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var ui_Label = require('../index-df05e765.js');
+require('../stringSet-2f3588b5.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);
+
+function useOutsideAlerter(_ref) {
+  var ref = _ref.ref,
+      callback = _ref.callback;
+
+  var handleClickOutside = function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      callback();
+    }
+  };
+
+  React.useEffect(function () {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
+}
+
+var MenuItem = function MenuItem(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "sendbird-dropdown__menu-item",
+    role: "menuitem",
+    onClick: onClick,
+    onKeyPress: function onKeyPress(e) {
+      if (e.keyCode === 13) {
+        onClick(e);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-dropdown__menu-item__text",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, children));
+};
+MenuItem.propTypes = {
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].element]).isRequired,
+  onClick: PropTypes__default["default"].func.isRequired
+};
+/**
+ * For now, this is not a dropdown component that should be used inside forms
+ * This should be used in a list or in a nav-bar where you can click
+ * and a list of options opens up
+ * Also closing the dropdown is a manual operation for now
+ * More options, Aria labels etc should be implemented
+ */
+
+var DropdownMenu = function DropdownMenu(_ref2) {
+  var renderButton = _ref2.renderButton,
+      renderItems = _ref2.renderItems;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var wrapperRef = React.useRef(null);
+  useOutsideAlerter({
+    ref: wrapperRef,
+    callback: function callback() {
+      return setIsOpen(false);
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-dropdown",
+    ref: wrapperRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-dropdown__button"
+  }, renderButton(function () {
+    return setIsOpen(!isOpen);
+  }
+  /** toggle-menu */
+  )), isOpen && /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "sendbird-dropdown__menu"
+  }, renderItems(function () {
+    return setIsOpen(false);
+  }
+  /** close-menu */
+  )));
+};
+
+DropdownMenu.propTypes = {
+  renderButton: PropTypes__default["default"].func.isRequired,
+  renderItems: PropTypes__default["default"].func.isRequired
+};
+
+exports.MenuItem = MenuItem;
+exports["default"] = DropdownMenu;
+//# sourceMappingURL=Dropdown.js.map

package/cjs/ui/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../src/hooks/onClickOutside.jsx","../../../src/ui/Dropdown/index.jsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport default function useOutsideAlerter({\n  ref,\n  callback,\n}) {\n  const handleClickOutside = (event) => {\n    if (ref.current && !ref.current.contains(event.target)) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    // Bind the event listener\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  });\n}\n","import React, { useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport onClickOutside from '../../hooks/onClickOutside';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport const MenuItem = ({ children, onClick }) => (\n  <li\n    className=\"sendbird-dropdown__menu-item\"\n    role=\"menuitem\"\n    onClick={onClick}\n    onKeyPress={(e) => {\n      if (e.keyCode === 13) {\n        onClick(e);\n      }\n    }}\n  >\n    <Label\n      className=\"sendbird-dropdown__menu-item__text\"\n      type={LabelTypography.SUBTITLE_2}\n      color={LabelColors.ONBACKGROUND_1}\n    >\n      {children}\n    </Label>\n  </li>\n);\n\nMenuItem.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n  ]).isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\n/**\n * For now, this is not a dropdown component that should be used inside forms\n * This should be used in a list or in a nav-bar where you can click\n * and a list of options opens up\n * Also closing the dropdown is a manual operation for now\n * More options, Aria labels etc should be implemented\n */\nconst DropdownMenu = ({ renderButton, renderItems }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const wrapperRef = useRef(null);\n  onClickOutside({\n    ref: wrapperRef,\n    callback: () => setIsOpen(false),\n  });\n  return (\n    <div className=\"sendbird-dropdown\" ref={wrapperRef}>\n      <div className=\"sendbird-dropdown__button\">\n        {renderButton(() => setIsOpen(!isOpen)/** toggle-menu */)}\n      </div>\n      {\n        isOpen && (\n          <ul className=\"sendbird-dropdown__menu\">\n            {renderItems(() => setIsOpen(false)/** close-menu */)}\n          </ul>\n        )\n      }\n    </div>\n  );\n};\n\nDropdownMenu.propTypes = {\n  renderButton: PropTypes.func.isRequired,\n  renderItems: PropTypes.func.isRequired,\n};\n\nexport default DropdownMenu;\n"],"names":["useOutsideAlerter","ref","callback","handleClickOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","MenuItem","children","onClick","React","e","keyCode","Label","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_1","propTypes","PropTypes","oneOfType","string","element","isRequired","func","DropdownMenu","renderButton","renderItems","useState","isOpen","setIsOpen","wrapperRef","useRef","onClickOutside"],"mappings":";;;;;;;;;;;;;;;AAEe,SAASA,iBAAT,OAGZ;AAAA,MAFDC,GAEC,QAFDA,GAEC;AAAA,MADDC,QACC,QADDA,QACC;;AACD,MAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAW;AACpC,QAAIH,GAAG,CAACI,OAAJ,IAAe,CAACJ,GAAG,CAACI,OAAJ,CAAYC,QAAZ,CAAqBF,KAAK,CAACG,MAA3B,CAApB,EAAwD;AACtDL,MAAAA,QAAQ;AACT;AACF,GAJD;;AAMAM,EAAAA,eAAS,CAAC,YAAM;AACd;AACAC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCP,kBAAvC;AACA,WAAO,YAAM;AACX;AACAM,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CR,kBAA1C;AACD,KAHD;AAID,GAPQ,CAAT;AAQD;;ICZYS,QAAQ,GAAG,SAAXA,QAAW;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,OAAb,QAAaA,OAAb;AAAA,sBACtBC;AACE,IAAA,SAAS,EAAC,8BADZ;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,OAAO,EAAED,OAHX;AAIE,IAAA,UAAU,EAAE,oBAACE,CAAD,EAAO;AACjB,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBH,QAAAA,OAAO,CAACE,CAAD,CAAP;AACD;AACF;AARH,kBAUED,wCAACG,cAAD;AACE,IAAA,SAAS,EAAC,oCADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,UAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGT,QALH,CAVF,CADsB;AAAA;AAqBxBD,QAAQ,CAACW,SAAT,GAAqB;AACnBV,EAAAA,QAAQ,EAAEW,6BAAS,CAACC,SAAV,CAAoB,CAC5BD,6BAAS,CAACE,MADkB,EAE5BF,6BAAS,CAACG,OAFkB,CAApB,EAGPC,UAJgB;AAKnBd,EAAAA,OAAO,EAAEU,6BAAS,CAACK,IAAV,CAAeD;AALL,CAArB;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;;IACME,YAAY,GAAG,SAAfA,YAAe,QAAmC;AAAA,MAAhCC,YAAgC,SAAhCA,YAAgC;AAAA,MAAlBC,WAAkB,SAAlBA,WAAkB;;AACtD,kBAA4BC,cAAQ,CAAC,KAAD,CAApC;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,UAAU,GAAGC,YAAM,CAAC,IAAD,CAAzB;AACAC,EAAAA,iBAAc,CAAC;AACbrC,IAAAA,GAAG,EAAEmC,UADQ;AAEblC,IAAAA,QAAQ,EAAE;AAAA,aAAMiC,SAAS,CAAC,KAAD,CAAf;AAAA;AAFG,GAAD,CAAd;AAIA,sBACEpB;AAAK,IAAA,SAAS,EAAC,mBAAf;AAAmC,IAAA,GAAG,EAAEqB;AAAxC,kBACErB;AAAK,IAAA,SAAS,EAAC;AAAf,KACGgB,YAAY,CAAC;AAAA,WAAMI,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA;AAAwB;AAAzB,GADf,CADF,EAKIA,MAAM,iBACJnB;AAAI,IAAA,SAAS,EAAC;AAAd,KACGiB,WAAW,CAAC;AAAA,WAAMG,SAAS,CAAC,KAAD,CAAf;AAAA;AAAsB;AAAvB,GADd,CANN,CADF;AAcD;;AAEDL,YAAY,CAACP,SAAb,GAAyB;AACvBQ,EAAAA,YAAY,EAAEP,6BAAS,CAACK,IAAV,CAAeD,UADN;AAEvBI,EAAAA,WAAW,EAAER,6BAAS,CAACK,IAAV,CAAeD;AAFL,CAAzB;;;;;"}