@dhis2/analytics 23.11.1 → 23.12.0

package/build/cjs/components/Interpretations/common/Interpretation/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Interpretation", {
+  enumerable: true,
+  get: function () {
+    return _Interpretation.Interpretation;
+  }
+});
+Object.defineProperty(exports, "InterpretationSharingLink", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationSharingLink.InterpretationSharingLink;
+  }
+});
+
+var _Interpretation = require("./Interpretation.js");
+
+var _InterpretationSharingLink = require("./InterpretationSharingLink.js");

package/build/cjs/components/Interpretations/common/Interpretation/useLike.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLike = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _react = require("react");
+
+const useLike = _ref => {
+  let {
+    interpretation,
+    currentUser,
+    onComplete
+  } = _ref;
+  const resource = "interpretations/".concat(interpretation.id, "/like");
+  const likeMutationRef = (0, _react.useRef)({
+    resource,
+    type: 'create'
+  });
+  const unlikeMutationRef = (0, _react.useRef)({
+    resource,
+    type: 'delete'
+  });
+  const [like, {
+    loading: likeLoading
+  }] = (0, _appRuntime.useDataMutation)(likeMutationRef.current, {
+    onComplete
+  });
+  const [unlike, {
+    loading: unlikeLoading
+  }] = (0, _appRuntime.useDataMutation)(unlikeMutationRef.current, {
+    onComplete
+  });
+  const [isLikedByCurrentUser, setIsLikedByCurrentUser] = (0, _react.useState)(false);
+
+  const toggleLike = () => {
+    isLikedByCurrentUser ? unlike() : like();
+  };
+
+  (0, _react.useEffect)(() => {
+    setIsLikedByCurrentUser(interpretation.likedBy.some(likedBy => likedBy.id === currentUser.id));
+  }, [currentUser, interpretation]);
+  return {
+    isLikedByCurrentUser,
+    toggleLike,
+    toggleLikeInProgress: likeLoading || unlikeLoading
+  };
+};
+
+exports.useLike = useLike;

package/build/cjs/components/Interpretations/common/Message/Message.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Message = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _d2UiRichText = require("@dhis2/d2-ui-rich-text");
+
+var _ui = require("@dhis2/ui");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Message = _ref => {
+  let {
+    children,
+    text,
+    created,
+    username
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "header"
+  }, /*#__PURE__*/_react.default.createElement(_ui.UserAvatar, {
+    name: username,
+    extrasmall: true
+  }), username, /*#__PURE__*/_react.default.createElement("time", {
+    dateTime: created,
+    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]])
+  }, (0, _moment.default)(created).format('lll'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "content"
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, text)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "footer"
+  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2436588813",
+    dynamic: [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]
+  }, [".container.__jsx-style-dynamic-selector{padding:".concat(_ui.spacers.dp8, ";background-color:").concat(_ui.colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(_ui.spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(_ui.colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(_ui.colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(_ui.colors.grey900, ";}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(_ui.spacers.dp8, ";}")]));
+};
+
+exports.Message = Message;
+Message.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  created: _propTypes.default.string.isRequired,
+  text: _propTypes.default.string.isRequired,
+  username: _propTypes.default.string.isRequired
+};

package/build/cjs/components/Interpretations/common/Message/MessageButtonStrip.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageButtonStrip = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageButtonStrip = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["1819118406", [_ui.spacers.dp8, _ui.spacers.dp8]]]) + " " + "container"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1819118406",
+    dynamic: [_ui.spacers.dp8, _ui.spacers.dp8]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp8, ";margin-top:").concat(_ui.spacers.dp8, ";}")]));
+};
+
+exports.MessageButtonStrip = MessageButtonStrip;
+MessageButtonStrip.propTypes = {
+  children: _propTypes.default.node.isRequired
+};

