@zohoim/chat-components 1.1.4-beta.1 → 1.1.4-beta.2

package/lib/im/ReplyEditor/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyEditor", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyEditor["default"];
+  }
+});
+
+var _ReplyEditor = _interopRequireDefault(require("./ReplyEditor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyEditor/props/defaultProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var replyEditorDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  themeVariables: _emptyConstants.dummyObject
+};
+var _default = replyEditorDefaultProps;
+exports["default"] = _default;

package/lib/im/ReplyEditor/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _editorPropConstants = require("../../../constants/propConstants/editorPropConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var replyEditorPropTypes = {
+  customStyle: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  content: _propTypes["default"].string.isRequired,
+  EDITORURL: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  features: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_editorPropConstants.features)),
+  formats: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_editorPropConstants.formats)),
+  isHTMLContent: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired,
+  onKeyDown: _propTypes["default"].func,
+  onPaste: _propTypes["default"].func,
+  onEnter: _propTypes["default"].func,
+  onErrorCallback: _propTypes["default"].func,
+  onReadyCallback: _propTypes["default"].func,
+  themeVariables: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    editorProps: _propTypes["default"].object
+  }),
+  getEditorState: _propTypes["default"].func
+};
+var _default = replyEditorPropTypes;
+exports["default"] = _default;

package/lib/im/ReplyEditorExtensions/ReplyEditorExtensions.js

@@ -0,0 +1,160 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyEditorExtensions;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _IMAttachmentHandler = _interopRequireDefault(require("../IMAttachmentHandler/IMAttachmentHandler"));
+
+var _EmojiPopup = _interopRequireDefault(require("../../EmojiPopup/EmojiPopup"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useReplyEditorExtensions = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyEditorExtensions/useReplyEditorExtensions"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ReplyEditorExtensionsModule = _interopRequireDefault(require("./css/ReplyEditorExtensions.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ReplyEditorExtensions(props) {
+  var customStyle = props.customStyle,
+      _props$extensions = props.extensions,
+      extensions = _props$extensions === void 0 ? _emptyConstants.dummyObject : _props$extensions,
+      isHTMLContent = props.isHTMLContent,
+      editor = props.editor;
+  var _extensions$details = extensions.details,
+      details = _extensions$details === void 0 ? _emptyConstants.dummyObject : _extensions$details,
+      _extensions$order = extensions.order,
+      order = _extensions$order === void 0 ? _emptyConstants.dummyArray : _extensions$order;
+  var handleRenderEmojiExtension = (0, _react.useCallback)(function (_ref) {
+    var id = _ref.id,
+        _onSelect = _ref.onSelect,
+        onPopupOpen = _ref.onPopupOpen,
+        onPopupClose = _ref.onPopupClose,
+        componentProps = _ref.componentProps;
+    var needFocusOnSelect = componentProps.needFocusOnSelect;
+    return /*#__PURE__*/_react["default"].createElement(_EmojiPopup["default"], _extends({
+      key: id,
+      onPopupClose: onPopupClose,
+      onPopupOpen: onPopupOpen,
+      onSelect: function onSelect(value) {
+        _onSelect({
+          content: value,
+          needFocus: needFocusOnSelect
+        });
+      }
+    }, componentProps));
+  }, []);
+  var handleRenderImageExtension = (0, _react.useCallback)(function (_ref2) {
+    var id = _ref2.id,
+        componentProps = _ref2.componentProps;
+    return /*#__PURE__*/_react["default"].createElement(_IMAttachmentHandler["default"], _extends({
+      key: id,
+      attachmentType: "image",
+      iconName: "ZD-TT-image",
+      iconSize: "14"
+    }, componentProps));
+  }, []);
+  var handleRenderFileExtension = (0, _react.useCallback)(function (_ref3) {
+    var id = _ref3.id,
+        componentProps = _ref3.componentProps;
+    return /*#__PURE__*/_react["default"].createElement(_IMAttachmentHandler["default"], _extends({
+      key: id,
+      attachmentType: "document",
+      iconName: "ZD-TT-ttAttach",
+      iconSize: "14"
+    }, componentProps));
+  }, []);
+  var defaultRenderMethod = (0, _react.useMemo)(function () {
+    return {
+      emoji: {
+        id: 'emoji',
+        renderItem: handleRenderEmojiExtension
+      },
+      image: {
+        id: 'image',
+        renderItem: handleRenderImageExtension
+      },
+      file: {
+        id: 'file',
+        renderItem: handleRenderFileExtension
+      }
+    };
+  }, [handleRenderEmojiExtension, handleRenderFileExtension, handleRenderImageExtension]);
+
+  var _useReplyEditorExtens = (0, _useReplyEditorExtensions["default"])({
+    extensions: extensions,
+    isHTMLContent: isHTMLContent,
+    editor: editor
+  }),
+      onSelect = _useReplyEditorExtens.onSelect,
+      onPopupOpen = _useReplyEditorExtens.onPopupOpen,
+      onPopupClose = _useReplyEditorExtens.onPopupClose,
+      onRetainSelection = _useReplyEditorExtens.onRetainSelection,
+      onRemoveSelection = _useReplyEditorExtens.onRemoveSelection;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyEditorExtensionsModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    className: newStyle.replyEditorExtensions
+  }, order.map(function (extension) {
+    var _ref4 = details[extension] || {},
+        id = _ref4.id,
+        renderItem = _ref4.renderItem,
+        _ref4$componentProps = _ref4.componentProps,
+        componentProps = _ref4$componentProps === void 0 ? _emptyConstants.dummyObject : _ref4$componentProps;
+
+    var _ref5 = defaultRenderMethod[id] || _emptyConstants.dummyObject,
+        renderMethod = _ref5.renderItem;
+
+    var props = {
+      id: id,
+      onSelect: onSelect,
+      componentProps: componentProps,
+      editor: editor,
+      onPopupOpen: onPopupOpen,
+      onPopupClose: onPopupClose,
+      onRetainSelection: onRetainSelection,
+      onRemoveSelection: onRemoveSelection
+    };
+
+    if (renderItem) {
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        key: id
+      }, renderItem(props));
+    }
+
+    if (renderMethod) {
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        key: id
+      }, renderMethod(props));
+    }
+
+    return null;
+  }));
+}
+
+ReplyEditorExtensions.propTypes = _propTypes["default"];
+ReplyEditorExtensions.defaultProps = _defaultProps["default"];
+ReplyEditorExtensions.displayName = 'ReplyEditorExtensions';

