@zohoim/chat-components 1.0.9-alpha.0 → 1.0.9-beta.2

package/es/im/ReplyComposerFooter/ReplyComposerFooter.js

@@ -0,0 +1,41 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import ReplyEditorExtensions from "../ReplyEditorExtensions/ReplyEditorExtensions";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import replyComposerFooterDefaultProps from "./props/defaultProps";
+import replyComposerFooterPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from "./css/ReplyComposerFooter.module.css";
+export default function ReplyComposerFooter(props) {
+  const {
+    customStyle,
+    editor,
+    isHTMLContent,
+    extensions,
+    renderButtons
+  } = props;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const footerButtons = useMemo(() => renderHandler(renderButtons)(), [renderButtons]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.replyComposerFooter
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReplyEditorExtensions, {
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent
+  })), footerButtons || null);
+}
+ReplyComposerFooter.propTypes = replyComposerFooterPropTypes;
+ReplyComposerFooter.defaultProps = replyComposerFooterDefaultProps;
+ReplyComposerFooter.displayName = 'ReplyComposerFooter';

package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css

@@ -0,0 +1,5 @@
+/** ** Styles *** */
+.replyComposerFooter {
+  display: flex;
+  padding: 0 var(--zd_size16) var(--zd_size16) ;
+}

package/es/im/ReplyComposerFooter/index.js

@@ -0,0 +1 @@
+export { default as ReplyComposerFooter } from "./ReplyComposerFooter";

package/es/im/ReplyComposerFooter/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const replyComposerFooterDefaultProps = {
+  customStyle: dummyObject,
+  isHTMLContent: dummyArray,
+  extensions: dummyArray
+};
+export default replyComposerFooterDefaultProps;

package/es/im/ReplyComposerFooter/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyComposerFooterPropTypes = {
+  customStyle: PropTypes.object,
+  editor: PropTypes.object.isRequired,
+  isHTMLContent: PropTypes.bool,
+  extensions: PropTypes.shape({
+    details: PropTypes.objectOf(PropTypes.shape({
+      componentProps: PropTypes.object,
+      id: PropTypes.string,
+      renderItem: PropTypes.func
+    })),
+    order: PropTypes.array
+  }).isRequired,
+  renderButtons: PropTypes.func
+};
+export default replyComposerFooterPropTypes;

package/es/im/ReplyEditor/ReplyEditor.js

@@ -0,0 +1,103 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import Editor from "../../rte/Editor/Editor";
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditor from '@zohoim/chat-components-hooks/es/im/ReplyEditor/useReplyEditor';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import replyEditorDefaultProps from "./props/defaultProps";
+import replyEditorPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditor.module.css";
+export default function ReplyEditor(props) {
+  const {
+    id,
+    content,
+    EDITORURL,
+    placeHolder,
+    features,
+    formats,
+    isHTMLContent,
+    onChange,
+    onKeyDown,
+    onPaste,
+    onEnter,
+    onErrorCallback: propOnErrorCallback,
+    onReadyCallback: propOnReadyCallback,
+    customStyle,
+    customProps = dummyObject,
+    getEditorState,
+    themeVariables
+  } = props;
+  const {
+    editorProps = dummyObject
+  } = customProps;
+  const {
+    customStyle: editorCustomStyle = dummyObject
+  } = editorProps;
+  const {
+    onReadyCallback,
+    onErrorCallback,
+    isRenderEditor,
+    isShowEditor,
+    appearance,
+    isRTL
+  } = useReplyEditor({
+    onErrorCallback: propOnErrorCallback,
+    onReadyCallback: propOnReadyCallback,
+    getEditorState,
+    onEnter,
+    themeVariables
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    editorClass
+  } = cssJSLogic(props, newStyle, {
+    isShowEditor
+  });
+  const editorNewCustomStyle = useMemo(() => ({
+    editorWrapper: newStyle.editorWrapper,
+    editor: newStyle.editor,
+    $editableDiv: newStyle.editableDiv,
+    ...editorCustomStyle
+  }), [newStyle, editorCustomStyle]);
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.replyEditor
+  }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
+    className: editorClass
+  }, /*#__PURE__*/React.createElement(Editor, {
+    appearance: appearance,
+    content: content,
+    customStyle: editorNewCustomStyle,
+    EDITORURL: EDITORURL,
+    features: features,
+    formats: formats,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    isRTL: isRTL,
+    onChange: onChange,
+    onErrorCallback: onErrorCallback,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    onReadyCallback: onReadyCallback,
+    placeHolder: placeHolder,
+    ...editorProps
+  })) : null);
+}
+ReplyEditor.propTypes = replyEditorPropTypes;
+ReplyEditor.defaultProps = replyEditorDefaultProps;
+ReplyEditor.displayName = 'ReplyEditor';

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -0,0 +1,38 @@
+/** ** Styles *** */
+
+.replyEditor {
+  /** ** Use this class for css customisations *** */
+}
+
+.hiddenEditor {
+  /** ** Use this class for css customisations *** */
+  /* display: none; */
+  /* visibility: hidden; */
+}
+
+.editableDiv {
+  max-height: var(--zd_size250)  !important;
+  min-height: var(--zd_size80)  !important;
+  overflow: auto !important;
+  font-size: var(--zd_font_size14)  !important;
+  font-family: var(--zd_regular) !important;
+  line-height: 22px !important;
+
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
+  --rte-placeholder-color: var(
+    --imlib_chat_components_replyEditor_placeholder
+  ) !important;
+  --rte-link-text-color: var(
+    --imlib_chat_components_replyEditor_color
+  ) !important;
+  padding: 0  !important;
+}
+
+.editorWrapper {
+  /** ** Use this class for css customisations *** */
+}
+
+.editor {
+  /** ** Use this class for css customisations *** */
+}

