@djangocfg/layouts 2.1.356 → 2.1.358

package/src/layouts/PublicLayout/primitives/NavBrand.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { type ReactNode } from 'react';
+import React, { memo, type ReactNode } from 'react';
 
 import { Link } from '@djangocfg/ui-core/components';
 
@@ -9,7 +9,7 @@ interface NavBrandProps {
   brandHref?: string;
 }
 
-export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
+function NavBrandRaw({ brand, brandHref = '/' }: NavBrandProps) {
   if (brand == null || brand === '' || brand === false) return null;
 
   if (typeof brand === 'string') {
@@ -25,3 +25,5 @@ export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
 
   return <>{brand}</>;
 }
+
+export const NavBrand = memo(NavBrandRaw);

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronDown } from 'lucide-react';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Button, Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
@@ -48,7 +48,7 @@ function subMenuLinkCls(active: boolean) {
 const popoverCls =
   'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
 
-export function NavDesktopItems({
+function NavDesktopItemsRaw({
   items,
   maxVisible,
   isActivePath,
@@ -245,3 +245,43 @@ export function NavDesktopItems({
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavigationItem arrays. Compares href, label, external
+ * and one-level-deep sub-items so that nav label/badge changes re-render,
+ * but object-reference churn from parent is ignored.
+ */
+function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
+    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
+    if (ai.items) {
+      return ai.items.every((sub, j) => {
+        const bsub = bi.items![j];
+        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
+      });
+    }
+    return true;
+  });
+}
+
+/**
+ * Memoised desktop navigation row. Re-renders only when:
+ * - the items array content changes (via navItemsShallowEqual),
+ * - dropdown state object changes,
+ * - maxVisible or renderDesktopDropdown changes.
+ * Parent re-renders with identical navigation data are skipped entirely.
+ */
+export const NavDesktopItems = memo(NavDesktopItemsRaw, (prev, next) => {
+  return (
+    prev.maxVisible === next.maxVisible &&
+    prev.isActivePath === next.isActivePath &&
+    prev.isGroupActive === next.isGroupActive &&
+    prev.dropdown === next.dropdown &&
+    prev.renderDesktopDropdown === next.renderDesktopDropdown &&
+    navItemsShallowEqual(prev.items, next.items)
+  );
+});

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -17,7 +17,7 @@ import { useBodyScrollLock, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks'
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
-import { UserMenu } from '../../_components/UserMenu';
+import { UserMenu } from '../components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
 import { NavControls } from '../primitives/NavControls';

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -17,6 +17,7 @@
 
 import React, {
   type ReactNode,
+  memo,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -160,7 +161,7 @@ export interface NavbarActionsContext {
   controls: ReactNode | null;
 }
 
-export function NavbarShell(props: NavbarShellProps) {
+function NavbarShellRaw(props: NavbarShellProps) {
   const context = usePublicLayoutOptional();
 
   const {
@@ -348,3 +349,61 @@ export function NavbarShell(props: NavbarShellProps) {
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavigationItem arrays. Compares href, label, external
+ * and one-level-deep sub-items so that nav label/badge changes re-render,
+ * but object-reference churn from parent is ignored.
+ */
+function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
+    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
+    if (ai.items) {
+      return ai.items.every((sub, j) => {
+        const bsub = bi.items![j];
+        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
+      });
+    }
+    return true;
+  });
+}
+
+/**
+ * Memoised navbar orchestrator. Re-renders only when any config prop changes
+ * (variant, position, nav items, actions, slots, etc.). The heavy inner JSX
+ * (brand, desktop nav, actions) is preserved across renders when props are
+ * stable. Navigation items are compared via navItemsShallowEqual so that
+ * reference churn from parent does not cause a re-render.
+ */
+export const NavbarShell = memo(NavbarShellRaw, (prev, next) => {
+  return (
+    prev.variant === next.variant &&
+    prev.position === next.position &&
+    prev.brand === next.brand &&
+    prev.brandHref === next.brandHref &&
+    prev.userMenu === next.userMenu &&
+    prev.desktopMaxPrimaryItems === next.desktopMaxPrimaryItems &&
+    prev.navLayout === next.navLayout &&
+    prev.navbarHeight === next.navbarHeight &&
+    prev.insetX === next.insetX &&
+    prev.innerPadding === next.innerPadding &&
+    prev.hideNavOnScroll === next.hideNavOnScroll &&
+    prev.transparent === next.transparent &&
+    prev.transparentThreshold === next.transparentThreshold &&
+    prev.outerClassName === next.outerClassName &&
+    prev.shapeClassName === next.shapeClassName &&
+    prev.shapeForState === next.shapeForState &&
+    prev.renderActions === next.renderActions &&
+    prev.actions === next.actions &&
+    prev.actionsLeadingSlot === next.actionsLeadingSlot &&
+    prev.actionsTrailingSlot === next.actionsTrailingSlot &&
+    prev.controls === next.controls &&
+    prev.mobileMenuOpen === next.mobileMenuOpen &&
+    prev.onMobileMenuToggle === next.onMobileMenuToggle &&
+    navItemsShallowEqual(prev.navigation ?? [], next.navigation ?? [])
+  );
+});

package/src/layouts/_components/index.ts

@@ -1,5 +1,7 @@
 /**
  * Shared Layout Components
+ *
+ * Components used across multiple layout types.
  */
 
 export {
@@ -26,9 +28,3 @@ export type {
   LocaleSwitcherVariant,
 } from './LocaleSwitcher';
 
-export { UserMenu } from './UserMenu';
-export type { UserMenuProps } from './UserMenu';
-
-export { UserAvatar } from './UserAvatar';
-export type { UserAvatarProps } from './UserAvatar';
-

package/src/layouts/index.ts

@@ -10,9 +10,15 @@
 // Shared types (universal type system)
 export * from './types';
 
-// Shared components
-export { LocaleSwitcher, LOCALE_LABELS, UserMenu } from './_components';
-export type { LocaleSwitcherProps, UserMenuProps } from './_components';
+// Shared components (used by multiple layouts)
+export { LocaleSwitcher, LOCALE_LABELS } from './_components';
+export type { LocaleSwitcherProps } from './_components';
+
+// PublicLayout components (re-exported for convenience)
+export { UserMenu } from './PublicLayout/components';
+export type { UserMenuProps } from './PublicLayout/components';
+export { UserAvatar } from './PublicLayout/components';
+export type { UserAvatarProps } from './PublicLayout/components';
 
 // Smart layout router
 export * from './AppLayout';
@@ -25,4 +31,3 @@ export * from './AdminLayout';
 
 // Additional layouts
 export * from './ProfileLayout';
-

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,284 +0,0 @@
-'use client';
-
-import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
-import moment from 'moment';
-import React, { useCallback, useEffect } from 'react';
-
-import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Preloader,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@djangocfg/ui-core/components';
-
-import {
-  AvatarSection,
-  EditableField,
-  Section,
-  TwoFactorSection,
-} from './components';
-import { ProfileProvider, useProfileContext } from './context';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Slot + Tab types (public API)
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ProfileTab {
-  /** Unique key, used as Tabs value */
-  value: string;
-  /** Trigger label */
-  label: React.ReactNode;
-  /** Tab panel content */
-  content: React.ReactNode;
-}
-
-export interface ProfileSlots {
-  /** Extra items rendered inside the ⋯ dropdown, above the separator before Delete */
-  headerMenuItems?: React.ReactNode;
-  /** Rendered next to the user name (e.g. plan badge, role chip) */
-  headerBadge?: React.ReactNode;
-  /** Rendered below the avatar row, above the tabs */
-  headerAfter?: React.ReactNode;
-  /** Rendered below all tab content */
-  footer?: React.ReactNode;
-}
-
-export interface ProfileLayoutProps {
-  onUnauthenticated?: () => void;
-  title?: string;
-  enable2FA?: boolean;
-  enableDeleteAccount?: boolean;
-  /** Extra tabs appended after built-in Profile / Security tabs */
-  tabs?: ProfileTab[];
-  /** Named slots for additional content */
-  slots?: ProfileSlots;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Header
-// ─────────────────────────────────────────────────────────────────────────────
-
-function ProfileHeader({ slots, enableDeleteAccount }: {
-  slots?: ProfileSlots;
-  enableDeleteAccount?: boolean;
-}) {
-  const { labels, onLogout } = useProfileContext();
-  const { user, logout } = useAuth();
-  const { deleteAccount } = useDeleteAccount();
-  const t = useAppT();
-
-  const handleDeleteAccount = useCallback(async () => {
-    const confirmationWord = t('layouts.profilePage.confirmationWord');
-    const value = await window.dialog.prompt({
-      title: t('layouts.profilePage.deleteAccountTitle'),
-      message: t('layouts.profilePage.deleteAccountDesc'),
-      placeholder: confirmationWord,
-      confirmText: t('layouts.profilePage.deleteAccount'),
-      cancelText: t('layouts.profilePage.cancel'),
-      variant: 'destructive',
-    });
-    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
-    const result = await deleteAccount();
-    if (result.success) logout();
-  }, [t, deleteAccount, logout]);
-
-  if (!user) return null;
-
-  const displayName = user.full_name || user.display_username || user.email;
-  const memberSince = user.date_joined
-    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
-    : null;
-
-  const badge = slots?.headerBadge ?? null;
-  const menuItems = slots?.headerMenuItems ?? null;
-  const headerAfter = slots?.headerAfter ?? null;
-
-  return (
-    <div className="pb-4 md:pb-6 border-b mb-2">
-      <div className="flex items-center gap-3 md:gap-4">
-        <AvatarSection />
-
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
-            {badge}
-          </div>
-          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
-          {memberSince && (
-            <p className="text-xs text-muted-foreground/60 mt-0.5">
-              Member since {memberSince}
-            </p>
-          )}
-        </div>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
-              <MoreHorizontal className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuItem onClick={onLogout} className="gap-2">
-              <LogOut className="w-4 h-4" />
-              {labels.signOut}
-            </DropdownMenuItem>
-
-            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
-
-            {enableDeleteAccount && (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={handleDeleteAccount}
-                  className="gap-2 text-destructive focus:text-destructive"
-                >
-                  <Trash2 className="w-4 h-4" />
-                  {labels.deleteAccount}
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {headerAfter && <div className="mt-4">{headerAfter}</div>}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Built-in tab: Profile
-// ─────────────────────────────────────────────────────────────────────────────
-
-function TabProfile() {
-  const { labels, onFieldSave } = useProfileContext();
-  const { user } = useAuth();
-  if (!user) return null;
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 pt-4">
-      <Section title={labels.personalInfo}>
-        <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
-        <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
-        <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
-      </Section>
-
-      <Section title={labels.work}>
-        <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
-        <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
-      </Section>
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Built-in tab: Security
-// ─────────────────────────────────────────────────────────────────────────────
-
-function TabSecurity() {
-  return (
-    <div className="pt-4 space-y-4">
-      <TwoFactorSection />
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main content
-// ─────────────────────────────────────────────────────────────────────────────
-
-function ProfileContent({
-  onUnauthenticated,
-  enable2FA,
-  enableDeleteAccount = true,
-  tabs = [],
-  slots,
-}: ProfileLayoutProps) {
-  const { labels } = useProfileContext();
-  const { user, isLoading } = useAuth();
-
-  useEffect(() => {
-    if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
-  }, [onUnauthenticated, user, isLoading]);
-
-  if (isLoading) {
-    return <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />;
-  }
-
-  if (!user) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-4">{labels.notAuthenticated}</h1>
-          <p className="text-muted-foreground">{labels.pleaseLogIn}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // ── Prepare data before render ──────────────────────────────────────────────
-
-  const extraTriggers = tabs.map((tab) => (
-    <TabsTrigger key={tab.value} value={tab.value}>
-      {tab.label}
-    </TabsTrigger>
-  ));
-
-  const extraPanels = tabs.map((tab) => (
-    <TabsContent key={tab.value} value={tab.value}>
-      {tab.content}
-    </TabsContent>
-  ));
-
-  const footer = slots?.footer ?? null;
-
-  // ── Render ──────────────────────────────────────────────────────────────────
-
-  return (
-    <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
-      <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
-
-      <Tabs defaultValue="profile" className="mt-2">
-        {/* Underline-style scrollable tabs — mobile friendly */}
-        <TabsList variant="underline" scrollable>
-          <TabsTrigger value="profile">{labels.personalInfo}</TabsTrigger>
-          {enable2FA && <TabsTrigger value="security">{labels.security}</TabsTrigger>}
-          {extraTriggers}
-        </TabsList>
-
-        <TabsContent value="profile">
-          <TabProfile />
-        </TabsContent>
-
-        {enable2FA && (
-          <TabsContent value="security">
-            <TabSecurity />
-          </TabsContent>
-        )}
-
-        {extraPanels}
-      </Tabs>
-
-      {footer && <div className="mt-8">{footer}</div>}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Router + Export
-// ─────────────────────────────────────────────────────────────────────────────
-
-export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
-  <ProfileProvider title={title}>
-    <ProfileContent title={title} {...props} />
-  </ProfileProvider>
-);