@dhis2/analytics 23.11.1 → 23.12.2

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
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RichTextEditor", {
+  enumerable: true,
+  get: function () {
+    return _RichTextEditor.RichTextEditor;
+  }
+});
+
+var _RichTextEditor = require("./RichTextEditor.js");

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertMarkdown = exports.emojis = exports.convertCtrlKey = exports.MENTION = exports.LINK = exports.ITALIC = exports.EMOJI_THUMBS_UP = exports.EMOJI_THUMBS_DOWN = exports.EMOJI_SMILEY_FACE = exports.EMOJI_SAD_FACE = exports.BOLD = void 0;
+const BOLD = 'bold';
+exports.BOLD = BOLD;
+const ITALIC = 'italic';
+exports.ITALIC = ITALIC;
+const LINK = 'link';
+exports.LINK = LINK;
+const MENTION = 'mention';
+exports.MENTION = MENTION;
+const EMOJI_SMILEY_FACE = 'smileyFace';
+exports.EMOJI_SMILEY_FACE = EMOJI_SMILEY_FACE;
+const EMOJI_SAD_FACE = 'sadFace';
+exports.EMOJI_SAD_FACE = EMOJI_SAD_FACE;
+const EMOJI_THUMBS_UP = 'thumbsUp';
+exports.EMOJI_THUMBS_UP = EMOJI_THUMBS_UP;
+const EMOJI_THUMBS_DOWN = 'thumsDown';
+exports.EMOJI_THUMBS_DOWN = EMOJI_THUMBS_DOWN;
+const emojis = {
+  [EMOJI_SMILEY_FACE]: ':-)',
+  [EMOJI_SAD_FACE]: ':-(',
+  [EMOJI_THUMBS_UP]: ':+1',
+  [EMOJI_THUMBS_DOWN]: ':-1'
+};
+exports.emojis = emojis;
+const markdownMap = {
+  [ITALIC]: {
+    prefix: '_',
+    postfix: '_'
+  },
+  [BOLD]: {
+    prefix: '*',
+    postfix: '*'
+  },
+  [LINK]: {
+    prefix: '[',
+    postfix: '](https://link-url)'
+  },
+  [MENTION]: {
+    prefix: '@'
+  },
+  [EMOJI_SMILEY_FACE]: {
+    prefix: emojis[EMOJI_SMILEY_FACE]
+  },
+  [EMOJI_SAD_FACE]: {
+    prefix: emojis[EMOJI_SAD_FACE]
+  },
+  [EMOJI_THUMBS_UP]: {
+    prefix: emojis[EMOJI_THUMBS_UP]
+  },
+  [EMOJI_THUMBS_DOWN]: {
+    prefix: emojis[EMOJI_THUMBS_DOWN]
+  }
+};
+
+const trim = str => {
+  const leftSpaces = /^\s+/;
+  const rightSpaces = /\s+$/;
+  return str.replace(leftSpaces, '').replace(rightSpaces, '');
+};
+
+const insertMarkdown = (markdown, target, cb) => {
+  const {
+    selectionStart: start,
+    selectionEnd: end,
+    value
+  } = target;
+  const marker = markdownMap[markdown] || null;
+
+  if (!marker || !cb || start < 0) {
+    return;
+  }
+
+  let newValue;
+  let caretPos = end + 1;
+
+  const padMarkers = text => {
+    // is caret between two markers (i.e., "**" or "__")? Then do not add padding
+    if (start === end && value.length && start > 0) {
+      if (value[start - 1] === markdownMap[BOLD].prefix && value[start] === markdownMap[BOLD].prefix || value[start - 1] === markdownMap[ITALIC].prefix && value[start] === markdownMap[ITALIC].prefix) {
+        return text;
+      }
+    }
+
+    if (value.length && start > 0 && value[start - 1] !== ' ') {
+      text = " ".concat(text);
+      ++caretPos;
+    }
+
+    if (value.length && end !== value.length && value[end] !== ' ') {
+      text = "".concat(text, " ");
+    }
+
+    return text;
+  };
+
+  if (start === end) {
+    //no text
+    const valueArr = value.split('');
+    let markdown = marker.prefix;
+
+    if (marker.postfix) {
+      markdown += marker.postfix;
+    }
+
+    valueArr.splice(start, 0, padMarkers(markdown));
+    newValue = valueArr.join('');
+  } else {
+    const text = value.slice(start, end);
+    const trimmedText = trim(text); // TODO really needed?
+    // adjust caretPos based on trimmed text selection
+
+    caretPos = caretPos - (text.length - trimmedText.length) + 1;
+    let markdown = "".concat(marker.prefix).concat(trimmedText);
+
+    if (marker.postfix) {
+      markdown += marker.postfix;
+    }
+
+    newValue = [value.slice(0, start), padMarkers(markdown), value.slice(end)].join('');
+  }
+
+  cb(newValue, caretPos);
+};
+
+exports.insertMarkdown = insertMarkdown;
+
+const convertCtrlKey = (event, cb) => {
+  const {
+    key,
+    ctrlKey,
+    metaKey
+  } = event;
+
+  if (key === 'b' && (ctrlKey || metaKey)) {
+    event.preventDefault();
+    insertMarkdown(BOLD, event.target, cb);
+  } else if (key === 'i' && (ctrlKey || metaKey)) {
+    event.preventDefault();
+    insertMarkdown(ITALIC, event.target, cb);
+  }
+};
+
+exports.convertCtrlKey = convertCtrlKey;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipAnchorClasses = exports.toolbarClasses = exports.mainClasses = exports.emojisPopoverClasses = void 0;
+
+var _ui = require("@dhis2/ui");
+
+const mainClasses = [".container.jsx-2278350860{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}", ".preview.jsx-2278350860{font-size:14px;line-height:19px;color:".concat(_ui.colors.grey900, ";}"), ".textarea.jsx-2278350860{width:100%;box-sizing:border-box;padding:".concat(_ui.spacers.dp8, " ").concat(_ui.spacers.dp12, ";color:").concat(_ui.colors.grey900, ";background-color:").concat(_ui.colors.white, ";border:1px solid ").concat(_ui.colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:").concat(_ui.spacers.dp16, ";-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), ".textarea.jsx-2278350860:focus{outline:none;box-shadow:0 0 0 3px ".concat(_ui.theme.focus, ";}"), ".textarea.jsx-2278350860:disabled{background-color:".concat(_ui.colors.grey100, ";border-color:").concat(_ui.colors.grey500, ";color:").concat(_ui.theme.disabled, ";cursor:not-allowed;}")];
+exports.mainClasses = mainClasses;
+mainClasses.__hash = "2278350860";
+const toolbarClasses = [".toolbar.jsx-1189800463{background:".concat(_ui.colors.grey050, ";border-radius:3px;border:1px solid ").concat(_ui.colors.grey300, ";margin-bottom:").concat(_ui.spacers.dp4, ";}"), ".actionsWrapper.jsx-1189800463{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp4, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:").concat(_ui.spacers.dp4, ";}"), ".mainActions.jsx-1189800463{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp4, ";margin-top:").concat(_ui.spacers.dp2, ";}"), ".sideActions.jsx-1189800463{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:auto;}", ".previewWrapper.jsx-1189800463{margin:".concat(_ui.spacers.dp4, ";text-align:right;}")];
+exports.toolbarClasses = toolbarClasses;
+toolbarClasses.__hash = "1189800463";
+const tooltipAnchorClasses = [".tooltip.jsx-2182400256{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"];
+exports.tooltipAnchorClasses = tooltipAnchorClasses;
+tooltipAnchorClasses.__hash = "2182400256";
+const emojisPopoverClasses = [".emojisList.jsx-2802175370{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp8, ";list-style-type:none;margin:0 ").concat(_ui.spacers.dp4, " 0 ").concat(_ui.spacers.dp8, ";padding:0;}"), ".emojisList.jsx-2802175370 li.jsx-2802175370{cursor:pointer;}"];
+exports.emojisPopoverClasses = emojisPopoverClasses;
+emojisPopoverClasses.__hash = "2802175370";

package/build/cjs/components/Interpretations/common/UserMention/UserList.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserList = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+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 UserList = _ref => {
+  let {
+    users,
+    selectedUserIndex,
+    onUserClick,
+    pager
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, users.map(u => {
+    var _users$selectedUserIn;
+
+    return /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+      dense: true,
+      key: u.id,
+      onClick: onUserClick(u),
+      label: "".concat(u.displayName, " (").concat(u.username, ")"),
+      active: ((_users$selectedUserIn = users[selectedUserIndex]) === null || _users$selectedUserIn === void 0 ? void 0 : _users$selectedUserIn.id) === u.id
+    });
+  }), pager.total > pager.pageSize && /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+    dense: true,
+    disabled: true,
+    label: _d2I18n.default.t('Too many results. Try refining the search.')
+  }));
+};
+
+exports.UserList = UserList;
+UserList.propTypes = {
+  pager: _propTypes.default.object.isRequired,
+  selectedUserIndex: _propTypes.default.number.isRequired,
+  users: _propTypes.default.array.isRequired,
+  onUserClick: _propTypes.default.func.isRequired
+};