@salesforce/templates 66.3.0 → 66.3.2

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/utils/linkUtils.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared allowlist for link protocols (e.g. for FormattedUrl, and future mailto/tel if rendered as links).
+ * Centralizes protocol checks so new link types can be added in one place.
+ */
+export const ALLOWED_LINK_PROTOCOLS = ["http:", "https:"] as const;
+
+export function isAllowedLinkUrl(value: string): boolean {
+	try {
+		const u = new URL(value);
+		return (ALLOWED_LINK_PROTOCOLS as readonly string[]).includes(u.protocol);
+	} catch {
+		return false;
+	}
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/utils/paginationUtils.ts

@@ -0,0 +1,49 @@
+/**
+ * Pagination Utilities
+ *
+ * Utility functions for pagination-related operations including page size validation.
+ */
+
+/**
+ * Default page size options for pagination
+ */
+export const PAGE_SIZE_OPTIONS = [
+	{ value: "10", label: "10" },
+	{ value: "20", label: "20" },
+	{ value: "50", label: "50" },
+] as const;
+
+/**
+ * Valid page size values extracted from PAGE_SIZE_OPTIONS
+ */
+export const VALID_PAGE_SIZES = PAGE_SIZE_OPTIONS.map((opt) => parseInt(opt.value, 10));
+
+/**
+ * Validates that a page size is one of the allowed options
+ * @param size - The page size to validate
+ * @returns true if valid, false otherwise
+ *
+ * @example
+ * ```tsx
+ * if (isValidPageSize(userInput)) {
+ *   setPageSize(userInput);
+ * }
+ * ```
+ */
+export function isValidPageSize(size: number): boolean {
+	return VALID_PAGE_SIZES.includes(size);
+}
+
+/**
+ * Gets a valid page size, defaulting to the first option if invalid
+ * @param size - The page size to validate
+ * @returns A valid page size
+ *
+ * @example
+ * ```tsx
+ * const safePageSize = getValidPageSize(userInput); // Returns valid size or default
+ * ```
+ */
+export function getValidPageSize(size: number): number {
+	return isValidPageSize(size) ? size : VALID_PAGE_SIZES[0];
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/utils/recordUtils.ts

@@ -0,0 +1,159 @@
+/**
+ * Record utilities: layout-derived fields for GraphQL fetch, safe keys, ID validation.
+ *
+ * calculateFieldsToFetch: from layout + object metadata → field names and relation map;
+ * used by objectDetailService and list to build columns. findIdFieldForRelationship ensures
+ * Id + relationship name are both requested for reference display.
+ *
+ * @module utils/recordUtils
+ */
+
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+import type {
+	LayoutResponse,
+	LayoutRow,
+	LayoutSection,
+	LayoutItem,
+	LayoutComponent,
+} from "../types/recordDetail/recordDetail";
+
+/**
+ * Find the Id field (reference foreign key) whose relationshipName matches the given name,
+ * so we can request both Id and relationship in the record query for display.
+ */
+function findIdFieldForRelationship(
+	metadata: ObjectInfoResult,
+	relationshipName: string,
+): string | null {
+	if (!metadata.fields || !relationshipName) return null;
+	for (const [apiName, field] of Object.entries(metadata.fields)) {
+		const isReference = field.dataType != null && field.dataType.toLowerCase() === "reference";
+		if (field.relationshipName === relationshipName && (isReference || apiName.endsWith("Id"))) {
+			return apiName;
+		}
+	}
+	return null;
+}
+
+const getFetchableFieldsFromLayoutItem = function (
+	metadata: ObjectInfoResult,
+	layoutItem: LayoutItem,
+	relationFieldMap: Record<string, string>,
+) {
+	const fields: Record<string, string> = {};
+	layoutItem.layoutComponents.forEach((comp: LayoutComponent) => {
+		// check if this is a field to add
+		if (!comp.apiName || comp.componentType !== "Field") {
+			return;
+		}
+
+		// add field: fieldType
+		const fieldMetadata = metadata.fields[comp.apiName];
+		fields[comp.apiName] = fieldMetadata ? fieldMetadata.dataType : "";
+
+		// add relatedField if one exists (Id field -> add relationship name so we request Owner.Name)
+		if (comp.apiName in metadata.fields) {
+			const relationshipName = fieldMetadata?.relationshipName;
+			if (relationshipName) {
+				fields[relationshipName] = fieldMetadata.dataType;
+
+				relationFieldMap[comp.apiName] = relationshipName;
+			}
+		} else {
+			// layout component is relationship name (e.g. Owner); ensure we also request the Id
+			// so buildSelectionTree sees both OwnerId and Owner and requests Owner { Name { value } }
+			const idField = findIdFieldForRelationship(metadata, comp.apiName);
+			if (idField) {
+				const idMeta = metadata.fields[idField];
+				fields[idField] = idMeta ? idMeta.dataType : "";
+				relationFieldMap[idField] = comp.apiName;
+			}
+		}
+	});
+	return fields;
+};
+
+const getFetchableFieldsFromLayoutRow = function (
+	metadata: ObjectInfoResult,
+	layoutRow: LayoutRow,
+	relationFieldMap: Record<string, string>,
+) {
+	let fieldsFromRow: Record<string, string> = {};
+	layoutRow.layoutItems.forEach((item: LayoutItem) => {
+		Object.assign(
+			fieldsFromRow,
+			getFetchableFieldsFromLayoutItem(metadata, item, relationFieldMap),
+		);
+	});
+	return fieldsFromRow;
+};
+
+const getFetchableFieldsFromSection = function (
+	metadata: ObjectInfoResult,
+	section: LayoutSection,
+	relationFieldMap: Record<string, string>,
+) {
+	let fieldsFromSection: Record<string, string> = {};
+	section.layoutRows.forEach((row: LayoutRow) => {
+		Object.assign(
+			fieldsFromSection,
+			getFetchableFieldsFromLayoutRow(metadata, row, relationFieldMap),
+		);
+	});
+	return fieldsFromSection;
+};
+
+const getFetchableFieldsFromLayout = function (
+	metadata: ObjectInfoResult,
+	layout: LayoutResponse,
+	relationFieldMap: Record<string, string>,
+) {
+	let fieldsFromLayout: Record<string, string> = {};
+	layout.sections.forEach((section) => {
+		Object.assign(
+			fieldsFromLayout,
+			getFetchableFieldsFromSection(metadata, section, relationFieldMap),
+		);
+	});
+	return fieldsFromLayout;
+};
+
+/**
+ * Returns field API names to request for records from layout + object metadata.
+ * Includes both Id and relationship name for reference fields so GraphQL can fetch display value.
+ *
+ * @param metadata - Object info (fields with dataType, relationshipName).
+ * @param layout - Layout response (sections, layoutItems, layoutComponents).
+ * @param shouldPrefixedWithEntityName - If true, prefix names with object (e.g. Account.Name).
+ * @returns [fieldNames, fieldTypes, relationFieldMap] for buildSelectionTree / optionalFields.
+ */
+export const calculateFieldsToFetch = function (
+	metadata: ObjectInfoResult,
+	layout: LayoutResponse,
+	shouldPrefixedWithEntityName: boolean,
+): [string[], string[], Record<string, string>] {
+	const relationFieldMap: Record<string, string> = {};
+	// populating fields to query for layout
+	const fields = getFetchableFieldsFromLayout(metadata, layout, relationFieldMap);
+	let fieldsToFetch = Object.keys(fields);
+	if (shouldPrefixedWithEntityName) {
+		fieldsToFetch = fieldsToFetch.map((field) => `${metadata.apiName}.${field}`);
+	}
+	// populate field types for o11y logging
+	const fieldTypes = Object.values(fields).filter((fieldType) => fieldType !== "");
+	return [fieldsToFetch, fieldTypes, relationFieldMap];
+};
+/** Type guard: true if id is a non-empty string matching 15- or 18-char Salesforce ID format. */
+export function isValidSalesforceId(id: string | null | undefined): id is string {
+	if (!id || typeof id !== "string") return false;
+	return /^[a-zA-Z0-9]{15}$|^[a-zA-Z0-9]{18}$/.test(id);
+}
+
+/** Safe React key from record id or fallback to prefix-index. */
+export function getSafeKey(
+	recordId: string | null | undefined,
+	index: number,
+	prefix: string = "result",
+): string {
+	return isValidSalesforceId(recordId) ? recordId : `${prefix}-${index}`;
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/utils/sanitizationUtils.ts

@@ -0,0 +1,49 @@
+/**
+ * Sanitization Utilities
+ *
+ * Utility functions for sanitizing user input to prevent injection attacks.
+ * These utilities provide basic sanitization for filter values.
+ */
+
+/**
+ * Sanitizes a string value by removing potentially dangerous characters
+ * and trimming whitespace.
+ *
+ * This is a basic sanitization - for production, consider using a library like DOMPurify for more
+ * comprehensive sanitization.
+ * Also, note this is NOT an end-to-end security control.
+ * Client-side sanitization can be bypassed by any attacker using `curl` or Postman.
+ * To prevent injection attacks (SOSL Injection, XSS):
+ * 1. The BACKEND (Salesforce API) handles SOSL injection if parameters are passed correctly.
+ * 2. React handles XSS automatically when rendering variables in JSX (e.g., <div>{value}</div>).
+ * Do not rely on this function for end-to-end security enforcement.
+ *
+ * @param value - The string value to sanitize
+ * @returns Sanitized string value
+ *
+ * @remarks
+ * - Removes control characters (except newlines, tabs, carriage returns)
+ * - Trims leading/trailing whitespace
+ * - Limits length to prevent DoS attacks (default: 1000 characters)
+ * - Preserves alphanumeric, spaces, and common punctuation
+ *
+ * @example
+ * ```tsx
+ * const sanitized = sanitizeFilterValue(userInput);
+ * ```
+ */
+export function sanitizeFilterValue(value: string, maxLength: number = 1000): string {
+	if (typeof value !== "string") {
+		return "";
+	}
+
+	let sanitized = value.trim();
+
+	if (sanitized.length > maxLength) {
+		sanitized = sanitized.substring(0, maxLength);
+	}
+
+	sanitized = sanitized.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
+
+	return sanitized;
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/Home.tsx

@@ -1,12 +1,13 @@
+import { GlobalSearchInput } from "../features/global-search/components/search/GlobalSearchInput";
+
 export default function Home() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
-        <p className="text-lg text-gray-600 mb-8">
-          Welcome to your React application.
-        </p>
-      </div>
-    </div>
-  );
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+				<p className="text-lg text-gray-600 mb-8">Welcome to your React application.</p>
+			</div>
+			<GlobalSearchInput />
+		</div>
+	);
 }

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/TestAccPage.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import AgentforceConversationClient from "../components/AgentforceConversationClient";
+
+export default function TestAccPage() {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">ACC</h1>
+				<p className="text-lg text-gray-600 mb-8">Welcome to your ACC application.</p>
+			</div>
+			<AgentforceConversationClient />
+		</div>
+	);
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/routes.tsx

@@ -2,6 +2,11 @@ import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
+import TestAccPage from "./pages/TestAccPage";
+import GlobalSearch from "./features/global-search/pages/GlobalSearch";
+import DetailPage from "./features/global-search/pages/DetailPage";
+import { Suspense } from "react";
+import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
 
 export const routes: RouteObject[] = [
   {
@@ -16,6 +21,29 @@ export const routes: RouteObject[] = [
       {
         path: '*',
         element: <NotFound />
+      },
+      {
+        path: "test-acc",
+        element: <TestAccPage />,
+        handle: { showInNavigation: true, label: "Test ACC" }
+      },
+      {
+        path: "global-search/:query",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<GlobalSearch />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "object/:objectApiName/:recordId",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<DetailPage />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
       }
     ]
   }

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/src/styles/global.css

@@ -11,3 +11,125 @@
     @apply antialiased bg-white;
   }
 }
+
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/lib/templates/project/reactb2e/force-app/main/default/webapplications/appreacttemplateb2e/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig(({ mode }) => {
   return {
     // Ensure root base for e2e/static serve; plugin may override when deployed under a path
     base: '/',
+    // Type assertion avoids Plugin type mismatch when dist has its own node_modules (vite/rollup)
     plugins: [
       tailwindcss(),
       react(),
@@ -26,7 +27,7 @@ export default defineConfig(({ mode }) => {
         // Fail build if codegen errors
         throwOnBuild: true,
       }),
-    ],
+    ] as import('vite').PluginOption[],
 
     // Build configuration for MPA
     build: {

package/lib/templates/project/reactb2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.48.2",
+  "version": "1.71.2",
   "description": "Base SFDX project template",
   "private": true,
   "files": [