@dhis2/analytics 25.1.22 → 25.2.0

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHoverMenubarContext = exports.HoverMenuBar = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const throwErrorIfNotInitialized = () => {
+  throw new Error('`HoverMenubarContext` has not been initialised');
+};
+
+const HoverMenubarContext = /*#__PURE__*/(0, _react.createContext)({
+  closeMenu: throwErrorIfNotInitialized,
+  onDropDownButtonClick: throwErrorIfNotInitialized,
+  onDropDownButtonMouseOver: throwErrorIfNotInitialized,
+  setLastHoveredSubMenuEl: throwErrorIfNotInitialized,
+  openedDropdownEl: null
+});
+
+const useHoverMenubarContext = () => (0, _react.useContext)(HoverMenubarContext);
+
+exports.useHoverMenubarContext = useHoverMenubarContext;
+
+const HoverMenuBar = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  const [openedDropdownEl, setOpenedDropdownEl] = (0, _react.useState)(null);
+  const [lastHoveredSubMenuEl, setLastHoveredSubMenuEl] = (0, _react.useState)(null);
+  const [isInHoverMode, setIsInHoverMode] = (0, _react.useState)(false);
+  const closeMenu = (0, _react.useCallback)(() => {
+    setIsInHoverMode(false);
+    setOpenedDropdownEl(null);
+  }, []);
+  const onDocumentClick = (0, _react.useCallback)(event => {
+    const isClickOnOpenedSubMenuAnchor = lastHoveredSubMenuEl && (lastHoveredSubMenuEl === event.target || lastHoveredSubMenuEl.contains(event.target));
+
+    if (!isClickOnOpenedSubMenuAnchor) {
+      closeMenu();
+    }
+  }, [closeMenu, lastHoveredSubMenuEl]);
+  const onDropDownButtonClick = (0, _react.useCallback)(event => {
+    if (!isInHoverMode) {
+      setIsInHoverMode(true);
+      setOpenedDropdownEl(event.currentTarget);
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, isInHoverMode]);
+  const onDropDownButtonMouseOver = (0, _react.useCallback)(event => {
+    if (isInHoverMode) {
+      setOpenedDropdownEl(event.currentTarget);
+    }
+  }, [isInHoverMode]);
+  const closeMenuWithEsc = (0, _react.useCallback)(event => {
+    if (event.keyCode === 27) {
+      closeMenu();
+    }
+  }, [closeMenu]);
+  (0, _react.useEffect)(() => {
+    if (isInHoverMode) {
+      document.addEventListener('click', onDocumentClick, {
+        once: true
+      });
+    }
+
+    return () => {
+      document.removeEventListener('click', onDocumentClick);
+    };
+  }, [onDocumentClick, isInHoverMode]);
+  return /*#__PURE__*/_react.default.createElement(HoverMenubarContext.Provider, {
+    value: {
+      onDropDownButtonClick,
+      onDropDownButtonMouseOver,
+      openedDropdownEl,
+      setLastHoveredSubMenuEl
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onKeyDown: closeMenuWithEsc,
+    "data-test": dataTest,
+    className: "jsx-3020154784"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    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;}"])));
+};
+
+exports.HoverMenuBar = HoverMenuBar;
+HoverMenuBar.defaultProps = {
+  dataTest: 'dhis2-analytics-hovermenubar'
+};
+HoverMenuBar.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  dataTest: _propTypes.default.string
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoverMenuDropdown = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _popper = require("@dhis2-ui/popper");
+
+var _portal = require("@dhis2-ui/portal");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _MenuButtonStyles = _interopRequireDefault(require("../MenuButton.styles.js"));
+
+var _HoverMenuBar = require("./HoverMenuBar.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const HoverMenuDropdown = _ref => {
+  let {
+    children,
+    label,
+    dataTest,
+    disabled
+  } = _ref;
+  const buttonRef = (0, _react.useRef)();
+  const {
+    onDropDownButtonClick,
+    onDropDownButtonMouseOver,
+    openedDropdownEl
+  } = (0, _HoverMenuBar.useHoverMenubarContext)();
+  const isOpen = openedDropdownEl === buttonRef.current;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    ref: buttonRef,
+    onClick: onDropDownButtonClick,
+    disabled: disabled,
+    onMouseOver: disabled ? undefined : onDropDownButtonMouseOver,
+    "data-test": dataTest,
+    className: "jsx-".concat(_MenuButtonStyles.default.__hash)
+  }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _MenuButtonStyles.default.__hash
+  }, _MenuButtonStyles.default)), isOpen && /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    placement: "bottom-start",
+    reference: buttonRef
+  }, children)));
+};
+
+exports.HoverMenuDropdown = HoverMenuDropdown;
+HoverMenuDropdown.defaultProps = {
+  dataTest: 'dhis2-analytics-hovermenudropdown'
+};
+HoverMenuDropdown.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  label: _propTypes.default.node.isRequired,
+  dataTest: _propTypes.default.string,
+  disabled: _propTypes.default.bool
+};

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHoverMenuListContext = exports.HoverMenuList = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _HoverMenuBar = require("./HoverMenuBar.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const throwErrorIfNotInitialized = () => {
+  throw new Error('`HoverMenuListContext` has not been initialised');
+};
+
+const HoverMenuListContext = /*#__PURE__*/(0, _react.createContext)({
+  onSubmenuAnchorMouseEnter: throwErrorIfNotInitialized,
+  onMenuItemMouseEnter: throwErrorIfNotInitialized,
+  openedSubMenuEl: null,
+  dense: false
+});
+
+const useHoverMenuListContext = () => (0, _react.useContext)(HoverMenuListContext);
+
+exports.useHoverMenuListContext = useHoverMenuListContext;
+
+const HoverMenuList = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense,
+    maxHeight,
+    maxWidth
+  } = _ref;
+  const {
+    setLastHoveredSubMenuEl
+  } = (0, _HoverMenuBar.useHoverMenubarContext)();
+  const [openedSubMenuEl, setOpenedSubMenuEl] = (0, _react.useState)(null);
+  const onSubmenuAnchorMouseEnter = (0, _react.useCallback)(event => {
+    if (openedSubMenuEl !== event.currentTarget) {
+      setOpenedSubMenuEl(event.currentTarget);
+      setLastHoveredSubMenuEl(event.currentTarget);
+    }
+  }, [openedSubMenuEl, setLastHoveredSubMenuEl]);
+  const onMenuItemMouseEnter = (0, _react.useCallback)(() => {
+    setOpenedSubMenuEl(null);
+    setLastHoveredSubMenuEl(null);
+  }, [setLastHoveredSubMenuEl]);
+  return /*#__PURE__*/_react.default.createElement(HoverMenuListContext.Provider, {
+    value: {
+      onSubmenuAnchorMouseEnter,
+      onMenuItemMouseEnter,
+      openedSubMenuEl,
+      dense
+    }
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3026610659", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.spacers.dp4]]]) + " " + (className || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3026610659",
+    dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.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(_uiConstants.colors.white, ";border:1px solid ").concat(_uiConstants.colors.grey200, ";border-radius:3px;box-shadow:").concat(_uiConstants.elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(_uiConstants.spacers.dp4, " 0;overflow:auto;list-style:none;}")])));
+};
+
+exports.HoverMenuList = HoverMenuList;
+HoverMenuList.defaultProps = {
+  dataTest: 'dhis2-analytics-hovermenulist',
+  maxWidth: '380px',
+  maxHeight: 'auto'
+};
+HoverMenuList.propTypes = {
+  /** Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` */
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  dataTest: _propTypes.default.string,
+
+  /** Gives all HoverMenuListItem children a dense style */
+  dense: _propTypes.default.bool,
+  maxHeight: _propTypes.default.string,
+  maxWidth: _propTypes.default.string
+};

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoverMenuListItem = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _popper = require("@dhis2-ui/popper");
+
+var _portal = require("@dhis2-ui/portal");
+
+var _uiIcons = require("@dhis2/ui-icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _HoverMenuList = require("./HoverMenuList.js");
+
+var _HoverMenuListItemStyles = _interopRequireDefault(require("./HoverMenuListItem.styles.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const HoverMenuListItem = _ref => {
+  let {
+    onClick,
+    children,
+    icon,
+    className,
+    destructive,
+    disabled,
+    dataTest,
+    label
+  } = _ref;
+  const ref = (0, _react.useRef)();
+  const {
+    onSubmenuAnchorMouseEnter,
+    onMenuItemMouseEnter,
+    openedSubMenuEl,
+    dense
+  } = (0, _HoverMenuList.useHoverMenuListContext)();
+  const isSubMenuOpen = openedSubMenuEl === ref.current;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
+    ref: ref,
+    "data-test": dataTest,
+    onClick: !disabled && !children && onClick ? onClick : undefined,
+    onMouseEnter: disabled ? undefined : children ? onSubmenuAnchorMouseEnter : onMenuItemMouseEnter,
+    className: "jsx-".concat(_HoverMenuListItemStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
+      destructive,
+      disabled,
+      dense,
+      active: isSubMenuOpen,
+      'with-chevron': children
+    }) || "")
+  }, icon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-".concat(_HoverMenuListItemStyles.default.__hash) + " " + "icon"
+  }, icon), /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-".concat(_HoverMenuListItemStyles.default.__hash) + " " + "label"
+  }, label), !!children && /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-".concat(_HoverMenuListItemStyles.default.__hash) + " " + "chevron"
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight24, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _HoverMenuListItemStyles.default.__hash
+  }, _HoverMenuListItemStyles.default)), children && isSubMenuOpen && /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    placement: "right-start",
+    reference: ref
+  }, /*#__PURE__*/_react.default.createElement(_HoverMenuList.HoverMenuList, {
+    dense: dense
+  }, children))));
+};
+
+exports.HoverMenuListItem = HoverMenuListItem;
+HoverMenuListItem.defaultProps = {
+  dataTest: 'dhis2-uicore-hovermenulistitem'
+};
+HoverMenuListItem.propTypes = {
+  // Nested menu items become submenus
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  dataTest: _propTypes.default.string,
+  destructive: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+
+  /** An icon for the left side of the menu item */
+  icon: _propTypes.default.node,
+
+  /** Text in the menu item */
+  label: _propTypes.default.node,
+
+  /** Click handler */
+  onClick: _propTypes.default.func
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _uiConstants = require("@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(_uiConstants.spacers.dp24, ";cursor:pointer;list-style:none;background-color:").concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";fill:").concat(_uiConstants.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(_uiConstants.colors.grey200, ";}"), "li.jsx-1056713124:active,li.active.jsx-1056713124{background-color:".concat(_uiConstants.colors.grey300, ";}"), "li.destructive.jsx-1056713124{color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red600, ";}"), "li.destructive.jsx-1056713124:hover{background-color:".concat(_uiConstants.colors.red050, ";}"), "li.destructive.jsx-1056713124:active,li.destructive.active.jsx-1056713124{background-color:".concat(_uiConstants.colors.red100, ";}"), "li.disabled.jsx-1056713124{cursor:not-allowed;color:".concat(_uiConstants.colors.grey500, ";fill:").concat(_uiConstants.colors.grey500, ";}"), "li.disabled.jsx-1056713124:hover{background-color:".concat(_uiConstants.colors.white, ";}"), ".label.jsx-1056713124{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp12, " 0;}"), "li.dense.jsx-1056713124 .label.jsx-1056713124{padding:".concat(_uiConstants.spacers.dp8, " 0;}"), ".icon.jsx-1056713124{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(_uiConstants.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(_uiConstants.spacers.dp24, ";}"), "li.dense.jsx-1056713124 .icon.jsx-1056713124{margin-right:".concat(_uiConstants.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";
+var _default = _defaultExport;
+exports.default = _default;

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

@@ -0,0 +1,219 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+
+var _react = require("@testing-library/react");
+
+var _enzyme = require("enzyme");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('<HoverMenuBar/>', () => {
+  it('renders children', () => {
+    const childNode = 'text node';
+    const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, childNode));
+    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  });
+  it('accepts a `dataTest` prop', () => {
+    const dataTest = 'test';
+    const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react2.default.createElement(_index.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();
+
+      _react.fireEvent.mouseOver(_react.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();
+
+      _react.fireEvent.click(_react.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();
+
+      _react.fireEvent.click(_react.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();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+
+      _react.fireEvent.mouseOver(_react.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();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+
+      _react.fireEvent.mouseOver(_react.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();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+
+      _react.fireEvent.mouseOver(_react.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]]);
+
+      _react.fireEvent.mouseOver(_react.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();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+
+      _react.fireEvent.mouseOver(_react.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]]);
+
+      _react.fireEvent.mouseOver(_react.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();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+
+      await expectMenuItemsInDocument([['Menu item A.1', true]]);
+
+      _react.fireEvent.click(document);
+
+      await expectMenuItemsInDocument([['Menu item A.1', false]]);
+    });
+    it('stays open when clicking a open submenu anchor', async () => {
+      createFullMenuBarWrapper();
+
+      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+
+      await expectMenuItemsInDocument([['Menu item B.1', true]]);
+
+      _react.fireEvent.mouseOver(_react.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]]);
+
+      _react.fireEvent.click(_react.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
+      });
+
+      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+
+      await expectMenuItemsInDocument([['Menu item A.1', true]]);
+
+      _react.fireEvent.click(_react.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
+      });
+
+      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+
+      await expectMenuItemsInDocument([['Menu item B.1', true]]);
+
+      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.1'));
+
+      await expectMenuItemsInDocument([['Menu item B.1.1', true]]);
+
+      _react.fireEvent.click(_react.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 (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu A"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.1",
+    onClick: menuItemOnClickSpy
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.3"
+  }))), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu B"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.1",
+    onClick: subMenuItemOnClickSpy
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.3"
+  })), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.3"
+  })), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3",
+    disabled: true
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.3"
+  })))), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu C",
+    disabled: true
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.3"
+  })))));
+}
+
+async function expectMenuItemsInDocument(items) {
+  for (const [text, inDocument] of items) {
+    if (inDocument) {
+      expect(await _react.screen.findByText(text)).toBeInTheDocument();
+    } else {
+      expect(_react.screen.queryByText(text)).not.toBeInTheDocument();
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.HoverMenuDropdown, {
+      label: "test dropdown",
+      dataTest: dataTest
+    }, "children"));
+    expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
+  });
+});