@digitaldefiance/express-suite-react-components 2.5.13 → 2.8.5

package/README.md

@@ -362,6 +362,29 @@ MIT © Digital Defiance
 
 ## ChangeLog
 
+### Version 2.7.5
+
+**Type Safety Improvements**
+
+- **ELIMINATED**: All unsafe `as any` type casts from production code
+- **IMPROVED**: Window interface extension for `APP_CONFIG` property
+- **ENHANCED**: Navigation state type handling with proper type guards
+- **IMPROVED**: Menu option link type to support both react-router `To` and state passing
+- **VERIFIED**: All 227 tests passing with full type safety
+- **VERIFIED**: TypeScript compilation successful with strict checking
+
+**Technical Details**
+
+- Added local Window interface extension in TopMenu component for APP_CONFIG
+- Replaced `(option.link as any).state` with type-safe property access using `'state' in option.link` guard
+- Enhanced `IMenuOption.link` to support `To | { pathname: string; state?: unknown }` for flexible navigation
+- Updated `tsconfig.lib.json` to include global type definitions
+- Fixed `typeRoots` path in `tsconfig.base.json`
+
+### Version 2.5.14
+
+- Update suite-core-lib
+
 ### Version 2.5.13
 
 - Try to fix saving of settings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "2.5.13",
