@abpjs/theme-shared 2.7.0 → 3.0.0

package/dist/index.mjs

@@ -1,14 +1,3 @@
-// src/models/toaster.ts
-var Toaster;
-((Toaster2) => {
-  let Status;
-  ((Status2) => {
-    Status2["confirm"] = "confirm";
-    Status2["reject"] = "reject";
-    Status2["dismiss"] = "dismiss";
-  })(Status = Toaster2.Status || (Toaster2.Status = {}));
-})(Toaster || (Toaster = {}));
-
 // src/models/confirmation.ts
 var Confirmation;
 ((Confirmation2) => {
@@ -21,6 +10,7 @@ var Confirmation;
 })(Confirmation || (Confirmation = {}));
 
 // src/constants/styles.ts
+var BOOTSTRAP = "bootstrap-{{dir}}.min.css";
 var DEFAULT_STYLES = `
 .is-invalid .form-control {
   border-color: #dc3545;
@@ -36,6 +26,11 @@ var DEFAULT_STYLES = `
   text-align: right;
 }
 
+/* RTL support - @since 2.9.0 */
+[dir=rtl] .data-tables-filter {
+  text-align: left;
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -217,10 +212,19 @@ function useHttpErrorConfig() {
   return context ?? httpErrorConfigFactory();
 }
 
+// src/tokens/lazy-styles.token.ts
+import { createContext as createContext3, useContext as useContext2 } from "react";
+var DEFAULT_LAZY_STYLES = [BOOTSTRAP];
+var LazyStylesContext = createContext3(DEFAULT_LAZY_STYLES);
+function useLazyStyles() {
+  return useContext2(LazyStylesContext);
+}
+var LAZY_STYLES = DEFAULT_LAZY_STYLES;
+
 // src/contexts/toaster.context.tsx
 import {
-  createContext as createContext3,
-  useContext as useContext2,
+  createContext as createContext4,
+  useContext as useContext3,
   useCallback,
   useState,
   useRef,
@@ -228,7 +232,7 @@ import {
   useEffect
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var ToasterContext = createContext3(null);
+var ToasterContext = createContext4(null);
 var toastCounter = 0;
 function generateId() {
   toastCounter += 1;
@@ -321,21 +325,21 @@ function ToasterProvider({ children }) {
   return /* @__PURE__ */ jsx(ToasterContext.Provider, { value, children });
 }
 function useToaster() {
-  const context = useContext2(ToasterContext);
+  const context = useContext3(ToasterContext);
   if (!context) {
     throw new Error("useToaster must be used within a ToasterProvider");
   }
   return context.service;
 }
 function useToasts() {
-  const context = useContext2(ToasterContext);
+  const context = useContext3(ToasterContext);
   if (!context) {
     throw new Error("useToasts must be used within a ToasterProvider");
   }
   return context.toasts;
 }
 function useToasterContext() {
-  const context = useContext2(ToasterContext);
+  const context = useContext3(ToasterContext);
   if (!context) {
     throw new Error("useToasterContext must be used within a ToasterProvider");
   }
@@ -344,8 +348,8 @@ function useToasterContext() {
 
 // src/contexts/confirmation.context.tsx
 import {
-  createContext as createContext4,
-  useContext as useContext3,
+  createContext as createContext5,
+  useContext as useContext4,
   useCallback as useCallback2,
   useState as useState2,
   useRef as useRef2,
@@ -353,7 +357,7 @@ import {
   useEffect as useEffect2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ConfirmationContext = createContext4(null);
+var ConfirmationContext = createContext5(null);
 function generateId2() {
   return `confirmation-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
@@ -377,7 +381,7 @@ function ConfirmationProvider({ children }) {
   useEffect2(() => {
     if (!escapeListenerRef.current) return;
     const handleEscape = (event) => {
-      if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
+      if (event.key === "Escape" && confirmation && confirmation.options?.dismissible !== false) {
         respond(Confirmation.Status.dismiss);
       }
     };
@@ -460,21 +464,21 @@ function ConfirmationProvider({ children }) {
   return /* @__PURE__ */ jsx2(ConfirmationContext.Provider, { value, children });
 }
 function useConfirmation() {
-  const context = useContext3(ConfirmationContext);
+  const context = useContext4(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmation must be used within a ConfirmationProvider");
   }
   return context.service;
 }
 function useConfirmationState() {
-  const context = useContext3(ConfirmationContext);
+  const context = useContext4(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationState must be used within a ConfirmationProvider");
   }
   return { confirmation: context.confirmation, respond: context.respond };
 }
 function useConfirmationContext() {
-  const context = useContext3(ConfirmationContext);
+  const context = useContext4(ConfirmationContext);
   if (!context) {
     throw new Error("useConfirmationContext must be used within a ConfirmationProvider");
   }
@@ -483,15 +487,15 @@ function useConfirmationContext() {
 
 // src/contexts/modal.context.tsx
 import {
-  createContext as createContext5,
-  useContext as useContext4,
+  createContext as createContext6,
+  useContext as useContext5,
   useCallback as useCallback3,
   useState as useState3,
   useRef as useRef3,
   useMemo as useMemo3
 } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var ModalContext = createContext5(null);
+var ModalContext = createContext6(null);
 function ModalProvider({ children }) {
   const [modalState, setModalState] = useState3(null);
   const [, setUpdateCounter] = useState3(0);
@@ -527,21 +531,21 @@ function ModalProvider({ children }) {
   ] });
 }
 function useModal() {
-  const context = useContext4(ModalContext);
+  const context = useContext5(ModalContext);
   if (!context) {
     throw new Error("useModal must be used within a ModalProvider");
   }
   return context.service;
 }
 function useModalState() {
-  const context = useContext4(ModalContext);
+  const context = useContext5(ModalContext);
   if (!context) {
     throw new Error("useModalState must be used within a ModalProvider");
   }
   return context.modalState;
 }
 function useModalContext() {
-  const context = useContext4(ModalContext);
+  const context = useContext5(ModalContext);
   if (!context) {
     throw new Error("useModalContext must be used within a ModalProvider");
   }
@@ -637,8 +641,151 @@ function isHttpErrorResponse(error) {
   return typeof error === "object" && error !== null && "status" in error && typeof error.status === "number";
 }
 
+// src/hooks/use-nav-items.ts
+import { useState as useState5, useEffect as useEffect3 } from "react";
+
+// src/services/nav-items.service.ts
+var _NavItemsService = class _NavItemsService {
+  constructor() {
+    this._items = [];
+    this._listeners = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get singleton instance
+   * @since 3.0.0
+   */
+  static getInstance() {
+    if (!_NavItemsService._instance) {
+      _NavItemsService._instance = new _NavItemsService();
+    }
+    return _NavItemsService._instance;
+  }
+  /**
+   * Reset the singleton instance (useful for testing)
+   * @internal
+   */
+  static resetInstance() {
+    _NavItemsService._instance = null;
+  }
+  /**
+   * Get current items (sorted by order)
+   * @since 3.0.0
+   */
+  get items() {
+    return [...this._items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+  /**
+   * Subscribe to item changes.
+   * Returns an unsubscribe function.
+   *
+   * @param listener - Callback function to receive item updates
+   * @returns Unsubscribe function
+   * @since 3.0.0
+   */
+  subscribe(listener) {
+    this._listeners.add(listener);
+    listener(this.items);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  /**
+   * Get items as an observable-like interface.
+   * Compatible with Angular's Observable pattern.
+   *
+   * @returns Object with subscribe method
+   * @since 3.0.0
+   */
+  get items$() {
+    return {
+      subscribe: (callback) => {
+        const unsubscribe = this.subscribe(callback);
+        return { unsubscribe };
+      }
+    };
+  }
+  /**
+   * Add one or more items.
+   * Items are automatically sorted by order.
+   *
+   * @param items - Array of items to add
+   * @since 3.0.0
+   */
+  addItems(items) {
+    const existingIds = new Set(this._items.map((item) => item.id));
+    const newItems = items.filter((item) => !existingIds.has(item.id));
+    this._items = [...this._items, ...newItems];
+    this.notify();
+  }
+  /**
+   * Remove an item by id.
+   *
+   * @param id - The id of the item to remove
+   * @since 3.0.0
+   */
+  removeItem(id) {
+    const initialLength = this._items.length;
+    this._items = this._items.filter((item) => item.id !== id);
+    if (this._items.length !== initialLength) {
+      this.notify();
+    }
+  }
+  /**
+   * Patch an existing item by id.
+   * Updates only the specified properties.
+   *
+   * @param id - The id of the item to patch
+   * @param patch - Partial item data to merge
+   * @since 3.0.0
+   */
+  patchItem(id, patch) {
+    const index = this._items.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      this._items = [
+        ...this._items.slice(0, index),
+        { ...this._items[index], ...patch },
+        ...this._items.slice(index + 1)
+      ];
+      this.notify();
+    }
+  }
+  /**
+   * Clear all items.
+   * @since 3.0.0
+   */
+  clear() {
+    if (this._items.length > 0) {
+      this._items = [];
+      this.notify();
+    }
+  }
+  /**
+   * Notify all listeners of changes.
+   */
+  notify() {
+    const currentItems = this.items;
+    this._listeners.forEach((listener) => listener(currentItems));
+  }
+};
+_NavItemsService._instance = null;
+var NavItemsService = _NavItemsService;
+function getNavItemsService() {
+  return NavItemsService.getInstance();
+}
+
+// src/hooks/use-nav-items.ts
+function useNavItems(service) {
+  const navItemsService = service || getNavItemsService();
+  const [items, setItems] = useState5(navItemsService.items);
+  useEffect3(() => {
+    const unsubscribe = navItemsService.subscribe(setItems);
+    return unsubscribe;
+  }, [navItemsService]);
+  return items;
+}
+
 // src/components/toast/Toast.tsx
-import { useEffect as useEffect3, useRef as useRef4, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useMemo as useMemo4 } from "react";
 import {
   Toaster as ChakraToaster,
   Portal,
@@ -778,7 +925,7 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
     if (!containerKey) return toasts;
     return toasts.filter((toast) => toast.options?.containerKey === containerKey);
   }, [toasts, containerKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
@@ -924,7 +1071,7 @@ function ConfirmationDialog({ className }) {
     respond(Confirmation.Status.dismiss);
   };
   const handleOpenChange = (details) => {
-    if (!details.open && options?.closable !== false) {
+    if (!details.open && options?.dismissible !== false) {
       handleDismiss();
     }
   };
@@ -1017,35 +1164,21 @@ function ErrorComponent({
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 import { useLoader } from "@abpjs/core";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
-  filter,
+  filter: _filter,
   intervalPeriod = 300,
   stopDelay = 400
 }) {
   const { loading } = useLoader();
-  const [isLoading, setIsLoading] = useState5(false);
-  const [progressLevel, setProgressLevel] = useState5(0);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [progressLevel, setProgressLevel] = useState6(0);
   const intervalRef = useRef6(null);
-  useEffect4(() => {
-    if (loading) {
-      startLoading();
-    } else {
-      stopLoading();
-    }
-  }, [loading]);
-  useEffect4(() => {
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, []);
-  const startLoading = () => {
+  const startLoading = useCallback5(() => {
     setIsLoading(true);
     setProgressLevel(0);
     if (intervalRef.current) {
@@ -1063,8 +1196,8 @@ function LoaderBar({
         return prev + 10;
       });
     }, intervalPeriod);
-  };
-  const stopLoading = () => {
+  }, [intervalPeriod]);
+  const stopLoading = useCallback5(() => {
     setProgressLevel(100);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -1074,7 +1207,21 @@ function LoaderBar({
       setIsLoading(false);
       setProgressLevel(0);
     }, stopDelay);
-  };
+  }, [stopDelay]);
+  useEffect5(() => {
+    if (loading) {
+      startLoading();
+    } else {
+      stopLoading();
+    }
+  }, [loading, startLoading, stopLoading]);
+  useEffect5(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
   if (!isLoading && progressLevel === 0) {
     return null;
   }
@@ -1109,7 +1256,7 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-import React7 from "react";
+import React6 from "react";
 import {
   Dialog as Dialog2,
   Portal as Portal3,
@@ -1157,12 +1304,12 @@ function Modal({
   preventScroll = true,
   onInit
 }) {
-  const prevVisibleRef = React7.useRef(false);
-  const onInitRef = React7.useRef(onInit);
-  React7.useEffect(() => {
+  const prevVisibleRef = React6.useRef(false);
+  const onInitRef = React6.useRef(onInit);
+  React6.useEffect(() => {
     onInitRef.current = onInit;
   }, [onInit]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (visible && !prevVisibleRef.current && onInitRef.current) {
       onInitRef.current();
     }
@@ -1378,7 +1525,7 @@ function FormField({
 }
 
 // src/components/change-password/ChangePassword.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import {
   Button as Button5,
   VStack as VStack2,
@@ -1410,7 +1557,7 @@ function ChangePassword({
     }
   });
   const newPassword = watch("newPassword");
-  useEffect5(() => {
+  useEffect6(() => {
     if (visible) {
       reset();
     }
@@ -1530,7 +1677,7 @@ function ChangePassword({
 }
 
 // src/components/profile/Profile.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import {
   Button as Button6,
   VStack as VStack3,
@@ -1564,13 +1711,13 @@ function Profile({
     }
   });
   const modalBusy = isSubmitting || loading;
-  useEffect6(() => {
+  useEffect7(() => {
     if (visible) {
       fetchProfile().then(() => {
       });
     }
   }, [visible, fetchProfile]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",
@@ -1965,7 +2112,7 @@ var abpSystem = createAbpSystem();
 // src/components/ui/color-mode.tsx
 import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
 import { ThemeProvider, useTheme } from "next-themes";
-import * as React12 from "react";
+import * as React11 from "react";
 import { Moon, Sun } from "lucide-react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ColorModeProvider(props) {
@@ -1987,7 +2134,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsx15(Moon, {}) : /* @__PURE__ */ jsx15(Sun, {});
 }
-var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx15(ClientOnly, { fallback: /* @__PURE__ */ jsx15(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx15(
     IconButton,
@@ -2008,7 +2155,7 @@ var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var LightMode = React12.forwardRef(
+var LightMode = React11.forwardRef(
   function LightMode2(props, ref) {
     return /* @__PURE__ */ jsx15(
       Span,
@@ -2024,7 +2171,7 @@ var LightMode = React12.forwardRef(
     );
   }
 );
-var DarkMode = React12.forwardRef(
+var DarkMode = React11.forwardRef(
   function DarkMode2(props, ref) {
     return /* @__PURE__ */ jsx15(
       Span,
@@ -2049,23 +2196,120 @@ function ThemeSharedProvider({
   renderToasts = true,
   renderConfirmation = true,
   themeOverrides,
-  toastPosition = "bottom-right",
+  toastPosition: _toastPosition = "bottom-right",
   enableColorMode = false,
   defaultColorMode = "light",
   locale = "en-US"
 }) {
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = useDirection();
-  toastPosition = `bottom-${endSide}`;
+  const resolvedToastPosition = endSide === "left" ? "bottom-left" : "bottom-right";
   const content = /* @__PURE__ */ jsx16(ToasterProvider, { children: /* @__PURE__ */ jsxs11(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ jsx16(ToastContainer, { position: toastPosition }),
+    renderToasts && /* @__PURE__ */ jsx16(ToastContainer, { position: resolvedToastPosition }),
     renderConfirmation && /* @__PURE__ */ jsx16(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
   return /* @__PURE__ */ jsx16(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx16(LocaleProvider, { locale, children: /* @__PURE__ */ jsx16(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
+// src/providers/route.provider.ts
+import { getRoutesService } from "@abpjs/core";
+
+// src/enums/route-names.ts
+var eThemeSharedRouteNames = /* @__PURE__ */ ((eThemeSharedRouteNames2) => {
+  eThemeSharedRouteNames2["Administration"] = "AbpUiNavigation::Menu:Administration";
+  return eThemeSharedRouteNames2;
+})(eThemeSharedRouteNames || {});
+
+// src/providers/route.provider.ts
+function configureRoutes(routes) {
+  return () => {
+    routes.add([
+      {
+        name: "AbpUiNavigation::Menu:Administration" /* Administration */,
+        path: "",
+        order: 100,
+        iconClass: "fa fa-wrench"
+      }
+    ]);
+  };
+}
+var THEME_SHARED_ROUTE_PROVIDERS = {
+  configureRoutes
+};
+function initializeThemeSharedRoutes() {
+  const routesService = getRoutesService();
+  configureRoutes(routesService)();
+}
+
+// src/handlers/lazy-style.handler.ts
+import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
+import { LazyLoadService } from "@abpjs/core";
+function createLazyStyleHref(style, dir) {
+  return style.replace("{{dir}}", dir);
+}
+function useLazyStyleHandler(options = {}) {
+  const { styles = [BOOTSTRAP], initialDirection = "ltr" } = options;
+  const [direction, setDirection] = useState7(initialDirection);
+  const lazyLoadRef = useRef7(new LazyLoadService());
+  const loadedStylesRef = useRef7(/* @__PURE__ */ new Map());
+  useEffect8(() => {
+    document.body.dir = direction;
+    const switchCSS = async () => {
+      const lazyLoad = lazyLoadRef.current;
+      for (const style of styles) {
+        const href = createLazyStyleHref(style, direction);
+        if (lazyLoad.isLoaded(href)) {
+          continue;
+        }
+        const oldDir = direction === "ltr" ? "rtl" : "ltr";
+        const oldHref = createLazyStyleHref(style, oldDir);
+        const oldLink = loadedStylesRef.current.get(oldHref);
+        if (oldLink && oldLink.parentNode) {
+          oldLink.parentNode.removeChild(oldLink);
+          lazyLoad.remove(oldHref);
+          loadedStylesRef.current.delete(oldHref);
+        }
+        try {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.href = href;
+          document.head.appendChild(link);
+          loadedStylesRef.current.set(href, link);
+        } catch (error) {
+          console.warn(`Failed to load style: ${href}`, error);
+        }
+      }
+    };
+    switchCSS();
+  }, [direction, styles]);
+  return {
+    direction,
+    setDirection
+  };
+}
+function getLoadedBootstrapDirection(styles = [BOOTSTRAP]) {
+  for (const style of styles) {
+    const ltrHref = createLazyStyleHref(style, "ltr");
+    const rtlHref = createLazyStyleHref(style, "rtl");
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+      const href = link.href;
+      if (href.includes(ltrHref)) return "ltr";
+      if (href.includes(rtlHref)) return "rtl";
+    }
+  }
+  return void 0;
+}
+function initLazyStyleHandler(options = {}) {
+  return () => {
+    const { initialDirection = "ltr" } = options;
+    document.body.dir = initialDirection;
+    return { direction: initialDirection };
+  };
+}
+
 // src/utils/styles.ts
 var THEME_SHARED_STYLES = `
 /* Form validation styling */
@@ -2255,6 +2499,7 @@ export {
   AbpModalFooter,
   AbpModalHeader,
   Alert,
+  BOOTSTRAP,
   Button3 as Button,
   Dialog2 as ChakraDialog,
   ChangePassword,
@@ -2262,11 +2507,14 @@ export {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
   FormField,
   HTTP_ERROR_CONFIG,
   HttpErrorConfigContext,
+  LAZY_STYLES,
+  LazyStylesContext,
   LoaderBar,
   Modal,
   AbpModalBody as ModalBody,
@@ -2274,20 +2522,26 @@ export {
   AbpModalFooter as ModalFooter,
   AbpModalHeader as ModalHeader,
   ModalProvider,
+  NavItemsService,
   PASSWORD_SETTING_KEYS,
   Profile,
   THEME_SHARED_APPEND_CONTENT,
+  THEME_SHARED_ROUTE_PROVIDERS,
   THEME_SHARED_STYLES,
   ThemeSharedAppendContentContext,
   ThemeSharedProvider,
   ToastContainer,
-  Toaster,
   ToasterProvider,
   abpSystem,
+  configureRoutes,
   createAbpSystem,
   createErrorInterceptor,
+  createLazyStyleHref,
   defaultAbpConfig,
   defineConfig,
+  eThemeSharedRouteNames,
+  getLoadedBootstrapDirection,
+  getNavItemsService,
   getPasswordSettings,
   getPasswordValidationRules,
   getPasswordValidators,
@@ -2295,15 +2549,20 @@ export {
   getSeverityBorderColor,
   getSeverityColorPalette as getSeverityColorScheme,
   httpErrorConfigFactory,
+  initLazyStyleHandler,
+  initializeThemeSharedRoutes,
   injectThemeSharedStyles,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
   useErrorHandler,
   useHttpErrorConfig,
+  useLazyStyleHandler,
+  useLazyStyles,
   useModal,
   useModalContext,
   useModalState,
+  useNavItems,
   useToaster,
   useToasterContext,
   useToasts