package/build/cjs/components/Interpretations/common/Message/MessageEditorContainer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageEditorContainer = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageEditorContainer = _ref => {
+  let {
+    children,
+    currentUser
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3807884305", [_ui.spacers.dp8, _ui.spacers.dp12]]]) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3807884305", [_ui.spacers.dp8, _ui.spacers.dp12]]]) + " " + "avatar"
+  }, /*#__PURE__*/_react.default.createElement(_ui.UserAvatar, {
+    name: currentUser.name,
+    medium: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3807884305", [_ui.spacers.dp8, _ui.spacers.dp12]]]) + " " + "editor"
+  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3807884305",
+    dynamic: [_ui.spacers.dp8, _ui.spacers.dp12]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp8, ";margin-top:").concat(_ui.spacers.dp12, ";}"), ".avatar.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".editor.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+};
+
+exports.MessageEditorContainer = MessageEditorContainer;
+MessageEditorContainer.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  children: _propTypes.default.node
+};

package/build/cjs/components/Interpretations/common/Message/MessageIconButton.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageIconButton = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageIconButton = _ref => {
+  let {
+    tooltipContent,
+    disabled,
+    onClick,
+    selected,
+    count,
+    iconComponent: Icon
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    closeDelay: 200,
+    content: tooltipContent
+  }, _ref2 => {
+    let {
+      ref,
+      onMouseOver,
+      onMouseOut
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      ref: ref,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      className: _style.default.dynamic([["3807261824", [_ui.spacers.dp4, _ui.colors.grey700, _ui.colors.teal600, _ui.colors.grey900, _ui.colors.teal800, _ui.colors.teal500, _ui.colors.teal700]]]) + " " + "wrapper"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: event => {
+        event.stopPropagation();
+        onClick();
+      },
+      disabled: disabled,
+      className: _style.default.dynamic([["3807261824", [_ui.spacers.dp4, _ui.colors.grey700, _ui.colors.teal600, _ui.colors.grey900, _ui.colors.teal800, _ui.colors.teal500, _ui.colors.teal700]]]) + " " + ((0, _classnames.default)('button', {
+        selected
+      }) || "")
+    }, count && count, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
+      id: "3807261824",
+      dynamic: [_ui.spacers.dp4, _ui.colors.grey700, _ui.colors.teal600, _ui.colors.grey900, _ui.colors.teal800, _ui.colors.teal500, _ui.colors.teal700]
+    }, [".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".button.__jsx-style-dynamic-selector{all:unset;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:".concat(_ui.spacers.dp4, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:12px;line-height:14px;color:").concat(_ui.colors.grey700, ";}"), ".button.selected.__jsx-style-dynamic-selector{color:".concat(_ui.colors.teal600, ";font-weight:500;}"), ".button.__jsx-style-dynamic-selector:hover{color:".concat(_ui.colors.grey900, ";}"), ".button.selected.__jsx-style-dynamic-selector:hover{color:".concat(_ui.colors.teal800, ";}"), ".button.selected.__jsx-style-dynamic-selector svg{color:".concat(_ui.colors.teal500, ";}"), ".button.selected.__jsx-style-dynamic-selector:hover svg{color:".concat(_ui.colors.teal700, ";}")]));
+  });
+};
+
+exports.MessageIconButton = MessageIconButton;
+MessageIconButton.propTypes = {
+  iconComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired,
+  tooltipContent: _propTypes.default.string.isRequired,
+  count: _propTypes.default.number,
+  disabled: _propTypes.default.bool,
+  selected: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};

