@dhis2/analytics 25.1.22 → 25.2.1

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

@@ -0,0 +1,75 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, elevations, spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import { useHoverMenubarContext } from './HoverMenuBar.js';
+
+const throwErrorIfNotInitialized = () => {
+  throw new Error('`HoverMenuListContext` has not been initialised');
+};
+
+const HoverMenuListContext = /*#__PURE__*/createContext({
+  onSubmenuAnchorMouseEnter: throwErrorIfNotInitialized,
+  onMenuItemMouseEnter: throwErrorIfNotInitialized,
+  openedSubMenuEl: null,
+  dense: false
+});
+
+const useHoverMenuListContext = () => useContext(HoverMenuListContext);
+
+const HoverMenuList = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense,
+    maxHeight,
+    maxWidth
+  } = _ref;
+  const {
+    setLastHoveredSubMenuEl
+  } = useHoverMenubarContext();
+  const [openedSubMenuEl, setOpenedSubMenuEl] = useState(null);
+  const onSubmenuAnchorMouseEnter = useCallback(event => {
+    if (openedSubMenuEl !== event.currentTarget) {
+      setOpenedSubMenuEl(event.currentTarget);
+      setLastHoveredSubMenuEl(event.currentTarget);
+    }
+  }, [openedSubMenuEl, setLastHoveredSubMenuEl]);
+  const onMenuItemMouseEnter = useCallback(() => {
+    setOpenedSubMenuEl(null);
+    setLastHoveredSubMenuEl(null);
+  }, [setLastHoveredSubMenuEl]);
+  return /*#__PURE__*/React.createElement(HoverMenuListContext.Provider, {
+    value: {
+      onSubmenuAnchorMouseEnter,
+      onMenuItemMouseEnter,
+      openedSubMenuEl,
+      dense
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["3026610659", [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]]]) + " " + (className || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3026610659",
+    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:".concat(colors.white, ";border:1px solid ").concat(colors.grey200, ";border-radius:3px;box-shadow:").concat(elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(spacers.dp4, " 0;overflow:auto;list-style:none;}")])));
+};
+
+HoverMenuList.defaultProps = {
+  dataTest: 'dhis2-analytics-hovermenulist',
+  maxWidth: '380px',
+  maxHeight: 'auto'
+};
+HoverMenuList.propTypes = {
+  /** Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` */
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataTest: PropTypes.string,
+
+  /** Gives all HoverMenuListItem children a dense style */
+  dense: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  maxWidth: PropTypes.string
+};
+export { HoverMenuList, useHoverMenuListContext };

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

@@ -0,0 +1,78 @@
+import _JSXStyle from "styled-jsx/style";
+import { Popper } from '@dhis2-ui/popper';
+import { Portal } from '@dhis2-ui/portal';
+import { IconChevronRight24 } from '@dhis2/ui-icons';
+import cx from 'classnames';
+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 ref = useRef();
+  const {
+    onSubmenuAnchorMouseEnter,
+    onMenuItemMouseEnter,
+    openedSubMenuEl,
+    dense
+  } = useHoverMenuListContext();
+  const isSubMenuOpen = openedSubMenuEl === ref.current;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+    ref: ref,
+    "data-test": dataTest,
+    onClick: !disabled && !children && onClick ? onClick : undefined,
+    onMouseEnter: disabled ? undefined : children ? onSubmenuAnchorMouseEnter : onMenuItemMouseEnter,
+    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
+      destructive,
+      disabled,
+      dense,
+      active: isSubMenuOpen,
+      'with-chevron': children
+    }) || "")
+  }, icon && /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "icon"
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "label"
+  }, label), !!children && /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "chevron"
+  }, /*#__PURE__*/React.createElement(IconChevronRight24, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles)), children && isSubMenuOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+    placement: "right-start",
+    reference: ref
+  }, /*#__PURE__*/React.createElement(HoverMenuList, {
+    dense: dense
+  }, children))));
+};
+
+HoverMenuListItem.defaultProps = {
+  dataTest: 'dhis2-uicore-hovermenulistitem'
+};
+HoverMenuListItem.propTypes = {
+  // Nested menu items become submenus
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataTest: PropTypes.string,
+  destructive: PropTypes.bool,
+  disabled: PropTypes.bool,
+
+  /** An icon for the left side of the menu item */
+  icon: PropTypes.node,
+
+  /** Text in the menu item */
+  label: PropTypes.node,
+
+  /** Click handler */
+  onClick: PropTypes.func
+};
+export { HoverMenuListItem };

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

