@cullsin/lnc-menu 7.0.0 → 7.0.3

package/dist/src/SideMenu.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Location, NavigateFunction } from "react-router-dom";
 import { Language } from "./translations";
 interface SideMenuProps {
@@ -6,11 +5,10 @@ interface SideMenuProps {
         isDrawerOpen: boolean;
         toggleDrawer: () => void;
     };
-    SampleMgmtIcon: React.ElementType;
     navigate: NavigateFunction;
     location: Location;
     language?: Language;
     module?: 'sample' | 'patient';
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, module }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, location, language, module }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -9,7 +9,8 @@ import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
 import { getTranslations } from "./translations";
-function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module }) {
+const SampleMgmtIcon = (props) => (_jsxs("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M20.144 1.03155C18.7687 -0.343852 16.5307 -0.343852 15.1552 1.03155L13.6553 2.53152L13.154 2.03015C12.8794 1.75559 12.4342 1.75559 12.1595 2.03015C11.8849 2.30472 11.8849 2.74997 12.1595 3.02458L12.6609 3.52594L6.30985 9.877C5.592 10.5948 5.3345 11.6309 5.60293 12.5811L3.92764 14.2564C3.65303 14.531 3.65303 14.9762 3.92764 15.2508L5.92376 17.247C6.06107 17.3843 6.24103 17.4529 6.42095 17.4529C6.60087 17.4529 6.78088 17.3843 6.91814 17.247L8.59319 15.5719C9.54379 15.841 10.5806 15.5838 11.2989 14.8655L17.6496 8.51467L18.151 9.01604C18.2883 9.15334 18.4683 9.22202 18.6482 9.22202C18.8281 9.22202 19.0081 9.15334 19.1454 9.01604C19.42 8.74147 19.42 8.29622 19.1454 8.02161L18.644 7.52025L20.144 6.02033C21.5194 4.64493 21.5194 2.40696 20.144 1.03155ZM10.3044 13.871C9.8905 14.285 9.26121 14.3873 8.73758 14.1262C8.46643 13.9878 8.13669 14.0396 7.92091 14.2554L6.42095 15.7553L5.41926 14.7536L6.91917 13.2537C7.1334 13.0395 7.18633 12.7121 7.05052 12.4412C6.78763 11.917 6.88954 11.2862 7.30428 10.8715L8.29777 9.87799H14.2975L10.3044 13.871ZM15.7039 8.47159H9.70411L13.6553 4.52037L16.6552 7.52025L15.7039 8.47159ZM19.1496 5.02591L17.6496 6.52582L14.6498 3.52594L16.1497 2.02598C16.9767 1.19891 18.3226 1.19891 19.1496 2.02598C19.9767 2.85305 19.9767 4.19879 19.1496 5.02591Z", fill: "currentColor" }), _jsx("path", { d: "M5.51817 18.6605C5.38686 18.4704 5.17061 18.3569 4.9396 18.3569C4.70858 18.3569 4.49233 18.4704 4.36103 18.6605C4.34598 18.6823 3.98802 19.2016 3.62527 19.827C2.90729 21.0648 2.82422 21.5941 2.82422 21.8846C2.82422 23.051 3.77317 23.9999 4.9396 23.9999C6.10602 23.9999 7.05498 23.051 7.05498 21.8846C7.05498 21.5941 6.97195 21.0648 6.25392 19.827C5.89118 19.2016 5.53322 18.6823 5.51817 18.6605ZM4.9396 22.5936C4.54863 22.5936 4.23056 22.2755 4.23056 21.8853C4.23605 21.669 4.53124 21.0509 4.93974 20.3631C5.34791 21.0501 5.64286 21.6679 5.64863 21.885C5.6484 22.2758 5.33042 22.5936 4.9396 22.5936Z", fill: "currentColor" })] })));
+function SideMenu({ useDrawer, location, language = 'en', module }) {
     const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const { isDrawerOpen } = useDrawer();
     const t = React.useMemo(() => getTranslations(language), [language]);
@@ -24,7 +25,7 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module
             icon: _jsx(SampleMgmtIcon, {}),
             path: `/sample/${language}/sample-listing`,
         },
