@cullsin/lnc-menu 7.0.1 → 7.0.4

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { default as SideMenu } from './src/SideMenu';
 export { getTranslations, en, es } from './src/translations';
 export type { Language, Translations } from './src/translations';
-export { getThemeColors, themeIds, themesConfig } from './src/themes';
-export type { ThemeId, CustomColors, ThemeConfig, ThemesJson } from './src/themes';
+import './src/tenant.module.css';
 import './src/sidemenu.scss';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as SideMenu } from './src/SideMenu';
 export { getTranslations, en, es } from './src/translations';
-export { getThemeColors, themeIds, themesConfig } from './src/themes';
+import './src/tenant.module.css'; // CSS-variable defaults — overridden by CDN tenant.css at runtime
 import './src/sidemenu.scss'; // consumer must support SCSS

package/dist/src/SideMenu.d.ts

@@ -1,19 +1,14 @@
-import * as React from "react";
 import { Location, NavigateFunction } from "react-router-dom";
-import type { ThemeId } from "./themes";
 import { Language } from "./translations";
 interface SideMenuProps {
     useDrawer: () => {
         isDrawerOpen: boolean;
         toggleDrawer: () => void;
     };
-    SampleMgmtIcon: React.ElementType;
     navigate: NavigateFunction;
     location: Location;
     language?: Language;
     module?: 'sample' | 'patient';
-    /** Theme id for menu colors (default | ocean | forest | sunset). Matches mgm-linc-patient-ui themes. */
-    themeId?: ThemeId | string;
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, module, themeId }: 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

@@ -8,26 +8,11 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
-import { getThemeColors } from "./themes";
 import { getTranslations } from "./translations";
