@dhis2/analytics 28.0.3 → 28.0.5

package/build/es/components/RichText/Editor/Editor.js

@@ -8,85 +8,76 @@ import { UserMentionWrapper } from '../../UserMention/UserMentionWrapper.js';
 import { Parser } from '../Parser/Parser.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/Editor.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-${emojisPopoverClasses.__hash}` + " " + "emojisList"
-  }, /*#__PURE__*/React.createElement("li", {
-    onClick: () => onInsertMarkdown(EMOJI_SMILEY_FACE),
-    className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SMILEY_FACE])), /*#__PURE__*/React.createElement("li", {
-    onClick: () => onInsertMarkdown(EMOJI_SAD_FACE),
-    className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SAD_FACE])), /*#__PURE__*/React.createElement("li", {
-    onClick: () => onInsertMarkdown(EMOJI_THUMBS_UP),
-    className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_THUMBS_UP])), /*#__PURE__*/React.createElement("li", {
-    onClick: () => onInsertMarkdown(EMOJI_THUMBS_DOWN),
-    className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_THUMBS_DOWN]))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: emojisPopoverClasses.__hash
-  }, emojisPopoverClasses));
-};
+const EmojisPopover = ({
+  onInsertMarkdown,
+  onClose,
+  reference
+}) => /*#__PURE__*/React.createElement(Popover, {
+  reference: reference,
+  onClickOutside: onClose
+}, /*#__PURE__*/React.createElement("ul", {
+  className: `jsx-${emojisPopoverClasses.__hash}` + " " + "emojisList"
+}, /*#__PURE__*/React.createElement("li", {
+  onClick: () => onInsertMarkdown(EMOJI_SMILEY_FACE),
+  className: `jsx-${emojisPopoverClasses.__hash}`
+}, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SMILEY_FACE])), /*#__PURE__*/React.createElement("li", {
+  onClick: () => onInsertMarkdown(EMOJI_SAD_FACE),
+  className: `jsx-${emojisPopoverClasses.__hash}`
+}, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SAD_FACE])), /*#__PURE__*/React.createElement("li", {
+  onClick: () => onInsertMarkdown(EMOJI_THUMBS_UP),
+  className: `jsx-${emojisPopoverClasses.__hash}`
+}, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_THUMBS_UP])), /*#__PURE__*/React.createElement("li", {
+  onClick: () => onInsertMarkdown(EMOJI_THUMBS_DOWN),
+  className: `jsx-${emojisPopoverClasses.__hash}`
+}, /*#__PURE__*/React.createElement(Parser, 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-${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));
-};
+const IconButtonWithTooltip = ({
+  tooltipContent,
+  disabled,
+  icon,
+  onClick
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  content: tooltipContent,
+  placement: "bottom",
+  closeDelay: 200
+}, ({
+  ref,
+  onMouseOver,
+  onMouseOut
+}) => /*#__PURE__*/React.createElement("span", {
+  ref: ref,
+  onMouseOver: onMouseOver,
+  onMouseOut: onMouseOut,
+  className: `jsx-${tooltipAnchorClasses.__hash}` + " " + "tooltip"
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true,
+  small: true,
+  disabled: disabled,
+  icon: icon,
+  onClick: onClick,
+  "aria-label": tooltipContent
+}))), /*#__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 Toolbar = ({
+  disabled,
+  onInsertMarkdown,
+  onTogglePreview,
+  previewButtonDisabled,
+  previewMode
+}) => {
   const emojisButtonRef = useRef();
   const [emojisPopoverIsOpen, setEmojisPopoverIsOpen] = useState(false);
   const iconColor = disabled ? colors.grey600 : colors.grey700;
@@ -168,17 +159,16 @@ Toolbar.propTypes = {
   onTogglePreview: PropTypes.func.isRequired,
   disabled: PropTypes.bool
 };
-export const Editor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
-  let {
-    value,
-    disabled,
-    inputPlaceholder,
-    onChange,
-    errorText,
-    helpText,
-    initialFocus,
-    resizable
-  } = _ref5;
+export const Editor = /*#__PURE__*/forwardRef(({
+  value,
+  disabled,
+  inputPlaceholder,
+  onChange,
+  errorText,
+  helpText,
+  initialFocus = true,
+  resizable = true
+}, externalRef) => {
   const [previewMode, setPreviewMode] = useState(false);
   const internalRef = useRef();
   const textareaRef = externalRef || internalRef;
@@ -242,10 +232,6 @@ export const Editor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
   }, mainClasses));
 });
 Editor.displayName = 'Editor';