package/es/im/ReplyEditor/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style, state) {
+  const editorClass = compileClassNames({
+    [style.hiddenEditor]: !state.isShowEditor
+  });
+  return {
+    editorClass
+  };
+}

package/es/im/ReplyEditor/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditor } from "./ReplyEditor";

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

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  themeVariables: dummyObject
+};
+export default replyEditorDefaultProps;

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

@@ -0,0 +1,27 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { features, formats } from "../../../constants/propConstants/editorPropConstants";
+const replyEditorPropTypes = {
+  customStyle: PropTypes.object,
+  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  EDITORURL: PropTypes.string,
+  placeHolder: PropTypes.string,
+  features: PropTypes.arrayOf(PropTypes.oneOf(features)),
+  formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
+  isHTMLContent: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func,
+  onEnter: PropTypes.func,
+  onErrorCallback: PropTypes.func,
+  onReadyCallback: PropTypes.func,
+  themeVariables: PropTypes.object,
+  customProps: PropTypes.shape({
+    editorProps: PropTypes.object
+  }),
+  getEditorState: PropTypes.func
+};
+export default replyEditorPropTypes;

package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js

@@ -0,0 +1,149 @@
+/** ** Libraries *** */
+import React, { useCallback, useMemo } from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import IMAttachmentHandler from "../IMAttachmentHandler/IMAttachmentHandler";
+import EmojiPopup from "../../EmojiPopup/EmojiPopup";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditorExtensions from '@zohoim/chat-components-hooks/es/im/ReplyEditorExtensions/useReplyEditorExtensions';
+/** ** Constants *** */
+
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import replyEditorExtensionsDefaultProps from "./props/defaultProps";
+import replyEditorExtensionsPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorExtensions.module.css";
+export default function ReplyEditorExtensions(props) {
+  const {
+    customStyle,
+    extensions = dummyObject,
+    isHTMLContent,
+    editor
+  } = props;
+  const {
+    details = dummyObject,
+    order = dummyArray
+  } = extensions;
+  const handleRenderEmojiExtension = useCallback(_ref => {
+    let {
+      id,
+      onSelect,
+      onPopupOpen,
+      onPopupClose,
+      componentProps
+    } = _ref;
+    const {
+      needFocusOnSelect
+    } = componentProps;
+    return /*#__PURE__*/React.createElement(EmojiPopup, {
+      key: id,
+      onPopupClose: onPopupClose,
+      onPopupOpen: onPopupOpen,
+      onSelect: value => {
+        onSelect({
+          content: value,
+          needFocus: needFocusOnSelect
+        });
+      },
+      ...componentProps
+    });
+  }, []);
+  const handleRenderImageExtension = useCallback(_ref2 => {
+    let {
+      id,
+      componentProps
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+      key: id,
+      attachmentType: "image",
+      iconName: "ZD-TT-image",
+      iconSize: "14",
+      ...componentProps
+    });
+  }, []);
+  const handleRenderFileExtension = useCallback(_ref3 => {
+    let {
+      id,
+      componentProps
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+      key: id,
+      attachmentType: "document",
+      iconName: "ZD-TT-ttAttach",
+      iconSize: "14",
+      ...componentProps
+    });
+  }, []);
+  const defaultRenderMethod = useMemo(() => ({
+    emoji: {
+      id: 'emoji',
+      renderItem: handleRenderEmojiExtension
+    },
+    image: {
+      id: 'image',
+      renderItem: handleRenderImageExtension
+    },
+    file: {
+      id: 'file',
+      renderItem: handleRenderFileExtension
+    }
+  }), [handleRenderEmojiExtension, handleRenderFileExtension, handleRenderImageExtension]);
+  const {
+    onSelect,
+    onPopupOpen,
+    onPopupClose,
+    onRetainSelection,
+    onRemoveSelection
+  } = useReplyEditorExtensions({
+    extensions,
+    isHTMLContent,
+    editor
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: newStyle.replyEditorExtensions
+  }, order.map(extension => {
+    const {
+      id,
+      renderItem,
+      componentProps = dummyObject
+    } = details[extension] || {};
+    const {
+      renderItem: renderMethod
+    } = defaultRenderMethod[id] || dummyObject;
+    const props = {
+      id,
+      onSelect,
+      componentProps,
+      editor,
+      onPopupOpen,
+      onPopupClose,
+      onRetainSelection,
+      onRemoveSelection
+    };
+
+    if (renderItem) {
+      return /*#__PURE__*/React.createElement(Box, {
+        key: id
+      }, renderItem(props));
+    }
+
+    if (renderMethod) {
+      return /*#__PURE__*/React.createElement(Box, {
+        key: id
+      }, renderMethod(props));
+    }
+
+    return null;
+  }));
+}
+ReplyEditorExtensions.propTypes = replyEditorExtensionsPropTypes;
+ReplyEditorExtensions.defaultProps = replyEditorExtensionsDefaultProps;
+ReplyEditorExtensions.displayName = 'ReplyEditorExtensions';

