@cullsin/lnc-menu 7.1.2 → 7.1.4

package/dist/src/SideMenu.js

@@ -3,7 +3,7 @@ import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
@@ -85,7 +85,7 @@ function SideMenu({ useDrawer, location, language = 'en', module }) {
                         background: "transparent",
                     },
                 },
-            }, children: _jsx(List, { sx: { padding: "var(--side-menu-padding, 0)", paddingTop: "8px" }, children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), sx: {
+            }, children: _jsx(List, { sx: { padding: "var(--side-menu-padding, 0)", paddingTop: "8px" }, children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItemButton, { selected: selectedMainMenu === item.text, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), sx: {
                             padding: "var(--side-menu-item-padding, 8px)",
                             margin: "var(--side-menu-item-margin, 4px 8px)",
                             borderRadius: "var(--side-menu-item-radius, 8px)",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cullsin/lnc-menu",
-    "version": "7.1.2",
+    "version": "7.1.4",
     "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -19,8 +19,10 @@
         "access": "public"
     },
     "dependencies": {
-        "@mui/icons-material": "^5.14.0",
-        "@mui/material": "^5.14.0",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^7.3.5",
+        "@mui/material": "^7.3.5",
         "react-router-dom": "^7.6.2"
     },
     "peerDependencies": {

package/dist/src/src/sidemenu.scss

@@ -1,186 +0,0 @@
-// Theme-aware: colors from CSS vars (set by SideMenu when themeId is passed). Fallbacks = default theme.
-.parent-container .MuiDrawer-paper .MuiList-root {
-  background: linear-gradient(
-    to bottom,
-    var(--menu-list-bg-start, #1e2f97),
-    var(--menu-list-bg-end, #0b1659)
-  ) !important;
-  color: var(--menu-list-color, #fff);
-  height: 100%;
-  bottom: 0;
-  padding: 20px 0;
-}
-
-.parent-container .MuiList-root {
-  .MuiListItem-root {
-    padding: 15px;
-    &.selected {
-      padding: 7px;
-
-      .MuiListItemIcon-root {
-        background: linear-gradient(
-          to bottom,
-          var(--menu-selected-bg-start, #7ad4f7),
-          var(--menu-selected-bg-end, #20a9ef)
-        ) !important;
-        color: var(--menu-selected-color, #1e2f97);
-        padding: 10px;
-        min-width: 25px;
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        &:only-of-type {
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-
-      .MuiListItemText-root {
-        span {
-          background: linear-gradient(
-            to bottom,
-            var(--menu-selected-bg-start, #7ad4f7),
-            var(--menu-selected-bg-end, #20a9ef)
-          ) !important;
-          padding: 10px 0;
-          min-width: 25px;
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-    }
-
-    &:hover:not(.selected) {
-      padding: 5px 7px;
-
-      .MuiListItemIcon-root {
-        background: linear-gradient(
-          to bottom,
-          var(--menu-selected-bg-start, #7ad4f7),
-          var(--menu-selected-bg-end, #20a9ef)
-        ) !important;
-        color: var(--menu-selected-color, #1e2f97);
-        padding: 10px;
-        min-width: 25px;
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        &:only-of-type {
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-
-      .MuiListItemText-root {
-        span {
-          background: linear-gradient(
-            to bottom,
-            var(--menu-selected-bg-start, #7ad4f7),
-            var(--menu-selected-bg-end, #20a9ef)
-          ) !important;
-          padding: 10px 0;
-          min-width: 25px;
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-        .MuiTypography-root {
-          color: var(--menu-selected-color, #1e2f97);
-        }
-      }
-    }
-
-    .MuiListItemIcon-root {
-      color: var(--menu-list-color, #fff);
-      min-width: 30px;
-      cursor: pointer;
-    }
-
-    .MuiListItemText-root {
-      margin-top: 0;
-      margin-bottom: 0;
-      .MuiTypography-root {
-        font: 14px/24px "OpenSans-SemiBold";
-        color: var(--menu-list-color, #fff);
-        cursor: pointer;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.app-menu-item {
-  .MuiList-root {
-    &.MuiMenu-list {
-      background: var(--menu-popover-bg, #fff) !important;
-      color: var(--menu-popover-text, #1e2f97);
-      width: 200px;
-      padding: 10px;
-      position: relative;
-      overflow: visible;
-      border: 1px solid var(--menu-popover-border, #dadada);
-      .submenu-title {
-        text-transform: uppercase;
-        font: 12px / 18px "OpenSans-Regular";
-        color: var(--menu-popover-text, #1e2f97);
-        padding: 0 0 5px 10px;
-        display: block;
-        border-bottom: 1px solid var(--menu-popover-border, rgba(0, 0, 0, 0.12));
-        margin-bottom: 5px;
-      }
-      .MuiMenuItem-root {
-        &.Mui-focusVisible {
-          background-color: transparent;
-        }
-
-        &:hover {
-          font: 16px/24px "OpenSans-SemiBold";
-          background: var(--menu-popover-selected, #DDF7FF);
-          border-radius: 6px;
-        }
-      }
-    }
-  }
-
-  &.collapsed-menu {
-    .MuiList-root {
-      &.MuiMenu-list {
-        &::before {
-          content: "";
-          position: absolute;
-          top: 15px;
-          left: -8px;
-          width: 0;
-          height: 0;
-          border-top: 8px solid transparent;
-          border-bottom: 8px solid transparent;
-          border-right: 8px solid var(--menu-popover-border, #516578);
-          z-index: 2;
-        }
-      }
-    }
-  }
-}
-
-
-.MuiPopover-root {
-  .MuiPaper-root {
-    overflow: visible;
-    position: relative;
-    width: max-content;
-  }
-}
-
-.MuiList-root.MuiMenu-list {
-  border-radius: 5px;
-}
-
-#more-menu {
-  .MuiPaper-root {
-    .MuiMenu-list {
-      color: #1e2f97;
-      .MuiMenuItem-root {
-        font-size: 14px;
-      }
-    }
-  }
-}

package/dist/src/themes/index.d.ts

@@ -1,10 +0,0 @@
-import type { CustomColors, ThemeId, ThemesJson as ThemesJsonType } from "./types";
-declare const themes: ThemesJsonType;
-/**
- * Returns custom colors for the given theme id.
- * Used by SideMenu to inject CSS variables so menu colors match the host app theme.
- */
-export declare function getThemeColors(themeId: string): CustomColors;
-export declare const themeIds: ThemeId[];
-export { themes as themesConfig };
-export type { ThemeId, CustomColors, ThemeConfig, ThemesJson } from "./types";

package/dist/src/themes/index.js

@@ -1,15 +0,0 @@
-import { themesData } from "./themesData";
-const themes = themesData;
-const VALID_THEME_IDS = ["default", "ocean", "forest", "sunset"];
-/**
- * Returns custom colors for the given theme id.
- * Used by SideMenu to inject CSS variables so menu colors match the host app theme.
- */
-export function getThemeColors(themeId) {
-    var _a;
-    const id = VALID_THEME_IDS.indexOf(themeId) !== -1 ? themeId : "default";
-    const config = (_a = themes[id]) !== null && _a !== void 0 ? _a : themes.default;
-    return config.customColors;
-}
-export const themeIds = VALID_THEME_IDS;
-export { themes as themesConfig };

package/dist/src/themes/themesData.d.ts

@@ -1,3 +0,0 @@
-import type { ThemesJson } from "./types";
-/** Theme definitions matching mgm-linc-patient-ui themes for consistent menu colors. */
-export declare const themesData: ThemesJson;

package/dist/src/themes/themesData.js

@@ -1,83 +0,0 @@
-/** Theme definitions matching mgm-linc-patient-ui themes for consistent menu colors. */
-export const themesData = {
-    default: {
-        name: "Default",
-        customColors: {
-            primaryText: "#1E2F97",
-            accentBlue: "#1AA7EE",
-            lightBlueBg: "#EBEFF5",
-            selectedRow: "#DDF7FF",
-            borderGray: "#dadada",
-            columnSeparator: "#999",
-            switchTrack: "#657BFD",
-            black: "#000",
-            white: "#fff",
-            borderColor: "#B5E6FF",
-            titleSectionBackground: "#e6f2ff",
-            errorTextColor: "#D32F2F",
-            columnHeaders: "#b5e6ff",
-            columnRowsEven: "#EDFBFF",
-            primaryButtonHoverColor: "#0A8BCC",
-        },
-    },
-    ocean: {
-        name: "Ocean",
-        customColors: {
-            primaryText: "#0D47A1",
-            accentBlue: "#0288D1",
-            lightBlueBg: "#E3F2FD",
-            selectedRow: "#B3E5FC",
-            borderGray: "#B0BEC5",
-            columnSeparator: "#78909C",
-            switchTrack: "#0288D1",
-            black: "#263238",
-            white: "#fff",
-            borderColor: "#81D4FA",
-            titleSectionBackground: "#E1F5FE",
-            errorTextColor: "#C62828",
-            columnHeaders: "#E3F2FD",
-            columnRowsEven: "#E1F5FE",
-            primaryButtonHoverColor: "#01579B",
-        },
-    },
-    forest: {
-        name: "Forest",
-        customColors: {
-            primaryText: "#1B5E20",
-            accentBlue: "#2E7D32",
-            lightBlueBg: "#E8F5E9",
-            selectedRow: "#C8E6C9",
-            borderGray: "#C8E6C9",
-            columnSeparator: "#66BB6A",
-            switchTrack: "#43A047",
-            black: "#1B5E20",
-            white: "#fff",
-            borderColor: "#A5D6A7",
-            titleSectionBackground: "#E8F5E9",
-            errorTextColor: "#B71C1C",
-            columnHeaders: "#E8F5E9",
-            columnRowsEven: "#F1F8E9",
-            primaryButtonHoverColor: "#1B5E20",
-        },
-    },
-    sunset: {
-        name: "Sunset",
-        customColors: {
-            primaryText: "#BF360C",
-            accentBlue: "#E64A19",
-            lightBlueBg: "#FBE9E7",
-            selectedRow: "#FFCCBC",
-            borderGray: "#D7CCC8",
-            columnSeparator: "#A1887F",
-            switchTrack: "#FF5722",
-            black: "#3E2723",
-            white: "#fff",
-            borderColor: "#FFAB91",
-            titleSectionBackground: "#FBE9E7",
-            errorTextColor: "#B71C1C",
-            columnHeaders: "#FBE9E7",
-            columnRowsEven: "#FFF8E1",
-            primaryButtonHoverColor: "#BF360C",
-        },
-    },
-};

package/dist/src/themes/types.d.ts

@@ -1,29 +0,0 @@
-/** Custom colors per theme – must match mgm-linc-patient-ui themes for consistent menu styling. */
-export interface CustomColors {
-    primaryText: string;
-    accentBlue: string;
-    lightBlueBg: string;
-    selectedRow: string;
-    borderGray: string;
-    columnSeparator: string;
-    switchTrack: string;
-    black: string;
-    white: string;
-    borderColor: string;
-    titleSectionBackground: string;
-    errorTextColor: string;
-    columnHeaders: string;
-    columnRowsEven: string;
-    primaryButtonHoverColor: string;
-}
-export interface ThemeConfig {
-    name: string;
-    customColors: CustomColors;
-}
-export type ThemeId = "default" | "ocean" | "forest" | "sunset";
-export interface ThemesJson {
-    default: ThemeConfig;
-    ocean: ThemeConfig;
-    forest: ThemeConfig;
-    sunset: ThemeConfig;
-}

package/dist/src/themes/types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/themes.d.ts

@@ -1,30 +0,0 @@
-/**
- * Theme colors aligned with mgm-linc-patient-ui (default, ocean, forest, sunset).
- * Used when themeId is passed to SideMenu to reflect the host app's theme.
- */
-export type ThemeId = "default" | "ocean" | "forest" | "sunset";
-export interface MenuThemeColors {
-    /** Primary text and icon color */
-    primaryText: string;
-    /** Accent / primary actions */
-    accentBlue: string;
-    /** Drawer/menu background */
-    lightBlueBg: string;
-    /** Selected item background */
-    selectedRow: string;
-    /** Borders */
-    borderGray: string;
-    borderColor: string;
-    /** Hover state (derived or from theme) */
-    primaryButtonHoverColor: string;
-    white: string;
-    black: string;
-    /** Sidebar list gradient (dark strip) – start and end for theme coherence */
-    sidebarBgStart: string;
-    sidebarBgEnd: string;
-    /** Selected/hover pill gradient in sidebar */
-    sidebarSelectedStart: string;
-    sidebarSelectedEnd: string;
-}
-export declare function getMenuTheme(themeId: string | undefined): MenuThemeColors;
-export declare const themeIds: ThemeId[];

package/dist/src/themes.js

@@ -1,68 +0,0 @@
-const MENU_THEMES = {
-    default: {
-        primaryText: "#1E2F97",
-        accentBlue: "#1AA7EE",
-        lightBlueBg: "#EBEFF5",
-        selectedRow: "#DDF7FF",
-        borderGray: "#dadada",
-        borderColor: "#B5E6FF",
-        primaryButtonHoverColor: "#0A8BCC",
-        white: "#fff",
-        black: "#000",
-        sidebarBgStart: "#1E2F97",
-        sidebarBgEnd: "#0b1659",
-        sidebarSelectedStart: "#7ad4f7",
-        sidebarSelectedEnd: "#20a9ef",
-    },
-    ocean: {
-        primaryText: "#0D47A1",
-        accentBlue: "#0288D1",
-        lightBlueBg: "#E3F2FD",
-        selectedRow: "#B3E5FC",
-        borderGray: "#B0BEC5",
-        borderColor: "#81D4FA",
-        primaryButtonHoverColor: "#01579B",
-        white: "#fff",
-        black: "#263238",
-        sidebarBgStart: "#0D47A1",
-        sidebarBgEnd: "#01579B",
-        sidebarSelectedStart: "#81D4FA",
-        sidebarSelectedEnd: "#0288D1",
-    },
-    forest: {
-        primaryText: "#1B5E20",
-        accentBlue: "#2E7D32",
-        lightBlueBg: "#E8F5E9",
-        selectedRow: "#C8E6C9",
-        borderGray: "#C8E6C9",
-        borderColor: "#A5D6A7",
-        primaryButtonHoverColor: "#1B5E20",
-        white: "#fff",
-        black: "#1B5E20",
-        sidebarBgStart: "#1B5E20",
-        sidebarBgEnd: "#0d3312",
-        sidebarSelectedStart: "#A5D6A7",
-        sidebarSelectedEnd: "#2E7D32",
-    },
-    sunset: {
-        primaryText: "#BF360C",
-        accentBlue: "#E64A19",
-        lightBlueBg: "#FBE9E7",
-        selectedRow: "#FFCCBC",
-        borderGray: "#D7CCC8",
-        borderColor: "#FFAB91",
-        primaryButtonHoverColor: "#BF360C",
-        white: "#fff",
-        black: "#3E2723",
-        sidebarBgStart: "#BF360C",
-        sidebarBgEnd: "#8B250A",
-        sidebarSelectedStart: "#FFAB91",
-        sidebarSelectedEnd: "#E64A19",
-    },
-};
-const DEFAULT_THEME_ID = "default";
-export function getMenuTheme(themeId) {
-    const id = themeId && themeId in MENU_THEMES ? themeId : DEFAULT_THEME_ID;
-    return MENU_THEMES[id];
-}
-export const themeIds = ["default", "ocean", "forest", "sunset"];

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/sidemenu.tsx","../src/translations/en.ts","../src/translations/es.ts","../src/translations/index.ts","../index.ts"],"version":"5.9.3"}