package/lib/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css

@@ -0,0 +1,5 @@
+/** ** Styles *** */
+
+.replyEditorExtensions {
+  /** ** Use this class for css customisation *** */
+}

package/lib/im/ReplyEditorExtensions/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyEditorExtensions", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyEditorExtensions["default"];
+  }
+});
+
+var _ReplyEditorExtensions = _interopRequireDefault(require("./ReplyEditorExtensions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyEditorExtensions/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var replyEditorExtensionsDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = replyEditorExtensionsDefaultProps;
+exports["default"] = _default;

package/lib/im/ReplyEditorExtensions/props/propTypes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var replyEditorExtensionsPropTypes = {
+  customStyle: _propTypes["default"].object,
+  editor: _propTypes["default"].object.isRequired,
+  isHTMLContent: _propTypes["default"].bool,
+  extensions: _propTypes["default"].shape({
+    details: _propTypes["default"].objectOf(_propTypes["default"].shape({
+      componentProps: _propTypes["default"].object,
+      id: _propTypes["default"].string,
+      renderItem: _propTypes["default"].func
+    })),
+    order: _propTypes["default"].array
+  }).isRequired
+};
+var _default = replyEditorExtensionsPropTypes;
+exports["default"] = _default;

package/lib/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyEditorSuggestions;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Emojis = _interopRequireDefault(require("../../Emojis/Emojis"));
+
+var _ReplyEditorSuggestionsPopup = _interopRequireDefault(require("../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup"));
+
+var _useReplyEditorSuggestions = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _regexConstants = require("@zohoim/chat-components-utils/es/constants/regexConstants");
+
+var _ReplyEditorSuggestionsModule = _interopRequireDefault(require("./css/ReplyEditorSuggestions.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ReplyEditorSuggestions(props) {
+  var customStyle = props.customStyle,
+      _props$suggestionDeta = props.suggestionDetails,
+      suggestionDetails = _props$suggestionDeta === void 0 ? _constants.dummyObject : _props$suggestionDeta,
+      suggestionsMapping = props.suggestionsMapping,
+      onSelect = props.onSelect,
+      customProps = props.customProps,
+      getMethods = props.getMethods,
+      onClose = props.onClose;
+  var _suggestionDetails$po = suggestionDetails.position,
+      position = _suggestionDetails$po === void 0 ? _constants.dummyObject : _suggestionDetails$po;
+
+  var _ref = customProps || _constants.dummyObject,
+      _ref$replyEditorSugge = _ref.replyEditorSuggestionsPopupProps,
+      replyEditorSuggestionsPopupProps = _ref$replyEditorSugge === void 0 ? _constants.dummyObject : _ref$replyEditorSugge;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyEditorSuggestionsModule["default"], customStyle);
+  var handleRenderEmoji = (0, _react.useCallback)(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _onSelect = _ref2.onSelect,
+        _ref2$searchText = _ref2.searchText,
+        searchText = _ref2$searchText === void 0 ? '' : _ref2$searchText,
+        componentProps = _ref2.componentProps,
+        getMethods = _ref2.getMethods;
+
+    var _ref3 = componentProps || {},
+        _ref3$searchTextLenFo = _ref3.searchTextLenForShow,
+        searchTextLenForShow = _ref3$searchTextLenFo === void 0 ? 2 : _ref3$searchTextLenFo; // (-1) -> ':' string is not valid for count.
+
+
+    var isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
+    return isShowEmojiPopup ? /*#__PURE__*/_react["default"].createElement(_Emojis["default"], _extends({
+      emojisRowType: "single",
+      getMethods: getMethods,
+      isShowGroupBasedList: false,
+      isShowOnlyContent: true,
+      isShowSearchBox: false,
+      needAutoFocus: false,
+      onSelect: function onSelect(value) {
+        _onSelect && _onSelect({
+          content: value
+        });
+      },
+      searchString: searchText
+    }, componentProps)) : null;
+  }, []);
+  var defaultRenderMethod = (0, _react.useMemo)(function () {
+    return _defineProperty({
+      ':': handleRenderEmoji
+    }, _regexConstants.emojiRegex, handleRenderEmoji);
+  }, [handleRenderEmoji]);
+
+  var _useReplyEditorSugges = (0, _useReplyEditorSuggestions["default"])({
+    defaultRenderMethod: defaultRenderMethod,
+    suggestionDetails: suggestionDetails,
+    suggestionsMapping: suggestionsMapping,
+    onSelect: onSelect,
+    getMethods: getMethods,
+    onClose: onClose
+  }),
+      suggestionElement = _useReplyEditorSugges.suggestionElement,
+      _useReplyEditorSugges2 = _useReplyEditorSugges.popupProps,
+      popupProps = _useReplyEditorSugges2 === void 0 ? _constants.dummyObject : _useReplyEditorSugges2;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: newStyle.suggestionPopup
+  }, /*#__PURE__*/_react["default"].createElement(_ReplyEditorSuggestionsPopup["default"], _extends({
+    onClose: onClose,
+    suggestionElement: suggestionElement,
+    targetPosition: position
+  }, replyEditorSuggestionsPopupProps, popupProps)));
+}
+
+ReplyEditorSuggestions.propTypes = _propTypes["default"];
+ReplyEditorSuggestions.defaultProps = _defaultProps["default"];
+ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';