@@ -0,0 +1,4 @@
+import { colors, spacers } from '@dhis2/ui-constants';
+const _defaultExport = ["li.jsx-1056713124{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px ".concat(spacers.dp24, ";cursor:pointer;list-style:none;background-color:").concat(colors.white, ";color:").concat(colors.grey900, ";fill:").concat(colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-1056713124:hover{background-color:".concat(colors.grey200, ";}"), "li.jsx-1056713124:active,li.active.jsx-1056713124{background-color:".concat(colors.grey300, ";}"), "li.destructive.jsx-1056713124{color:".concat(colors.red700, ";fill:").concat(colors.red600, ";}"), "li.destructive.jsx-1056713124:hover{background-color:".concat(colors.red050, ";}"), "li.destructive.jsx-1056713124:active,li.destructive.active.jsx-1056713124{background-color:".concat(colors.red100, ";}"), "li.disabled.jsx-1056713124{cursor:not-allowed;color:".concat(colors.grey500, ";fill:").concat(colors.grey500, ";}"), "li.disabled.jsx-1056713124:hover{background-color:".concat(colors.white, ";}"), ".label.jsx-1056713124{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp12, " 0;}"), "li.dense.jsx-1056713124 .label.jsx-1056713124{padding:".concat(spacers.dp8, " 0;}"), ".icon.jsx-1056713124{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(spacers.dp12, ";width:24px;height:24px;}"), ".chevron.jsx-1056713124{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(spacers.dp24, ";}"), "li.dense.jsx-1056713124 .icon.jsx-1056713124{margin-right:".concat(spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-1056713124 .icon.jsx-1056713124>svg{width:24px;height:24px;}", "li.dense.jsx-1056713124 .icon.jsx-1056713124>svg,li.jsx-1056713124 .chevron.jsx-1056713124>svg{width:16px;height:16px;}"];
+_defaultExport.__hash = "1056713124";
+export default _defaultExport;

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

@@ -0,0 +1,168 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { HoverMenuBar, HoverMenuDropdown, HoverMenuList, HoverMenuListItem } from '../index.js';
+describe('<HoverMenuBar/>', () => {
+  it('renders children', () => {
+    const childNode = 'text node';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuBar, null, childNode));
+    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuBar, {
+      dataTest: dataTest
+    }, "children"));
+    expect(wrapper.find('div').prop('data-test')).toBe(dataTest);
+  });
+  describe('mouse interactions', () => {
+    it('does not open on hover before a dropdown anchor is clicked', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.mouseOver(screen.getByText('Menu A'));
+      await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item A.2', false], ['Menu item A.3', false]]);
+    });
+    it('does not open when a disabled dropdown anchor is clicked', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu C'));
+      await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item A.2', false], ['Menu item A.3', false]]);
+    });
+    it('opens menu list when clicked', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu A'));
+      await expectMenuItemsInDocument([['Menu item A.1', true], ['Menu item B.1', false], ['Menu item C.1', false]]);
+    });
+    it('responds to hover once open', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu A'));
+      fireEvent.mouseOver(screen.getByText('Menu B'));
+      await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item B.1', true], ['Menu item C.1', false]]);
+    });
+    it('does not open disabled dropdown on hover in hover mode', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu B'));
+      fireEvent.mouseOver(screen.getByText('Menu C'));
+      await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item C.1', false]]);
+    });
+    it('opens submenus when in hover mode', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu B'));
+      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await expectMenuItemsInDocument([['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true], ['Menu item B.2.1', false], ['Menu item B.2.2', false], ['Menu item B.2.3', false]]);
+      fireEvent.mouseOver(screen.getByText('Menu item B.2'));
+      await expectMenuItemsInDocument([['Menu item B.1.1', false], ['Menu item B.1.2', false], ['Menu item B.1.3', false], ['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true]]);
+    });
+    it('does not open disabled submenus when in hover mode', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu B'));
+      fireEvent.mouseOver(screen.getByText('Menu item B.2'));
+      await expectMenuItemsInDocument([['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true], ['Menu item B.3.1', false], ['Menu item B.3.2', false], ['Menu item B.3.3', false]]);
+      fireEvent.mouseOver(screen.getByText('Menu item B.3'));
+      await expectMenuItemsInDocument([['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true], ['Menu item B.3.1', false], ['Menu item B.3.2', false], ['Menu item B.3.3', false]]);
+    });
+    it('closes when clicking on then document', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu A'));
+      await expectMenuItemsInDocument([['Menu item A.1', true]]);
+      fireEvent.click(document);
+      await expectMenuItemsInDocument([['Menu item A.1', false]]);
+    });
+    it('stays open when clicking a open submenu anchor', async () => {
+      createFullMenuBarWrapper();
+      fireEvent.click(screen.getByText('Menu B'));
+      await expectMenuItemsInDocument([['Menu item B.1', true]]);
+      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true]]);
+      fireEvent.click(screen.getByText('Menu item B.1'));
+      await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true]]);
+    });
+    it('calls the onClick of the menu item and closes when clicking a menu item', async () => {
+      const menuItemOnClickSpy = jest.fn();
+      createFullMenuBarWrapper({
+        menuItemOnClickSpy
+      });
+      fireEvent.click(screen.getByText('Menu A'));
+      await expectMenuItemsInDocument([['Menu item A.1', true]]);
+      fireEvent.click(screen.getByText('Menu item A.1'));
+      expect(menuItemOnClickSpy).toHaveBeenCalledTimes(1);
+      await expectMenuItemsInDocument([['Menu item A.1', false]]);
+    });
+    it('calls the onClick of the menu item and closes when clicking a submenu item', async () => {
+      const subMenuItemOnClickSpy = jest.fn();
+      createFullMenuBarWrapper({
+        subMenuItemOnClickSpy
+      });
+      fireEvent.click(screen.getByText('Menu B'));
+      await expectMenuItemsInDocument([['Menu item B.1', true]]);
+      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await expectMenuItemsInDocument([['Menu item B.1.1', true]]);
+      fireEvent.click(screen.getByText('Menu item B.1.1'));
+      expect(subMenuItemOnClickSpy).toHaveBeenCalledTimes(1);
+      await expectMenuItemsInDocument([['Menu item B.1', false], ['Menu item B.1.1', false], ['Menu item B.1.1', false]]);
+    });
+  });
+});
+
+function createFullMenuBarWrapper() {
+  let {
+    menuItemOnClickSpy,
+    subMenuItemOnClickSpy
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render( /*#__PURE__*/React.createElement(HoverMenuBar, null, /*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    label: "Menu A"
+  }, /*#__PURE__*/React.createElement(HoverMenuList, null, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item A.1",
+    onClick: menuItemOnClickSpy
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item A.2"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item A.3"
+  }))), /*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    label: "Menu B"
+  }, /*#__PURE__*/React.createElement(HoverMenuList, null, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.1"
+  }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.1.1",
+    onClick: subMenuItemOnClickSpy
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.1.2"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.1.3"
+  })), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.2"
+  }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.2.1"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.2.2"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.2.3"
+  })), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.3",
+    disabled: true
+  }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.3.1"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.3.2"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item B.3.3"
+  })))), /*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    label: "Menu C",
+    disabled: true
+  }, /*#__PURE__*/React.createElement(HoverMenuList, null, /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item C.1"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item C.2"
+  }), /*#__PURE__*/React.createElement(HoverMenuListItem, {
+    label: "Menu item C.3"
+  })))));
+}
+
+async function expectMenuItemsInDocument(items) {
+  for (const [text, inDocument] of items) {
+    if (inDocument) {
+      expect(await screen.findByText(text)).toBeInTheDocument();
+    } else {
+      expect(screen.queryByText(text)).not.toBeInTheDocument();
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { HoverMenuDropdown } from '../index.js';
+describe('<HoverMenuDropdown/>', () => {
+  /* Most of the props for this component are included
+   * in the mouse interaction tests for the HoverMenuBar.
+   * Only the `dataTest` prop needs to be verified here. */
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuDropdown, {
+      label: "test dropdown",
+      dataTest: dataTest
+    }, "children"));
+    expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+import { HoverMenuList, HoverMenuListItem } from '../index.js';
+describe('<HoverMenuList/>', () => {
+  const dataTest = 'test';
+  const childNode = 'children';
+  it('renders children', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, null, childNode));
+    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  });
+  it('accept a `className` prop', () => {
+    const className = 'className';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
+      className: className
+    }, childNode));
+    expect(wrapper.find('ul')).toHaveClassName(className);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest
+    }, childNode));
+    expect(wrapper.find('ul').prop('data-test')).toBe(dataTest);
+  });
+  it('accept a `dense` prop', () => {
+    const wrapper = mount( /*#__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');
+  });
+  it('accept a `maxHeight` prop', () => {
+    const maxHeight = '100000px';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
+      maxHeight: maxHeight
+    }, childNode));
+    expect(wrapper.find('style').text()).toContain("max-height: ".concat(maxHeight));
+  });
+  it('accept a `maxWidth` prop', () => {
+    const maxWidth = '100000px';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
+      maxWidth: maxWidth
+    }, childNode));
+    expect(wrapper.find('style').text()).toContain("max-width: ".concat(maxWidth));
+  });
+});

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

@@ -0,0 +1,41 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { HoverMenuListItem } from '../index.js';
+describe('<HoverMenuListItem/>', () => {
+  /* Some of the props for this component are included
+   * in the mouse interaction tests for the HoverMenuBar.
+   * Only the `className`, `dataTest`, `destructive` and
+   * `icon` prop need to be verified here. */
+  it('accepts a `className` prop', () => {
+    const className = 'className';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuListItem, {
+      className: className
+    }));
+    expect(wrapper.find('li')).toHaveClassName(className);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuListItem, {
+      dataTest: dataTest
+    }));
+    expect(wrapper.find('li').prop('data-test')).toBe(dataTest);
+  });
+  it('accepts a `destructive` prop', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuListItem, {
+      destructive: true
+    }));
+    expect(wrapper.find('li')).toHaveClassName('destructive');
+  });
+  it('accepts an `icon` prop', () => {
+    const iconText = 'I am an icon';
+    const icon = /*#__PURE__*/React.createElement("span", {
+      id: "testicon"
+    }, iconText);
+    const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuListItem, {
+      icon: icon
+    }));
+    expect(wrapper.find('span.icon')).toExist();
+    expect(wrapper.find('span#testicon')).toExist();
+    expect(wrapper.find('span#testicon').text()).toBe(iconText);
+  });
+});

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