package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css

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

package/es/im/ReplyEditorExtensions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";

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

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorExtensionsDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyEditorExtensionsDefaultProps;

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

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorExtensionsPropTypes = {
+  customStyle: PropTypes.object,
+  editor: PropTypes.object.isRequired,
+  isHTMLContent: PropTypes.bool,
+  extensions: PropTypes.shape({
+    details: PropTypes.objectOf(PropTypes.shape({
+      componentProps: PropTypes.object,
+      id: PropTypes.string,
+      renderItem: PropTypes.func
+    })),
+    order: PropTypes.array
+  }).isRequired
+};
+export default replyEditorExtensionsPropTypes;

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -0,0 +1,87 @@
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import Emojis from "../../Emojis/Emojis";
+import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
+/** ** Hooks *** */
+
+import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
+import replyEditorSuggestionsPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorSuggestions.module.css";
+export default function ReplyEditorSuggestions(props) {
+  const {
+    customStyle,
+    suggestionDetails = dummyObject,
+    suggestionsMapping,
+    onSelect,
+    customProps,
+    getMethods,
+    onClose
+  } = props;
+  const {
+    position = dummyObject
+  } = suggestionDetails;
+  const {
+    replyEditorSuggestionsPopupProps = dummyObject
+  } = customProps || dummyObject;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const handleRenderEmoji = useCallback(function () {
+    let {
+      onSelect,
+      searchText,
+      componentProps
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const isShowEmojiPopup = searchText.length > 1;
+    return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
+      emojisRowType: "single",
+      isShowGroupBasedList: false,
+      isShowOnlyContent: true,
+      isShowSearchBox: false,
+      needAutoFocus: false,
+      onSelect: value => {
+        onSelect && onSelect({
+          content: value
+        });
+      },
+      searchString: searchText,
+      ...componentProps
+    }) : null;
+  }, []);
+  const defaultRenderMethod = useMemo(() => ({
+    ':': handleRenderEmoji
+  }), [handleRenderEmoji]);
+  const {
+    suggestionElement,
+    popupProps = dummyObject
+  } = useReplyEditorSuggestions({
+    defaultRenderMethod,
+    suggestionDetails,
+    suggestionsMapping,
+    onSelect,
+    getMethods,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.suggestionPopup
+  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
+    onClose: onClose,
+    suggestionElement: suggestionElement,
+    targetPosition: position,
+    ...replyEditorSuggestionsPopupProps,
+    ...popupProps
+  }));
+}
+ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
+ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
+ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';

package/es/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/es/im/ReplyEditorSuggestions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";

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

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const replyEditorSuggestionsDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyEditorSuggestionsDefaultProps;

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

@@ -0,0 +1,20 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorSuggestionsPropTypes = {
+  customStyle: PropTypes.object,
+  suggestionDetails: PropTypes.shape({
+    editor: PropTypes.object,
+    searchText: PropTypes.string,
+    triggerDetails: PropTypes.shape({
+      trigger: PropTypes.string
+    })
+  }).isRequired,
+  suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
+    componentProps: PropTypes.object,
+    renderItem: PropTypes.func
+  })).isRequired,
+  onSelect: PropTypes.func,
+  getMethods: PropTypes.func,
+  onClose: PropTypes.func
+};
+export default replyEditorSuggestionsPropTypes;

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -0,0 +1,90 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
+/** ** Constants *** */
+
+import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
+import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { EDITOR_POPUP_PORTAL } from "../../constants";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorSuggestionsPopup.module.css";
+export function ReplyEditorSuggestionsPopupComp(props) {
+  const {
+    customStyle,
+    targetPosition = dummyObject,
+    onClose,
+    popupSize,
+    customProps,
+    suggestionElement,
+    needPositionUpdate,
+    defaultPosition,
+
+    /** ** Popup Props *** */
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    openPopupOnly,
+    closePopupOnly,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const {
+    dropBoxProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    targetElementStyle
+  } = useReplyEditorSuggestionsPopup({
+    suggestionElement,
+    targetPosition,
+    needPositionUpdate,
+    defaultPosition,
+    onClose,
+    openPopupOnly,
+    closePopupOnly,
+    isPopupOpen,
+    togglePopup
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: getTargetRef,
+    className: newStyle.hiddenTarget,
+    style: targetElementStyle
+  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    customStyle: dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize,
+    ...dropBoxProps
+  }, suggestionElement) : null);
+}
+const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
+export default ReplyEditorSuggestionsPopup;