@abpjs/theme-shared 2.7.0 → 2.9.0

package/dist/index.mjs

@@ -21,6 +21,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 +37,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 +223,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 +243,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 +336,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 +359,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 +368,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)}`;
 }
@@ -460,21 +475,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 +498,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 +542,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");
   }
@@ -2066,6 +2081,73 @@ function ThemeSharedProvider({
   return /* @__PURE__ */ jsx16(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx16(LocaleProvider, { locale, children: /* @__PURE__ */ jsx16(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
+// src/handlers/lazy-style.handler.ts
+import { useEffect as useEffect7, useRef as useRef7, useState as useState6 } 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] = useState6(initialDirection);
+  const lazyLoadRef = useRef7(new LazyLoadService());
+  const loadedStylesRef = useRef7(/* @__PURE__ */ new Map());
+  useEffect7(() => {
+    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 */
@@ -2137,6 +2219,44 @@ function injectThemeSharedStyles() {
   };
 }
 
+// src/utils/nav-items.ts
+var navItems = [];
+var subscribers = /* @__PURE__ */ new Set();
+function addNavItem(item) {
+  navItems = [...navItems, item].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  notifySubscribers();
+}
+function removeNavItem(item) {
+  navItems = navItems.filter((i) => i !== item);
+  notifySubscribers();
+}
+function clearNavItems() {
+  navItems = [];
+  notifySubscribers();
+}
+function getNavItemsSync() {
+  return [...navItems];
+}
+function subscribeToNavItems(callback) {
+  subscribers.add(callback);
+  callback([...navItems]);
+  return () => {
+    subscribers.delete(callback);
+  };
+}
+function notifySubscribers() {
+  const currentItems = [...navItems];
+  subscribers.forEach((callback) => callback(currentItems));
+}
+function getNavItems() {
+  return {
+    subscribe: (callback) => {
+      const unsubscribe = subscribeToNavItems(callback);
+      return { unsubscribe };
+    }
+  };
+}
+
 // src/utils/validation-utils.ts
 var PASSWORD_SETTING_KEYS = {
   requiredLength: "Abp.Identity.Password.RequiredLength",
@@ -2255,6 +2375,7 @@ export {
   AbpModalFooter,
   AbpModalHeader,
   Alert,
+  BOOTSTRAP,
   Button3 as Button,
   Dialog2 as ChakraDialog,
   ChangePassword,
@@ -2262,11 +2383,14 @@ export {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
   FormField,
   HTTP_ERROR_CONFIG,
   HttpErrorConfigContext,
+  LAZY_STYLES,
+  LazyStylesContext,
   LoaderBar,
   Modal,
   AbpModalBody as ModalBody,
@@ -2284,10 +2408,16 @@ export {
   Toaster,
   ToasterProvider,
   abpSystem,
+  addNavItem,
+  clearNavItems,
   createAbpSystem,
   createErrorInterceptor,
+  createLazyStyleHref,
   defaultAbpConfig,
   defineConfig,
+  getLoadedBootstrapDirection,
+  getNavItems,
+  getNavItemsSync,
   getPasswordSettings,
   getPasswordValidationRules,
   getPasswordValidators,
@@ -2295,12 +2425,17 @@ export {
   getSeverityBorderColor,
   getSeverityColorPalette as getSeverityColorScheme,
   httpErrorConfigFactory,
+  initLazyStyleHandler,
   injectThemeSharedStyles,
+  removeNavItem,
+  subscribeToNavItems,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
   useErrorHandler,
   useHttpErrorConfig,
+  useLazyStyleHandler,
+  useLazyStyles,
   useModal,
   useModalContext,
   useModalState,

package/dist/models/common.d.ts

@@ -3,8 +3,14 @@
  * Translated from @abp/ng.theme.shared/lib/models/common.ts
  * @since 1.1.0
  * @since 2.7.0 - Added skipHandledErrorCodes, simplified forWhichErrors type
+ * @since 2.9.0 - Added LocaleDirection type
  */
 import type { ComponentType } from 'react';
+/**
+ * Locale direction for RTL/LTR support.
+ * @since 2.9.0
+ */
+export type LocaleDirection = 'ltr' | 'rtl';
 /**
  * Root parameters for ThemeSharedModule configuration.
  * @since 1.1.0

package/dist/models/confirmation.d.ts

@@ -9,18 +9,23 @@
  * - Removed deprecated cancelCopy/yesCopy
  *
  * @since 2.1.0 - Added Status enum (confirmation-specific, replaces Toaster.Status usage)
+ * @since 2.9.0 - Added dismissible property, deprecated closable
  */
 import type { Config } from '@abpjs/core';
 export declare namespace Confirmation {
     /**
      * Options for configuring a confirmation dialog.
      * @since 2.0.0 - No longer extends Toaster.Options
+     * @since 2.9.0 - Added dismissible, deprecated closable
      */
     interface Options {
         /** Unique identifier for the confirmation */
         id?: string | number;
-        /** Whether the confirmation can be closed by clicking outside or pressing escape */
-        closable?: boolean;
+        /**
+         * Whether the confirmation can be dismissed by clicking outside or pressing escape.
+         * @since 2.9.0
+         */
+        dismissible?: boolean;
         /** Parameters for localizing the message */
         messageLocalizationParams?: string[];
         /** Parameters for localizing the title */
@@ -33,6 +38,11 @@ export declare namespace Confirmation {
         cancelText?: Config.LocalizationParam;
         /** Custom text for the yes button */
         yesText?: Config.LocalizationParam;
+        /**
+         * Whether the confirmation can be closed by clicking outside or pressing escape.
+         * @deprecated Use dismissible instead. To be deleted in v3.0.
+         */
+        closable?: boolean;
     }
     /**
      * Dialog data structure for confirmation dialogs.

package/dist/tokens/index.d.ts

@@ -3,6 +3,8 @@
  * Translated from @abp/ng.theme.shared/lib/tokens
  *
  * @since 2.7.0
+ * @since 2.9.0 - Added LAZY_STYLES token
  */
 export * from './append-content.token';
 export * from './http-error.token';
+export * from './lazy-styles.token';

package/dist/tokens/lazy-styles.token.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Lazy Styles Token
+ * Translated from @abp/ng.theme.shared/lib/tokens/lazy-styles.token.ts
+ *
+ * Provides configuration for lazy-loaded stylesheets with RTL/LTR support.
+ *
+ * @since 2.9.0
+ */
+/**
+ * Default lazy styles configuration.
+ * @since 2.9.0
+ */
+export declare const DEFAULT_LAZY_STYLES: string[];
+/**
+ * Context for lazy styles configuration.
+ * @since 2.9.0
+ */
+export declare const LazyStylesContext: import("react").Context<string[]>;
+/**
+ * Hook to get lazy styles configuration.
+ * @returns Array of style patterns with {{dir}} placeholder
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const lazyStyles = useLazyStyles();
+ *   // lazyStyles = ['bootstrap-{{dir}}.min.css']
+ * }
+ * ```
+ */
+export declare function useLazyStyles(): string[];
+/**
+ * LAZY_STYLES constant for backwards compatibility.
+ * In React, use LazyStylesContext or useLazyStyles() hook instead.
+ * @since 2.9.0
+ */
+export declare const LAZY_STYLES: string[];

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './styles';
+export * from './nav-items';
 export * from './validation-utils';

