@djangocfg/layouts 2.1.606 → 2.1.608

package/src/layouts/PublicLayout/hooks/useNavbarScroll.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 
 import { useScroll } from '@djangocfg/ui-core/hooks';
 
@@ -11,6 +11,10 @@ export interface UseNavbarScrollOptions {
   transparent?: boolean;
   /** scrollY threshold for hide + transparent triggers. @default 40 */
   transparentThreshold?: number;
+  /** Scroll container to follow instead of the window (shells where the document never scrolls). */
+  target?: RefObject<HTMLElement | null>;
+  /** When false the hide still happens under `prefers-reduced-motion` (the caller drops the animation). @default true */
+  respectReducedMotion?: boolean;
 }
 
 export interface UseNavbarScrollReturn {
@@ -51,12 +55,12 @@ const DIRECTION_COMMIT_PX = 8;
  * renders.
  */
 export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbarScrollReturn {
-  const { hideNavOnScroll = false, transparent = false, transparentThreshold = 40 } = options;
+  const { hideNavOnScroll = false, transparent = false, transparentThreshold = 40, target, respectReducedMotion = true } = options;
 
   const active = hideNavOnScroll || transparent;
   // Subscribe to the shared store only when the feature is on. The `y` this
   // returns is already rAF-coalesced; we run cheap arithmetic on each change.
-  const { y } = useScroll(active ? undefined : NEVER_TARGET);
+  const { y } = useScroll(active ? target : NEVER_TARGET);
 
   const [hidden, setHidden] = useState(false);
   const [scrolled, setScrolled] = useState(false);
@@ -84,13 +88,15 @@ export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbar
     const prefersReducedMotion =
       typeof window.matchMedia === 'function' &&
       window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    const hideEnabled = hideNavOnScroll && !prefersReducedMotion;
+    const hideEnabled = hideNavOnScroll && !(respectReducedMotion && prefersReducedMotion);
 
     // iOS Safari rubber-banding reports negative scrollY at the top and values
     // past maxScroll at the bottom while the page bounces back; feeding those
     // into the integrator makes the bar twitch on every overscroll pull.
-    const doc = document.documentElement;
-    const maxScroll = Math.max(0, doc.scrollHeight - window.innerHeight);
+    const el = target?.current;
+    const maxScroll = el
+      ? Math.max(0, el.scrollHeight - el.clientHeight)
+      : Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
     const clampedY = Math.min(Math.max(0, y), maxScroll);
 
     if (transparent) {
@@ -134,7 +140,7 @@ export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbar
     }
 
     lastY.current = clampedY;
-  }, [y, active, hideNavOnScroll, transparent, transparentThreshold]);
+  }, [y, active, hideNavOnScroll, transparent, transparentThreshold, target, respectReducedMotion]);
 
   return { hidden, scrolled };
 }

package/src/layouts/SettingsLayout/components/AccountMenuButton.tsx

@@ -1,14 +1,11 @@
 'use client';
 
-import { ChevronDown } from 'lucide-react';
 import React from 'react';
 
-import { useAuth } from '@djangocfg/api/auth';
-import { Avatar, AvatarFallback, AvatarImage, Button, MenuBuilder } from '@djangocfg/ui-core/components';
 import type { MenuItem } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useAccountMenuItems } from '../hooks/useAccountMenuItems';