@@ -0,0 +1,4 @@
+export { HoverMenuBar } from './HoverMenuBar.js';
+export { HoverMenuDropdown } from './HoverMenuDropdown.js';
+export { HoverMenuList } from './HoverMenuList.js';
+export { HoverMenuListItem } from './HoverMenuListItem.js';

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

@@ -0,0 +1,33 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+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-".concat(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'
+};
+InterpretationsAndDetailsToggler.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  isShowing: PropTypes.bool
+};

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

@@ -0,0 +1,4 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants';
+const _defaultExport = ["button.jsx-4266781296{all:unset;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;line-height:14px;padding:0 ".concat(spacers.dp12, ";color:").concat(colors.grey900, ";-webkit-transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;cursor:pointer;}"), "button.jsx-4266781296:hover.jsx-4266781296:enabled,button.jsx-4266781296:active{background-color:".concat(colors.grey200, ";}"), "button.jsx-4266781296:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.jsx-4266781296:focus.jsx-4266781296:not(:focus-visible){outline:none;}", "button.jsx-4266781296:disabled{color:".concat(colors.grey500, ";cursor:not-allowed;}")];
+_defaultExport.__hash = "4266781296";
+export default _defaultExport;

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

@@ -0,0 +1,24 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors } from '@dhis2/ui-constants';
+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 ".concat(colors.grey400, ";background-color:").concat(colors.white, ";}")]));
+};
+Toolbar.defaultProps = {
+  dataTest: 'dhis2-analytics-toolbar'
+};
+Toolbar.propTypes = {
+  children: PropTypes.node,
+  dataTest: PropTypes.string
+};

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

