@djangocfg/layouts 2.1.356 → 2.1.357

package/src/layouts/AuthLayout/components/shared/TermsCheckbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 import { Checkbox } from '@djangocfg/ui-core/components';
@@ -15,16 +15,20 @@ export interface TermsCheckboxProps {
 }
 
 /**
- * TermsCheckbox - Compact terms acceptance checkbox
+ * TermsCheckbox - Compact terms acceptance checkbox.
+ *
+ * Memoised: re-renders only when checked, termsUrl, privacyUrl, disabled
+ * or className change. `onChange` is compared by reference — callers
+ * should stabilise it with useCallback.
  */
-export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
+function TermsCheckboxRaw({
   checked,
   onChange,
   termsUrl,
   privacyUrl,
   disabled = false,
   className = '',
-}) => {
+}: TermsCheckboxProps) {
   const t = useAppT();
   const labels = useMemo(() => ({
     agree: t('layouts.auth.terms.agree'),
@@ -63,4 +67,6 @@ export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
       </label>
     </div>
   );
-};
+}
+
+export const TermsCheckbox = memo(TermsCheckboxRaw);

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Github } from 'lucide-react';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
@@ -20,15 +20,21 @@ import {
 } from '../shared';
 
 /**
- * IdentifierStep - Apple-style email input step
+ * IdentifierStep - Apple-style email input step.
  *
  * Clean, minimal design with:
  * - Optional logo
  * - Single email input field
  * - Terms checkbox
  * - OAuth options
+ *
+ * Memoised: this component has no props; it reads everything from
+ * context. The memo wrapper prevents re-renders when the parent
+ * (AuthContent) re-renders due to step changes in a sibling branch.
+ * Internal context selectors still trigger updates when relevant
+ * fields change.
  */