package/lib/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css

@@ -0,0 +1,8 @@
+/** ** Styles *** */
+
+.suggestionPopup {
+  /** ** Use this class name for css customisation *** */
+  bottom: 100% ;
+  height: auto ;
+  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.13);
+}

package/lib/im/ReplyEditorSuggestions/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyEditorSuggestions", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyEditorSuggestions["default"];
+  }
+});
+
+var _ReplyEditorSuggestions = _interopRequireDefault(require("./ReplyEditorSuggestions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyEditorSuggestions/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+/** ** Constants *** */
+var replyEditorSuggestionsDefaultProps = {
+  customStyle: _constants.dummyObject
+};
+var _default = replyEditorSuggestionsDefaultProps;
+exports["default"] = _default;

package/lib/im/ReplyEditorSuggestions/props/propTypes.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var replyEditorSuggestionsPropTypes = {
+  customStyle: _propTypes["default"].object,
+  suggestionDetails: _propTypes["default"].shape({
+    editor: _propTypes["default"].object,
+    searchText: _propTypes["default"].string,
+    triggerDetails: _propTypes["default"].shape({
+      trigger: _propTypes["default"].string
+    })
+  }).isRequired,
+  suggestionsMapping: _propTypes["default"].objectOf(_propTypes["default"].shape({
+    componentProps: _propTypes["default"].object,
+    popupProps: _propTypes["default"].object,
+    renderItem: _propTypes["default"].func
+  })).isRequired,
+  onSelect: _propTypes["default"].func,
+  getMethods: _propTypes["default"].func,
+  onClose: _propTypes["default"].func
+};
+var _default = replyEditorSuggestionsPropTypes;
+exports["default"] = _default;

package/lib/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReplyEditorSuggestionsPopupComp = ReplyEditorSuggestionsPopupComp;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
+
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/es/DropBox/DropBox"));
+
+var _Modal = _interopRequireDefault(require("@zohodesk/components/es/Modal/Modal"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useReplyEditorSuggestionsPopup = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+var _constants2 = require("../../constants");
+
+var _ReplyEditorSuggestionsPopupModule = _interopRequireDefault(require("./css/ReplyEditorSuggestionsPopup.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ReplyEditorSuggestionsPopupComp(props) {
+  var customStyle = props.customStyle,
+      _props$targetPosition = props.targetPosition,
+      targetPosition = _props$targetPosition === void 0 ? _constants.dummyObject : _props$targetPosition,
+      onClose = props.onClose,
+      popupSize = props.popupSize,
+      customProps = props.customProps,
+      suggestionElement = props.suggestionElement,
+      needPositionUpdate = props.needPositionUpdate,
+      defaultPosition = props.defaultPosition,
+      getTargetRef = props.getTargetRef,
+      getContainerRef = props.getContainerRef,
+      position = props.position,
+      togglePopup = props.togglePopup,
+      isPopupReady = props.isPopupReady,
+      isPopupOpen = props.isPopupOpen,
+      removeClose = props.removeClose,
+      openPopupOnly = props.openPopupOnly,
+      closePopupOnly = props.closePopupOnly,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      positionsOffset = props.positionsOffset;
+
+  var _ref = customProps || _constants.dummyObject,
+      _ref$dropBoxProps = _ref.dropBoxProps,
+      dropBoxProps = _ref$dropBoxProps === void 0 ? _constants.dummyObject : _ref$dropBoxProps;
+
+  var _useReplyEditorSugges = (0, _useReplyEditorSuggestionsPopup["default"])({
+    suggestionElement: suggestionElement,
+    targetPosition: targetPosition,
+    needPositionUpdate: needPositionUpdate,
+    defaultPosition: defaultPosition,
+    onClose: onClose,
+    openPopupOnly: openPopupOnly,
+    closePopupOnly: closePopupOnly,
+    isPopupOpen: isPopupOpen,
+    togglePopup: togglePopup
+  }),
+      targetElementStyle = _useReplyEditorSugges.targetElementStyle;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyEditorSuggestionsPopupModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    portalId: _constants2.EDITOR_POPUP_TARGET_PORTAL
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: getTargetRef,
+    className: newStyle.hiddenTarget,
+    style: targetElementStyle
+  }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], _extends({
+    boxPosition: position,
+    customStyle: _constants.dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: _constants2.EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize
+  }, dropBoxProps), suggestionElement) : null);
+}
+
+var ReplyEditorSuggestionsPopup = (0, _Popup["default"])(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+ReplyEditorSuggestionsPopupComp.propTypes = _propTypes["default"];
+ReplyEditorSuggestionsPopupComp.defaultProps = _defaultProps["default"];
+ReplyEditorSuggestionsPopup.propTypes = _propTypes["default"];
+ReplyEditorSuggestionsPopup.defaultProps = _defaultProps["default"];
+ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
+var _default = ReplyEditorSuggestionsPopup;
+exports["default"] = _default;

package/lib/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css

@@ -0,0 +1,7 @@
+/** ** Styles *** */
+.hiddenTarget {
+  height: var(--zd_size15) ;
+  width: var(--zd_size25) ;
+  visibility: hidden;
+  position: fixed;
+}

package/lib/im/ReplyEditorSuggestionsPopup/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyEditorSuggestionsPopup", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyEditorSuggestionsPopup["default"];
+  }
+});
+
+var _ReplyEditorSuggestionsPopup = _interopRequireDefault(require("./ReplyEditorSuggestionsPopup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyEditorSuggestionsPopup/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var replyEditorSuggestionsPopupDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  popupSize: 'xxlarge',
+  defaultPosition: 'bottomCenterToRight',
+  needPositionUpdate: true,
+  customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
+};
+var _default = replyEditorSuggestionsPopupDefaultProps;
+exports["default"] = _default;