@@ -0,0 +1,29 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const ToolbarSidebar = _ref => {
+  let {
+    children,
+    dataTest,
+    isHidden
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["1150014343", [colors.grey400]]]) + " " + (cx('container', {
+      isHidden
+    }) || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1150014343",
+    dynamic: [colors.grey400]
+  }, ["div.__jsx-style-dynamic-selector{width:260px;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-right:1px solid ".concat(colors.grey400, ";}"), "div.isHidden.__jsx-style-dynamic-selector{display:none;}"]));
+};
+ToolbarSidebar.defaultProps = {
+  dataTest: 'dhis2-analytics-toolbarsidebar'
+};
+ToolbarSidebar.propTypes = {
+  children: PropTypes.node,
+  dataTest: PropTypes.string,
+  isHidden: PropTypes.bool
+};

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

@@ -0,0 +1,38 @@
+import _JSXStyle from "styled-jsx/style";
+import { CircularLoader } from '@dhis2-ui/loader';
+import i18n from '@dhis2/d2-i18n';
+import { colors } from '@dhis2/ui-constants';
+import { IconSync16 } from '@dhis2/ui-icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import menuButtonStyles from './MenuButton.styles.js';
+export const UpdateButton = _ref => {
+  let {
+    onClick,
+    disabled,
+    loading,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    disabled: disabled,
+    "data-test": dataTest,
+    className: "jsx-".concat(menuButtonStyles.__hash) + " " + _JSXStyle.dynamic([["2364287882", [colors.blue700, colors.blue100, colors.blue200]]])
+  }, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
+    extrasmall: true
+  }) : /*#__PURE__*/React.createElement(IconSync16, null), i18n.t('Update'), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: menuButtonStyles.__hash
+  }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2364287882",
+    dynamic: [colors.blue700, colors.blue100, colors.blue200]
+  }, ["button.__jsx-style-dynamic-selector{gap:8px;color:".concat(colors.blue700, ";font-weight:500;}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:enabled{background:".concat(colors.blue100, ";}"), "button.__jsx-style-dynamic-selector:active{background:".concat(colors.blue200, ";}")]));
+};
+UpdateButton.defaultProps = {
+  dataTest: 'dhis2-analytics-updatebutton'
+};
+UpdateButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool
+};

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