package/build/cjs/components/Interpretations/common/Message/MessageInput.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageInput = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+const MessageInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", _extends({
+  ref: ref
+}, props, {
+  className: _style.default.dynamic([["2769305849", [_ui.colors.grey900, _ui.colors.grey500, _ui.theme.focus, _ui.colors.grey100, _ui.colors.grey500, _ui.theme.disabled]]]) + " " + (props && props.className != null && props.className || "input")
+})), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2769305849",
+  dynamic: [_ui.colors.grey900, _ui.colors.grey500, _ui.theme.focus, _ui.colors.grey100, _ui.colors.grey500, _ui.theme.disabled]
+}, [".input.__jsx-style-dynamic-selector{width:100%;box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:".concat(_ui.colors.grey900, ";background-color:white;padding:12px 11px 10px;outline:0;border:1px solid ").concat(_ui.colors.grey500, ";border-radius:3px;box-shadow:inset 0 1px 2px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}"), "input.__jsx-style-dynamic-selector:focus{outline:none;box-shadow:0 0 0 3px ".concat(_ui.theme.focus, ";}"), "input.disabled.__jsx-style-dynamic-selector{background-color:".concat(_ui.colors.grey100, ";border-color:").concat(_ui.colors.grey500, ";color:").concat(_ui.theme.disabled, ";cursor:not-allowed;}")])));
+exports.MessageInput = MessageInput;
+MessageInput.displayName = 'MessageInput';

package/build/cjs/components/Interpretations/common/Message/MessageStatsBar.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageStatsBar = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageStatsBar = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2534339265", [_ui.spacers.dp12]]]) + " " + "container"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2534339265",
+    dynamic: [_ui.spacers.dp12]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp12, ";}")]));
+};
+
+exports.MessageStatsBar = MessageStatsBar;
+MessageStatsBar.propTypes = {
+  children: _propTypes.default.node.isRequired
+};

package/build/cjs/components/Interpretations/common/Message/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Message", {
+  enumerable: true,
+  get: function () {
+    return _Message.Message;
+  }
+});
+Object.defineProperty(exports, "MessageButtonStrip", {
+  enumerable: true,
+  get: function () {
+    return _MessageButtonStrip.MessageButtonStrip;
+  }
+});
+Object.defineProperty(exports, "MessageEditorContainer", {
+  enumerable: true,
+  get: function () {
+    return _MessageEditorContainer.MessageEditorContainer;
+  }
+});
+Object.defineProperty(exports, "MessageIconButton", {
+  enumerable: true,
+  get: function () {
+    return _MessageIconButton.MessageIconButton;
+  }
+});
+Object.defineProperty(exports, "MessageInput", {
+  enumerable: true,
+  get: function () {
+    return _MessageInput.MessageInput;
+  }
+});
+Object.defineProperty(exports, "MessageStatsBar", {
+  enumerable: true,
+  get: function () {
+    return _MessageStatsBar.MessageStatsBar;
+  }
+});
+
+var _Message = require("./Message.js");
+
+var _MessageButtonStrip = require("./MessageButtonStrip.js");
+
+var _MessageIconButton = require("./MessageIconButton.js");
+
+var _MessageInput = require("./MessageInput.js");
+
+var _MessageEditorContainer = require("./MessageEditorContainer.js");
+
+var _MessageStatsBar = require("./MessageStatsBar.js");

