@digitaldefiance/express-suite-react-components 2.2.1 → 2.3.0

package/README.md

@@ -66,10 +66,46 @@ yarn add @digitaldefiance/express-suite-react-components
 ### Types & Interfaces
 
 - **IMenuOption** - Menu option interface
-- **IncludeOnMenu** - Menu location enumeration
+- **MenuType** - Extensible menu type system (see [Menu Type Extensibility Guide](docs/MENU_TYPE_EXTENSIBILITY.md))
 
 ## Usage
 
+### Menu System
+
+The menu system supports extensible menu types. See the [Menu Type Extensibility Guide](docs/MENU_TYPE_EXTENSIBILITY.md) for details on creating custom menus.
+
+```tsx
+import { TopMenu, MenuTypes, createMenuType } from '@digitaldefiance/express-suite-react-components';
+
+// Use built-in menu types
+const menuOptions = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    link: '/dashboard',
+    includeOnMenus: [MenuTypes.SideMenu, MenuTypes.TopMenu],
+    index: 0,
+    requiresAuth: true,
+  },
+];
+
+// Create custom menu types
+const AdminMenu = createMenuType('AdminMenu');
+
+function App() {
+  return (
+    <TopMenu 
+      Logo={<MyLogo />}
+      additionalMenus={[{
+        menuType: AdminMenu,
+        menuIcon: <AdminIcon />,
+        priority: 10,
+      }]}
+    />
+  );
+}
+```
+
 ### Authentication
 
 ```tsx
@@ -261,6 +297,41 @@ MIT © Digital Defiance
 
 ## ChangeLog
 
+### v2.3.0
+
+#### Breaking Changes
+- **Removed `IncludeOnMenu` enum** - Replaced with extensible `MenuType` system using branded string types
+- Menu system now requires `MenuTypes` constant instead of enum values
+
+#### Added
+- **Extensible Menu Type System** - New `MenuType` branded string type with `createMenuType()` factory function
+- **`MenuTypes` constant** - Built-in menu types (SideMenu, TopMenu, UserMenu) replacing enum
+- **`createMenuType()` function** - Factory for creating custom menu types with type safety
+- **`AdditionalDropdownMenu` interface** - Support for custom dropdown menus in TopMenu component
+- **`additionalMenus` prop** on TopMenu - Allows adding custom menu dropdowns with priority ordering
+- **Menu Type Extensibility Guide** - Comprehensive documentation at `docs/MENU_TYPE_EXTENSIBILITY.md`
+
+#### Changed
+- **IMenuOption.includeOnMenus** - Now uses `MenuType[]` instead of `IncludeOnMenu[]`
+- **DropdownMenu.menuType** - Now accepts `MenuType` instead of `IncludeOnMenu`
+- **MenuContext.getMenuOptions** - Now accepts `MenuType` parameter instead of `IncludeOnMenu`
+- All menu components updated to use `MenuTypes` constant
+- Updated README with menu system usage examples and extensibility guide link
+
+#### Migration Guide
+```typescript
+// Old (v2.2.x)
+import { IncludeOnMenu } from '@digitaldefiance/express-suite-react-components';
+includeOnMenus: [IncludeOnMenu.SideMenu, IncludeOnMenu.UserMenu]
+
+// New (v2.3.0)
+import { MenuTypes } from '@digitaldefiance/express-suite-react-components';
+includeOnMenus: [MenuTypes.SideMenu, MenuTypes.UserMenu]
+
+// Create custom menu types
+import { createMenuType } from '@digitaldefiance/express-suite-react-components';
+const AdminMenu = createMenuType('AdminMenu');
+
 ### v2.2.1
 
 - Update BackupCodeLoginForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitaldefiance/express-suite-react-components",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "React MUI components for Digital Defiance Express Suite",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@digitaldefiance/i18n-lib": "3.6.0",
-    "@digitaldefiance/suite-core-lib": "2.2.3",
+    "@digitaldefiance/suite-core-lib": "2.2.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",