-    ], [SampleMgmtIcon, t, language]);
+    ], [t, language]);
     // Sync selection with module prop or current path
     React.useEffect(() => {
         // If module prop is provided, use it to set the selection

package/dist/src/sidemenu.scss

@@ -7,52 +7,51 @@
 }
 
 .MuiBox-root .MuiList-root {
-  background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
-  color: #fff;
+  background: var(--side-menu-bg) !important;
+  color: var(--side-menu-list-color);
   height: 100vh;
   bottom: 0;
-  padding: 20px 0;
+  padding: var(--side-menu-padding);
   overflow-x: hidden;
 }
 
 .MuiList-root {
   .MuiListItem-root {
-    // Apply capsule layout with gradient permanently for testing
-    padding: 8px 12px;
-    margin: 12px 6px 0px 6px;
-    border-radius: 15px;
+    padding: var(--side-menu-item-padding);
+    margin: var(--side-menu-item-margin);
+    border-radius: var(--side-menu-item-radius);
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+    background: var(--side-menu-item-active-bg) !important;
 
     // Width based on menu open/closed state
     &.menu-closed {
-      width: 52px;
+      width: var(--side-menu-item-width-closed);
     }
 
     &.menu-open {
-      width: 218px;
+      width: var(--side-menu-item-width-open);
     }
 
     // Hover design - override the default background on hover
     &:hover {
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+      background: var(--side-menu-item-active-bg) !important;
     }
 
     // Default state (not hovered and not selected) - transparent background
     &:not(:hover):not(.Mui-selected) {
-      background: transparent !important;
+      background: var(--side-menu-item-bg-default) !important;
     }
 
     // Selected state - same as hover design
     &.Mui-selected {
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+      background: var(--side-menu-item-active-bg) !important;
     }
 
     // Normalize all icons (MUI icons and custom SVGs)
     .MuiListItemIcon-root {
-      color: #1e2f97;
+      color: var(--side-menu-icon-color-active);
       min-width: auto;
       margin-right: 0;
       cursor: pointer;
@@ -63,11 +62,11 @@
       // Ensure consistent icon sizing for both MUI icons and custom SVGs
       svg,
       .MuiSvgIcon-root {
-        width: 24px;
-        height: 25px;
+        width: var(--side-menu-icon-size);
+        height: var(--side-menu-icon-size);
         display: block;
-        fill: #1e2f97;
-        color: #1e2f97;
+        fill: var(--side-menu-icon-color-active);
+        color: var(--side-menu-icon-color-active);
       }
     }
 
@@ -75,8 +74,8 @@
     &:not(:hover):not(.Mui-selected) .MuiListItemIcon-root {
       svg,
       .MuiSvgIcon-root {
-        fill: #fff;
-        color: #fff;
+        fill: var(--side-menu-icon-color-default);
+        color: var(--side-menu-icon-color-default);
       }
     }
 
@@ -89,8 +88,10 @@
       margin: 0;
 
       .MuiTypography-root {
-        font: 14px/24px "OpenSans-SemiBold";
-        color: #1e2f97;
+        font-family: var(--side-menu-text-font-family);
+        font-size: var(--side-menu-text-font-size);
+        line-height: var(--side-menu-text-line-height);
+        color: var(--side-menu-text-color-active);
         cursor: pointer;
         white-space: nowrap;
       }
@@ -98,7 +99,7 @@
 
     // Text color changes on hover (white when not hovered and not selected)
     &:not(:hover):not(.Mui-selected) .MuiListItemText-root .MuiTypography-root {
-      color: #fff;
+      color: var(--side-menu-text-color-default);
     }
   }
 }
@@ -112,16 +113,16 @@
 }
 
 .MuiList-root.MuiMenu-list {
-  border-radius: 5px;
+  border-radius: var(--side-menu-popover-radius);
 }
 
 #more-menu {
   .MuiPaper-root {
     .MuiMenu-list {
-      color: #1e2f97;
+      color: var(--side-menu-more-menu-color);
       .MuiMenuItem-root {
-        font-size: 14px;
+        font-size: var(--side-menu-more-menu-font-size);
       }
     }
   }
-}
+}

package/dist/src/src/sidemenu.scss

@@ -0,0 +1,186 @@
+// 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,83 @@
+/** 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

@@ -0,0 +1,29 @@
+/** 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

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

package/dist/src/themes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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

@@ -0,0 +1,68 @@
+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/package.json

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