21448: divider in place for context menu Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[arvados.git] / services / workbench2 / src / components / multiselect-toolbar / ms-toolbar-overflow-menu.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
index a2b23f91430f027488c0a9086dd682bff31ac21d..9f8ced940dbaeef8625d370ede55501c8dd0cb62 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
@@ -2,13 +2,13 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, ReactElement, JSXElementConstructor } from 'react';
 import { DoubleRightArrows } from 'components/icon/icon';
 import classnames from 'classnames';
-import { IconButton, Menu, MenuItem, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { IconButton, Menu, MenuItem, StyleRulesCallback, Tooltip, WithStyles, withStyles } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 
-type CssRules = 'inOverflowMenu' | 'iconButton';
+type CssRules = 'inOverflowMenu' | 'openMenuButton' | 'menu' | 'menuItem' | 'menuElement';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     inOverflowMenu: {
@@ -16,12 +16,35 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
             backgroundColor: 'transparent',
         },
     },
-    iconButton: {
+    openMenuButton: {
         right: '10px',
     },
+    menu: {
+        marginLeft: 0,
+    },
+    menuItem: {
+        '&:hover': {
+            backgroundColor: 'white',
+        },
+        marginTop: 0,
+        paddingTop: 0,
+        paddingLeft: '1rem',
+        height: '2.5rem',
+    },
+    menuElement: {
+        width: '2rem',
+    }
 });
 
-export const OverflowMenu = withStyles(styles)((props: any & WithStyles<CssRules>) => {
+export type OverflowChild = ReactElement<{ className: string; }, string | JSXElementConstructor<any>>
+
+type OverflowMenuProps = {
+    children: OverflowChild[]
+    className: string
+    visibilityMap: {}
+}
+
+export const OverflowMenu = withStyles(styles)((props: OverflowMenuProps & WithStyles<CssRules>) => {
     const { children, className, visibilityMap, classes } = props;
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -39,21 +62,25 @@ export const OverflowMenu = withStyles(styles)((props: any & WithStyles<CssRules
     }
     return (
         <div className={className}>
-            <IconButton
-                aria-label='more'
-                aria-controls='long-menu'
-                aria-haspopup='true'
-                onClick={handleClick}
-                className={classes.iconButton}
-            >
-                <DoubleRightArrows />
-            </IconButton>
+            <Tooltip title="More Options" disableFocusListener>
+                <IconButton
+                    aria-label='more'
+                    aria-controls='long-menu'
+                    aria-haspopup='true'
+                    onClick={handleClick}
+                    className={classes.openMenuButton}
+                >
+                        <DoubleRightArrows />
+                </IconButton>
+            </Tooltip>
             <Menu
                 id='long-menu'
                 anchorEl={anchorEl}
                 keepMounted
                 open={open}
                 onClose={handleClose}
+                disableAutoFocusItem
+                className={classes.menu}
             >
                 {React.Children.map(children, (child: any) => {
                     if (!visibilityMap[child.props['data-targetid']]) {
@@ -61,9 +88,10 @@ export const OverflowMenu = withStyles(styles)((props: any & WithStyles<CssRules
                             <MenuItem
                                 key={child}
                                 onClick={handleClose}
+                                className={classes.menuItem}
                             >
                                 {React.cloneElement(child, {
-                                    className: classnames(child.className, classes.inOverflowMenu),
+                                    className: classnames(classes.menuElement),
                                 })}
                             </MenuItem>
                         );