package/src/components/DropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactElement } from 'react';
-import { IncludeOnMenu } from '../enumerations/IncludeOnMenu';
+import { MenuType } from '../types/MenuType';
 interface DropdownMenuProps {
-    menuType: IncludeOnMenu;
+    menuType: MenuType;
     menuIcon: ReactElement;
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,YAAY,EAAyB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D,UAAU,iBAAiB;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA6E9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,YAAY,EAAyB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,UAAU,iBAAiB;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA6E9C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/components/SideMenu.js

@@ -4,13 +4,13 @@ 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 IncludeOnMenu_1 = require("../enumerations/IncludeOnMenu");
+const MenuType_1 = require("../types/MenuType");
 const MenuContext_1 = require("../contexts/MenuContext");
 const SideMenuListItem_1 = require("./SideMenuListItem");
 const SideMenu = ({ isOpen, onClose }) => {
     const { getMenuOptions } = (0, MenuContext_1.useMenu)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const menuOptions = getMenuOptions(IncludeOnMenu_1.IncludeOnMenu.SideMenu, true);
+    const menuOptions = getMenuOptions(MenuType_1.MenuTypes.SideMenu, true);
     const handleNavigate = (link) => {
         if (typeof link === 'string') {
             navigate(link);

package/src/components/TopMenu.d.ts

@@ -1,6 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
+import { MenuType } from '../types/MenuType';
+export interface AdditionalDropdownMenu {
+    menuType: MenuType;
+    menuIcon: ReactElement;
+    priority?: number;
+}
 export interface TopMenuProps {
     Logo: React.ReactNode;
+    additionalMenus?: Array<AdditionalDropdownMenu>;
 }
 export declare const TopMenu: FC<TopMenuProps>;
 export default TopMenu;

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":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAUxD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAgEpC,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":"AAUA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAStE,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,CAuEpC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/components/TopMenu.js

@@ -4,6 +4,7 @@ exports.TopMenu = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 react_router_dom_1 = require("react-router-dom");
@@ -13,7 +14,8 @@ 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 }) => {
+const MenuType_1 = require("../types/MenuType");
+const TopMenu = ({ Logo, additionalMenus }) => {
     const { isAuthenticated } = (0, react_1.useContext)(AuthProvider_1.AuthContext);
     const [isSideMenuOpen, setIsSideMenuOpen] = (0, react_1.useState)(false);
     const handleOpenSideMenu = () => setIsSideMenuOpen(true);
@@ -29,7 +31,12 @@ const TopMenu = ({ Logo }) => {
                             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: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard)) }), (0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {})] })) : ((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: t(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: t(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: t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard)) }), [
+                                        ...additionalMenus?.map((menu, index) => ({ ...menu, key: `custom-${index}`, isUserMenu: false })) ?? [],
+                                        { menuType: MenuType_1.MenuTypes.UserMenu, menuIcon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), priority: 0, key: 'user-menu', isUserMenu: true }
+                                    ]
+                                        .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
+                                        .map(menu => menu.isUserMenu ? (0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, menu.key) : (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon }, menu.key))] })) : ((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: t(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: t(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/components/UserMenu.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
-const IncludeOnMenu_1 = require("../enumerations/IncludeOnMenu");
+const MenuType_1 = require("../types/MenuType");
 const DropdownMenu_1 = require("./DropdownMenu");
 const UserMenu = () => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: IncludeOnMenu_1.IncludeOnMenu.UserMenu, menuIcon: (0, jsx_runtime_1.jsx)(icons_material_1.AccountCircle, {}) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: MenuType_1.MenuTypes.UserMenu, menuIcon: (0, jsx_runtime_1.jsx)(icons_material_1.AccountCircle, {}) }));
 };
 exports.UserMenu = UserMenu;
 exports.default = exports.UserMenu;

package/src/contexts/MenuContext.d.ts

@@ -1,12 +1,12 @@
 import { FC, ReactNode } from 'react';
-import { IncludeOnMenu } from '../enumerations/IncludeOnMenu';
+import { MenuType } from '../types/MenuType';
 import { IMenuOption } from '../interfaces/IMenuOption';
 interface MenuProviderProps {
     children: ReactNode;
 }
 interface MenuContextType {
     menuOptions: IMenuOption[];
-    getMenuOptions: (menuType: IncludeOnMenu, includeDividers: boolean) => IMenuOption[];
+    getMenuOptions: (menuType: MenuType, includeDividers: boolean) => IMenuOption[];
     registerMenuOption: (option: IMenuOption) => () => void;
     registerMenuOptions: (options: IMenuOption[]) => () => void;
 }