-Editor.defaultProps = {
-  initialFocus: true,
-  resizable: true
-};
 Editor.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,

package/build/es/components/RichText/Editor/__tests__/Editor.spec.js

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Editor } from '../Editor.js';
 const mockConvertCtrlKey = jest.fn();
@@ -20,16 +20,15 @@ describe('RichText: Editor component', () => {
   const renderComponent = props => {
     return render(/*#__PURE__*/React.createElement(Editor, props));
   };
-  it('renders a result', () => {
+  test('renders a result', () => {
     renderComponent(componentProps);
     expect(screen.getByTestId('@dhis2-analytics-richtexteditor')).toBeVisible();
   });
-  it('calls convertCtrlKey on keydown', () => {
+  test('calls convertCtrlKey on keydown', async () => {
+    const user = userEvent.setup();
     renderComponent(componentProps);
-    fireEvent.keyDown(screen.getByRole('textbox'), {
-      key: 'A',
-      code: 'keyA'
-    });
+    await user.click(screen.getByRole('textbox'));
+    await user.keyboard('A');
     expect(mockConvertCtrlKey).toHaveBeenCalled();
   });
 });

package/build/es/components/RichText/Parser/Parser.js

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { MdParser } from './MdParser.js';
-export const Parser = _ref => {
-  let {
-    children,
-    style
-  } = _ref;
+export const Parser = ({
+  children,
+  style = null
+}) => {
   const MdParserInstance = useMemo(() => new MdParser(), []);
   return children ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -16,9 +15,6 @@ export const Parser = _ref => {
     }
   }) : null;
 };
-Parser.defaultProps = {
-  style: null
-};
 Parser.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   style: PropTypes.object

package/build/es/components/RichText/Parser/__tests__/MdParser.spec.js

@@ -1,7 +1,7 @@
 import { MdParser } from '../MdParser.js';
 const Parser = new MdParser();
 describe('MdParser class', () => {
-  it('converts text into HTML', () => {
+  test('converts text into HTML', () => {
     const inlineTests = [['_italic_', '<em>italic</em>'], ['*bold*', '<strong>bold</strong>'], ['_ not italic because there is a space _', '_ not italic because there is a space _'], [':-)', '<span>\u{1F642}</span>'], [':)', '<span>\u{1F642}</span>'], [':-(', '<span>\u{1F641}</span>'], [':(', '<span>\u{1F641}</span>'], [':+1', '<span>\u{1F44D}</span>'], [':-1', '<span>\u{1F44E}</span>'], ['mixed _italic_ *bold* and :+1', 'mixed <em>italic</em> <strong>bold</strong> and <span>\u{1F44D}</span>'], ['_italic with * inside_', '<em>italic with * inside</em>'], ['*bold with _ inside*', '<strong>bold with _ inside</strong>'],
     // italic marker followed by : should work
     ['_italic_:', '<em>italic</em>:'], ['_italic_: some text, *bold*: some other text', '<em>italic</em>: some text, <strong>bold</strong>: some other text'],

package/build/es/components/RichText/Parser/__tests__/Parser.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Parser } from '../Parser.js';
 jest.mock('../MdParser.js', () => ({
@@ -9,30 +9,29 @@ jest.mock('../MdParser.js', () => ({
   })
 }));
 describe('RichText: Parser component', () => {
-  let richTextParser;
-  const defaultProps = {
-    style: {
+  test('should have rendered a result with the style prop', () => {
+    const style = {
       color: 'blue',
       whiteSpace: 'pre-line'
-    }
-  };
-  const renderComponent = (props, text) => {
-    return shallow(/*#__PURE__*/React.createElement(Parser, props, text));
-  };
-  it('should have rendered a result', () => {
-    richTextParser = renderComponent({}, 'test');
-    expect(richTextParser).toHaveLength(1);
-  });
-  it('should have rendered a result with the style prop', () => {
-    richTextParser = renderComponent(defaultProps, 'test prop');
-    expect(richTextParser.props().style).toEqual(defaultProps.style);
+    };
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(Parser, {
+      style: style
+    }, 'test prop'));
+    const divEl = container.querySelector('div');
+    expect(divEl.style.color).toBe(style.color);
+    expect(divEl.style.whiteSpace).toBe(style.whiteSpace);
   });
-  it('should have rendered content', () => {
-    richTextParser = renderComponent({}, 'plain text');
-    expect(richTextParser.html()).toEqual('<div>converted text</div>');
+  test('should have rendered content', () => {
+    render(/*#__PURE__*/React.createElement(Parser, null, 'plain text'));
+    expect(screen.getByText('converted text')).toBeInTheDocument();
   });
-  it('should return null if no children is passed', () => {
-    richTextParser = renderComponent({}, undefined);
-    expect(richTextParser.html()).toBe(null);
+  test('should return null if no children is passed', () => {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(Parser, null));
+    const divEl = container.querySelector('div');
+    expect(divEl).toBe(null);
   });
 });

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuBar.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
 const throwErrorIfNotInitialized = () => {
   throw new Error('`HoverMenubarContext` has not been initialised');
 };
@@ -12,32 +12,42 @@ const HoverMenubarContext = /*#__PURE__*/createContext({
   openedDropdownEl: null
 });
 const useHoverMenubarContext = () => useContext(HoverMenubarContext);
-const HoverMenuBar = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
+const HoverMenuBar = ({
+  children,
+  dataTest = 'dhis2-analytics-hovermenubar'
+}) => {
   const [openedDropdownEl, setOpenedDropdownEl] = useState(null);
-  const [lastHoveredSubMenuEl, setLastHoveredSubMenuEl] = useState(null);
+  const lastHoveredSubMenuElRef = useRef(null);
   const [isInHoverMode, setIsInHoverMode] = useState(false);
   const closeMenu = useCallback(() => {
     setIsInHoverMode(false);
     setOpenedDropdownEl(null);
   }, []);
+  const setLastHoveredSubMenuEl = useCallback(element => {
+    lastHoveredSubMenuElRef.current = element;
+  }, []);
   const onDocumentClick = useCallback(event => {
-    const isClickOnOpenedSubMenuAnchor = lastHoveredSubMenuEl && (lastHoveredSubMenuEl === event.target || lastHoveredSubMenuEl.contains(event.target));
+    const isClickOnOpenedSubMenuAnchor = lastHoveredSubMenuElRef.current && (lastHoveredSubMenuElRef.current === event.target || lastHoveredSubMenuElRef.current.contains(event.target));
     if (!isClickOnOpenedSubMenuAnchor) {
       closeMenu();
     }
-  }, [closeMenu, lastHoveredSubMenuEl]);
+  }, [closeMenu]);
   const onDropDownButtonClick = useCallback(event => {
     if (!isInHoverMode) {
+      /* Stop event propagation to avoid it from bubling up to the
+       * document, which would actually cause the menu to close again
+       * immediately */
+      event.stopPropagation();
       setIsInHoverMode(true);
       setOpenedDropdownEl(event.currentTarget);
+      document.addEventListener('click', onDocumentClick, {
+        once: true
+      });
     } else {
+      document.removeEventListener('click', onDocumentClick);
       closeMenu();
     }
-  }, [closeMenu, isInHoverMode]);
+  }, [closeMenu, isInHoverMode, onDocumentClick]);
   const onDropDownButtonMouseOver = useCallback(event => {
     if (isInHoverMode) {
       setOpenedDropdownEl(event.currentTarget);
@@ -57,16 +67,6 @@ const HoverMenuBar = _ref => {
       closeMenu();
     }
   }, [closeMenu]);
-  useEffect(() => {
-    if (isInHoverMode) {
-      document.addEventListener('click', onDocumentClick, {
-        once: true
-      });
-    }
-    return () => {
-      document.removeEventListener('click', onDocumentClick);
-    };
-  }, [onDocumentClick, isInHoverMode]);
   return /*#__PURE__*/React.createElement(HoverMenubarContext.Provider, {
     value: {
       onDropDownButtonClick,
@@ -82,9 +82,6 @@ const HoverMenuBar = _ref => {
     id: "3020154784"
   }, [".jsx-3020154784{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"])));
 };
-HoverMenuBar.defaultProps = {
-  dataTest: 'dhis2-analytics-hovermenubar'
-};
 HoverMenuBar.propTypes = {
   children: PropTypes.node.isRequired,
   dataTest: PropTypes.string

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js

@@ -5,14 +5,13 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import menuButtonStyles from '../MenuButton.styles.js';
 import { useHoverMenubarContext } from './HoverMenuBar.js';
-export const HoverMenuDropdown = _ref => {
-  let {
-    children,
-    className,
-    label,
-    dataTest,
-    disabled
-  } = _ref;
+export const HoverMenuDropdown = ({
+  children,
+  className,
+  label,
+  dataTest = 'dhis2-analytics-hovermenudropdown',
+  disabled
+}) => {
   const buttonRef = useRef();
   const {
     onDropDownButtonClick,
@@ -36,9 +35,6 @@ export const HoverMenuDropdown = _ref => {
     reference: buttonRef
   }, children)));
 };
-HoverMenuDropdown.defaultProps = {
-  dataTest: 'dhis2-analytics-hovermenudropdown'
-};
 HoverMenuDropdown.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.node.isRequired,

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuList.js

@@ -13,15 +13,14 @@ const HoverMenuListContext = /*#__PURE__*/createContext({
   dense: false
 });
 const useHoverMenuListContext = () => useContext(HoverMenuListContext);
-const HoverMenuList = _ref => {
-  let {
-    children,
-    className,
-    dataTest,
-    dense,
-    maxHeight,
-    maxWidth
-  } = _ref;
+const HoverMenuList = ({
+  children,
+  className,
+  dataTest = 'dhis2-analytics-hovermenulist',
+  dense = true,
+  maxHeight = 'auto',
+  maxWidth = '380px'
+}) => {
   const {
     setLastHoveredSubMenuEl
   } = useHoverMenubarContext();
@@ -51,12 +50,6 @@ const HoverMenuList = _ref => {
     dynamic: [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]
   }, [`ul.__jsx-style-dynamic-selector{position:relative;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${spacers.dp4} 0;overflow:auto;list-style:none;}`])));
 };
-HoverMenuList.defaultProps = {
-  dataTest: 'dhis2-analytics-hovermenulist',
-  maxWidth: '380px',
-  maxHeight: 'auto',
-  dense: true
-};
 HoverMenuList.propTypes = {
   /** Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` */
   children: PropTypes.node,

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuListItem.js

@@ -5,17 +5,16 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { HoverMenuList, useHoverMenuListContext } from './HoverMenuList.js';
 import styles from './HoverMenuListItem.styles.js';
-const HoverMenuListItem = _ref => {
-  let {
-    onClick,
-    children,
-    icon,
-    className,
-    destructive,
-    disabled,
-    dataTest,
-    label
-  } = _ref;
+const HoverMenuListItem = ({
+  onClick,
+  children,
+  icon,
+  className,
+  destructive,
+  disabled,
+  dataTest = 'dhis2-uicore-hovermenulistitem',
+  label
+}) => {
   const ref = useRef();
   const {
     onSubmenuAnchorMouseEnter,
@@ -51,9 +50,6 @@ const HoverMenuListItem = _ref => {
     dense: dense
   }, children))));
 };
-HoverMenuListItem.defaultProps = {
-  dataTest: 'dhis2-uicore-hovermenulistitem'
-};
 HoverMenuListItem.propTypes = {
   // Nested menu items become submenus
   children: PropTypes.node,