-export const IdentifierStep: React.FC = () => {
+function IdentifierStepRaw() {
   const { hideHeader } = useAuthLayoutContext();
 
   const {
@@ -131,4 +137,6 @@ export const IdentifierStep: React.FC = () => {
       />
     </AuthContainer>
   );
-};
+}
+
+export const IdentifierStep = memo(IdentifierStepRaw);

package/src/layouts/AuthLayout/components/steps/OTPStep.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -19,15 +19,18 @@ import {
 type SubmitState = 'idle' | 'submitting';
 
 /**
- * OTPStep - Apple-style OTP verification
+ * OTPStep - Apple-style OTP verification.
  *
  * Minimal design focused on the OTP input:
  * - Clear title
  * - Masked identifier for privacy
  * - Large OTP input
  * - Text links for actions
+ *
+ * Memoised: no props; reads from context. Prevents re-renders when
+ * AuthContent switches steps or when sibling branches update.
  */
-export const OTPStep: React.FC = () => {
+function OTPStepRaw() {
   const {
     identifier,
     otp,
@@ -121,4 +124,6 @@ export const OTPStep: React.FC = () => {
       </form>
     </AuthContainer>
   );
-};
+}
+
+export const OTPStep = memo(OTPStepRaw);

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupComplete.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -15,13 +15,18 @@ interface SetupCompleteProps {
 }
 
 /**
- * SetupComplete - Backup codes display after 2FA setup
+ * SetupComplete - Backup codes display after 2FA setup.
+ *
+ * Memoised: re-renders only when `backupCodes` array reference,
+ * `backupCodesWarning`, or `onDone` change. The array content is
+ * compared by reference — the parent should not recreate the array
+ * on every render.
  */
-export const SetupComplete: React.FC<SetupCompleteProps> = ({
+function SetupCompleteRaw({
   backupCodes,
   backupCodesWarning,
   onDone,
-}) => {
+}: SetupCompleteProps) {
   const { copied, copy } = useCopyToClipboard();
   const t = useAppT();
   const content = useMemo(() => ({
@@ -76,4 +81,6 @@ export const SetupComplete: React.FC<SetupCompleteProps> = ({
       </div>
     </AuthContainer>
   );
-};
+}
+
+export const SetupComplete = memo(SetupCompleteRaw);

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupLoading.tsx

@@ -1,15 +1,18 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
 import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
 
 /**
- * SetupLoading - Loading state for 2FA setup
+ * SetupLoading - Loading state for 2FA setup.
+ *
+ * Memoised: no props; pure translation-driven component. Prevents
+ * re-renders when parent orchestrators re-render for unrelated reasons.
  */
-export const SetupLoading: React.FC = () => {
+function SetupLoadingRaw() {
   const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.setup.loading.title'),
@@ -26,4 +29,6 @@ export const SetupLoading: React.FC = () => {
       </div>
     </AuthContainer>
   );
-};
+}
+
+export const SetupLoading = memo(SetupLoadingRaw);

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupQRCode.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
-import React, { useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 
 import { useAppT } from '@djangocfg/i18n';
@@ -32,16 +32,20 @@ interface SetupQRCodeProps {
 }
 
 /**
- * SetupQRCode - QR code scanning step for 2FA setup
+ * SetupQRCode - QR code scanning step for 2FA setup.
+ *
+ * Memoised: re-renders only when `provisioningUri`, `secret`, `isLoading`,
+ * `error`, `onConfirm` or `onSkip` change. `onConfirm` and `onSkip` are
+ * compared by reference — callers should stabilise them with useCallback.
  */
-export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
+function SetupQRCodeRaw({
   provisioningUri,
   secret,
   isLoading,
   error,
   onConfirm,
   onSkip,
-}) => {
+}: SetupQRCodeProps) {
   const [confirmCode, setConfirmCode] = useState('');
   const { copied, copy } = useCopyToClipboard();
   const t = useAppT();
@@ -132,4 +136,6 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
       </form>
     </AuthContainer>
   );
-};
+}
+
+export const SetupQRCode = memo(SetupQRCodeRaw);

package/src/layouts/AuthLayout/components/steps/SetupStep/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { useTwoFactorSetup } from '@djangocfg/api/auth';
 
@@ -17,8 +17,11 @@ export interface SetupStepProps {
 /**
  * SetupStep - Orchestrator for 2FA setup flow (requires AuthFormContext).
  * For use outside AuthLayout use SetupStepStandalone.
+ *
+ * Memoised: re-renders only when `onComplete` or `onSkip` references
+ * change. Callers should stabilise these callbacks with useCallback.
  */
-export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
+function SetupStepRaw({ onComplete, onSkip }: SetupStepProps) {
   const { setStep } = useAuthFormContext();
 
   const handleComplete = () => {
@@ -84,13 +87,18 @@ export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
 
   // Fallback to loading
   return <SetupLoading />;
-};
+}
+
+export const SetupStep = memo(SetupStepRaw);
 
 /**
  * SetupStepStandalone — same flow as SetupStep but without AuthFormContext.
  * Use this inside ProfileLayout or any page outside AuthLayout.
+ *
+ * Memoised: re-renders only when `onComplete` or `onSkip` references
+ * change. Callers should stabilise these callbacks with useCallback.
  */
-export const SetupStepStandalone: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
+function SetupStepStandaloneRaw({ onComplete, onSkip }: SetupStepProps) {
   const {
     isLoading,
     error,
@@ -132,4 +140,6 @@ export const SetupStepStandalone: React.FC<SetupStepProps> = ({ onComplete, onSk
   }
 
   return <SetupLoading />;
-};
+}
+
+export const SetupStepStandalone = memo(SetupStepStandaloneRaw);

package/src/layouts/AuthLayout/components/steps/TwoFactorStep.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -16,14 +16,17 @@ import {
 } from '../shared';
 
 /**
- * TwoFactorStep - Apple-style 2FA verification
+ * TwoFactorStep - Apple-style 2FA verification.
  *
  * Minimal design with:
  * - TOTP code input (default)
  * - Backup code input (alternate)
  * - Clean toggle between modes
+ *
+ * Memoised: no props; reads from context. Prevents re-renders when
+ * AuthContent switches steps or sibling branches update.
  */
-export const TwoFactorStep: React.FC = () => {
+function TwoFactorStepRaw() {
   const {
     twoFactorCode,
     useBackupCode,
@@ -125,4 +128,6 @@ export const TwoFactorStep: React.FC = () => {
       </div>
     </AuthContainer>
   );
-};
+}
+
+export const TwoFactorStep = memo(TwoFactorStepRaw);

package/src/layouts/AuthLayout/context.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 
 import { useAuthForm } from '@djangocfg/api/auth';
 
@@ -8,6 +8,14 @@ import type { AuthFormContextType, AuthLayoutProps } from './types';
 
 const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
 
+/**
+ * AuthFormProvider — wraps useAuthForm and merges UI config into context.
+ *
+ * The context value is memoised so that object reference churn from the
+ * hook does not re-render the entire auth subtree when only internal
+ * form state (e.g. `isLoading`) changes. Consumers that select specific
+ * fields via useAuthFormContext will still re-render as expected.
+ */
 export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   children,
   sourceUrl: sourceUrlProp,
@@ -38,18 +46,32 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
     enable2FASetup,
   });
 
-  const value: AuthFormContextType = {
-    ...authForm,
-    // UI-specific configuration
-    sourceUrl,
-    supportUrl,
-    termsUrl,
-    privacyUrl,
-    enableGithubAuth,
-    enable2FASetup,
-    logoUrl,
-    redirectUrl,
-  };
+  const value: AuthFormContextType = useMemo(
+    () => ({
+      ...authForm,
+      // UI-specific configuration
+      sourceUrl,
+      supportUrl,
+      termsUrl,
+      privacyUrl,
+      enableGithubAuth,
+      enable2FASetup,
+      logoUrl,
+      redirectUrl,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      authForm,
+      sourceUrl,
+      supportUrl,
+      termsUrl,
+      privacyUrl,
+      enableGithubAuth,
+      enable2FASetup,
+      logoUrl,
+      redirectUrl,
+    ]
+  );
 
   return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
 };

package/src/layouts/AuthLayout/shells/AuthShell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useImageLoader } from '@djangocfg/ui-core/hooks';
 
@@ -18,14 +18,19 @@ import type { AuthShellProps } from './types';
  *  - variant dispatch (centered | split)
  *
  * Variants own their own chrome (positioning, shape, background).
+ *
+ * Memoised: re-renders only when `variant`, `background`, `sidebar`,
+ * `className` or `children` reference change. Background styles are
+ * memoised internally so object reference churn from the parent does
+ * not cause shell re-renders.
  */
-export const AuthShell: React.FC<AuthShellProps> = ({
+function AuthShellRaw({
   variant,
   children,
   background,
   sidebar,
   className,
-}) => {
+}: AuthShellProps) {
   const { isLoaded: bgLoaded, hasError: bgError } = useImageLoader(background?.imageUrl);
 
   const hasBgImage = Boolean(background?.imageUrl) && bgLoaded && !bgError;
@@ -77,4 +82,6 @@ export const AuthShell: React.FC<AuthShellProps> = ({
       )}
     </AuthShellProvider>
   );
-};
+}
+
+export const AuthShell = memo(AuthShellRaw);

package/src/layouts/AuthLayout/shells/CenteredShell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { GlowBackground } from '@djangocfg/ui-core/components';
 
@@ -14,13 +14,17 @@ import type { ShellRenderProps } from './types';
  * - Glow background (default)
  * - Optional custom background image/gradient via shell props
  * - No visible card chrome
+ *
+ * Memoised: re-renders only when bgStyle/overlayStyle references or
+ * children change. The background layer is cheap to recreate; the main
+ * win is preserving the content subtree when parent re-renders.
  */
-export const CenteredShell: React.FC<ShellRenderProps> = ({
+function CenteredShellRaw({
   children,
   className,
   bgStyle,
   overlayStyle,
-}) => {
+}: ShellRenderProps) {
   const hasCustomBg = Boolean(bgStyle);
 
   return (
@@ -43,4 +47,6 @@ export const CenteredShell: React.FC<ShellRenderProps> = ({
       </div>
     </div>
   );
-};
+}
+
+export const CenteredShell = memo(CenteredShellRaw);

package/src/layouts/AuthLayout/shells/SplitShell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import type { ShellRenderProps } from './types';
 
@@ -16,15 +16,19 @@ interface SplitShellProps extends ShellRenderProps {
  * - Desktop (>= xl): two columns inside a card — form left, sidebar right
  *
  * Background: full-bleed image/gradient with optional overlay + blur.
+ *
+ * Memoised: re-renders only when bgStyle, overlayStyle, blurValue or
+ * children references change. `sidebar` is compared by reference — the
+ * consumer should stabilise it (e.g. wrap in useMemo) to avoid re-renders.
  */
-export const SplitShell: React.FC<SplitShellProps> = ({
+function SplitShellRaw({
   children,
   className,
   bgStyle,
   overlayStyle,
   blurValue,
   sidebar,
-}) => {
+}: SplitShellProps) {
   return (
     <div className={`auth-shell-split ${className || ''}`}>
       {/* Background layer */}
@@ -60,4 +64,6 @@ export const SplitShell: React.FC<SplitShellProps> = ({
       </div>
     </div>
   );
-};
+}
+
+export const SplitShell = memo(SplitShellRaw);

package/src/layouts/AuthLayout/shells/context.tsx

@@ -1,17 +1,28 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, memo, useContext } from 'react';
 
 import type { AuthShellContextValue } from './types';
 
 const AuthShellContext = createContext<AuthShellContextValue | undefined>(undefined);
 
-export const AuthShellProvider: React.FC<{
+interface AuthShellProviderProps {
   value: AuthShellContextValue;
   children: React.ReactNode;
-}> = ({ value, children }) => (
-  <AuthShellContext.Provider value={value}>{children}</AuthShellContext.Provider>
-);
+}
+
+/**
+ * AuthShellProvider — context wrapper for shell metadata.
+ *
+ * Memoised: re-renders only when `value` reference or `children` change.
+ * The parent (AuthShell) already memoises `value`, so this stabilises
+ * the context subtree against unrelated parent renders.
+ */
+function AuthShellProviderRaw({ value, children }: AuthShellProviderProps) {
+  return <AuthShellContext.Provider value={value}>{children}</AuthShellContext.Provider>;
+}
+
+export const AuthShellProvider = memo(AuthShellProviderRaw);
 
 export const useAuthShell = (): AuthShellContextValue => {
   const ctx = useContext(AuthShellContext);