@dhis2/analytics 25.1.21 → 25.2.0

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

@@ -1,16 +1,19 @@
-import { SharingDialog } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { render, fireEvent, screen, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import React from 'react';
-import { OpenFileDialog } from '../../OpenFileDialog/OpenFileDialog.js';
-import { TranslationDialog } from '../../TranslationDialog/index.js';
-import { DeleteDialog } from '../DeleteDialog.js';
+import { HoverMenuBar } from '../../Toolbar/index.js';
 import { FileMenu } from '../FileMenu.js';
-import { GetLinkDialog } from '../GetLinkDialog.js';
-import { RenameDialog } from '../RenameDialog.js';
-import { SaveAsDialog } from '../SaveAsDialog.js';
+jest.mock('../../TranslationDialog/TranslationModal/useTranslationsResults.js', () => ({
+  /* This will keep the translation dialog in
+   * a loading state, which prevents it from
+   * throwing other errors */
+  useTranslationsResults: () => ({
+    translationsData: undefined,
+    fetching: true
+  })
+}));
 describe('The FileMenu component ', () => {
-  let shallowFileMenu;
-  let props;
   const onDelete = jest.fn();
   const onError = jest.fn();
   const onNew = jest.fn();
@@ -20,206 +23,307 @@ describe('The FileMenu component ', () => {
   const onSaveAs = jest.fn();
   const onShare = jest.fn();
   const onTranslate = jest.fn();
-
-  const getFileMenuComponent = props => {
-    if (!shallowFileMenu) {
-      shallowFileMenu = shallow( /*#__PURE__*/React.createElement(FileMenu, props));
-    }
-
-    return shallowFileMenu;
+  const baseProps = {
+    currentUser: {
+      id: 'u1',
+      displayName: 'Test user'
+    },
+    fileType: 'visualization',
+    fileObject: undefined,
+    onDelete,
+    onError,
+    onNew,
+    onOpen,
+    onRename,
+    onSave,
+    onSaveAs,
+    onShare,
+    onTranslate
   };
-
-  beforeEach(() => {
-    shallowFileMenu = undefined;
-    props = {
-      currentUser: {
-        id: 'u1',
-        displayName: 'Test user'
-      },
-      fileType: 'visualization',
-      fileObject: undefined,
-      onDelete,
-      onError,
-      onNew,
-      onOpen,
-      onRename,
-      onSave,
-      onSaveAs,
-      onShare,
-      onTranslate
-    };
-  });
-  it('renders a button', () => {
-    expect(getFileMenuComponent(props).find('button')).toHaveLength(1);
-  });
-  it('renders some enabled buttons regardless of the access settings', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['New', 'Open…'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(undefined));
-  });
-  it('renders some disabled buttons when no fileObject is present', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['Save as…', 'Rename…', 'Translate…', 'Share…', 'Get link…', 'Delete'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(true));
-  });
-  it('renders some enabled buttons when update access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: false,
-        manage: false,
-        update: true
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['Save', 'Rename…', 'Translate…'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(false));
-  });
-  it('renders enabled Delete button when delete access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: false,
-        update: false
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    expect(fileMenuComponent.findWhere(n => n.prop('label') === 'Delete').prop('disabled')).toBe(false);
-  });
-  it('renders enabled Share button when manage access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: false,
-        manage: true,
-        update: false
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    expect(fileMenuComponent.findWhere(n => n.prop('label') === 'Share…').prop('disabled')).toBe(false);
-  });
-  it('renders the OpenFileDialog component when the Open button is clicked', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Open…').simulate('click');
-    expect(fileMenuComponent.find(OpenFileDialog)).toHaveLength(1);
-  });
-  it('renders the RenameDialog when the Rename button is clicked', () => {
-    props.fileObject = {
+  const fullAccessProps = {
+    fileObject: {
       id: 'test',
       access: {
         delete: true,
         manage: true,
         update: true
-      }
+      },
+      href: 'http://dhis2.org'
+    }
+  };
+
+  const renderFileMenu = function () {
+    let customProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const props = { ...baseProps,
+      ...customProps
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Rename…').simulate('click');
-    expect(fileMenuComponent.find(RenameDialog)).toHaveLength(1);
-  });
-  it('renders the TranslationDialog when the Translate button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    const providerData = {
+      translations: {
+        translations: {}
+      },
+      sharing: {
+        meta: {
+          allowPublicAccess: true
+        },
+        object: {
+          userAccesses: [],
+          userGroupAccesses: []
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Translate…').simulate('click');
-    expect(fileMenuComponent.find(TranslationDialog)).toHaveLength(1);
+    return render( /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: providerData
+    }, /*#__PURE__*/React.createElement(HoverMenuBar, null, /*#__PURE__*/React.createElement(FileMenu, props))));
+  };
+
+  const openDropdown = async () => {
+    fireEvent.click(screen.getByTestId('dhis2-analytics-hovermenudropdown'));
+    expect(await screen.findByTestId('file-menu-container')).toBeVisible();
+  };
+
+  const MENU_ITEMS = {
+    NEW: {
+      testId: 'file-menu-new',
+      text: 'New'
+    },
+    OPEN: {
+      testId: 'file-menu-open',
+      text: 'Open…'
+    },
+    SAVE: {
+      testId: 'file-menu-save',
+      text: 'Save'
+    },
+    SAVE_AS: {
+      testId: 'file-menu-saveas',
+      text: 'Save as…'
+    },
+    RENAME: {
+      testId: 'file-menu-rename',
+      text: 'Rename…'
+    },
+    TRANSLATE: {
+      testId: 'file-menu-translate',
+      text: 'Translate…'
+    },
+    SHARE: {
+      testId: 'file-menu-sharing',
+      text: 'Share…'
+    },
+    GET_LINK: {
+      testId: 'file-menu-getlink',
+      text: 'Get link…'
+    },
+    DELETE: {
+      testId: 'file-menu-delete',
+      text: 'Delete'
+    }
+  };
+
+  const assertMenuItemsDisabledState = menuItems => {
+    for (const menuTitem of menuItems) {
+      const li = screen.getByTestId(menuTitem.testId);
+      expect(getByText(li, menuTitem.text)).toBeVisible();
+
+      if (menuTitem.disabled) {
+        expect(li).toHaveClass('disabled');
+      } else {
+        expect(li).not.toHaveClass('disabled');
+      }
+    }
+  };
+
+  it('renders a button', () => {
+    renderFileMenu();
+    expect(screen.getAllByTestId('dhis2-analytics-hovermenudropdown')).toHaveLength(1);
+    const button = screen.getByTestId('dhis2-analytics-hovermenudropdown');
+    expect(button).toBeVisible();
+    expect(button).toHaveTextContent('File');
   });
-  it('renders the SharingDialog when the Share button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('opens when clicking the button', async () => {
+    renderFileMenu();
+    expect(screen.queryByTestId('file-menu-container')).not.toBeInTheDocument();
+    await openDropdown();
+    expect(await screen.findByTestId('file-menu-container')).toBeVisible();
+  });
+  it('renders some enabled buttons regardless of the access settings', async () => {
+    renderFileMenu();
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.NEW,
+      disabled: false
+    }, { ...MENU_ITEMS.OPEN,
+      disabled: false
+    }]);
+  });
+  it('renders some disabled buttons when no fileObject is present', async () => {
+    renderFileMenu();
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SAVE_AS,
+      disabled: true
+    }, { ...MENU_ITEMS.RENAME,
+      disabled: true
+    }, { ...MENU_ITEMS.TRANSLATE,
+      disabled: true
+    }, { ...MENU_ITEMS.SHARE,
+      disabled: true
+    }, { ...MENU_ITEMS.GET_LINK,
+      disabled: true
+    }, { ...MENU_ITEMS.DELETE,
+      disabled: true
+    }]);
+  });
+  it('renders some enabled buttons when update access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: false,
+          manage: false,
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Share…').simulate('click');
-    expect(fileMenuComponent.find(SharingDialog)).toHaveLength(1);
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SAVE,
+      disabled: false
+    }, { ...MENU_ITEMS.RENAME,
+      disabled: false
+    }, { ...MENU_ITEMS.TRANSLATE,
+      disabled: false
+    }]);
   });
