@dhis2/analytics 26.6.14 → 26.7.0

package/build/es/components/{Interpretations/common/UserMention → UserMention}/UserMentionWrapper.js

@@ -1,6 +1,6 @@
 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 { CenteredContent, CircularLoader, Layer, Menu, MenuSectionHeader, MenuItem, Popper, Card } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import { resolvedHeaderStyle, userMentionWrapperClasses } from './styles/UserMentionWrapper.style.js';
@@ -29,6 +29,7 @@ export const UserMentionWrapper = _ref => {
     inputReference,
     onUserSelect
   } = _ref;
+  const [listIsOpen, setListIsOpen] = useState(false);
   const [captureText, setCaptureText] = useState(false);
   const [capturedText, setCapturedText] = useState('');
   const [cloneText, setCloneText] = useState('');
@@ -44,6 +45,7 @@ export const UserMentionWrapper = _ref => {
     searchText: capturedText
   });
   const reset = () => {
+    setListIsOpen(false);
     setCaptureText(false);
     setCapturedText('');
     setCloneText('');
@@ -52,6 +54,12 @@ export const UserMentionWrapper = _ref => {
     clear();
   };
 
+  // focus the input/textarea when the user list is closed by clicking above the input/textarea
+  const onClick = () => inputReference.current.focus();
+
+  // close the user list when clicking in the input/textarea or outside of it (input/textarea blur)
+  const onUserListClose = () => reset();
+
   // event bubbles up from the input/textarea
   const onInput = _ref2 => {
     let {
@@ -64,7 +72,7 @@ export const UserMentionWrapper = _ref => {
     if (captureText) {
       clear();
       const spacePosition = value.indexOf(' ', captureStartPosition - 1);
-      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1);
+      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1).replace(/\n+/, '');
       if (filterValue !== capturedText) {
         setCapturedText(filterValue);
       } else if (filterValue.length === 0) {
@@ -84,6 +92,7 @@ export const UserMentionWrapper = _ref => {
       selectionStart
     } = target;
     if (!captureText && key === '@') {
+      setListIsOpen(true);
       setCaptureText(true);
       setCaptureStartPosition(selectionStart + 1);
       setCloneText(target.value.substring(0, selectionStart) + '@');
@@ -135,17 +144,20 @@ export const UserMentionWrapper = _ref => {
     // position the cursor at the end
     requestAnimationFrame(() => inputReference.current.setSelectionRange(-1, -1), 0);
   };
-  const onClick = user => () => onSelect(user);
+  const onUserClick = user => () => onSelect(user);
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown,
     onInput: onInput,
+    onClick: onClick,
     className: `jsx-${userMentionWrapperClasses.__hash}` + " " + "wrapper"
   }, children, /*#__PURE__*/React.createElement("div", {
     className: `jsx-${userMentionWrapperClasses.__hash}` + " " + "clone"
-  }, /*#__PURE__*/React.createElement("pre", {
+  }, /*#__PURE__*/React.createElement("p", {
     ref: cloneRef,
     className: `jsx-${userMentionWrapperClasses.__hash}`
-  }, cloneText)), captureText && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+  }, cloneText)), listIsOpen && /*#__PURE__*/React.createElement(Layer, {
+    onBackdropClick: onUserListClose
+  }, /*#__PURE__*/React.createElement(Popper, {
     reference: getVirtualPopperReference(cloneRef),
     placement: "top-start"
   }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
@@ -166,7 +178,7 @@ export const UserMentionWrapper = _ref => {
   }), !fetching && users.length > 0 && /*#__PURE__*/React.createElement(UserList, {
     users: users,
     selectedUserIndex: selectedUserIndex,
-    onUserClick: onClick,
+    onUserClick: onUserClick,
     pager: pager
   }), capturedText && !fetching && users.length === 0 && /*#__PURE__*/React.createElement(MenuItem, {
     dense: true,
@@ -183,5 +195,4 @@ UserMentionWrapper.propTypes = {
   inputReference: PropTypes.object.isRequired,
   onUserSelect: PropTypes.func.isRequired,
   children: PropTypes.node
-};
-export default UserMentionWrapper;
+};

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

@@ -0,0 +1,16 @@
+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-2386066169{width:100%;height:100%;position:relative;}", `.clone.jsx-2386066169{position:absolute;visibility:hidden;inset:0;box-sizing:border-box;padding:${spacers.dp8} 15px;border:1px solid ${colors.grey500};font-size:14px;line-height:${spacers.dp16};z-index:1;pointer-events:none;}`, ".clone.jsx-2386066169>p.jsx-2386066169{display:inline;word-wrap:break-word;overflow-wrap:break-word;font:inherit;margin:0;white-space:break-spaces;}", `.container.jsx-2386066169{background-color:${colors.white};max-height:180px;overflow:auto;}`];
+userMentionWrapperClasses.__hash = "2386066169";
+export const resolvedHeaderStyle = {
+  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4275958396"
+  }, [".jsx-4275958396{position:-webkit-sticky;position:sticky;top:0;}"]),
+  className: "jsx-4275958396"
+};

package/build/es/components/{Interpretations/common/UserMention → UserMention}/useUserSearchResults.js

@@ -46,10 +46,10 @@ export const useUserSearchResults = _ref2 => {
     return () => debouncedRefetch.cancel();
   }, [searchText, debouncedRefetch]);
   useEffect(() => {
-    if (data) {
+    if (fetching === false && data) {
       setData(data.users);
     }
-  }, [data]);
+  }, [data, fetching]);
   return {
     users,
     pager,

package/build/es/index.js

@@ -22,6 +22,7 @@ export * from './components/Toolbar/index.js';
 export { TranslationDialog } from './components/TranslationDialog/index.js';
 export { OfflineTooltip } from './components/OfflineTooltip.js';
 export { CachedDataQueryProvider, useCachedDataQuery } from './components/CachedDataQueryProvider.js';
+export * from './components/RichText/index.js';
 
 // Api
 

package/build/es/locales/en/translations.json

@@ -134,17 +134,6 @@
     "Manage sharing": "Manage sharing",
     "Could not update interpretation": "Could not update interpretation",
     "Enter interpretation text": "Enter interpretation text",
-    "Bold text": "Bold text",
-    "Italic text": "Italic text",
-    "Link to a URL": "Link to a URL",
-    "Mention a user": "Mention a user",
-    "Add emoji": "Add emoji",
-    "Preview": "Preview",
-    "Back to write mode": "Back to write mode",
-    "Too many results. Try refining the search.": "Too many results. Try refining the search.",
-    "Search for a user": "Search for a user",
-    "Searching for \"{{- searchText}}\"": "Searching for \"{{- searchText}}\"",
-    "No results found": "No results found",
     "Not available offline": "Not available offline",
     "Created by": "Created by",
     "Anyone": "Anyone",
@@ -276,6 +265,13 @@
     "Six-months": "Six-months",
     "Financial Years": "Financial Years",
     "Years": "Years",
+    "Bold text": "Bold text",
+    "Italic text": "Italic text",
+    "Link to a URL": "Link to a URL",
+    "Mention a user": "Mention a user",
+    "Add emoji": "Add emoji",
+    "Preview": "Preview",
+    "Back to write mode": "Back to write mode",
     "Interpretations and details": "Interpretations and details",
     "Translating to": "Translating to",
     "Choose a locale": "Choose a locale",
@@ -286,6 +282,10 @@
     "Cannot save while offline": "Cannot save while offline",
     "Could not load translations": "Could not load translations",
     "Retry": "Retry",
+    "Too many results. Try refining the search.": "Too many results. Try refining the search.",
+    "Search for a user": "Search for a user",
+    "Searching for \"{{- searchText}}\"": "Searching for \"{{- searchText}}\"",
+    "No results found": "No results found",
     "Series": "Series",
     "Category": "Category",
     "Filter": "Filter",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.6.14",
+    "version": "26.7.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -59,7 +59,6 @@
         "styled-jsx": "^4.0.1"
     },
     "dependencies": {
-        "@dhis2/d2-ui-rich-text": "^7.4.1",
         "@dhis2/multi-calendar-dates": "1.0.0",
         "@dnd-kit/core": "^6.0.7",
         "@dnd-kit/sortable": "^7.0.2",
@@ -71,6 +70,7 @@
         "d3-color": "^1.2.3",
         "highcharts": "^10.3.3",
         "lodash": "^4.17.21",
+        "markdown-it": "^13.0.1",
         "mathjs": "^9.4.2",
         "react-beautiful-dnd": "^10.1.1",
         "resize-observer-polyfill": "^1.5.1"

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

@@ -1,12 +0,0 @@
-"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/es/components/Interpretations/common/RichTextEditor/index.js

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

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

@@ -1,16 +0,0 @@
-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:${spacers.dp8} ${spacers.dp12};border:1px solid ${colors.grey500};font-size:14px;line-height:${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:${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"
-};