Release Notes
v3.1.0
February 2026
New Features
NavItem Class with Visible Callback
NavItem has been changed from an interface to a class with constructor support and a new visible callback:
import { NavItem, NavItemProps } from '@abpjs/theme-shared';
// Create NavItem using class constructor
const navItem = new NavItem({
id: 'my-item',
order: 1,
requiredPolicy: 'MyPermission',
visible: () => {
// Dynamic visibility based on conditions
return someCondition;
},
});
// Or use NavItemProps interface for type checking
const props: NavItemProps = {
id: 'my-item',
order: 1,
visible: () => isFeatureEnabled,
};
const item = new NavItem(props);
NavItemsService Accepts NavItemProps
NavItemsService.addItems() now accepts both NavItem instances and plain NavItemProps objects:
import { getNavItemsService, NavItem } from '@abpjs/theme-shared';
const navItemsService = getNavItemsService();
// Add using NavItemProps (plain object) - automatically converted to NavItem
navItemsService.addItems([
{ id: 'item-1', order: 1 },
{ id: 'item-2', order: 2, visible: () => true },
]);
// Add using NavItem instances
navItemsService.addItems([
new NavItem({ id: 'item-3', order: 3 }),
]);
Error Localizations Export
New DEFAULT_ERROR_LOCALIZATIONS constant for error messages with title and details:
import { DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES } from '@abpjs/theme-shared';
// Access localization keys for different error types
const error401 = DEFAULT_ERROR_LOCALIZATIONS.defaultError401;
console.log(error401.title); // 'AbpUi::DefaultErrorMessage401'
console.log(error401.details); // 'AbpUi::DefaultErrorMessage401Detail'
// Available error localizations:
// - defaultError (general error)
// - defaultError401 (unauthorized)
// - defaultError403 (forbidden)
// - defaultError404 (not found)
// - defaultError500 (server error)
// DEFAULT_ERROR_MESSAGES is now exported as well
console.log(DEFAULT_ERROR_MESSAGES[404]); // 'AbpUi::DefaultErrorMessage404'
New Exports
NavItem- Class for navigation items (was interface)NavItemProps- Interface for nav item propertiesDEFAULT_ERROR_LOCALIZATIONS- Error localization keys with title and detailsDEFAULT_ERROR_MESSAGES- Error messages by HTTP status code (now exported)
v3.0.0
February 2026
Breaking Changes
Removed Toaster.Status enum
The deprecated Toaster.Status enum has been removed. Use Confirmation.Status instead:
// Before (removed)
import { Toaster } from '@abpjs/theme-shared';
if (status === Toaster.Status.confirm) { /* ... */ }
// After (v3.0.0)
import { Confirmation } from '@abpjs/theme-shared';
if (status === Confirmation.Status.confirm) { /* ... */ }
Removed Toaster.Options and Toaster.Message
The deprecated Toaster.Options and Toaster.Message interfaces have been removed. Use Toaster.ToastOptions and Toaster.Toast instead.
Removed Confirmation.Options.closable
The deprecated closable property has been removed. Use dismissible instead:
// Before (removed)
confirmation.info('Message', 'Title', { closable: true });
// After (v3.0.0)
confirmation.info('Message', 'Title', { dismissible: true });
Removed setting-management model
The SettingManagement model has been removed from @abpjs/theme-shared. Use SettingTabsService from @abpjs/core instead:
// Before (removed)
import { SettingManagement } from '@abpjs/theme-shared';
// After (v3.0.0)
import { getSettingTabsService } from '@abpjs/core';
const settingTabsService = getSettingTabsService();
settingTabsService.add([
{ name: 'General', order: 1 },
]);
NavItem model changes
The NavItem interface has changed:
idproperty is now required - Each nav item must have a unique identifierpermissionrenamed torequiredPolicy- Aligns with ABP naming conventions
// Before (v2.9.0)
const item: NavItem = {
component: MyComponent,
order: 1,
permission: 'MyPolicy',
};
// After (v3.0.0)
const item: NavItem = {
id: 'my-item', // Required
component: MyComponent,
order: 1,
requiredPolicy: 'MyPolicy', // Renamed
};
Nav items utility functions replaced by NavItemsService
The utility functions for managing nav items have been replaced with a service-based approach:
// Before (v2.9.0 - removed)
import {
addNavItem,
removeNavItem,
clearNavItems,
getNavItems,
getNavItemsSync,
subscribeToNavItems,
} from '@abpjs/theme-shared';
addNavItem({ component: MyComponent, order: 1 });
// After (v3.0.0)
import { getNavItemsService } from '@abpjs/theme-shared';
const navItemsService = getNavItemsService();
navItemsService.addItems([{ id: 'my-item', component: MyComponent, order: 1 }]);
New Features
NavItemsService
A new service for managing navigation items with reactive updates:
import { NavItemsService, getNavItemsService } from '@abpjs/theme-shared';
const navItemsService = getNavItemsService();
// Add items
navItemsService.addItems([
{ id: 'profile', component: ProfileComponent, order: 1 },
{ id: 'settings', component: SettingsComponent, order: 2 },
]);
// Get current items (sorted by order)
const items = navItemsService.items;
// Subscribe to changes
const unsubscribe = navItemsService.subscribe((items) => {
console.log('Items changed:', items);
});
// Observable-like pattern for Angular compatibility
const subscription = navItemsService.items$.subscribe((items) => {
console.log('Items:', items);
});
subscription.unsubscribe();
// Remove an item by id
navItemsService.removeItem('profile');
// Patch an item
navItemsService.patchItem('settings', { order: 10 });
// Clear all items
navItemsService.clear();
eThemeSharedRouteNames Enum
New enum for theme shared route names:
import { eThemeSharedRouteNames } from '@abpjs/theme-shared';
// Use for route registration
routesService.add([
{
name: 'MyAdminPage',
path: '/admin/my-page',
parentName: eThemeSharedRouteNames.Administration, // 'AbpUiNavigation::Menu:Administration'
},
]);
Route Provider
New functions for initializing theme-shared routes:
import {
initializeThemeSharedRoutes,
configureRoutes,
THEME_SHARED_ROUTE_PROVIDERS,
} from '@abpjs/theme-shared';
// Simple initialization - call once during app startup
initializeThemeSharedRoutes();
// This registers the Administration route that other modules use as a parent:
// {
// name: 'AbpUiNavigation::Menu:Administration',
// path: '',
// order: 100,
// iconClass: 'fa fa-wrench',
// }
// Advanced: configure routes with custom RoutesService
import { getRoutesService } from '@abpjs/core';
const routesService = getRoutesService();
configureRoutes(routesService)();
New Exports
NavItemsService- Service class for managing nav itemsgetNavItemsService()- Get NavItemsService singletonNavItem- Updated interface withidandrequiredPolicyeThemeSharedRouteNames- Enum for route namesinitializeThemeSharedRoutes()- Initialize theme-shared routesconfigureRoutes(routes)- Configure routes with custom RoutesServiceTHEME_SHARED_ROUTE_PROVIDERS- Route provider configuration object
Migration Guide
Migrating from nav items utility functions
// v2.9.0
import { addNavItem, removeNavItem, getNavItemsSync } from '@abpjs/theme-shared';
addNavItem({ component: MyComponent, order: 1, permission: 'MyPolicy' });
const items = getNavItemsSync();
removeNavItem(myItem);
// v3.0.0
import { getNavItemsService } from '@abpjs/theme-shared';
const navItemsService = getNavItemsService();
navItemsService.addItems([{ id: 'my-item', component: MyComponent, order: 1, requiredPolicy: 'MyPolicy' }]);
const items = navItemsService.items;
navItemsService.removeItem('my-item');
Migrating from setting-management model
// v2.9.0
import { SettingManagement } from '@abpjs/theme-shared';
const tabs: SettingManagement.Tab[] = [...];
// v3.0.0
import { getSettingTabsService } from '@abpjs/core';
const settingTabsService = getSettingTabsService();
settingTabsService.add([...]);
v2.9.0
February 2026
New Features
RTL/LTR Style Switching
New handler and utilities for automatic RTL/LTR stylesheet switching based on locale direction:
import { useLazyStyleHandler, BOOTSTRAP } from '@abpjs/theme-shared';
function App() {
const { direction, setDirection } = useLazyStyleHandler({
styles: [BOOTSTRAP], // Optional, defaults to [BOOTSTRAP]
initialDirection: 'ltr',
});
// Switch to RTL when language changes
const handleLanguageChange = (lang: string) => {
if (lang === 'ar' || lang === 'he') {
setDirection('rtl');
} else {
setDirection('ltr');
}
};
return <div dir={direction}>...</div>;
}
The handler automatically:
- Sets the
dirattribute ondocument.body - Swaps Bootstrap CSS files (
bootstrap-ltr.min.css↔bootstrap-rtl.min.css) - Removes old direction stylesheets to prevent conflicts
Helper Functions:
import {
createLazyStyleHref,
getLoadedBootstrapDirection,
initLazyStyleHandler,
} from '@abpjs/theme-shared';
// Convert style pattern to actual href
const href = createLazyStyleHref('bootstrap-{{dir}}.min.css', 'rtl');
// Returns: 'bootstrap-rtl.min.css'
// Check which Bootstrap direction is currently loaded
const currentDir = getLoadedBootstrapDirection();
// Returns: 'ltr' | 'rtl' | undefined
// Initialize handler for providers
const init = initLazyStyleHandler({ initialDirection: 'ltr' });
Navigation Items API
New utility functions for managing navigation items dynamically:
import {
addNavItem,
removeNavItem,
clearNavItems,
getNavItems,
getNavItemsSync,
subscribeToNavItems,
NavItem,
} from '@abpjs/theme-shared';
// Add a navigation item
const myNavItem: NavItem = {
component: MyUserMenuComponent,
order: 10,
permission: 'AbpIdentity.Users',
};
addNavItem(myNavItem);
// Get items synchronously
const items = getNavItemsSync();
// Subscribe to changes (observable-like pattern)
const subscription = getNavItems().subscribe((items) => {
console.log('Nav items updated:', items);
});
// Cleanup
subscription.unsubscribe();
// Alternative subscription method
const unsubscribe = subscribeToNavItems((items) => {
console.log('Nav items:', items);
});
unsubscribe();
// Remove a specific item
removeNavItem(myNavItem);
// Clear all items
clearNavItems();
NavItem Interface:
interface NavItem {
component?: ComponentType<any>; // React component to render
html?: string; // Raw HTML (use with caution)
action?: () => void; // Click action
order?: number; // Sort order (lower = first)
permission?: string; // Required permission
}
Lazy Styles Context
New context for configuring lazy-loaded stylesheets:
import {
LazyStylesContext,
useLazyStyles,
DEFAULT_LAZY_STYLES,
LAZY_STYLES,
} from '@abpjs/theme-shared';
// Provide custom lazy styles
function App() {
const customStyles = [
'bootstrap-{{dir}}.min.css',
'custom-theme-{{dir}}.css',
];
return (
<LazyStylesContext.Provider value={customStyles}>
<YourApp />
</LazyStylesContext.Provider>
);
}
// Access lazy styles in components
function MyComponent() {
const lazyStyles = useLazyStyles();
// Default: ['bootstrap-{{dir}}.min.css']
}
New Types
LocaleDirection- Type for RTL/LTR direction:'ltr' | 'rtl'
API Changes
Confirmation.Options.dismissible- New property to control whether the confirmation can be dismissed by clicking outside or pressing escape
Deprecations
Confirmation.Options.closable- Deprecated in favor ofdismissible. Removed in v3.0.0.
// Before (deprecated)
confirmation.info('Message', 'Title', { closable: true });
// After (v2.9.0)
confirmation.info('Message', 'Title', { dismissible: true });
Style Updates
- Added RTL support for
.data-tables-filterclass (text alignment switches in RTL mode)
New Exports
useLazyStyleHandler(options?)- Hook for RTL/LTR style switchingcreateLazyStyleHref(style, dir)- Create lazy style href from patterngetLoadedBootstrapDirection(styles?)- Get current Bootstrap directioninitLazyStyleHandler(options?)- Initialize lazy style handlerLazyStyleHandlerOptions- Options interface for lazy style handleraddNavItem(item)- Add a navigation itemremoveNavItem(item)- Remove a navigation itemclearNavItems()- Clear all navigation itemsgetNavItems()- Get navigation items (observable-like)getNavItemsSync()- Get navigation items synchronouslysubscribeToNavItems(callback)- Subscribe to navigation item changesNavItem- Navigation item interfaceLazyStylesContext- Context for lazy styles configurationuseLazyStyles()- Hook to access lazy stylesDEFAULT_LAZY_STYLES- Default lazy styles arrayLAZY_STYLES- Alias for DEFAULT_LAZY_STYLESBOOTSTRAP- Bootstrap CSS pattern constant ('bootstrap-{{dir}}.min.css')LocaleDirection- Type for locale direction
v2.7.0
February 2026
New Features
Password Validation Utilities
New utilities for validating passwords against ABP Identity settings:
import { useAbpConfig } from '@abpjs/core';
import { getPasswordValidators, getPasswordValidationRules } from '@abpjs/theme-shared';
import { useForm } from 'react-hook-form';
function PasswordForm() {
const { getSetting } = useAbpConfig();
const { register, formState: { errors } } = useForm();
// Option 1: Get validators array
const validators = getPasswordValidators({ getSetting });
// Option 2: Get react-hook-form compatible rules
const passwordRules = getPasswordValidationRules({ getSetting });
return (
<form>
<input
type="password"
{...register('password', passwordRules)}
/>
{errors.password && <span>{errors.password.message}</span>}
</form>
);
}
The validators read settings from ABP's Abp.Identity.Password.* configuration:
RequiredLength- Minimum password lengthMaxLength- Maximum password lengthRequireDigit- Requires at least one digitRequireLowercase- Requires at least one lowercase letterRequireUppercase- Requires at least one uppercase letterRequireNonAlphanumeric- Requires at least one special characterRequiredUniqueChars- Minimum unique characters
ModalService
New service for programmatic modal rendering:
import { ModalProvider, ModalContainer, useModal } from '@abpjs/theme-shared';
// Wrap your app with ModalProvider
function App() {
return (
<ModalProvider>
<MainContent />
<ModalContainer />
</ModalProvider>
);
}
// Use the modal service in components
function MyComponent() {
const modal = useModal();
const openModal = () => {
modal.renderTemplate(
(context) => (
<Dialog open onClose={() => modal.clearModal()}>
<DialogContent>Hello {context?.name}</DialogContent>
</Dialog>
),
{ name: 'World' }
);
};
return <button onClick={openModal}>Open Modal</button>;
}
ModalService methods:
renderTemplate(render, context?)- Render a template in the modal containerclearModal()- Clear the current modalgetContainer()- Get the container ref for the modaldetectChanges()- Force a re-render of the modal content
HTTP Error Configuration
New context and hook for HTTP error configuration:
import { HttpErrorConfigContext, useHttpErrorConfig, httpErrorConfigFactory } from '@abpjs/theme-shared';
function App() {
const httpErrorConfig = {
skipHandledErrorCodes: [404], // Let 404s pass through
errorScreen: {
component: MyCustomErrorComponent,
forWhichErrors: [401, 403, 500],
},
};
return (
<HttpErrorConfigContext.Provider value={httpErrorConfig}>
<YourApp />
</HttpErrorConfigContext.Provider>
);
}
// Access config in components
function MyComponent() {
const config = useHttpErrorConfig();
if (config.skipHandledErrorCodes?.includes(404)) {
// Skip handling 404 errors
}
}
API Changes
HttpErrorConfig
skipHandledErrorCodes- New property to specify error codes that should pass through without being handlederrorScreen.forWhichErrors- Simplified from a tuple type toErrorScreenErrorCodes[]array
// Before (v2.4.0)
interface HttpErrorConfig {
errorScreen?: {
forWhichErrors?: [401] | [401, 403] | [401, 403, 404] | [401, 403, 404, 500];
};
}
// After (v2.7.0)
interface HttpErrorConfig {
skipHandledErrorCodes?: ErrorScreenErrorCodes[] | number[];
errorScreen?: {
forWhichErrors?: ErrorScreenErrorCodes[]; // Simple array
};
}
New Exports
getPasswordValidators(store)- Get password validators from ABP settingsgetPasswordValidationRules(store)- Get react-hook-form compatible validation rulesgetPasswordSettings(store)- Get password settings from storePasswordSettings- Interface for password settingsPasswordValidator- Type for password validator functionsPASSWORD_SETTING_KEYS- Constants for ABP Identity password setting keysModalProvider- Provider component for modal serviceModalContainer- Component to render modal contentuseModal()- Hook to access modal serviceuseModalState()- Hook to access current modal stateuseModalContext()- Hook to access full modal contextModalService- Interface for modal serviceModalState- Interface for modal stateModalTemplateRender- Type for modal render functionsHttpErrorConfigContext- Context for HTTP error configurationuseHttpErrorConfig()- Hook to access HTTP error configurationhttpErrorConfigFactory()- Factory function for default HTTP error configHTTP_ERROR_CONFIG- Token name constant
v2.4.0
February 2026
New Features
-
ThemeSharedAppendContentContext- New React context for appending scripts or stylesheets to the document. This is the React equivalent of Angular'sTHEME_SHARED_APPEND_CONTENTinjection token:import { ThemeSharedAppendContentContext } from '@abpjs/theme-shared';
function App() {
const appendContent = async () => {
// Custom logic to append scripts/styles to the document
};
return (
<ThemeSharedAppendContentContext.Provider value={appendContent}>
<YourApp />
</ThemeSharedAppendContentContext.Provider>
);
} -
THEME_SHARED_APPEND_CONTENTconstant - Token name constant matching Angular's InjectionToken name
Deprecation Updates
Toaster.Statusremoval postponed - Removed in v3.0.0. UseConfirmation.Statusinstead.appendScriptfunction deprecated - Will be removed in v2.6. UseThemeSharedAppendContentContextinstead.
v2.2.0
February 2026
- Version alignment with @abpjs/core
v2.1.0
February 2026
New Types
Confirmation.Statusenum - New confirmation-specific status enum, replacing usage ofToaster.Statusfor confirmation dialogs:import { Confirmation } from '@abpjs/theme-shared';
const status = await confirmation.info('Are you sure?');
if (status === Confirmation.Status.confirm) {
// User confirmed
} else if (status === Confirmation.Status.reject) {
// User rejected
} else if (status === Confirmation.Status.dismiss) {
// User dismissed (escape key, click outside)
}
API Changes
- Confirmation service return type - All confirmation methods (
info,success,warn,error,show) now returnPromise<Confirmation.Status>instead ofPromise<Toaster.Status> confirmation.clear(status?)parameter - Now acceptsConfirmation.Statusinstead ofToaster.StatususeConfirmationState().respond()- Now acceptsConfirmation.Statusinstead ofToaster.Status
Deprecations
Toaster.Statusdeprecated - UseConfirmation.Statusfor confirmation dialogs. Removed in v3.0.0.
Migration
// Before (v2.0.0)
import { Toaster } from '@abpjs/theme-shared';
const status = await confirmation.info('Are you sure?');
if (status === Toaster.Status.confirm) { /* ... */ }
// After (v2.1.0)
import { Confirmation } from '@abpjs/theme-shared';
const status = await confirmation.info('Are you sure?');
if (status === Confirmation.Status.confirm) { /* ... */ }
v2.0.0
January 2026
Breaking Changes
- ToasterService return type - Methods (
info,success,warn,error) now returnnumber(toast ID) instead ofPromise<Toaster.Status> toaster.remove(id)- Now takesnumberinstead ofstringtoaster.addAll()removed - Useshow()method insteadToaster.Optionsrenamed - UseToaster.ToastOptions(old interface kept for compatibility, deprecated)Toaster.Severitychanged -'warn'renamed to'warning', added'neutral'Confirmation.Options- RemovedyesCopyandcancelCopy(useyesTextandcancelText)Confirmation.Options- No longer extendsToaster.Options
New Features
toaster.show(message, title?, severity?, options)- Create toast with specified severitytoaster.subscribe(callback)- Subscribe to toast state changes (observable pattern)toaster.clear(containerKey?)- Clear toasts by container keyToastContainercontainerKeyprop - Filter toasts to specific containers- Toast positions - New
'top','top-left','bottom','bottom-left'positions confirmation.show(message, title?, severity?, options)- Create with specified severityconfirmation.listenToEscape()- Enable escape key dismissalconfirmation.subscribe(callback)- Subscribe to confirmation changesConfirmation.Options.closable- Control dismiss behaviorConfirmation.Severitytype - Separate from Toaster, includes'neutral'- Sorting icon CSS classes -
.sorting,.sorting_asc,.sorting_desc
Style Updates
- Updated animation timing (0.4s → 0.2s for fade effects)
- Added table scrollbar styling
- Added collapse/expand height transition classes
v1.1.0
January 2026
New Features
- ToasterService localization support -
info(),success(),warn(),error()now acceptConfig.LocalizationParamfor message and title - LoaderBar customization - New
intervalPeriodandstopDelayprops for animation control - HttpErrorConfig - New types for custom error screen configuration (
RootParams,HttpErrorConfig,ErrorScreenErrorCodes)
Deprecations
- Confirmation.Options -
cancelCopyandyesCopydeprecated in favor ofcancelTextandyesText(which acceptConfig.LocalizationParam)
v1.0.0
January 2026
Version alignment with ABP Framework v1.0.0. No new features or breaking changes.
v0.9.0
January 2026
New Features
- Modal enhancements - New
busy,height,minHeight, andonInitprops - Profile component - Moved from
@abpjs/theme-basic(see Profile docs) - ChangePassword component - Moved from
@abpjs/theme-basic(see Profile docs) - SettingTab model - Interface for settings management tabs
- Statistics models -
Statistics.Response,Statistics.Data,Statistics.Filter
v0.8.0
January 2026
New Features
- LoaderBar - Progress bar that shows during HTTP requests
- ErrorComponent - Full-page error display (404, 500, etc.)
- DEFAULT_STYLES - Global CSS styles constant
- useErrorHandler enhancements -
createErrorComponent,clearErrorComponentmethods
v0.7.6
January 2026 - Initial Release
- Toaster service (success, error, warning, info)
- Confirmation service with promise-based dialogs
- Global error handler for ABP errors
- Light and dark mode support