package/dist/utils/nav-items.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Nav Items Utility
+ * Translated from @abp/ng.theme.shared/lib/utils/nav-items.ts
+ *
+ * Provides functions for managing navigation items dynamically.
+ *
+ * @since 2.9.0
+ */
+import { ComponentType } from 'react';
+/**
+ * Navigation item configuration.
+ * @since 2.9.0
+ */
+export interface NavItem {
+    /**
+     * React component to render for this nav item.
+     */
+    component?: ComponentType<any>;
+    /**
+     * Raw HTML string to render (use with caution for XSS).
+     */
+    html?: string;
+    /**
+     * Action to execute when the nav item is clicked.
+     */
+    action?: () => void;
+    /**
+     * Order for sorting nav items. Lower numbers appear first.
+     */
+    order?: number;
+    /**
+     * Permission required to show this nav item.
+     */
+    permission?: string;
+}
+type NavItemSubscriber = (items: NavItem[]) => void;
+/**
+ * Add a navigation item.
+ * @param item - The nav item to add
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * addNavItem({
+ *   component: MyComponent,
+ *   order: 10,
+ *   permission: 'AbpIdentity.Users',
+ * });
+ * ```
+ */
+export declare function addNavItem(item: NavItem): void;
+/**
+ * Remove a navigation item.
+ * @param item - The nav item to remove
+ * @since 2.9.0
+ */
+export declare function removeNavItem(item: NavItem): void;
+/**
+ * Clear all navigation items.
+ * @since 2.9.0
+ */
+export declare function clearNavItems(): void;
+/**
+ * Get current navigation items.
+ * @returns Array of nav items
+ * @since 2.9.0
+ */
+export declare function getNavItemsSync(): NavItem[];
+/**
+ * Subscribe to navigation item changes.
+ * Returns an unsubscribe function.
+ *
+ * @param callback - Function to call when nav items change
+ * @returns Unsubscribe function
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * const unsubscribe = subscribeToNavItems((items) => {
+ *   console.log('Nav items changed:', items);
+ * });
+ *
+ * // Later, to unsubscribe:
+ * unsubscribe();
+ * ```
+ */
+export declare function subscribeToNavItems(callback: NavItemSubscriber): () => void;
+/**
+ * Get navigation items as an observable-like interface.
+ * Compatible with Angular's Observable pattern.
+ *
+ * @returns Object with subscribe method
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * const subscription = getNavItems().subscribe((items) => {
+ *   console.log('Nav items:', items);
+ * });
+ *
+ * // Later, to unsubscribe:
+ * subscription.unsubscribe();
+ * ```
+ */
+export declare function getNavItems(): {
+    subscribe: (callback: NavItemSubscriber) => {
+        unsubscribe: () => void;
+    };
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-shared",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,10 +27,10 @@
     "next-themes": "^0.4.6",
     "react-hook-form": "^7.48.0",
     "react-icons": "^5.5.0",
-    "@abpjs/core": "2.7.0"
+    "@abpjs/core": "2.9.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.shared": "2.7.0",
+    "@abp/ng.theme.shared": "2.9.0",
     "@vitest/coverage-v8": "^3.2.0"
   },
   "author": "tekthar.com",