+  "version": "2.8.5",
   "description": "React MUI components for Digital Defiance Express Suite",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -25,8 +25,8 @@
     "react-router-dom": "6.29.0"
   },
   "dependencies": {
-    "@digitaldefiance/i18n-lib": "3.6.4",
-    "@digitaldefiance/suite-core-lib": "^2.2.22",
+    "@digitaldefiance/i18n-lib": "3.7.5",
+    "@digitaldefiance/suite-core-lib": "3.5.7",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",

package/src/components/SideMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/SideMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA4BtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SideMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/SideMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA8BtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/src/components/SideMenu.js

@@ -4,8 +4,8 @@ exports.SideMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_router_dom_1 = require("react-router-dom");
-const MenuType_1 = require("../types/MenuType");
 const MenuContext_1 = require("../contexts/MenuContext");
+const MenuType_1 = require("../types/MenuType");
 const SideMenuListItem_1 = require("./SideMenuListItem");
 const SideMenu = ({ isOpen, onClose }) => {
     const { getMenuOptions } = (0, MenuContext_1.useMenu)();
@@ -15,7 +15,7 @@ const SideMenu = ({ isOpen, onClose }) => {
         if (typeof link === 'string') {
             navigate(link);
         }
-        else {
+        else if (link.pathname) {
             navigate(link.pathname, { state: link.state });
         }
     };

package/src/components/SideMenuListItem.d.ts

@@ -3,10 +3,10 @@ import { IMenuOption } from '../interfaces';
 export interface SideMenuListItemProps {
     menuItem: IMenuOption;
     onClose: () => void;
-    onNavigate?: (link: string | {
+    onNavigate?: (link: string | Partial<{
         pathname: string;
-        state?: any;
-    }) => void;
+        state?: unknown;
+    }>) => void;
 }
 export declare const SideMenuListItem: FC<SideMenuListItemProps>;
 export default SideMenuListItem;

package/src/components/SideMenuListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuListItem.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/SideMenuListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;CACzE;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+CtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SideMenuListItem.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/SideMenuListItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,KAC1D,IAAI,CAAC;CACX;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAsDtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/src/components/SideMenuListItem.js

@@ -14,8 +14,13 @@ const SideMenuListItem = ({ menuItem, onClose, onNavigate, }) => {
             if (typeof option.link === 'string') {
                 onNavigate(option.link);
             }
-            else if (typeof option.link === 'object' && 'pathname' in option.link && option.link.pathname) {
-                onNavigate({ pathname: option.link.pathname, state: option.link.state });
+            else if (typeof option.link === 'object' &&
+                'pathname' in option.link &&
+                option.link.pathname) {
+                onNavigate({
+                    pathname: option.link.pathname,
+                    state: 'state' in option.link ? option.link.state : undefined,
+                });
             }
         }
         onClose();

package/src/components/TopMenu.d.ts

@@ -1,5 +1,15 @@
 import React, { FC, ReactElement } from 'react';
 import { MenuType } from '../types/MenuType';
+declare global {
+    interface Window {
+        APP_CONFIG?: {
+            hostname: string;
+            siteTitle: string;
+            server: string;
+            [key: string]: unknown;
+        };
+    }
+}
 export interface AdditionalDropdownMenu {
     menuType: MenuType;
     menuIcon: ReactElement;

package/src/components/TopMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TopMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAUtE,OAAO,EAAE,QAAQ,EAAa,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAmEpC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"TopMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TopMenu.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,MAAM,EAAE,MAAM,CAAC;YACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAoFpC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/components/TopMenu.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopMenu = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
 const Menu_1 = tslib_1.__importDefault(require("@mui/icons-material/Menu"));
-const DropdownMenu_1 = require("./DropdownMenu");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const MenuContext_1 = require("../contexts/MenuContext");
 const react_router_dom_1 = require("react-router-dom");
 const AuthProvider_1 = require("../contexts/AuthProvider");
 const I18nProvider_1 = require("../contexts/I18nProvider");
+const MenuContext_1 = require("../contexts/MenuContext");
+const DropdownMenu_1 = require("./DropdownMenu");
 const SideMenu_1 = require("./SideMenu");
 const UserLanguageSelector_1 = require("./UserLanguageSelector");
 const UserMenu_1 = require("./UserMenu");
-const suite_core_lib_1 = require("@digitaldefiance/suite-core-lib");
 const TopMenu = ({ Logo, additionalMenus }) => {
     const { isAuthenticated } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
     const { getTopMenus } = (0, MenuContext_1.useMenu)();
@@ -22,9 +22,7 @@ const TopMenu = ({ Logo, additionalMenus }) => {
     const handleOpenSideMenu = () => setIsSideMenuOpen(true);
     const handleCloseSideMenu = () => setIsSideMenuOpen(false);
     const { t, tComponent } = (0, I18nProvider_1.useI18n)();
-    const appConfig = 'APP_CONFIG' in window
-        ? window.APP_CONFIG
-        : undefined;
+    const appConfig = window.APP_CONFIG;
     const siteTitle = tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_SiteTemplate);
     return ((0, jsx_runtime_1.jsxs)(material_1.AppBar, { position: "fixed", sx: { top: 10 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "large", edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, onClick: handleOpenSideMenu, children: (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             height: 40,
@@ -32,7 +30,7 @@ const TopMenu = ({ Logo, additionalMenus }) => {
                             marginRight: 2,
                             display: 'flex',
                             alignItems: 'center',
-                        }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: siteTitle }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), getTopMenus().map((menu, index) => menu.isUserMenu ? (0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, `user-menu`) : (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon }, `menu-${index}`))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/login", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_LoginButton) }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
+                        }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: siteTitle }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), getTopMenus().map((menu, index) => menu.isUserMenu ? ((0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, `user-menu`)) : ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon }, `menu-${index}`)))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/login", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_LoginButton) }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
 };
 exports.TopMenu = TopMenu;
 exports.default = exports.TopMenu;

package/src/interfaces/IMenuOption.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { MenuType } from '../types/MenuType';
 import { To } from 'react-router-dom';
+import { MenuType } from '../types/MenuType';
 export interface IMenuOption {
     /**
      * Unique identifier for the menu option
@@ -29,10 +29,11 @@ export interface IMenuOption {
     /**
      * Link to navigate to when the menu option is clicked
      * Mutually exclusive with `action`
+     * Can be a string, a react-router To object, or an object with pathname and optional state
      */
     link?: To | {
         pathname: string;
-        state: any;
+        state?: unknown;
     };
     /**
      * Function to execute when the menu option is clicked

package/src/interfaces/IMenuOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IMenuOption.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/interfaces/IMenuOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;CAC3C"}
+{"version":3,"file":"IMenuOption.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/interfaces/IMenuOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAClD;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;CAC3C"}