@dhis2/analytics 28.0.2 → 28.0.4

package/build/es/components/PivotTable/PivotTableTitleRow.js

@@ -5,13 +5,12 @@ import React, { useRef, useState, useEffect } from 'react';
 import { PivotTableCell } from './PivotTableCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
 import { cell as cellStyle } from './styles/PivotTable.style.js';
-export const PivotTableTitleRow = _ref => {
+export const PivotTableTitleRow = ({
+  title,
+  scrollPosition,
+  containerWidth
+}) => {
   var _scrollPosition$x;
-  let {
-    title,
-    scrollPosition,
-    containerWidth
-  } = _ref;
   const containerRef = useRef(null);
   const [scrollWidth, setScrollWidth] = useState(0);
   const [isTitleTruncated, setIsTitleTruncated] = useState(false);
@@ -54,22 +53,19 @@ export const PivotTableTitleRow = _ref => {
     className: `jsx-${cellStyle.__hash}` + " " + "title-cell-content"
   }, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
     content: title
-  }, _ref2 => {
-    let {
-      ref: tooltipRef,
-      onMouseOver,
-      onMouseOut
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: tooltipRef,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut,
-      style: {
-        maxWidth
-      },
-      className: `jsx-${cellStyle.__hash}` + " " + "title-cell-content"
-    }, title);
-  }) : title)));
+  }, ({
+    ref: tooltipRef,
+    onMouseOver,
+    onMouseOut
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    style: {
+      maxWidth
+    },
+    className: `jsx-${cellStyle.__hash}` + " " + "title-cell-content"
+  }, title)) : title)));
 };
 PivotTableTitleRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,

package/build/es/components/PivotTable/PivotTableTitleRows.js

@@ -3,12 +3,11 @@ import React from 'react';
 import getFilterText from '../../visualizations/util/getFilterText.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
 import { PivotTableTitleRow } from './PivotTableTitleRow.js';
-export const PivotTableTitleRows = _ref => {
+export const PivotTableTitleRows = ({
+  clippingResult,
+  width
+}) => {
   var _engine$visualization;
-  let {
-    clippingResult,
-    width
-  } = _ref;
   const engine = usePivotTableEngine();
   return /*#__PURE__*/React.createElement(React.Fragment, null, engine.options.title ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
     title: engine.options.title,

package/build/es/components/PivotTable/PivotTableValueCell.js

@@ -7,13 +7,12 @@ import { isNumericValueType, isBooleanValueType } from '../../modules/valueTypes
 import { PivotTableCell } from './PivotTableCell.js';
 import { PivotTableEmptyCell } from './PivotTableEmptyCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
-export const PivotTableValueCell = _ref => {
+export const PivotTableValueCell = ({
+  row,
+  column,
+  onToggleContextualMenu
+}) => {
   var _cellContent$titleVal, _cellContent$rendered;
-  let {
-    row,
-    column,
-    onToggleContextualMenu
-  } = _ref;
   const engine = usePivotTableEngine();
   const cellRef = useRef(undefined);
   const cellContent = engine.get({

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/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/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,

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

@@ -102,11 +102,10 @@ describe('<HoverMenuBar/>', () => {
     });
   });
 });
-function createFullMenuBarWrapper() {
-  let {
-    menuItemOnClickSpy,
-    subMenuItemOnClickSpy
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function createFullMenuBarWrapper({
+  menuItemOnClickSpy,
+  subMenuItemOnClickSpy
+} = {}) {
   return render(/*#__PURE__*/React.createElement(HoverMenuBar, null, /*#__PURE__*/React.createElement(HoverMenuDropdown, {
     label: "Menu A"
   }, /*#__PURE__*/React.createElement(HoverMenuList, null, /*#__PURE__*/React.createElement(HoverMenuListItem, {

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

@@ -1,4 +1,6 @@
-import { shallow, mount } from 'enzyme';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
 import React from 'react';
 import { HoverMenuList, HoverMenuListItem } from '../index.js';
 describe('<HoverMenuList/>', () => {
@@ -22,15 +24,15 @@ describe('<HoverMenuList/>', () => {
     expect(wrapper.find('ul').prop('data-test')).toBe(dataTest);
   });
   it('accept a `dense` prop', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(HoverMenuList, {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, {
       dense: true
     }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
       label: "item 1"
     }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
       label: "item 2"
     })));
-    expect(wrapper.find('li').first()).toHaveClassName('dense');
-    expect(wrapper.find('li').last()).toHaveClassName('dense');
+    expect(screen.getByText('item 1').closest('li')).toHaveClass('dense');
+    expect(screen.getByText('item 2').closest('li')).toHaveClass('dense');
   });
   it('accept a `maxHeight` prop', () => {
     const maxHeight = '100000px';

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

@@ -4,27 +4,21 @@ import { IconChevronRight24, IconChevronLeft24 } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import menuButtonStyles from './MenuButton.styles.js';
-export const InterpretationsAndDetailsToggler = _ref => {
-  let {
-    onClick,
-    dataTest,
-    disabled,
-    isShowing
-  } = _ref;
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: onClick,
-    disabled: disabled,
-    "data-test": dataTest,
-    className: "jsx-1238484262 " + `jsx-${menuButtonStyles.__hash}`
-  }, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, null) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: menuButtonStyles.__hash
-  }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1238484262"
-  }, ["button.jsx-1238484262{gap:8px;}"]));
-};
-InterpretationsAndDetailsToggler.defaultProps = {
-  dataTest: 'dhis2-analytics-interpretationsanddetailstoggler'
-};
+export const InterpretationsAndDetailsToggler = ({
+  onClick,
+  dataTest = 'dhis2-analytics-interpretationsanddetailstoggler',
+  disabled,
+  isShowing
+}) => /*#__PURE__*/React.createElement("button", {
+  onClick: onClick,
+  disabled: disabled,
+  "data-test": dataTest,
+  className: "jsx-1238484262 " + `jsx-${menuButtonStyles.__hash}`
+}, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, null) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: menuButtonStyles.__hash
+}, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1238484262"
+}, ["button.jsx-1238484262{gap:8px;}"]));
 InterpretationsAndDetailsToggler.propTypes = {
   onClick: PropTypes.func.isRequired,
   dataTest: PropTypes.string,

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

@@ -2,22 +2,16 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const Toolbar = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["2617706539", [colors.grey400, colors.white]]])
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2617706539",
-    dynamic: [colors.grey400, colors.white]
-  }, [`div.__jsx-style-dynamic-selector{box-sizing:border-box;min-height:32px;max-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`]));
-};
-Toolbar.defaultProps = {
-  dataTest: 'dhis2-analytics-toolbar'
-};
+export const Toolbar = ({
+  children,
+  dataTest = 'dhis2-analytics-toolbar'
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["2617706539", [colors.grey400, colors.white]]])
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2617706539",
+  dynamic: [colors.grey400, colors.white]
+}, [`div.__jsx-style-dynamic-selector{box-sizing:border-box;min-height:32px;max-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`]));
 Toolbar.propTypes = {
   children: PropTypes.node,
   dataTest: PropTypes.string