Merge branch '263-bug-csv-button-is-not-shown'

Author: RafaelGB

package.json

@@ -22,36 +22,36 @@
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/plugin-node-resolve": "13.3.0",
 		"@rollup/plugin-typescript": "8.3.4",
-		"@types/jest": "28.1.6",
+		"@types/jest": "28.1.7",
 		"@testing-library/jest-dom": "5.16.5",
     	"@testing-library/react": "13.3.0",
-		"@types/node": "18.6.5",
+		"@types/node": "18.7.6",
 		"@types/react": "18.0.17",
 		"@types/react-dom": "18.0.6",
 		"@types/react-color": "3.0.6",
 		"@types/react-window": "1.8.5",
 		"@types/react-datepicker": "4.4.2",
 		"@types/react-csv": "1.1.3",
 		"@types/luxon": "3.0.0",
-		"@typescript-eslint/eslint-plugin": "5.33.0",
-		"@typescript-eslint/parser": "5.33.0",
-		"eslint": "8.21.0",
+		"@typescript-eslint/eslint-plugin": "5.33.1",
+		"@typescript-eslint/parser": "5.33.1",
+		"eslint": "8.22.0",
 		"jest": "28.1.3",
 		"jest-mock-extended": "2.0.7",
 		"obsidian": "0.15.9",
-		"rollup": "2.77.2",
+		"rollup": "2.78.0",
 		"rollup-plugin-typescript2": "0.32.1",
 		"rollup-plugin-terser": "7.0.2",
-		"ts-jest": "28.0.7",
+		"ts-jest": "28.0.8",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4",
 		"@faker-js/faker": "7.4.0"
 	},
 	"dependencies": {
 		"@emotion/styled": "11.10.0",
-		"@mui/material": "5.10.0",
+		"@mui/material": "5.10.1",
 		"@mui/icons-material": "5.8.4",
-		"@popperjs/core": "2.11.5",
+		"@popperjs/core": "2.11.6",
 		"monkey-around": "2.3.0",
 		"pkg.json": "2.0.8",
 		"obsidian-dataview": "0.5.41",

src/components/NavBar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import CsvButton from "components/CsvButton";
+import MenuIcon from "components/img/MenuIcon";
 import { NavBarProps } from "cdm/MenuBarModel";
 import GlobalFilter from "components/reducers/GlobalFilter";
 import { NavBarConfig, StyleVariables } from "helpers/Constants";
@@ -10,7 +11,6 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
 import { c } from "helpers/StylesHelper";
-import MenuIcon from "components/img/MenuIcon";
 import Typography from "@mui/material/Typography";
 import DataviewFilters from "./reducers/DataviewFilters";
 
@@ -20,6 +20,7 @@ export function NavBar(navBarProps: NavBarProps) {
   const columns = tableState.columns((state) => state.columns);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  console.log(`NavBar menu is open? => ${open}`);
   const handleMenuClose = () => {
     setAnchorEl(null);
   };
@@ -28,33 +29,6 @@ export function NavBar(navBarProps: NavBarProps) {
     setAnchorEl(event.currentTarget);
   };
 
-  const renderMenu = (
-    <Menu
-      anchorEl={anchorEl}
-      open={open}
-      onClose={handleMenuClose}
-      onClick={handleMenuClose}
-      onBlur={handleMenuClose}
-      PaperProps={{
-        style: {
-          maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
-          width: "20ch",
-        },
-      }}
-      MenuListProps={{
-        "aria-labelledby": "long-button",
-      }}
-    >
-      <MenuItem>
-        {/* CSV buttton download */}
-        <CsvButton
-          columns={columns}
-          rows={table.getRowModel().rows}
-          name={view.diskConfig.yaml.name}
-        />
-      </MenuItem>
-    </Menu>
-  );
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar
@@ -80,7 +54,29 @@ export function NavBar(navBarProps: NavBarProps) {
           >
             <MenuIcon />
           </IconButton>
-          {renderMenu}
+          <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleMenuClose}
+            PaperProps={{
+              style: {
+                maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
+                width: "20ch",
+              },
+            }}
+            MenuListProps={{
+              "aria-labelledby": "long-button",
+            }}
+          >
+            <MenuItem>
+              {/* CSV buttton download */}
+              <CsvButton
+                columns={columns}
+                rows={table.getRowModel().rows}
+                name={view.diskConfig.yaml.name}
+              />
+            </MenuItem>
+          </Menu>
           <Typography
             variant="h6"
             noWrap