package/src/contexts/MenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/contexts/MenuContext.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,EAAE,EACF,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,cAAc,EAAE,CACd,QAAQ,EAAE,aAAa,EACvB,eAAe,EAAE,OAAO,KACrB,WAAW,EAAE,CAAC;IACnB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,MAAM,IAAI,CAAC;CAC7D;AAID,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwN9C,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,eAM1B,CAAC"}
+{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/contexts/MenuContext.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,EAAE,EACF,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAa,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,cAAc,EAAE,CACd,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,OAAO,KACrB,WAAW,EAAE,CAAC;IACnB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,MAAM,IAAI,CAAC;CAC7D;AAID,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwN9C,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,eAM1B,CAAC"}

package/src/contexts/MenuContext.js

@@ -8,7 +8,7 @@ const suite_core_lib_2 = require("@digitaldefiance/suite-core-lib");
 const icons_material_1 = require("@mui/icons-material");
 const react_1 = require("react");
 const AuthProvider_1 = require("./AuthProvider");
-const IncludeOnMenu_1 = require("../enumerations/IncludeOnMenu");
+const MenuType_1 = require("../types/MenuType");
 const I18nProvider_1 = require("./I18nProvider");
 const ThemeProvider_1 = require("./ThemeProvider");
 const MenuContext = (0, react_1.createContext)(undefined);
@@ -51,14 +51,14 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Dashboard, {}),
                 link: '/dashboard',
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
                 id: 'user-divider',
                 label: '',
                 divider: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 requiresAuth: false,
             },
@@ -68,7 +68,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.ExitToApp, {}),
                 link: '/logout',
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -77,7 +77,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Login, {}),
                 link: '/login',
                 requiresAuth: false,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -86,7 +86,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.PersonAdd, {}),
                 link: '/register',
                 requiresAuth: false,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -95,7 +95,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.LockOpen, {}),
                 link: '/forgot-password',
                 requiresAuth: false,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -104,7 +104,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.LockReset, {}),
                 link: '/change-password',
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -113,7 +113,7 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
                 link: '/backup-code',
                 requiresAuth: false,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
@@ -122,14 +122,14 @@ const MenuProvider = ({ children }) => {
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Autorenew, {}),
                 link: '/backup-codes',
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
             },
             {
                 id: 'divider',
                 label: '',
                 divider: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 requiresAuth: false,
             },
@@ -139,7 +139,7 @@ const MenuProvider = ({ children }) => {
                 action: clearMnemonic,
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 filter: () => !!mnemonic,
             },
@@ -149,7 +149,7 @@ const MenuProvider = ({ children }) => {
                 action: clearWallet,
                 icon: (0, jsx_runtime_1.jsx)(icons_material_1.Key, {}),
                 requiresAuth: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.UserMenu, IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.UserMenu, MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 filter: () => !!wallet,
             },
@@ -158,7 +158,7 @@ const MenuProvider = ({ children }) => {
                 id: 'color-divider',
                 label: '',
                 divider: true,
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 requiresAuth: undefined,
             },
@@ -168,7 +168,7 @@ const MenuProvider = ({ children }) => {
                     ? t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Light))
                     : t(tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_2.SuiteCoreStringKey.Common_ThemeToggle_Dark)),
                 icon: mode === 'dark' ? (0, jsx_runtime_1.jsx)(icons_material_1.Brightness7, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Brightness4, {}),
-                includeOnMenus: [IncludeOnMenu_1.IncludeOnMenu.SideMenu],
+                includeOnMenus: [MenuType_1.MenuTypes.SideMenu],
                 index: index++,
                 requiresAuth: undefined,
                 action: toggleColorMode,

package/src/index.d.ts

@@ -1,7 +1,6 @@
 export * from './auth';
 export * from './components';
 export * from './contexts';
-export * from './enumerations';
 export * from './hooks';
 export * from './interfaces';
 export * from './services';