package/build/cjs/components/Interpretations/common/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTextEditor = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _d2UiRichText = require("@dhis2/d2-ui-rich-text");
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _UserMentionWrapper = require("../UserMention/UserMentionWrapper.js");
+
+var _markdownHandler = require("./markdownHandler.js");
+
+var _RichTextEditorStyle = require("./styles/RichTextEditor.style.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const EmojisPopover = _ref => {
+  let {
+    onInsertMarkdown,
+    onClose,
+    reference
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ui.Popover, {
+    reference: reference,
+    onClickOutside: onClose
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "jsx-".concat(_RichTextEditorStyle.emojisPopoverClasses.__hash) + " " + "emojisList"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => onInsertMarkdown(_markdownHandler.EMOJI_SMILEY_FACE),
+    className: "jsx-".concat(_RichTextEditorStyle.emojisPopoverClasses.__hash)
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, _markdownHandler.emojis[_markdownHandler.EMOJI_SMILEY_FACE])), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => onInsertMarkdown(_markdownHandler.EMOJI_SAD_FACE),
+    className: "jsx-".concat(_RichTextEditorStyle.emojisPopoverClasses.__hash)
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, _markdownHandler.emojis[_markdownHandler.EMOJI_SAD_FACE])), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => onInsertMarkdown(_markdownHandler.EMOJI_THUMBS_UP),
+    className: "jsx-".concat(_RichTextEditorStyle.emojisPopoverClasses.__hash)
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, _markdownHandler.emojis[_markdownHandler.EMOJI_THUMBS_UP])), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => onInsertMarkdown(_markdownHandler.EMOJI_THUMBS_DOWN),
+    className: "jsx-".concat(_RichTextEditorStyle.emojisPopoverClasses.__hash)
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, _markdownHandler.emojis[_markdownHandler.EMOJI_THUMBS_DOWN]))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _RichTextEditorStyle.emojisPopoverClasses.__hash
+  }, _RichTextEditorStyle.emojisPopoverClasses));
+};
+
+EmojisPopover.propTypes = {
+  onClose: _propTypes.default.func.isRequired,
+  onInsertMarkdown: _propTypes.default.func.isRequired,
+  reference: _propTypes.default.object
+};
+
+const IconButtonWithTooltip = _ref2 => {
+  let {
+    tooltipContent,
+    disabled,
+    icon,
+    onClick
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    content: tooltipContent,
+    placement: "bottom",
+    closeDelay: 200
+  }, _ref3 => {
+    let {
+      ref,
+      onMouseOver,
+      onMouseOut
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      ref: ref,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash) + " " + "tooltip"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      secondary: true,
+      small: true,
+      disabled: disabled,
+      icon: icon,
+      onClick: onClick
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _RichTextEditorStyle.tooltipAnchorClasses.__hash
+  }, _RichTextEditorStyle.tooltipAnchorClasses));
+};
+
+IconButtonWithTooltip.propTypes = {
+  disabled: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  tooltipContent: _propTypes.default.string,
+  onClick: _propTypes.default.func
+};
+
+const Toolbar = _ref4 => {
+  let {
+    disabled,
+    onInsertMarkdown,
+    onTogglePreview,
+    previewButtonDisabled,
+    previewMode
+  } = _ref4;
+  const emojisButtonRef = (0, _react.useRef)();
+  const [emojisPopoverIsOpen, setEmojisPopoverIsOpen] = (0, _react.useState)(false);
+  const iconColor = disabled ? _ui.colors.grey600 : _ui.colors.grey700;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "toolbar"
+  }, !previewMode ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "actionsWrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "mainActions"
+  }, /*#__PURE__*/_react.default.createElement(IconButtonWithTooltip, {
+    tooltipContent: _d2I18n.default.t('Bold text'),
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconTextBold24, {
+      color: iconColor
+    }),
+    onClick: () => onInsertMarkdown(_markdownHandler.BOLD)
+  }), /*#__PURE__*/_react.default.createElement(IconButtonWithTooltip, {
+    tooltipContent: _d2I18n.default.t('Italic text'),
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconTextItalic24, {
+      color: iconColor
+    }),
+    onClick: () => onInsertMarkdown(_markdownHandler.ITALIC)
+  }), /*#__PURE__*/_react.default.createElement(IconButtonWithTooltip, {
+    tooltipContent: _d2I18n.default.t('Link to a URL'),
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconLink24, {
+      color: iconColor
+    }),
+    onClick: () => onInsertMarkdown(_markdownHandler.LINK)
+  }), /*#__PURE__*/_react.default.createElement(IconButtonWithTooltip, {
+    tooltipContent: _d2I18n.default.t('Mention a user'),
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconAt24, {
+      color: iconColor
+    }),
+    onClick: () => onInsertMarkdown(_markdownHandler.MENTION)
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    ref: emojisButtonRef,
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "tooltip"
+  }, /*#__PURE__*/_react.default.createElement(IconButtonWithTooltip, {
+    tooltipContent: _d2I18n.default.t('Add emoji'),
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconFaceAdd24, {
+      color: iconColor
+    }),
+    onClick: () => setEmojisPopoverIsOpen(true)
+  })), emojisPopoverIsOpen && /*#__PURE__*/_react.default.createElement(EmojisPopover, {
+    onClose: () => setEmojisPopoverIsOpen(false),
+    onInsertMarkdown: markup => {
+      onInsertMarkdown(markup);
+      setEmojisPopoverIsOpen(false);
+    },
+    reference: emojisButtonRef
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "sideActions"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    disabled: previewButtonDisabled || disabled,
+    onClick: onTogglePreview
+  }, _d2I18n.default.t('Preview')))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.tooltipAnchorClasses.__hash, " jsx-").concat(_RichTextEditorStyle.toolbarClasses.__hash) + " " + "previewWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    onClick: onTogglePreview,
+    disabled: disabled
+  }, _d2I18n.default.t('Back to write mode'))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _RichTextEditorStyle.tooltipAnchorClasses.__hash
+  }, _RichTextEditorStyle.tooltipAnchorClasses), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _RichTextEditorStyle.toolbarClasses.__hash
+  }, _RichTextEditorStyle.toolbarClasses));
+};
+
+Toolbar.propTypes = {
+  previewButtonDisabled: _propTypes.default.bool.isRequired,
+  previewMode: _propTypes.default.bool.isRequired,
+  onInsertMarkdown: _propTypes.default.func.isRequired,
+  onTogglePreview: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool
+};
+const RichTextEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref5, externalRef) => {
+  let {
+    value,
+    disabled,
+    inputPlaceholder,
+    onChange,
+    errorText
+  } = _ref5;
+  const [previewMode, setPreviewMode] = (0, _react.useState)(false);
+  const internalRef = (0, _react.useRef)();
+  const textareaRef = externalRef || internalRef;
+  (0, _react.useEffect)(() => {
+    var _textareaRef$current;
+
+    return (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : _textareaRef$current.focus();
+  }, [textareaRef.current]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.mainClasses.__hash) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement(Toolbar, {
+    onInsertMarkdown: markdown => {
+      (0, _markdownHandler.insertMarkdown)(markdown, textareaRef.current, (text, caretPos) => {
+        onChange(text);
+        textareaRef.current.focus();
+        textareaRef.current.selectionEnd = caretPos;
+      });
+
+      if (markdown === _markdownHandler.MENTION) {
+        textareaRef.current.dispatchEvent(new KeyboardEvent('keydown', {
+          key: '@',
+          bubbles: true
+        }));
+      }
+    },
+    onTogglePreview: () => setPreviewMode(!previewMode),
+    previewMode: previewMode,
+    previewButtonDisabled: !value,
+    disabled: disabled
+  }), previewMode ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_RichTextEditorStyle.mainClasses.__hash) + " " + "preview"
+  }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, value)) : /*#__PURE__*/_react.default.createElement(_ui.Field, {
+    error: !!errorText,
+    validationText: errorText
+  }, /*#__PURE__*/_react.default.createElement(_UserMentionWrapper.UserMentionWrapper, {
+    onUserSelect: onChange,
+    inputReference: textareaRef
+  }, /*#__PURE__*/_react.default.createElement("textarea", {
+    ref: textareaRef,
+    placeholder: inputPlaceholder,
+    disabled: disabled,
+    value: value,
+    onChange: event => onChange(event.target.value),
+    onKeyDown: event => (0, _markdownHandler.convertCtrlKey)(event, onChange),
+    className: "jsx-".concat(_RichTextEditorStyle.mainClasses.__hash) + " " + "textarea"
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _RichTextEditorStyle.mainClasses.__hash
+  }, _RichTextEditorStyle.mainClasses));
+});
+exports.RichTextEditor = RichTextEditor;
+RichTextEditor.displayName = 'RichTextEditor';
+RichTextEditor.propTypes = {
+  value: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  errorText: _propTypes.default.string,
+  inputPlaceholder: _propTypes.default.string
+};