+import { AccountAvatarTrigger, AccountFooterTrigger, AccountMenu } from '../../../components/account';
 
 export interface AccountMenuButtonProps {
   /** `row`: avatar, name and chevron (a sidebar footer; the menu opens up). `avatar`: the avatar alone (a header; the menu opens down). */
@@ -26,67 +23,29 @@ export interface AccountMenuButtonProps {
 }
 
 /**
- * The ready user menu: trigger button plus the shared menu (email, Settings, a shortcut per
- * Settings section, Sign out). Drop it into any chrome; renders nothing for a signed-out visitor.
- * `PrivateLayout`'s sidebar footer builds on the same `useAccountMenuItems`.
+ * The ready user menu: the shared `AccountMenu` with a row or avatar trigger. Drop it into any chrome; renders
+ * nothing for a signed-out visitor.
  */
-export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
-  variant = 'row',
-  extra,
-  plan,
-  className,
-  classNames,
-}) => {
-  const { user } = useAuth();
-  const items = useAccountMenuItems({ extra });
-  const [open, setOpen] = React.useState(false);
-
-  if (!user) return null;
-
-  const name = user.display_username || user.email || 'User';
-  const initial = (name.charAt(0) || '?').toUpperCase();
+export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({ variant = 'row', extra, plan, className, classNames }) => {
   const isRow = variant === 'row';
-
   return (
-    <MenuBuilder
-      items={items}
-      open={open}
-      onOpenChange={setOpen}
+    <AccountMenu
+      plan={plan}
+      extra={extra}
+      signIn="none"
       side={isRow ? 'top' : 'bottom'}
       align={isRow ? 'start' : 'end'}
-      sideOffset={8}
-      contentClassName="w-60 p-1.5"
     >
-      <Button
-        type="button"
-        variant="ghost"
-        aria-label={name}
-        className={cn(
-          'group min-w-0 select-none gap-2 rounded-lg font-normal focus-visible:ring-0',
-          isRow ? 'h-9 w-full justify-start px-2 text-left' : 'size-9 p-0',
-          className,
-        )}
-      >
-        <Avatar className={cn('size-6 shrink-0', classNames?.avatar)}>
-          <AvatarImage src={user.avatar ?? ''} alt={name} />
-          <AvatarFallback className="text-xs font-medium">{initial}</AvatarFallback>
-        </Avatar>
-        {isRow && (
-          <>
-            <span className={cn('flex min-w-0 items-baseline gap-1', classNames?.name)}>
-              <span className="truncate text-sm">{name}</span>
-              {plan ? <span className="shrink-0 text-xs text-muted-foreground">· {plan}</span> : null}
-            </span>
-            <ChevronDown
-              className={cn(
-                'ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180',
-                classNames?.chevron,
-              )}
-              aria-hidden
-            />
-          </>
-        )}
-      </Button>
-    </MenuBuilder>
+      {isRow ? (
+        <AccountFooterTrigger
+          className={cn('h-9', className)}
+          avatarClassName={classNames?.avatar}
+          nameClassName={classNames?.name}
+          chevronClassName={classNames?.chevron}
+        />
+      ) : (
+        <AccountAvatarTrigger className={className} />
+      )}
+    </AccountMenu>
   );
 };

package/src/layouts/SettingsLayout/hooks/index.ts

@@ -11,8 +11,8 @@ export type {
   UseSettingsSectionsResult,
 } from './useSettingsSections';
 
-export { useAccountMenuItems } from './useAccountMenuItems';
-export type { UseAccountMenuItemsOptions } from './useAccountMenuItems';
+export { useAccountMenuItems } from '../../../components/account/useAccountMenuItems';
+export type { UseAccountMenuItemsOptions } from '../../../components/account/useAccountMenuItems';
 
 export { useSettingsSectionState } from './useSettingsSectionState';
 export type { SettingsSectionState } from './useSettingsSectionState';

package/src/shared/ProjectContext.tsx

@@ -0,0 +1,18 @@
+/**
+ * The project name `BaseApp` already receives (`project` prop), exposed to descendants so shells can use it as the
+ * default product name. Outside `BaseApp` (stories, tests) the hook returns `undefined` and never throws.
+ */
+
+'use client';
+
+import React from 'react';
+
+const ProjectNameContext = React.createContext<string | undefined>(undefined);
+
+export function ProjectNameProvider({ value, children }: { value?: string; children: React.ReactNode }) {
+  return <ProjectNameContext.Provider value={value?.trim() || undefined}>{children}</ProjectNameContext.Provider>;
+}
+
+export function useProjectName(): string | undefined {
+  return React.useContext(ProjectNameContext);
+}

package/src/testing/MockAuthProvider.tsx

@@ -20,6 +20,8 @@ export interface MockAuthProviderProps {
   isAuthenticated?: boolean;
   /** Override `isAdminUser`. Defaults to `false`. */
   isAdminUser?: boolean;
+  /** Override resolved auth routes (e.g. `defaultCallback`, the private landing page). */
+  routes?: Partial<{ auth: string; defaultCallback: string; defaultAuthCallback: string }>;
 }
 
 const noopAsync = async () => {};
@@ -54,6 +56,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
   isLoading = false,
   isAuthenticated,
   isAdminUser = false,
+  routes,
 }) => {
   const [user, setUser] = useState<UserProfile | null>(initialUser);
 
@@ -62,7 +65,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
     isLoading,
     isAuthenticated: isAuthenticated ?? Boolean(user),
     isAdminUser,
-    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth' },
+    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth', ...routes },
 
     loadCurrentProfile: noopAsync,
     checkAuthAndRedirect: noopAsync,
@@ -93,7 +96,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
       return next;
     },
     uploadAvatar: async () => user ?? buildMockUser(),
-  }), [user, isLoading, isAuthenticated, isAdminUser]);
+  }), [user, isLoading, isAuthenticated, isAdminUser, routes]);
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };