@qwickapps/react-framework 1.5.6 → 1.5.7

package/dist/index.esm.js

@@ -4,11 +4,11 @@ import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip,
 import React, { useMemo, useContext, useState, useCallback, useEffect, createContext, useReducer, useRef, isValidElement, createElement, useId, useLayoutEffect, Component, cloneElement } from 'react';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
-import { Check, ContentCopy, Home, Menu, Dashboard, Info, Help, Book, Email, Phone, Send, Add, Edit, Delete, Save, Close, ArrowForward, ArrowBack, Search, Share, Download, CloudDownload, CloudUpload, Person, Group, Favorite, Star, VerifiedUser, Business, ShoppingCart, AttachMoney, Lock, LockOpen, Visibility, VisibilityOff, Settings, Computer, Article as Article$1, Inventory, Inventory2, Speed, SupportAgent, Tune, Code as Code$1, Psychology, Autorenew, IntegrationInstructions, Construction, Work, Layers, TrendingUp, Route, Sync, Architecture, Security, Key, VpnKey, PersonSearch, ManageAccounts, Storage, Refresh, Block, CheckCircle, RotateRight, Memory, LocalOffer, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
+import { Check, ContentCopy, Add, CheckCircle, Close, Delete, Edit, Refresh, RotateRight, Save, Search, Send, Share, Sync, Block, Key, Lock, LockOpen, Login, Logout, Security, Shield, VerifiedUser, Visibility, VisibilityOff, VpnKey, AttachMoney, Business, ShoppingCart, Work, WorkspacePremium, Email, Notifications, Phone, SupportAgent, Article as Article$1, Book, InsertPhoto, LibraryBooks, PhotoLibrary, PlayArrow, Architecture, Autorenew, Cloud, CloudDownload, CloudUpload, Code as Code$1, Computer, Construction, IntegrationInstructions, Memory, Psychology, Rocket, Storage, ArrowBack, ArrowForward, Dashboard, Download, Explore, Home, Layers, Menu, Route, Settings, TrendingUp, Tune, Inventory, Inventory2, LocalOffer, Speed, Info, Favorite, Help, Star, AccountCircle, Group, ManageAccounts, People, Person, PersonSearch, HelpOutline, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
 import { IsOptional, ValidateIf, IsIn, IsInt, Min, IsString, IsNotEmpty, IsBoolean, IsNumber, Max, IsArray, ValidateNested, IsUrl, IsObject } from 'class-validator';
 import 'reflect-metadata';
 import { Type } from 'class-transformer';
-import { UNSAFE_NavigationContext, useNavigate, useLocation } from 'react-router-dom';
+import { useInRouterContext, useNavigate, useLocation } from 'react-router-dom';
 
 /**
  * Breakpoint utilities for QwickApps React Framework
@@ -3073,181 +3073,189 @@ Code.transformCodeHighlight = element => {
 };
 
 /**
- * Centralized icon registry mapping icon names to their representations
- * Supports both Material-UI components and emoji for different contexts
+ * Centralized icon registry mapping icon names to their representations.
+ * Sorted alphabetically by category, then by key within each category.
+ *
+ * For icons not in this map, getIconComponent() will return a HelpOutline fallback
+ * and log a warning. Use registerIcon() to add app-specific icons at runtime.
  */
 const iconMap = {
-  // Navigation & Layout
-  home: {
-    emoji: '🏠',
-    component: Home
-  },
-  menu: {
-    emoji: '☰',
-    component: Menu
-  },
-  dashboard: {
-    emoji: '📊',
-    component: Dashboard
-  },
-  // Information & Help
-  info: {
-    emoji: 'ℹ️',
-    component: Info
-  },
-  about: {
-    emoji: 'ℹ️',
-    component: Info
-  },
-  help: {
-    emoji: '❓',
-    component: Help
-  },
-  book: {
-    emoji: '📖',
-    component: Book
-  },
-  // Communication
-  email: {
-    emoji: '📧',
-    component: Email
-  },
-  contact: {
-    emoji: '📧',
-    component: Email
-  },
-  phone: {
-    emoji: '📱',
-    component: Phone
-  },
-  send: {
-    emoji: '📤',
-    component: Send
-  },
-  // Actions
+  // === Actions ===
   add: {
     emoji: '➕',
     component: Add
   },
-  edit: {
-    emoji: '✏️',
-    component: Edit
-  },
-  delete: {
-    emoji: '🗑️',
-    component: Delete
-  },
-  save: {
-    emoji: '💾',
-    component: Save
-  },
   check: {
     emoji: '✓',
     component: Check
   },
+  check_circle: {
+    emoji: '✅',
+    component: CheckCircle
+  },
   close: {
     emoji: '✕',
     component: Close
   },
-  // Navigation
-  arrowforward: {
-    emoji: '→',
-    component: ArrowForward
+  delete: {
+    emoji: '🗑️',
+    component: Delete
   },
-  arrowback: {
-    emoji: '←',
-    component: ArrowBack
+  edit: {
+    emoji: '✏️',
+    component: Edit
+  },
+  refresh: {
+    emoji: '🔄',
+    component: Refresh
+  },
+  rotate_right: {
+    emoji: '🔄',
+    component: RotateRight
+  },
+  save: {
+    emoji: '💾',
+    component: Save
   },
-  // Content
   search: {
     emoji: '🔍',
     component: Search
   },
+  send: {
+    emoji: '📤',
+    component: Send
+  },
   share: {
     emoji: '🔗',
     component: Share
   },
-  download: {
-    emoji: '⬇️',
-    component: Download
+  sync: {
+    emoji: '🔄',
+    component: Sync
   },
-  clouddownload: {
-    emoji: '☁️⬇️',
-    component: CloudDownload
+  // === Authentication & Security ===
+  block: {
+    emoji: '🚫',
+    component: Block
   },
-  cloudupload: {
-    emoji: '☁️⬆️',
-    component: CloudUpload
+  key: {
+    emoji: '🔑',
+    component: Key
   },
-  // User & Social
-  person: {
-    emoji: '👤',
-    component: Person
+  lock: {
+    emoji: '🔒',
+    component: Lock
   },
-  user: {
-    emoji: '👤',
-    component: Person
+  lock_open: {
+    emoji: '🔓',
+    component: LockOpen
   },
-  group: {
-    emoji: '👥',
-    component: Group
+  lockopen: {
+    emoji: '🔓',
+    component: LockOpen
   },
-  favorite: {
-    emoji: '❤️',
-    component: Favorite
+  // alias
+  login: {
+    emoji: '🔑',
+    component: Login
   },
-  star: {
-    emoji: '⭐',
-    component: Star
+  logout: {
+    emoji: '🚪',
+    component: Logout
+  },
+  security: {
+    emoji: '🔐',
+    component: Security
+  },
+  shield: {
+    emoji: '🛡️',
+    component: Shield
   },
   verified_user: {
     emoji: '✅',
     component: VerifiedUser
   },
-  // Business
+  visibility: {
+    emoji: '👁️',
+    component: Visibility
+  },
+  visibility_off: {
+    emoji: '🙈',
+    component: VisibilityOff
+  },
+  visibilityoff: {
+    emoji: '🙈',
+    component: VisibilityOff
+  },
+  // alias
+  vpn_key: {
+    emoji: '🔐',
+    component: VpnKey
+  },
+  // === Business & Commerce ===
+  attach_money: {
+    emoji: '💰',
+    component: AttachMoney
+  },
+  attachmoney: {
+    emoji: '💰',
+    component: AttachMoney
+  },
+  // alias
   business: {
     emoji: '🏢',
     component: Business
   },
-  shoppingcart: {
+  cart: {
     emoji: '🛒',
     component: ShoppingCart
   },
-  cart: {
+  // alias
+  shopping_cart: {
     emoji: '🛒',
     component: ShoppingCart
   },
-  attachmoney: {
-    emoji: '💰',
-    component: AttachMoney
+  shoppingcart: {
+    emoji: '🛒',
+    component: ShoppingCart
   },
-  // Security
-  lock: {
-    emoji: '🔒',
-    component: Lock
+  // alias
+  work: {
+    emoji: '💼',
+    component: Work
   },
-  lockopen: {
-    emoji: '🔓',
-    component: LockOpen
+  workspace_premium: {
+    emoji: '⭐',
+    component: WorkspacePremium
   },
-  visibility: {
-    emoji: '👁️',
-    component: Visibility
+  // === Communication ===
+  contact: {
+    emoji: '📧',
+    component: Email
   },
-  visibilityoff: {
-    emoji: '🙈',
-    component: VisibilityOff
+  // alias
+  email: {
+    emoji: '📧',
+    component: Email
   },
-  // System
-  settings: {
-    emoji: '⚙️',
-    component: Settings
+  mail: {
+    emoji: '📧',
+    component: Email
   },
-  computer: {
-    emoji: '💻',
-    component: Computer
+  // alias
+  notifications: {
+    emoji: '🔔',
+    component: Notifications
   },
-  // Content Types
+  phone: {
+    emoji: '📱',
+    component: Phone
+  },
+  support_agent: {
+    emoji: '🛎️',
+    component: SupportAgent
+  },
+  // === Content & Media ===
   article: {
     emoji: '📰',
     component: Article$1
@@ -3256,166 +3264,297 @@ const iconMap = {
     emoji: '📝',
     component: Book
   },
+  // alias
+  book: {
+    emoji: '📖',
+    component: Book
+  },
+  gallery: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  // alias
+  image: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  insert_photo: {
+    emoji: '🖼️',
+    component: InsertPhoto
+  },
+  library_books: {
+    emoji: '📚',
+    component: LibraryBooks
+  },
   news: {
     emoji: '📰',
-    component: Book
+    component: Article$1
   },
-  products: {
-    emoji: '🛍️',
-    component: ShoppingCart
+  // alias
+  photo_library: {
+    emoji: '📸',
+    component: PhotoLibrary
   },
-  services: {
-    emoji: '⚙️',
-    component: Settings
+  play: {
+    emoji: '▶️',
+    component: PlayArrow
+  },
+  // alias
+  play_arrow: {
+    emoji: '▶️',
+    component: PlayArrow
   },
   portfolio: {
     emoji: '💼',
     component: Business
   },
-  gallery: {
-    emoji: '🖼️',
-    component: Business
+  // alias
+  // === Development & Technology ===
+  architecture: {
+    emoji: '🏛️',
+    component: Architecture
   },
-  inventory: {
-    emoji: '📦',
-    component: Inventory
+  autorenew: {
+    emoji: '🔄',
+    component: Autorenew
   },
-  inventory_2: {
-    emoji: '📦',
-    component: Inventory2
+  cloud: {
+    emoji: '☁️',
+    component: Cloud
   },
-  speed: {
-    emoji: '⚡',
-    component: Speed
+  cloud_download: {
+    emoji: '☁️⬇️',
+    component: CloudDownload
   },
-  support_agent: {
-    emoji: '🛎️',
-    component: SupportAgent
+  cloud_upload: {
+    emoji: '☁️⬆️',
+    component: CloudUpload
   },
-  tune: {
-    emoji: '🎛️',
-    component: Tune
+  clouddownload: {
+    emoji: '☁️⬇️',
+    component: CloudDownload
+  },
+  // alias
+  cloudupload: {
+    emoji: '☁️⬆️',
+    component: CloudUpload
   },
-  // Development & Technology
+  // alias
   code: {
     emoji: '💻',
     component: Code$1
   },
-  psychology: {
-    emoji: '🧠',
-    component: Psychology
+  computer: {
+    emoji: '💻',
+    component: Computer
   },
-  autorenew: {
-    emoji: '🔄',
-    component: Autorenew
+  construction: {
+    emoji: '🚧',
+    component: Construction
   },
   integration_instructions: {
     emoji: '🔌',
     component: IntegrationInstructions
   },
-  construction: {
-    emoji: '🚧',
-    component: Construction
+  memory: {
+    emoji: '🧠',
+    component: Memory
   },
-  work: {
-    emoji: '💼',
-    component: Work
+  psychology: {
+    emoji: '🧠',
+    component: Psychology
+  },
+  rocket: {
+    emoji: '🚀',
+    component: Rocket
+  },
+  storage: {
+    emoji: '💾',
+    component: Storage
+  },
+  // === Navigation & Layout ===
+  arrow_back: {
+    emoji: '←',
+    component: ArrowBack
+  },
+  arrow_forward: {
+    emoji: '→',
+    component: ArrowForward
+  },
+  arrowback: {
+    emoji: '←',
+    component: ArrowBack
+  },
+  // alias
+  arrowforward: {
+    emoji: '→',
+    component: ArrowForward
+  },
+  // alias
+  dashboard: {
+    emoji: '📊',
+    component: Dashboard
+  },
+  download: {
+    emoji: '⬇️',
+    component: Download
+  },
+  explore: {
+    emoji: '🧭',
+    component: Explore
+  },
+  home: {
+    emoji: '🏠',
+    component: Home
   },
   layers: {
     emoji: '📚',
     component: Layers
   },
-  trending_up: {
-    emoji: '📈',
-    component: TrendingUp
+  menu: {
+    emoji: '☰',
+    component: Menu
   },
   route: {
     emoji: '🗺️',
     component: Route
   },
-  sync: {
-    emoji: '🔄',
-    component: Sync
+  settings: {
+    emoji: '⚙️',
+    component: Settings
   },
-  architecture: {
-    emoji: '🏛️',
-    component: Architecture
+  trending_up: {
+    emoji: '📈',
+    component: TrendingUp
   },
-  security: {
-    emoji: '🔐',
-    component: Security
+  tune: {
+    emoji: '🎛️',
+    component: Tune
   },
-  // Control Panel & Admin UI Icons
-  key: {
-    emoji: '🔑',
-    component: Key
+  // === Products & Inventory ===
+  inventory: {
+    emoji: '📦',
+    component: Inventory
   },
-  vpn_key: {
-    emoji: '🔐',
-    component: VpnKey
+  inventory_2: {
+    emoji: '📦',
+    component: Inventory2
   },
-  person_search: {
-    emoji: '🔍',
-    component: PersonSearch
+  local_offer: {
+    emoji: '🏷️',
+    component: LocalOffer
   },
-  manage_accounts: {
-    emoji: '👥',
-    component: ManageAccounts
+  products: {
+    emoji: '🛍️',
+    component: ShoppingCart
   },
-  storage: {
-    emoji: '💾',
-    component: Storage
+  // alias
+  services: {
+    emoji: '⚙️',
+    component: Settings
   },
-  refresh: {
-    emoji: '🔄',
-    component: Refresh
+  // alias
+  speed: {
+    emoji: '⚡',
+    component: Speed
   },
-  block: {
-    emoji: '🚫',
-    component: Block
+  // === Status & Feedback ===
+  about: {
+    emoji: 'ℹ️',
+    component: Info
   },
-  check_circle: {
-    emoji: '✅',
-    component: CheckCircle
+  // alias
+  favorite: {
+    emoji: '❤️',
+    component: Favorite
   },
-  rotate_right: {
-    emoji: '🔄',
-    component: RotateRight
+  heart: {
+    emoji: '❤️',
+    component: Favorite
   },
-  memory: {
-    emoji: '🧠',
-    component: Memory
+  // alias
+  help: {
+    emoji: '❓',
+    component: Help
   },
-  local_offer: {
-    emoji: '🏷️',
-    component: LocalOffer
-  }
+  info: {
+    emoji: 'ℹ️',
+    component: Info
+  },
+  star: {
+    emoji: '⭐',
+    component: Star
+  },
+  // === Users & People ===
+  account_circle: {
+    emoji: '👤',
+    component: AccountCircle
+  },
+  group: {
+    emoji: '👥',
+    component: Group
+  },
+  manage_accounts: {
+    emoji: '👤',
+    component: ManageAccounts
+  },
+  people: {
+    emoji: '👥',
+    component: People
+  },
+  person: {
+    emoji: '👤',
+    component: Person
+  },
+  person_search: {
+    emoji: '🔍',
+    component: PersonSearch
+  },
+  user: {
+    emoji: '👤',
+    component: Person
+  },
+  // alias
+  users: {
+    emoji: '👥',
+    component: People
+  } // alias
 };
 /**
  * Get emoji representation of an icon
- * @param iconName - Icon name (case-insensitive)
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
  * @param fallback - Fallback emoji if icon not found (default: 🔗)
  * @returns Emoji string
  */
 function getIconEmoji(iconName, fallback = '🔗') {
   if (!iconName) return fallback;
-  const mapping = iconMap[iconName.toLowerCase()];
-  return mapping?.emoji || iconName;
+  const normalized = iconName.toLowerCase();
+  const mapping = iconMap[normalized];
+  return mapping?.emoji || fallback;
 }
 /**
- * Get Material-UI component representation of an icon
- * @param iconName - Icon name (case-insensitive)
- * @returns React element or null if not found
+ * Get Material-UI component representation of an icon.
+ *
+ * Uses the static iconMap for known icons. For unmapped icons,
+ * returns a HelpOutline fallback and logs a warning.
+ *
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
+ * @returns React element (mapped icon or HelpOutline fallback), or null if no name provided
  */
 function getIconComponent(iconName) {
   if (!iconName) return null;
-  const mapping = iconMap[iconName.toLowerCase()];
-  if (!mapping?.component) {
-    console.warn(`[IconMap] Icon "${iconName}" not found in registry`);
-    return null;
+  const normalized = iconName.toLowerCase();
+  const mapping = iconMap[normalized];
+  if (mapping?.component) {
+    const IconComponent = mapping.component;
+    return jsx(IconComponent, {});
   }
-  const IconComponent = mapping.component;
-  return jsx(IconComponent, {});
+  // Fallback: Return HelpOutline icon and warn about unmapped icon
+  // Use registerIcon() to add app-specific icons at runtime
+  {
+    console.warn(`[IconMap] Icon "${iconName}" not found. Add it to iconMap or use registerIcon().`);
+  }
+  return jsx(HelpOutline, {});
 }
 /**
  * Register a new icon or override an existing one
@@ -3425,13 +3564,14 @@ function registerIcon(name, mapping) {
   iconMap[name.toLowerCase()] = mapping;
 }
 /**
- * Check if an icon is registered
+ * Check if an icon is registered in the static map
+ * If false, getIconComponent will return HelpOutline fallback
  */
 function hasIcon(iconName) {
   return iconName.toLowerCase() in iconMap;
 }
 /**
- * Get all registered icon names
+ * Get all registered icon names from the static map
  */
 function getRegisteredIcons() {
   return Object.keys(iconMap);
@@ -23373,14 +23513,20 @@ function ReactRouterNavigationProvider({
       reactRouterNavigate(to);
     }
   };
+  // Defensive check for location - fall back to window.location if React Router's location is undefined
+  const location = reactRouterLocation ? {
+    pathname: reactRouterLocation.pathname,
+    search: reactRouterLocation.search,
+    hash: reactRouterLocation.hash
+  } : typeof window !== 'undefined' ? {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash
+  } : undefined;
   return jsx(NavigationContext.Provider, {
     value: {
       navigate,
-      location: {
-        pathname: reactRouterLocation.pathname,
-        search: reactRouterLocation.search,
-        hash: reactRouterLocation.hash
-      }
+      location
     },
     children: children
   });
@@ -23425,10 +23571,10 @@ function FallbackNavigationProvider({
 function NavigationProvider({
   children
 }) {
-  // Check if we're inside a React Router by checking its internal context
-  // useContext doesn't throw - it returns null if the context doesn't exist
-  const routerContext = useContext(UNSAFE_NavigationContext);
-  if (routerContext) {
+  // Check if we're inside a React Router using the official hook
+  // This is more reliable than checking internal UNSAFE contexts
+  const isInRouter = useInRouterContext();
+  if (isInRouter) {
     // We're inside a Router, use React Router's navigation
     return jsx(ReactRouterNavigationProvider, {
       children: children
@@ -25981,6 +26127,15 @@ const QwickApp = ({
       ...updates
     }));
   };
+  // Sync logo prop changes with internal state (for dynamic logo updates)
+  useEffect(() => {
+    if (resolvedConfig.logo !== appConfig.logo) {
+      setAppConfig(prev => ({
+        ...prev,
+        logo: resolvedConfig.logo
+      }));
+    }
+  }, [resolvedConfig.logo]);
   const contextValue = {
     appName: resolvedConfig.appName,
     // Safe to use ! since we validated above