@cullsin/lnc-menu 3.0.16 → 3.0.18

package/dist/src/SideMenu.d.ts

@@ -8,5 +8,5 @@ interface SideMenuProps {
     SampleMgmtIcon: React.ElementType;
     navigate: NavigateFunction;
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, navigate }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, SampleMgmtIcon }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
 import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
 import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
+import GroupAddOutlinedIcon from '@mui/icons-material/GroupAddOutlined';
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -11,32 +12,69 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
-import { useLocation } from "react-router-dom"; // Import useLocation
-function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
-    const [selectedMainMenu, setSelectedMainMenu] = React.useState(null); // Track selected main menu
+import { useLocation } from "react-router-dom";
+function SideMenu({ useDrawer, SampleMgmtIcon }) {
+    const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
     const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
     const { isDrawerOpen, toggleDrawer } = useDrawer();
     const [anchorEl, setAnchorEl] = React.useState(null);
-    const location = useLocation(); // Get the current location object
-    // Effect to set initial selection based on URL
+    const location = useLocation();
+    const menuItems = React.useMemo(() => [
+        {
+            text: "Home",
+            icon: _jsx(DashboardOutlinedIcon, {}),
+            subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
+        },
+        {
+            text: "Patient Management",
+            icon: _jsx(RecentActorsOutlinedIcon, {}),
+            subMenu: [
+                { text: "Patient", path: "/patient/patient-listing" },
+                { text: "Family", path: "/patient/family-listing" },
+            ],
+        },
+        {
+            text: "Sample Management",
+            icon: _jsx(SampleMgmtIcon, {}),
+            subMenu: [
+                { text: "Sample Listing", path: "/sample/sample-listing" }
+            ],
+        },
+        {
+            text: "Reports",
+            icon: _jsx(ArticleOutlinedIcon, {}),
+            path: "/variant/",
+        },
+        {
+            text: "Carrier Duo/Trio",
+            icon: _jsx(GroupAddOutlinedIcon, {}),
+            path: "/carrier-duo-trio/",
+        },
+    ], [SampleMgmtIcon]);
+    // Initialize selected menu based on current URL
     React.useEffect(() => {
         const currentPath = location.pathname;
         menuItems.forEach((mainItem) => {
             if (mainItem.subMenu) {
-                const matchingSubMenu = mainItem.subMenu.find((subItem) => subItem.path === currentPath);
-                if (matchingSubMenu) {
+                const match = mainItem.subMenu.find((sub) => sub.path === currentPath);
+                if (match) {
                     setSelectedMainMenu(mainItem.text);
-                    setSelectedSubMenuPath(matchingSubMenu.path);
-                    return;
+                    setSelectedSubMenuPath(match.path);
                 }
             }
+            else if (mainItem.path === currentPath) {
+                setSelectedMainMenu(mainItem.text);
+                setSelectedSubMenuPath(null);
+            }
         });
-    }, [location.pathname]); // Re-run when the path changes
+        handleMenuClose(); // Close open menu if path changes
+    }, [location.pathname]);
     const handleMenuOpen = (event, index) => {
         setAnchorEl(event.currentTarget);
-        setOpenMenuIndex(index); // Keep track of which menu to open
+        setOpenMenuIndex(index);
     };
     const handleMenuClose = () => {
         setAnchorEl(null);
@@ -44,42 +82,12 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
     };
     const handleSubMenuItemClick = (path, parentText) => {
         setSelectedMainMenu(parentText);
-        setSelectedSubMenuPath(path); // Set based on path for unique identification
+        setSelectedSubMenuPath(path);
         handleMenuClose();
-        if (isDrawerOpen) {
+        if (isDrawerOpen)
             toggleDrawer();
-        }
-        // navigating through href
-        window.location.href = path;
+        window.location.href = path; // Maintain microfrontend transition
     };
-    const menuItems = [
-        {
-            text: "Home",
-            icon: _jsx(DashboardOutlinedIcon, {}),
-            subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
-        },
-        {
-            text: "Patient Management",
-            icon: _jsx(RecentActorsOutlinedIcon, {}),
-            subMenu: [
-                { text: "Patient", path: "/patient/patient-listing" },
-                { text: "Family", path: "/patient/family-listing" },
-            ],
-        },
-        {
-            text: "Sample Management",
-            icon: _jsx(SampleMgmtIcon, {}),
-            subMenu: [
-                { text: "Dashboard", path: "/sample/sample-dashboard" },
-                { text: "Sample Listing", path: "/sample/sample-listing" },
-                {
-                    text: "Single Sample Analysis",
-                    path: "/sample/single-sample-analysis",
-                },
-            ],
-        },
-        { text: "Reports", icon: _jsx(ArticleOutlinedIcon, {}) },
-    ];
     return (_jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(AppBar, { sx: { position: "fixed", top: 0 } }), _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
                     width: isDrawerOpen ? 230 : 64,
                     flexShrink: 0,
@@ -90,15 +98,27 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
                         bottom: "0",
                         borderRight: "1px solid #B1BECB",
                     },
-                }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
-                                    if (item.subMenu) {
-                                        handleMenuOpen(event, index);
-                                    }
-                                    else if (item.onClick) {
-                                        item.onClick();
-                                        setSelectedMainMenu(item.text);
-                                    }
-                                }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: "app-menu-item", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
+                }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
+                                        if (item.subMenu) {
+                                            if (openMenuIndex === index) {
+                                                handleMenuClose();
+                                            }
+                                            else {
+                                                handleMenuOpen(event, index);
+                                            }
+                                        }
+                                        else if (item.path) {
+                                            setSelectedMainMenu(item.text);
+                                            setSelectedSubMenuPath(null);
+                                            if (isDrawerOpen)
+                                                toggleDrawer();
+                                            window.location.href = item.path;
+                                        }
+                                        else if (item.onClick) {
+                                            item.onClick();
+                                            setSelectedMainMenu(item.text);
+                                        }
+                                    }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: "app-menu-item", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
                                     vertical: "top",
                                     horizontal: "left",
                                 }, transformOrigin: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cullsin/lnc-menu",
-  "version": "3.0.16",
+  "version": "3.0.18",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",