-  it('renders the GetLinkDialog when the Get link button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('renders enabled Delete button when delete access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: true,
+          manage: false,
+          update: false
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Get link…').simulate('click');
-    expect(fileMenuComponent.find(GetLinkDialog)).toHaveLength(1);
-  });
-  it('renders the DeleteDialog when the Delete button is clicked', () => {
-    props.fileObject = {
-      id: 'delete-test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.DELETE,
+      disabled: false
+    }]);
+  });
+  it('renders enabled Share button when manage access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: false,
+          manage: true,
+          update: false
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Delete').simulate('click');
-    expect(fileMenuComponent.find(DeleteDialog)).toHaveLength(1);
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SHARE,
+      disabled: false
+    }]);
   });
-  it('renders the SaveAsDialog when the Save as… button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('renders the OpenFileDialog component when the Open button is clicked', async () => {
+    renderFileMenu();
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.OPEN.testId));
+    expect(await screen.findByText('Open a visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the RenameDialog when the Rename button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.RENAME.testId));
+    expect(await screen.findByText('Rename visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the TranslationDialog when the Translate button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.TRANSLATE.testId));
+    expect(await screen.findByText('Translate', {
+      exact: false,
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SharingDialog when the Share button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.SHARE.testId));
+    expect(await screen.findByText('Sharing and access', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the GetLinkDialog when the Get link button is clicked', async () => {
+    const url = 'http://localhost/dhis-web-data-visualizer/#/test';
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.GET_LINK.testId));
+    expect(await screen.findByTestId('dhis2-uicore-modal')).toBeVisible();
+    expect(screen.getByRole('link', {
+      name: url
+    })).toHaveAttribute('href', url);
+  });
+  it('renders the DeleteDialog when the Delete button is clicked', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'delete-test',
+        access: {
+          delete: true,
+          manage: true,
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save as…').simulate('click');
-    expect(fileMenuComponent.find(SaveAsDialog)).toHaveLength(1);
-  });
-  it('renders the SaveAsDialog when the Save… button is clicked but no fileObject is present', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save…').simulate('click');
-    expect(fileMenuComponent.find(SaveAsDialog)).toHaveLength(1);
-  });
-  it('calls the onSave callback when the Save button is clicked and a fileObject is present', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    renderFileMenu(customProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.DELETE.testId));
+    expect(await screen.findByText('Delete visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SaveAsDialog when the Save as… button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.SAVE_AS.testId));
+    expect(await screen.findByText('Save visualization as', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SaveAsDialog when the Save… button is clicked but no fileObject is present', async () => {
+    const customProps = {
+      fileObject: {
+        // NOTE: no `id` field
+        access: {
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save').simulate('click');
-    expect(fileMenuComponent.find(OpenFileDialog).prop('open')).toBe(false);
-    expect(onSave).toHaveBeenCalled();
-  });
-  it('calls the onNew callback when the New button is clicked', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'New').simulate('click');
-    expect(fileMenuComponent.find(OpenFileDialog).prop('open')).toBe(false);
-    expect(onNew).toHaveBeenCalled();
+    renderFileMenu(customProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.SAVE.testId));
+    expect(await screen.findByText('Save visualization as', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('calls the onSave callback when the Save button is clicked and a fileObject is present', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.SAVE.testId));
+    expect(screen.queryByText('Open a visualization')).not.toBeVisible();
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+  it('calls the onNew callback when the New button is clicked', async () => {
+    renderFileMenu();
+    await openDropdown();
+    fireEvent.click(screen.getByTestId(MENU_ITEMS.NEW.testId));
+    expect(screen.queryByText('Open a visualization')).not.toBeVisible();
+    expect(onNew).toHaveBeenCalledTimes(1);
   });
 });

package/build/es/components/Options/VisualizationOptions.js

@@ -6,11 +6,12 @@ import { modalContent, tabSection, tabSectionTitle, tabSectionTitleMargin, tabSe
 
 const VisualizationOptions = _ref => {
   let {
+    initiallyActiveTabKey,
     optionsConfig,
     onClose,
     onUpdate
   } = _ref;
-  const [activeTabKey, setActiveTabKey] = useState();
+  const [activeTabKey, setActiveTabKey] = useState(initiallyActiveTabKey);
 
   const generateTabContent = sections => sections.map(_ref2 => {
     let {
@@ -92,6 +93,7 @@ const VisualizationOptions = _ref => {
 
 VisualizationOptions.propTypes = {
   optionsConfig: PropTypes.array.isRequired,
+  initiallyActiveTabKey: PropTypes.string,
   onClose: PropTypes.func,
   onUpdate: PropTypes.func
 };

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

@@ -0,0 +1,90 @@
+import _JSXStyle from "styled-jsx/style";
+import PropTypes from 'prop-types';
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+const throwErrorIfNotInitialized = () => {
+  throw new Error('`HoverMenubarContext` has not been initialised');
+};
+
+const HoverMenubarContext = /*#__PURE__*/createContext({
+  closeMenu: throwErrorIfNotInitialized,
+  onDropDownButtonClick: throwErrorIfNotInitialized,
+  onDropDownButtonMouseOver: throwErrorIfNotInitialized,
+  setLastHoveredSubMenuEl: throwErrorIfNotInitialized,
+  openedDropdownEl: null
+});
+
+const useHoverMenubarContext = () => useContext(HoverMenubarContext);
+
+const HoverMenuBar = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  const [openedDropdownEl, setOpenedDropdownEl] = useState(null);
+  const [lastHoveredSubMenuEl, setLastHoveredSubMenuEl] = useState(null);
+  const [isInHoverMode, setIsInHoverMode] = useState(false);
+  const closeMenu = useCallback(() => {
+    setIsInHoverMode(false);
+    setOpenedDropdownEl(null);
+  }, []);
+  const onDocumentClick = useCallback(event => {
+    const isClickOnOpenedSubMenuAnchor = lastHoveredSubMenuEl && (lastHoveredSubMenuEl === event.target || lastHoveredSubMenuEl.contains(event.target));
+
+    if (!isClickOnOpenedSubMenuAnchor) {
+      closeMenu();
+    }
+  }, [closeMenu, lastHoveredSubMenuEl]);
+  const onDropDownButtonClick = useCallback(event => {
+    if (!isInHoverMode) {
+      setIsInHoverMode(true);
+      setOpenedDropdownEl(event.currentTarget);
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, isInHoverMode]);
+  const onDropDownButtonMouseOver = useCallback(event => {
+    if (isInHoverMode) {
+      setOpenedDropdownEl(event.currentTarget);
+    }
+  }, [isInHoverMode]);
+  const closeMenuWithEsc = useCallback(event => {
+    if (event.keyCode === 27) {
+      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,
+      onDropDownButtonMouseOver,
+      openedDropdownEl,
+      setLastHoveredSubMenuEl
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    onKeyDown: closeMenuWithEsc,
+    "data-test": dataTest,
+    className: "jsx-3020154784"
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    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
+};
+export { HoverMenuBar, useHoverMenubarContext };

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

@@ -0,0 +1,44 @@
+import _JSXStyle from "styled-jsx/style";
+import { Popper } from '@dhis2-ui/popper';
+import { Portal } from '@dhis2-ui/portal';
+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,
+    label,
+    dataTest,
+    disabled
+  } = _ref;
+  const buttonRef = useRef();
+  const {
+    onDropDownButtonClick,
+    onDropDownButtonMouseOver,
+    openedDropdownEl
+  } = useHoverMenubarContext();
+  const isOpen = openedDropdownEl === buttonRef.current;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    onClick: onDropDownButtonClick,
+    disabled: disabled,
+    onMouseOver: disabled ? undefined : onDropDownButtonMouseOver,
+    "data-test": dataTest,
+    className: "jsx-".concat(menuButtonStyles.__hash)
+  }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: menuButtonStyles.__hash
+  }, menuButtonStyles)), isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+    placement: "bottom-start",
+    reference: buttonRef
+  }, children)));
+};
+HoverMenuDropdown.defaultProps = {
+  dataTest: 'dhis2-analytics-hovermenudropdown'
+};
+HoverMenuDropdown.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool
+};