@sikka/hawa 0.0.22 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaPopMenu.js

@@ -1,10 +1,39 @@
-import { MenuItem, Typography } from "@mui/material";
+import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
 
-export const HawaPopMenu = () => {
+export const HawaPopMenu = (props) => {
+  const theme = useTheme();
   return (
-    <MenuItem key={setting.label} onClick={setting.action}>
-      {setting.icon && <setting.icon />}
-      <Typography textAlign="center">{setting.label}</Typography>
-    </MenuItem>
+    <Menu
+      sx={{ mt: "45px" }}
+      id="menu-appbar"
+      anchorEl={props.anchor}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      open={Boolean(props.anchor)}
+      onClose={props.handleClose}
+      variant="themed"
+      PaperProps={{
+        style: {
+          boxShadow: "none",
+          borderRadius: theme.allBorderRadius,
+          border: `1px solid ${theme.primaryActionColor}`
+        }
+      }}
+    >
+      {props.menuItems.map((item) => (
+        <MenuItem key={item.label} onClick={item.action}>
+          {item.icon && <item.icon />}
+          <div style={{ width: 10 }} />
+          <Typography textAlign="center">{item.label}</Typography>
+        </MenuItem>
+      ))}
+    </Menu>
   );
 };

package/src/layout/HawaAppBar.js

@@ -12,6 +12,7 @@ import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
+import { HawaPopMenu } from "../elements/HawaPopMenu";
 
 const pages = ["Products", "Pricing", "Blog"];
 const settings = ["Profile", "Account", "Dashboard", "Logout"];
@@ -111,39 +112,11 @@ export const HawaAppBar = (props) => {
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right"
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right"
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-              variant="themed"
-              PaperProps={{
-                style: {
-                  boxShadow: "none",
-                  borderRadius: theme.allBorderRadius,
-                  // borderColor: theme.primaryActionColor,
-                  // borderWidth: 2,
-                  border: `1px solid ${theme.primaryActionColor}`
-                }
-              }}
-            >
-              {props.accountMenu.map((setting) => (
-                <MenuItem key={setting.label} onClick={setting.action}>
-                  {setting.icon && <setting.icon />}
-                  <Typography textAlign="center">{setting.label}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
+            <HawaPopMenu
+              anchor={anchorElUser}
+              handleClose={(e) => setAnchorElUser(null)}
+              menuItems={props.accountMenu}
+            />
           </Box>
         </Toolbar>
       </Container>

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.7097848f.iframe.bundle.js"></script><script src="main.f236f782.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.62e56b46.iframe.bundle.js"></script><script src="main.9157fa74.iframe.bundle.js"></script></body></html>