-function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module, themeId }) {
+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 themeCssVars = React.useMemo(() => {
-        if (!themeId)
-            return {};
-        const c = getThemeColors(themeId);
-        return {
-            "--theme-primaryText": c.primaryText,
-            "--theme-accentBlue": c.accentBlue,
-            "--theme-lightBlueBg": c.lightBlueBg,
-            "--theme-selectedRow": c.selectedRow,
-            "--theme-borderGray": c.borderGray,
-            "--theme-primaryButtonHoverColor": c.primaryButtonHoverColor,
-            "--theme-white": c.white,
-            "--theme-borderColor": c.borderColor,
-        };
-    }, [themeId]);
     const t = React.useMemo(() => getTranslations(language), [language]);
     const menuItems = React.useMemo(() => [
         {
@@ -40,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
@@ -76,7 +61,7 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module
         setSelectedMainMenu(item.text);
         window.location.href = item.path;
     };
-    return (_jsx(Box, { className: "side-menu-container", sx: themeCssVars, children: _jsx(Drawer, { variant: "permanent", className: "parent-container", sx: {
+    return (_jsx(Box, { className: "side-menu-container", children: _jsx(Drawer, { variant: "permanent", className: "parent-container", sx: {
                 width: isDrawerOpen ? 230 : 64,
                 flexShrink: 0,
                 zIndex: 100,
@@ -84,9 +69,9 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module
                     width: isDrawerOpen ? 230 : 64,
                     transition: "width 0.3s ease",
                     position: "fixed",
-                    top: "65px",
-                    height: "calc(100vh - 65px)",
-                    borderRight: "1px solid var(--theme-borderGray, #B1BECB)",
+                    top: "var(--size-header-height, 65px)",
+                    height: "calc(100vh - var(--size-header-height, 65px))",
+                    borderRight: "1px solid var(--color-border-header, #e5e9eb)",
                     overflowY: "auto",
                     zIndex: 100,
                 },

package/dist/src/sidemenu.scss

@@ -1,5 +1,4 @@
-// Theme-aware side menu – uses CSS variables (--theme-*) from host or from themeId prop.
-// Fallbacks match default theme (#1E2F97 primaryText, #1AA7EE accentBlue).
+//overwritten the default MUI css
 
 // Side menu container
 .side-menu-container {
@@ -8,62 +7,51 @@
 }
 
 .MuiBox-root .MuiList-root {
-  background: linear-gradient(
-    to bottom,
-    var(--theme-primaryText, #1e2f97),
-    var(--theme-primaryText, #1e2f97)
-  ) !important;
-  color: var(--theme-white, #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 {
-    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,
-      var(--theme-accentBlue, #1aa7ee),
-      var(--theme-primaryButtonHoverColor, #0a8bcc)
-    ) !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,
-        var(--theme-accentBlue, #1aa7ee),
-        var(--theme-primaryButtonHoverColor, #0a8bcc)
-      ) !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,
-        var(--theme-accentBlue, #1aa7ee),
-        var(--theme-primaryButtonHoverColor, #0a8bcc)
-      ) !important;
+      background: var(--side-menu-item-active-bg) !important;
     }
 
+    // Normalize all icons (MUI icons and custom SVGs)
     .MuiListItemIcon-root {
-      color: var(--theme-primaryText, #1e2f97);
+      color: var(--side-menu-icon-color-active);
       min-width: auto;
       margin-right: 0;
       cursor: pointer;
@@ -71,24 +59,27 @@
       align-items: center;
       justify-content: center;
 
+      // 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: var(--theme-primaryText, #1e2f97);
-        color: var(--theme-primaryText, #1e2f97);
+        fill: var(--side-menu-icon-color-active);
+        color: var(--side-menu-icon-color-active);
       }
     }
 
+    // Icon color changes on hover (white when not hovered and not selected)
     &:not(:hover):not(.Mui-selected) .MuiListItemIcon-root {
       svg,
       .MuiSvgIcon-root {
-        fill: var(--theme-white, #fff);
-        color: var(--theme-white, #fff);
+        fill: var(--side-menu-icon-color-default);
+        color: var(--side-menu-icon-color-default);
       }
     }
 
+    // Add margin-right to icon only when text is visible
     .MuiListItemIcon-root + .MuiListItemText-root {
       margin-left: 8px;
     }
@@ -97,15 +88,18 @@
       margin: 0;
 
       .MuiTypography-root {
-        font: 14px/24px "OpenSans-SemiBold";
-        color: var(--theme-primaryText, #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;
       }
     }
 
+    // Text color changes on hover (white when not hovered and not selected)
     &:not(:hover):not(.Mui-selected) .MuiListItemText-root .MuiTypography-root {
-      color: var(--theme-white, #fff);
+      color: var(--side-menu-text-color-default);
     }
   }
 }
@@ -119,16 +113,16 @@
 }
 
 .MuiList-root.MuiMenu-list {
-  border-radius: 5px;
+  border-radius: var(--side-menu-popover-radius);
 }
 
 #more-menu {
   .MuiPaper-root {
     .MuiMenu-list {
-      color: var(--theme-primaryText, #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/tenant.module.css

@@ -0,0 +1,42 @@
+/* ================================================================
+   TENANT MODULE CSS — lnc-menu-npm-fe
+   Auto-generated by generate-tenant-css.js
+   Branch scanned: Development
+   Covers: CSS var() references, SCSS $variables, and hardcoded
+   brand values detected in component files.
+   ================================================================ */
+
+/* ═══════════════════════════════════════════════════════════════
+   MODULE: side-menu (lnc-menu-npm-fe)
+   CSS custom-properties consumed by this micro-frontend.
+   These are default / fallback values overridden by tenant.css.
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+  --side-menu-bg: #ffffff;
+  --side-menu-icon-color-active: #1e2f97;
+  --side-menu-icon-color-default: rgba(0, 0, 0, 0.54);
+  --side-menu-icon-size: 24px;
+  --side-menu-item-active-bg: rgba(30, 47, 151, 0.08);
+  --side-menu-item-bg-default: transparent;
+  --side-menu-item-margin: 4px 8px;
+  --side-menu-item-padding: 8px;
+  --side-menu-item-radius: 4px;
+  --side-menu-item-width-closed: 40px;
+  --side-menu-item-width-open: 198px;
+  --side-menu-list-color: rgba(0, 0, 0, 0.87);
+  --side-menu-more-menu-color: rgba(0, 0, 0, 0.87);
+  --side-menu-more-menu-font-size: 14px;
+  --side-menu-padding: 0;
+  --side-menu-popover-radius: 4px;
+  --side-menu-text-color-active: #1e2f97;
+  --side-menu-text-color-default: rgba(0, 0, 0, 0.87);
+  --side-menu-text-font-family: "opensans-regular";
+  --side-menu-text-font-size: 14px;
+  --side-menu-text-line-height: 1.4;
+
+  /* ── Auto-discovered on 2026-03-14 ── */
+  --color-border-header: #e5e9eb;
+
+  /* ── Auto-discovered on 2026-03-15 ── */
+  --size-header-height: 65px;
+}

package/package.json

@@ -1,32 +1,34 @@
 {
-  "name": "@cullsin/lnc-menu",
-  "version": "7.0.1",
-  "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc && npm run copy-scss",
-    "copy-scss": "cpy src/sidemenu.scss dist/src --flat"
-  },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
-    "react-router-dom": "^7.6.2"
-  },
-  "devDependencies": {
-    "cpy-cli": "^5.0.0",
-    "typescript": "^5.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cullsin/lnc-menu"
-  },
-  "author": "Raja Kulasekaran <cullsin@gmail.com>"
+    "name":  "@cullsin/lnc-menu",
+    "version":  "7.0.4",
+    "description":  "Reusable SideMenu component for MedGenome LNC platform using MUI",
+    "main":  "dist/index.js",
+    "types":  "dist/index.d.ts",
+    "style":  "dist/src/tenant.module.css",
+    "files":  [
+                  "dist"
+              ],
+    "scripts":  {
+                    "build":  "npm run generate:tenant && tsc && npm run copy-css",
+                    "copy-css":  "cpy src/sidemenu.scss src/tenant.module.css dist/src --flat",
+                    "generate:tenant":  "node generate-tenant-css.mjs"
+                },
+    "license":  "MIT",
+    "publishConfig":  {
+                          "access":  "public"
+                      },
+    "dependencies":  {
+                         "@mui/icons-material":  "^5.14.0",
+                         "@mui/material":  "^5.14.0",
+                         "react-router-dom":  "^7.6.2"
+                     },
+    "devDependencies":  {
+                            "cpy-cli":  "^5.0.0",
+                            "typescript":  "^5.0.0"
+                        },
+    "repository":  {
+                       "type":  "git",
+                       "url":  "https://github.com/cullsin/lnc-menu"
+                   },
+    "author":  "Raja Kulasekaran \u003ccullsin@gmail.com\u003e"
 }