package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/digitaldefiance-express-suite-react-components/src/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/digitaldefiance-express-suite-react-components/src/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/src/index.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./auth"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./contexts"), exports);
-tslib_1.__exportStar(require("./enumerations"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);
 tslib_1.__exportStar(require("./interfaces"), exports);
 tslib_1.__exportStar(require("./services"), exports);

package/src/interfaces/IMenuOption.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IncludeOnMenu } from '../enumerations';
+import { MenuType } from '../types/MenuType';
 import { To } from 'react-router-dom';
 export interface IMenuOption {
     /**
@@ -13,7 +13,7 @@ export interface IMenuOption {
     /**
      * Where the menu option should be displayed
      */
-    includeOnMenus: IncludeOnMenu[];
+    includeOnMenus: MenuType[];
     /**
      * Display order for the menu option. Lower numbers are displayed first.
      */

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,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,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,aAAa,EAAE,CAAC;IAChC;;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,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"}

package/src/types/MenuType.d.ts

@@ -0,0 +1,11 @@
+export type MenuType = string & {
+    readonly __brand: 'MenuType';
+};
+export declare const createMenuType: (id: string) => MenuType;
+export declare const MenuTypes: {
+    readonly SideMenu: MenuType;
+    readonly TopMenu: MenuType;
+    readonly UserMenu: MenuType;
+};
+export type BuiltInMenuType = typeof MenuTypes[keyof typeof MenuTypes];
+//# sourceMappingURL=MenuType.d.ts.map

package/src/types/MenuType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuType.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/types/MenuType.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAA;CAAE,CAAC;AAGjE,eAAO,MAAM,cAAc,GAAI,IAAI,MAAM,KAAG,QAA0B,CAAC;AAGvE,eAAO,MAAM,SAAS;;;;CAIZ,CAAC;AAGX,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC"}

package/src/types/MenuType.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuTypes = exports.createMenuType = void 0;
+// Factory function to create menu types
+const createMenuType = (id) => id;
+exports.createMenuType = createMenuType;
+// Built-in menu types
+exports.MenuTypes = {
+    SideMenu: (0, exports.createMenuType)('SideMenu'),
+    TopMenu: (0, exports.createMenuType)('TopMenu'),
+    UserMenu: (0, exports.createMenuType)('UserMenu'),
+};

package/src/types/index.d.ts

@@ -1,3 +1,2 @@
-export * from './expirationSeconds';
-export * from './translation';
+export * from './MenuType';
 //# sourceMappingURL=index.d.ts.map

package/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/src/types/index.js

@@ -1,5 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./expirationSeconds"), exports);
-tslib_1.__exportStar(require("./translation"), exports);
+tslib_1.__exportStar(require("./MenuType"), exports);

package/src/enumerations/IncludeOnMenu.d.ts

@@ -1,6 +0,0 @@
-export declare enum IncludeOnMenu {
-    SideMenu = 0,
-    TopMenu = 1,
-    UserMenu = 2
-}
-//# sourceMappingURL=IncludeOnMenu.d.ts.map

package/src/enumerations/IncludeOnMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IncludeOnMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/enumerations/IncludeOnMenu.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACvB,QAAQ,IAAA;IACR,OAAO,IAAA;IACP,QAAQ,IAAA;CACT"}

package/src/enumerations/IncludeOnMenu.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IncludeOnMenu = void 0;
-var IncludeOnMenu;
-(function (IncludeOnMenu) {
-    IncludeOnMenu[IncludeOnMenu["SideMenu"] = 0] = "SideMenu";
-    IncludeOnMenu[IncludeOnMenu["TopMenu"] = 1] = "TopMenu";
-    IncludeOnMenu[IncludeOnMenu["UserMenu"] = 2] = "UserMenu";
-})(IncludeOnMenu || (exports.IncludeOnMenu = IncludeOnMenu = {}));

package/src/enumerations/index.d.ts

@@ -1,2 +0,0 @@
-export * from './IncludeOnMenu';
-//# sourceMappingURL=index.d.ts.map

package/src/enumerations/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/enumerations/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/src/enumerations/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./IncludeOnMenu"), exports);