@abpjs/theme-basic 3.0.0 → 3.2.0

package/dist/components/nav-items/NavItemsComponent.d.ts

@@ -27,5 +27,5 @@ export interface NavItemsComponentProps {
  * <NavItemsComponent smallScreen />
  * ```
  */
-export declare function NavItemsComponent({ smallScreen, }: NavItemsComponentProps): React.ReactElement;
+export declare function NavItemsComponent({ smallScreen: _smallScreen, }: NavItemsComponentProps): React.ReactElement;
 export default NavItemsComponent;

package/dist/index.d.ts

@@ -2,10 +2,16 @@
  * @abpjs/theme-basic
  *
  * ABP Framework Theme Basic components for React.
- * Translated from @abp/ng.theme.basic v3.0.0
+ * Translated from @abp/ng.theme.basic v3.2.0
  *
  * This package provides the basic theme layout components for ABP React applications.
  *
+ * Changes in v3.2.0:
+ * - Reduced .abp-loading background opacity from 0.1 to 0.05 for better UX
+ * - Angular: RoutesComponent added closeDropdown() method (React handles via state/events)
+ * - Angular: StylesProvider now uses ReplaceableComponentsService instead of Store (React uses hooks)
+ * - Dependency update to @abp/ng.theme.shared v3.2.0
+ *
  * Changes in v3.0.0:
  * - Added CurrentUserComponent and LanguagesComponent as public API components
  * - Added nav-item.provider and styles.provider for initialization
@@ -45,7 +51,7 @@
  * - Dependency update to @abp/ng.theme.shared v2.2.0
  * - No functional code changes
  *
- * @version 3.0.0
+ * @version 3.2.0
  * @since 2.0.0 - Removed legacy .abp-confirm styles (no impact on React - we use Chakra UI)
  * @since 2.1.0 - Angular: OAuthService replaced with AuthService (already using useAuth in React)
  *              - Angular: Added styles for loading, modal-backdrop, confirmation (handled by Chakra UI)

package/dist/index.js

@@ -1035,10 +1035,10 @@ var import_react22 = require("@chakra-ui/react");
 var import_theme_shared3 = require("@abpjs/theme-shared");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function NavItemsComponent({
-  smallScreen = false
+  smallScreen: _smallScreen = false
 }) {
   const navItems = (0, import_theme_shared3.useNavItems)();
-  const trackByFn = (0, import_react21.useCallback)((item) => {
+  const _trackByFn = (0, import_react21.useCallback)((item) => {
     return item.id;
   }, []);
   const renderNavItem = (0, import_react21.useCallback)((item) => {
@@ -1173,7 +1173,7 @@ function LanguagesComponent({
   const dropdownLanguages = (0, import_react25.useMemo)(() => {
     return languages.filter((lang) => lang.cultureName !== language);
   }, [languages, language]);
-  const selectedLangCulture = language || "";
+  const _selectedLangCulture = language || "";
   const handleChangeLang = (0, import_react25.useCallback)(
     (cultureName) => {
       setLanguage(cultureName);
@@ -1453,9 +1453,9 @@ var THEME_BASIC_STYLES = `
     margin-top: -1px;
 }
 
-/* Loading overlay */
+/* Loading overlay (v3.2.0: reduced opacity from 0.1 to 0.05) */
 .abp-loading {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
 }
 
 /* Modal backdrop */

package/dist/index.mjs