@@ -0,0 +1,43 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { InterpretationsAndDetailsToggler } from '../index.js';
+describe('<InterpretationsAndDetailsToggler/>', () => {
+  const noop = () => {};
+
+  it('accepts an `onClick` prop', () => {
+    const onClick = jest.fn();
+    const wrapper = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+      onClick: onClick
+    }));
+    wrapper.simulate('click');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+      onClick: noop,
+      dataTest: dataTest
+    }));
+    expect(wrapper.prop('data-test')).toBe(dataTest);
+  });
+  it('accepts a `disabled` prop', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+      disabled: true,
+      onClick: noop
+    }));
+    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+  });
+  it('accepts an `isShowing` prop', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+      onClick: noop
+    }));
+    const wrapperWithIsShowing = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+      isShowing: true,
+      onClick: noop
+    }));
+    expect(wrapper.find('SvgChevronRight24')).toHaveLength(0);
+    expect(wrapper.find('SvgChevronLeft24')).toHaveLength(1);
+    expect(wrapperWithIsShowing.find('SvgChevronRight24')).toHaveLength(1);
+    expect(wrapperWithIsShowing.find('SvgChevronLeft24')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Toolbar } from '../index.js';
+describe('<Toolbar/>', () => {
+  it('renders children', () => {
+    const childNode = 'text node';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(Toolbar, null, childNode));
+    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = shallow( /*#__PURE__*/React.createElement(Toolbar, {
+      dataTest: dataTest
+    }));
+    expect(wrapper.prop('data-test')).toBe(dataTest);
+  });
+});