@abpjs/theme-shared 2.4.0 → 2.9.0

package/dist/models/common.d.ts

@@ -2,8 +2,15 @@
  * Common types for theme-shared module.
  * 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
@@ -19,8 +26,15 @@ export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;
 /**
  * Configuration for HTTP error handling.
  * @since 1.1.0
+ * @since 2.7.0 - Added skipHandledErrorCodes, simplified forWhichErrors to array
  */
 export interface HttpErrorConfig {
+    /**
+     * Error codes to skip handling (let them pass through).
+     * Can be either ErrorScreenErrorCodes or any number.
+     * @since 2.7.0
+     */
+    skipHandledErrorCodes?: ErrorScreenErrorCodes[] | number[];
     /**
      * Custom error screen configuration.
      */
@@ -32,8 +46,9 @@ export interface HttpErrorConfig {
         /**
          * Which error codes to show the custom component for.
          * Defaults to all error codes if not specified.
+         * @since 2.7.0 - Simplified to just an array of ErrorScreenErrorCodes
          */
-        forWhichErrors?: [ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes];
+        forWhichErrors?: ErrorScreenErrorCodes[];
         /**
          * Whether to hide the close icon on the error screen.
          */

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/append-content.token.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Append content token.
+ * Re-exported from constants for consistency with Angular API.
+ *
+ * @since 2.7.0
+ */
+export { ThemeSharedAppendContentContext, THEME_SHARED_APPEND_CONTENT, } from '../constants/append-content';

package/dist/tokens/http-error.token.d.ts

@@ -0,0 +1,70 @@
+/**
+ * HTTP Error configuration tokens.
+ * Translated from @abp/ng.theme.shared/lib/tokens/http-error.token.ts
+ *
+ * @since 2.7.0
+ */
+import type { HttpErrorConfig } from '../models/common';
+/**
+ * Token name constant for HTTP_ERROR_CONFIG.
+ * Matches the Angular InjectionToken name.
+ *
+ * @since 2.7.0
+ */
+export declare const HTTP_ERROR_CONFIG = "HTTP_ERROR_CONFIG";
+/**
+ * Context for HTTP error configuration.
+ * Use this to provide custom HTTP error handling configuration.
+ *
+ * This is the React equivalent of Angular's HTTP_ERROR_CONFIG InjectionToken.
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { HttpErrorConfigContext } from '@abpjs/theme-shared';
+ *
+ * function App() {
+ *   const httpErrorConfig: HttpErrorConfig = {
+ *     skipHandledErrorCodes: [404],
+ *     errorScreen: {
+ *       component: MyCustomErrorComponent,
+ *       forWhichErrors: [401, 403, 500],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <HttpErrorConfigContext.Provider value={httpErrorConfig}>
+ *       <YourApp />
+ *     </HttpErrorConfigContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare const HttpErrorConfigContext: import("react").Context<HttpErrorConfig | undefined>;
+/**
+ * Factory function to create default HTTP error config.
+ * Matches Angular's httpErrorConfigFactory function.
+ *
+ * @returns Default HttpErrorConfig
+ * @since 2.7.0
+ */
+export declare function httpErrorConfigFactory(): HttpErrorConfig;
+/**
+ * Hook to access the HTTP error configuration.
+ *
+ * @returns HttpErrorConfig or default config if not provided
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const config = useHttpErrorConfig();
+ *
+ *   if (config.skipHandledErrorCodes?.includes(404)) {
+ *     // Skip handling 404 errors
+ *   }
+ * }
+ * ```
+ */
+export declare function useHttpErrorConfig(): HttpErrorConfig;

package/dist/tokens/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Theme shared tokens.
+ * 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 +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/dist/utils/validation-utils.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Validation utility functions for form validation.
+ * Translated from @abp/ng.theme.shared/lib/utils/validation-utils.ts
+ *
+ * @since 2.7.0
+ */
+import type { RegisterOptions } from 'react-hook-form';
+/**
+ * Password validation settings from ABP configuration.
+ * These values come from Identity.Settings.Password in the ABP framework.
+ * @since 2.7.0
+ */
+export interface PasswordSettings {
+    /** Minimum required length for passwords */
+    requiredLength?: number;
+    /** Maximum allowed length for passwords */
+    maxLength?: number;
+    /** Whether passwords must contain at least one digit */
+    requireDigit?: boolean;
+    /** Whether passwords must contain at least one lowercase letter */
+    requireLowercase?: boolean;
+    /** Whether passwords must contain at least one uppercase letter */
+    requireUppercase?: boolean;
+    /** Whether passwords must contain at least one non-alphanumeric character */
+    requireNonAlphanumeric?: boolean;
+    /** Number of unique characters required */
+    requiredUniqueChars?: number;
+}
+/**
+ * Password validator function type for custom validation.
+ * Returns true if valid, or an error message string if invalid.
+ * @since 2.7.0
+ */
+export type PasswordValidator = (value: string) => true | string;
+/**
+ * Store-like interface for accessing ABP settings.
+ * This matches the pattern used by @abpjs/core's useAbpConfig hook.
+ * @since 2.7.0
+ */
+export interface SettingsStore {
+    getSetting: (key: string) => string | undefined;
+}
+/**
+ * Default password setting keys in ABP Identity module.
+ * @since 2.7.0
+ */
+export declare const PASSWORD_SETTING_KEYS: {
+    readonly requiredLength: "Abp.Identity.Password.RequiredLength";
+    readonly maxLength: "Abp.Identity.Password.MaxLength";
+    readonly requireDigit: "Abp.Identity.Password.RequireDigit";
+    readonly requireLowercase: "Abp.Identity.Password.RequireLowercase";
+    readonly requireUppercase: "Abp.Identity.Password.RequireUppercase";
+    readonly requireNonAlphanumeric: "Abp.Identity.Password.RequireNonAlphanumeric";
+    readonly requiredUniqueChars: "Abp.Identity.Password.RequiredUniqueChars";
+};
+/**
+ * Get password settings from the store.
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns Password settings object
+ * @since 2.7.0
+ */
+export declare function getPasswordSettings(store: SettingsStore): PasswordSettings;
+/**
+ * Get password validators based on ABP Identity settings.
+ *
+ * This is the React equivalent of Angular's getPasswordValidators function.
+ * It reads password requirements from ABP settings and returns validation functions
+ * compatible with react-hook-form's validate option.
+ *
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns Array of validator functions for password validation
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { useAbpConfig } from '@abpjs/core';
+ * import { getPasswordValidators } from '@abpjs/theme-shared';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function PasswordForm() {
+ *   const { getSetting } = useAbpConfig();
+ *   const validators = getPasswordValidators({ getSetting });
+ *
+ *   const { register } = useForm();
+ *
+ *   return (
+ *     <input
+ *       {...register('password', {
+ *         validate: Object.fromEntries(
+ *           validators.map((v, i) => [`rule${i}`, v])
+ *         )
+ *       })}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function getPasswordValidators(store: SettingsStore): PasswordValidator[];
+/**
+ * Convert password validators to react-hook-form RegisterOptions.
+ * This is a convenience function to create validation rules for react-hook-form.
+ *
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns RegisterOptions with validate rules for react-hook-form
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { useAbpConfig } from '@abpjs/core';
+ * import { getPasswordValidationRules } from '@abpjs/theme-shared';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function PasswordForm() {
+ *   const { getSetting } = useAbpConfig();
+ *   const { register } = useForm();
+ *
+ *   return (
+ *     <input {...register('password', getPasswordValidationRules({ getSetting }))} />
+ *   );
+ * }
+ * ```
+ */
+export declare function getPasswordValidationRules(store: SettingsStore): RegisterOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-shared",
-  "version": "2.4.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.4.0"
+    "@abpjs/core": "2.9.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.shared": "2.4.0",
+    "@abp/ng.theme.shared": "2.9.0",
     "@vitest/coverage-v8": "^3.2.0"
   },
   "author": "tekthar.com",