@@ -978,10 +978,10 @@ import { Stack as Stack3, Box as Box9 } from "@chakra-ui/react";
 import { useNavItems } from "@abpjs/theme-shared";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function NavItemsComponent({
-  smallScreen = false
+  smallScreen: _smallScreen = false
 }) {
   const navItems = useNavItems();
-  const trackByFn = useCallback4((item) => {
+  const _trackByFn = useCallback4((item) => {
     return item.id;
   }, []);
   const renderNavItem = useCallback4((item) => {
@@ -1108,7 +1108,7 @@ import {
   Text as Text6
 } from "@chakra-ui/react";
 import { LuChevronDown as LuChevronDown3, LuGlobe as LuGlobe2 } from "react-icons/lu";
-import { useConfig as useConfig5, useSession as useSession3 } from "@abpjs/core";
+import { useConfig as useConfig5, useSession as useSession2 } from "@abpjs/core";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function LanguagesComponent({
   smallScreen: _smallScreen = false,
@@ -1117,7 +1117,7 @@ function LanguagesComponent({
   menuZIndex = 1400
 }) {
   const { localization } = useConfig5();
-  const { language, setLanguage } = useSession3();
+  const { language, setLanguage } = useSession2();
   const languages = useMemo7(() => {
     return localization?.languages || [];
   }, [localization]);
@@ -1130,7 +1130,7 @@ function LanguagesComponent({
   const dropdownLanguages = useMemo7(() => {
     return languages.filter((lang) => lang.cultureName !== language);
   }, [languages, language]);
-  const selectedLangCulture = language || "";
+  const _selectedLangCulture = language || "";
   const handleChangeLang = useCallback6(
     (cultureName) => {
       setLanguage(cultureName);
@@ -1211,14 +1211,14 @@ function RoutesComponent({
 }
 
 // src/providers/ThemeBasicProvider.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect } from "react";
 import { ThemeSharedProvider, defineConfig } from "@abpjs/theme-shared";
-import { useSession as useSession4, useDirection as useDirection8 } from "@abpjs/core";
+import { useSession as useSession3, useDirection as useDirection8 } from "@abpjs/core";
 import { Fragment as Fragment4, jsx as jsx22 } from "react/jsx-runtime";
 function LocaleSync({ children }) {
-  const { language } = useSession4();
+  const { language } = useSession3();
   const { direction } = useDirection8();
-  useEffect2(() => {
+  useEffect(() => {
     document.documentElement.dir = direction;
     document.documentElement.lang = language || "en";
   }, [direction, language]);
@@ -1237,7 +1237,7 @@ function ThemeBasicInner({
   appName,
   logoLink
 }) {
-  const { language } = useSession4();
+  const { language } = useSession3();
   const locale = language || "en-US";
   return /* @__PURE__ */ jsx22(
     ThemeSharedProvider,
@@ -1410,9 +1410,9 @@ var THEME_BASIC_STYLES = `
     margin-top: -1px;
 }
 
-/* Loading overlay */
+/* Loading overlay (v3.2.0: reduced opacity from 0.1 to 0.05) */
 .abp-loading {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
 }
 
 /* Modal backdrop */

package/dist/providers/styles.provider.d.ts

@@ -15,7 +15,7 @@
  *
  * @since 3.0.0
  */
-export declare const THEME_BASIC_STYLES = "\n/* Content header styles */\n.content-header-title {\n    font-size: 24px;\n}\n\n.entry-row {\n    margin-bottom: 15px;\n}\n\n/* Input validation styles */\n.input-validation-error {\n    border-color: #dc3545;\n}\n\n.field-validation-error {\n    font-size: 0.8em;\n}\n\n/* Table styles */\n.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {\n    border: 1px solid #c8c8c8;\n}\n\n.ui-table .pagination-wrapper {\n    background-color: #f4f4f4;\n    border: 1px solid #c8c8c8;\n}\n\n/* Bordered datatable styles (added in v3.0.0) */\n.bordered .datatable-body-row {\n    border-top: 1px solid #eee;\n    margin-top: -1px;\n}\n\n/* Loading overlay */\n.abp-loading {\n    background: rgba(0, 0, 0, 0.1);\n}\n\n/* Modal backdrop */\n.modal-backdrop {\n    background-color: rgba(0, 0, 0, 0.6);\n}\n";
+export declare const THEME_BASIC_STYLES = "\n/* Content header styles */\n.content-header-title {\n    font-size: 24px;\n}\n\n.entry-row {\n    margin-bottom: 15px;\n}\n\n/* Input validation styles */\n.input-validation-error {\n    border-color: #dc3545;\n}\n\n.field-validation-error {\n    font-size: 0.8em;\n}\n\n/* Table styles */\n.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {\n    border: 1px solid #c8c8c8;\n}\n\n.ui-table .pagination-wrapper {\n    background-color: #f4f4f4;\n    border: 1px solid #c8c8c8;\n}\n\n/* Bordered datatable styles (added in v3.0.0) */\n.bordered .datatable-body-row {\n    border-top: 1px solid #eee;\n    margin-top: -1px;\n}\n\n/* Loading overlay (v3.2.0: reduced opacity from 0.1 to 0.05) */\n.abp-loading {\n    background: rgba(0, 0, 0, 0.05);\n}\n\n/* Modal backdrop */\n.modal-backdrop {\n    background-color: rgba(0, 0, 0, 0.6);\n}\n";
 /**
  * Injects the theme-basic styles into the document head.
  * Call this function during app initialization if you need the global CSS styles.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-basic",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "ABP Framework Theme Basic components for React - translated from @abp/ng.theme.basic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,11 +27,11 @@
     "lucide-react": "^0.400.0",
     "react-hook-form": "^7.48.0",
     "react-icons": "^5.0.0",
-    "@abpjs/core": "3.0.0",
-    "@abpjs/theme-shared": "3.0.0"
+    "@abpjs/core": "3.2.0",
+    "@abpjs/theme-shared": "3.2.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.basic": "3.0.0",
+    "@abp/ng.theme.basic": "3.2.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@vitest/coverage-v8": "^1.6.0",