@salesforce/ui-bundle-template-app-react-template-b2x 1.118.4 → 1.119.0

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.119.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.4...v1.119.0) (2026-03-31)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [1.118.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.3...v1.118.4) (2026-03-31)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/reactexternalapp/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.118.4",
-    "@salesforce/ui-bundle": "^1.118.4",
+    "@salesforce/sdk-data": "^1.119.0",
+    "@salesforce/ui-bundle": "^1.119.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^1.118.4",
+    "@salesforce/vite-plugin-ui-bundle": "^1.119.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/appLayout.tsx

@@ -1,83 +1,88 @@
-import { Outlet, Link, useLocation } from 'react-router';
-import { getAllRoutes } from './router-utils';
-import { useState } from 'react';
+import { Outlet, Link, useLocation } from "react-router";
+import { getAllRoutes } from "./router-utils";
+import { useState } from "react";
+import { AuthMenu } from "./features/authentication/menu/AuthMenu";
+import { Button } from "./components/ui/button";
 
 export default function AppLayout() {
-  const [isOpen, setIsOpen] = useState(false);
-  const location = useLocation();
+	const [isOpen, setIsOpen] = useState(false);
+	const location = useLocation();
 
-  const isActive = (path: string) => location.pathname === path;
+	const isActive = (path: string) => location.pathname === path;
 
-  const toggleMenu = () => setIsOpen(!isOpen);
+	const toggleMenu = () => setIsOpen(!isOpen);
 
-  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
-    .filter(
-      route =>
-        route.handle?.showInNavigation === true &&
-        route.fullPath !== undefined &&
-        route.handle?.label !== undefined
-    )
-    .map(
-      route =>
-        ({
-          path: route.fullPath,
-          label: route.handle?.label,
-        }) as { path: string; label: string }
-    );
+	const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+		.filter(
+			(route) =>
+				route.handle?.showInNavigation === true &&
+				route.fullPath !== undefined &&
+				route.handle?.label !== undefined,
+		)
+		.map(
+			(route) =>
+				({
+					path: route.fullPath,
+					label: route.handle?.label,
+				}) as { path: string; label: string },
+		);
 
-  return (
-    <>
-      <nav className="bg-white border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link to="/" className="text-xl font-semibold text-gray-900">
-              React App
-            </Link>
-            <button
-              onClick={toggleMenu}
-              className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              aria-label="Toggle menu"
-            >
-              <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
-                <span
-                  className={`block h-0.5 w-6 bg-current transition-all ${
-                    isOpen ? 'rotate-45 translate-y-2' : ''
-                  }`}
-                />
-                <span
-                  className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
-                />
-                <span
-                  className={`block h-0.5 w-6 bg-current transition-all ${
-                    isOpen ? '-rotate-45 -translate-y-2' : ''
-                  }`}
-                />
-              </div>
-            </button>
-          </div>
-          {isOpen && (
-            <div className="pb-4">
-              <div className="flex flex-col space-y-2">
-                {navigationRoutes.map(item => (
-                  <Link
-                    key={item.path}
-                    to={item.path}
-                    onClick={() => setIsOpen(false)}
-                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                      isActive(item.path)
-                        ? 'bg-blue-100 text-blue-700'
-                        : 'text-gray-700 hover:bg-gray-100'
-                    }`}
-                  >
-                    {item.label}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </nav>
-      <Outlet />
-    </>
-  );
+	return (
+		<>
+			<nav className="bg-white border-b border-gray-200">
+				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="flex justify-between items-center h-16">
+						<Link to="/" className="text-xl font-semibold text-gray-900">
+							React App
+						</Link>
+						<div className="flex items-center gap-2">
+							<AuthMenu />
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={toggleMenu}
+								aria-label="Toggle menu"
+								aria-expanded={isOpen}
+							>
+								<div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+									<span
+										className={`block h-0.5 w-6 bg-current transition-all ${
+											isOpen ? "rotate-45 translate-y-2" : ""
+										}`}
+									/>
+									<span
+										className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? "opacity-0" : ""}`}
+									/>
+									<span
+										className={`block h-0.5 w-6 bg-current transition-all ${
+											isOpen ? "-rotate-45 -translate-y-2" : ""
+										}`}
+									/>
+								</div>
+							</Button>
+						</div>
+					</div>
+					{isOpen && (
+						<div className="pb-4">
+							<div className="flex flex-col space-y-1">
+								{navigationRoutes.map((item) => (
+									<Button
+										key={item.path}
+										variant={isActive(item.path) ? "secondary" : "ghost"}
+										asChild
+										className="justify-start"
+									>
+										<Link to={item.path} onClick={() => setIsOpen(false)}>
+											{item.label}
+										</Link>
+									</Button>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			</nav>
+			<Outlet />
+		</>
+	);
 }

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg';
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+};

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/components/ui/index.ts

@@ -13,6 +13,14 @@
  */
 
 export { Alert, AlertTitle, AlertDescription, AlertAction } from './alert';
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+} from './avatar';
 export { Button, buttonVariants } from './button';
 export {
   Card,
@@ -35,6 +43,23 @@ export {
   DialogTitle,
   DialogTrigger,
 } from './dialog';
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from './dropdown-menu';
 export {
   Field,
   FieldDescription,

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/menu/AuthMenu.tsx

@@ -0,0 +1,93 @@
+import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react";
+import { Link } from "react-router";
+import { useAuth } from "../context/AuthContext";
+import { ROUTES } from "../authenticationConfig";
+import { Button } from "../../../components/ui/button";
+import { Skeleton } from "../../../components/ui/skeleton";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
+
+interface User {
+	readonly id: string;
+	readonly name: string;
+}
+
+export interface AuthMenuProps {
+	/** Custom trigger button for the authenticated user's dropdown */
+	trigger?: (user: User) => React.ReactNode;
+	/** Content rendered instead of the dropdown when the user is not logged in (e.g. a standalone Sign In button) */
+	guestContent?: React.ReactNode;
+	/** Extra menu items inserted after "Edit Profile" and before "Sign Out" */
+	menuItems?: React.ReactNode;
+	/** CSS class applied to the DropdownMenuContent wrapper */
+	className?: string;
+}
+
+export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) {
+	const { user, isAuthenticated, loading, logout } = useAuth();
+
+	if (loading) {
+		return <Skeleton className="size-8 rounded-full" />;
+	}
+
+	if (!isAuthenticated && guestContent) {
+		return <>{guestContent}</>;
+	}
+
+	const defaultTrigger = (
+		<Button variant="ghost" size="icon" aria-label="User menu">
+			<CircleUser className="size-6" />
+		</Button>
+	);
+
+	const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger;
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{triggerNode}</DropdownMenuTrigger>
+
+			<DropdownMenuContent align="end" className={className ?? "w-48"}>
+				{isAuthenticated ? (
+					<>
+						<DropdownMenuLabel className="truncate">{user?.name}</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.PROFILE.PATH}>
+								<UserPen className="size-4" />
+								Edit Profile
+							</Link>
+						</DropdownMenuItem>
+						{menuItems}
+						<DropdownMenuItem onClick={() => logout()}>
+							<LogOut className="size-4" />
+							Sign Out
+						</DropdownMenuItem>
+					</>
+				) : (
+					<>
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.LOGIN.PATH}>
+								<LogIn className="size-4" />
+								Log In
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.REGISTER.PATH}>
+								<UserPlus className="size-4" />
+								Register
+							</Link>
+						</DropdownMenuItem>
+					</>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+export default AuthMenu;

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/utils/filterUtils.ts

@@ -385,7 +385,16 @@ function buildSingleFilter<TFilter>(
 			if (!value) return null;
 			const searchFields = config?.searchFields ?? [];
 			if (searchFields.length === 0) return null;
-			const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
+			// Supports dot-notation for relationship fields (e.g. "User__r.Name")
+			// by building nested filter objects: { User__r: { Name: { like: "%x%" } } }
+			const clauses = searchFields.map((f) => {
+				const parts = f.split(".");
+				let clause: Record<string, unknown> = { like: `%${value}%` };
+				for (let i = parts.length - 1; i >= 0; i--) {
+					clause = { [parts[i]]: clause };
+				}
+				return clause as TFilter;
+			});
 			if (clauses.length === 1) return clauses[0];
 			return { or: clauses } as TFilter;
 		}

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/routes.tsx

@@ -34,7 +34,7 @@ export const routes: RouteObject[] = [
           {
             path: ROUTES.LOGIN.PATH,
             element: <Login />,
-            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+            handle: { showInNavigation: false, label: "Login", title: ROUTES.LOGIN.TITLE }
           },
           {
             path: ROUTES.REGISTER.PATH,
@@ -59,7 +59,7 @@ export const routes: RouteObject[] = [
           {
             path: ROUTES.PROFILE.PATH,
             element: <Profile />,
-            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+            handle: { showInNavigation: false, label: "Profile", title: ROUTES.PROFILE.TITLE }
           },
           {
             path: ROUTES.CHANGE_PASSWORD.PATH,

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.118.4",
+  "version": "1.119.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.118.4",
+      "version": "1.119.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "1.118.4",
+  "version": "1.119.0",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-app-react-template-b2x",
-  "version": "1.118.4",
+  "version": "1.119.0",
   "description": "Salesforce React external app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",