@dhis2/analytics 23.10.4 → 23.12.0

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

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

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

@@ -0,0 +1 @@
+export { RichTextEditor } from './RichTextEditor.js';

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

@@ -0,0 +1,128 @@
+export const BOLD = 'bold';
+export const ITALIC = 'italic';
+export const LINK = 'link';
+export const MENTION = 'mention';
+export const EMOJI_SMILEY_FACE = 'smileyFace';
+export const EMOJI_SAD_FACE = 'sadFace';
+export const EMOJI_THUMBS_UP = 'thumbsUp';
+export const EMOJI_THUMBS_DOWN = 'thumsDown';
+export const emojis = {
+  [EMOJI_SMILEY_FACE]: ':-)',
+  [EMOJI_SAD_FACE]: ':-(',
+  [EMOJI_THUMBS_UP]: ':+1',
+  [EMOJI_THUMBS_DOWN]: ':-1'
+};
+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, '');
+};
+
+export 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);
+};
+export 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);
+  }
+};

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

@@ -0,0 +1,9 @@
+import { colors, spacers, theme } from '@dhis2/ui';
+export 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(colors.grey900, ";}"), ".textarea.jsx-2278350860{width:100%;box-sizing:border-box;padding:".concat(spacers.dp8, " ").concat(spacers.dp12, ";color:").concat(colors.grey900, ";background-color:").concat(colors.white, ";border:1px solid ").concat(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(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(theme.focus, ";}"), ".textarea.jsx-2278350860:disabled{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
+mainClasses.__hash = "2278350860";
+export const toolbarClasses = [".toolbar.jsx-1189800463{background:".concat(colors.grey050, ";border-radius:3px;border:1px solid ").concat(colors.grey300, ";margin-bottom:").concat(spacers.dp4, ";}"), ".actionsWrapper.jsx-1189800463{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp4, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:").concat(spacers.dp4, ";}"), ".mainActions.jsx-1189800463{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp4, ";margin-top:").concat(spacers.dp2, ";}"), ".sideActions.jsx-1189800463{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:auto;}", ".previewWrapper.jsx-1189800463{margin:".concat(spacers.dp4, ";text-align:right;}")];
+toolbarClasses.__hash = "1189800463";
+export 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;}"];
+tooltipAnchorClasses.__hash = "2182400256";
+export const emojisPopoverClasses = [".emojisList.jsx-2802175370{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";list-style-type:none;margin:0 ").concat(spacers.dp4, " 0 ").concat(spacers.dp8, ";padding:0;}"), ".emojisList.jsx-2802175370 li.jsx-2802175370{cursor:pointer;}"];
+emojisPopoverClasses.__hash = "2802175370";

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

@@ -0,0 +1,33 @@
+import i18n from '@dhis2/d2-i18n';
+import { MenuItem } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const UserList = _ref => {
+  let {
+    users,
+    selectedUserIndex,
+    onUserClick,
+    pager
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, users.map(u => {
+    var _users$selectedUserIn;
+
+    return /*#__PURE__*/React.createElement(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.createElement(MenuItem, {
+    dense: true,
+    disabled: true,
+    label: i18n.t('Too many results. Try refining the search.')
+  }));
+};
+UserList.propTypes = {
+  pager: PropTypes.object.isRequired,
+  selectedUserIndex: PropTypes.number.isRequired,
+  users: PropTypes.array.isRequired,
+  onUserClick: PropTypes.func.isRequired
+};

package/build/es/components/Interpretations/common/UserMention/UserMentionWrapper.js

@@ -0,0 +1,202 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import { CenteredContent, CircularLoader, Menu, MenuSectionHeader, MenuItem, Popper, Card, Portal } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useState, useRef } from 'react';
+import { resolvedHeaderStyle, userMentionWrapperClasses } from './styles/UserMentionWrapper.style.js';
+import { UserList } from './UserList.js';
+import { useUserSearchResults } from './useUserSearchResults.js';
+const AT_SYMBOL_WIDTH = 14;
+
+const getVirtualPopperReference = ref => {
+  const rects = ref.current.getClientRects();
+  const lastRect = rects[rects.length - 1];
+  const left = lastRect.left + lastRect.width - AT_SYMBOL_WIDTH;
+  return {
+    getBoundingClientRect: () => ({
+      top: lastRect.top,
+      right: lastRect.right,
+      bottom: lastRect.bottom,
+      left,
+      width: AT_SYMBOL_WIDTH,
+      height: lastRect.height,
+      x: left
+    })
+  };
+};
+
+export const UserMentionWrapper = _ref => {
+  let {
+    children,
+    inputReference,
+    onUserSelect
+  } = _ref;
+  const [captureText, setCaptureText] = useState(false);
+  const [capturedText, setCapturedText] = useState('');
+  const [cloneText, setCloneText] = useState('');
+  const cloneRef = useRef(null);
+  const [captureStartPosition, setCaptureStartPosition] = useState(null);
+  const [selectedUserIndex, setSelectedUserIndex] = useState(0);
+  const {
+    users,
+    pager,
+    fetching,
+    clear
+  } = useUserSearchResults({
+    searchText: capturedText
+  });
+
+  const reset = () => {
+    setCaptureText(false);
+    setCapturedText('');
+    setCloneText('');
+    setCaptureStartPosition(null);
+    setSelectedUserIndex(0);
+    clear();
+  }; // event bubbles up from the input/textarea
+
+
+  const onInput = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    const {
+      selectionEnd,
+      value
+    } = target;
+
+    if (captureText) {
+      clear();
+      const spacePosition = value.indexOf(' ', captureStartPosition - 1);
+      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1);
+
+      if (filterValue !== capturedText) {
+        setCapturedText(filterValue);
+      } else if (filterValue.length === 0) {
+        setCapturedText('');
+        clear();
+      }
+    }
+  }; // event bubbles up from the wrapped input/textarea
+
+
+  const onKeyDown = _ref3 => {
+    let {
+      key,
+      target
+    } = _ref3;
+    const {
+      selectionStart
+    } = target;
+
+    if (!captureText && key === '@') {
+      setCaptureText(true);
+      setCaptureStartPosition(selectionStart + 1);
+      setCloneText(target.value.substring(0, selectionStart) + '@');
+    } else if (captureText) {
+      if (key === ' ' || key === 'Backspace' && selectionStart <= captureStartPosition) {
+        reset();
+      } else if (users.length) {
+        switch (key) {
+          case 'Enter':
+            event.preventDefault();
+
+            if (selectedUserIndex >= 0) {
+              onSelect(users[selectedUserIndex]);
+            }
+
+            break;
+
+          case 'ArrowDown':
+            event.preventDefault();
+
+            if (selectedUserIndex < users.length - 1) {
+              setSelectedUserIndex(selectedUserIndex + 1);
+            }
+
+            break;
+
+          case 'ArrowUp':
+            event.preventDefault();
+
+            if (selectedUserIndex > 0) {
+              setSelectedUserIndex(selectedUserIndex - 1);
+            }
+
+            break;
+
+          default: // other key strokes, typically the text typed
+          // the onInput event handler set on the input element is triggering the user lookup
+
+        }
+      }
+    }
+  };
+
+  const onSelect = user => {
+    const originalValue = inputReference.current.value;
+    const newValue = "".concat(originalValue.slice(0, captureStartPosition - 1)).concat(originalValue.slice(captureStartPosition - 1).replace(/^@\w*/, "@".concat(user.username, " ")));
+    reset(); // typically for connected components we want the state to be updated too
+    // but the logic belongs to the wrapped component, so we just invoke the supplied callback
+
+    if (onUserSelect) {
+      onUserSelect(newValue);
+    } // need to refocus on the input/textarea
+
+
+    inputReference.current.focus(); // position the cursor at the end
+
+    requestAnimationFrame(() => inputReference.current.setSelectionRange(-1, -1), 0);
+  };
+
+  const onClick = user => () => onSelect(user);
+
+  return /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onKeyDown,
+    onInput: onInput,
+    className: "jsx-".concat(userMentionWrapperClasses.__hash) + " " + "wrapper"
+  }, children, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(userMentionWrapperClasses.__hash) + " " + "clone"
+  }, /*#__PURE__*/React.createElement("pre", {
+    ref: cloneRef,
+    className: "jsx-".concat(userMentionWrapperClasses.__hash)
+  }, cloneText)), captureText && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+    reference: getVirtualPopperReference(cloneRef),
+    placement: "top-start"
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(userMentionWrapperClasses.__hash) + " " + "container"
+  }, /*#__PURE__*/React.createElement(Menu, {
+    dense: true
+  }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
+    className: resolvedHeaderStyle.className,
+    dense: true,
+    hideDivider: true,
+    label: capturedText === '' ? i18n.t('Search for a user') : i18n.t('Searching for "{{searchText}}"', {
+      searchText: capturedText
+    })
+  }), fetching && /*#__PURE__*/React.createElement(MenuItem, {
+    label: /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, {
+      small: true
+    }))
+  }), !fetching && users.length > 0 && /*#__PURE__*/React.createElement(UserList, {
+    users: users,
+    selectedUserIndex: selectedUserIndex,
+    onUserClick: onClick,
+    pager: pager
+  }), capturedText && !fetching && users.length === 0 && /*#__PURE__*/React.createElement(MenuItem, {
+    dense: true,
+    disabled: true,
+    label: i18n.t('No results found')
+  })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: userMentionWrapperClasses.__hash
+  }, userMentionWrapperClasses), resolvedHeaderStyle.styles);
+};
+UserMentionWrapper.defaultProps = {
+  onUserSelect: Function.prototype
+};
+UserMentionWrapper.propTypes = {
+  inputReference: PropTypes.object.isRequired,
+  onUserSelect: PropTypes.func.isRequired,
+  children: PropTypes.node
+};
+export default UserMentionWrapper;

package/build/es/components/Interpretations/common/UserMention/styles/UserMentionWrapper.style.js

@@ -0,0 +1,17 @@
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { colors, spacers } from '@dhis2/ui';
+
+/*
+ * Note that the clone and clone > pre styles have been chosen
+ * to emulate the styles of the textarea. If we decide to make
+ * changes there, they should be refelcted here too.
+ */
+export const userMentionWrapperClasses = [".wrapper.jsx-1289989717{position:relative;}", ".clone.jsx-1289989717{position:absolute;visibility:hidden;inset:0;box-sizing:border-box;padding:".concat(spacers.dp8, " ").concat(spacers.dp12, ";border:1px solid ").concat(colors.grey500, ";font-size:14px;line-height:").concat(spacers.dp16, ";z-index:1;pointer-events:none;}"), ".clone.jsx-1289989717>pre.jsx-1289989717{display:inline;word-wrap:break-word;overflow-wrap:break-word;font:inherit;margin:0;}", ".container.jsx-1289989717{background-color:".concat(colors.white, ";max-height:180px;overflow:auto;}")];
+userMentionWrapperClasses.__hash = "1289989717";
+export const resolvedHeaderStyle = {
+  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4275958396"
+  }, [".jsx-4275958396{position:-webkit-sticky;position:sticky;top:0;}"]),
+  className: "jsx-4275958396"
+};