@salesforce/webapp-template-app-react-template-b2e-experimental 1.109.5 → 1.109.6

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/search/ResultCardFields.tsx

@@ -1,71 +0,0 @@
-/**
- * ResultCardFields Component
- *
- * Displays secondary fields (up to 3) for a search result card.
- * Excludes the primary field and handles nested field values.
- *
- * @param record - The search result record data
- * @param columns - Array of column definitions
- * @param excludeFieldApiName - Field API name to exclude (usually the primary field)
- *
- * @remarks
- * - Displays up to 3 secondary fields
- * - Handles nested field paths (e.g., "Owner.Alias")
- * - Skips fields with null/undefined/empty values
- * - Responsive layout (vertical on mobile, horizontal on desktop)
- *
- * @example
- * ```tsx
- * <ResultCardFields
- *   record={searchResult}
- *   columns={columns}
- *   excludeFieldApiName="Name"
- * />
- * ```
- */
-import type { Column, SearchResultRecordData } from "../../types/search/searchResults";
-import { getNestedFieldValue } from "../../utils/fieldUtils";
-
-interface ResultCardFieldsProps {
-	record: SearchResultRecordData;
-	columns: Column[];
-	excludeFieldApiName?: string;
-}
-
-export default function ResultCardFields({
-	record,
-	columns,
-	excludeFieldApiName,
-}: ResultCardFieldsProps) {
-	const secondaryFields = columns.filter(
-		(col) => col && col.fieldApiName && col.fieldApiName !== excludeFieldApiName,
-	);
-
-	return (
-		<dl className="space-y-2" aria-label="Additional record information">
-			{secondaryFields.map((column) => {
-				if (!column || !column.fieldApiName) {
-					return null;
-				}
-
-				const displayValue = getNestedFieldValue(record.fields, column.fieldApiName);
-
-				if (displayValue === null || displayValue === undefined || displayValue === "") {
-					return null;
-				}
-
-				return (
-					<div
-						key={column.fieldApiName}
-						className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2"
-					>
-						<dt className="text-sm font-medium text-muted-foreground min-w-[100px]">
-							{column.label || column.fieldApiName}:
-						</dt>
-						<dd className="text-sm text-foreground">{displayValue}</dd>
-					</div>
-				);
-			})}
-		</dl>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/search/SearchHeader.tsx

@@ -1,31 +0,0 @@
-/**
- * SearchHeader Component
- *
- * Displays the header for search results or browse-all (same UI).
- * labelPlural comes from object metadata (e.g. useObjectInfoBatch) so it is not hard-coded.
- */
-interface SearchHeaderProps {
-	query?: string;
-	isBrowseAll?: boolean;
-	/** Plural label for the primary object (e.g. "Accounts"). From object metadata. */
-	labelPlural?: string;
-}
-
-export default function SearchHeader({
-	query,
-	isBrowseAll,
-	labelPlural = "records",
-}: SearchHeaderProps) {
-	return (
-		<header className="mb-6" aria-label="Search results header">
-			<h1 className="text-3xl font-bold mb-2">
-				{isBrowseAll ? `Browse All ${labelPlural}` : "Search Results"}
-			</h1>
-			{!isBrowseAll && query && (
-				<p className="text-lg" aria-live="polite">
-					Results for: <span className="font-semibold">"{query}"</span>
-				</p>
-			)}
-		</header>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/search/SearchPagination.tsx

@@ -1,144 +0,0 @@
-/**
- * SearchPagination Component
- *
- * Displays pagination controls for search results.
- * Previous/Next are disabled using hasPreviousPage/hasNextPage from the API so no request is made when there is no page.
- *
- * @remarks
- * - Layout: page size selector on the left, prev/page/next controls on the right (corners).
- * - Previous disabled when !hasPreviousPage (cursor stack enables prev when pageIndex > 0).
- * - Next disabled when !hasNextPage or nextPageToken is null.
- */
-import { Button } from "../../../../components/ui/button";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
-import { PAGE_SIZE_OPTIONS, getValidPageSize, isValidPageSize } from "../../utils/paginationUtils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-interface SearchPaginationProps {
-	currentPageToken: string;
-	nextPageToken: string | null;
-	previousPageToken: string | null;
-	hasNextPage?: boolean;
-	hasPreviousPage?: boolean;
-	pageSize: number;
-	/** direction: 'prev' | 'next' | 'first'. When 'first' (e.g. page size change), parent typically resets pagination; token may be '' for prev when going to page 0. */
-	onPageChange: (newPageToken: string, direction?: "next" | "prev" | "first") => void;
-	onPageSizeChange: (newPageSize: number) => void;
-}
-
-export default function SearchPagination({
-	currentPageToken,
-	nextPageToken,
-	previousPageToken,
-	hasNextPage = false,
-	hasPreviousPage = false,
-	pageSize,
-	onPageChange,
-	onPageSizeChange,
-}: SearchPaginationProps) {
-	const validPageSize = getValidPageSize(pageSize);
-
-	const currentPageTokenNum = parseInt(currentPageToken, 10) || 0;
-	const currentPage = currentPageTokenNum + 1;
-
-	const canGoPrevious = Boolean(hasPreviousPage);
-	const canGoNext = Boolean(hasNextPage && nextPageToken != null);
-
-	const handlePrevious = () => {
-		if (canGoPrevious) {
-			onPageChange(previousPageToken ?? "", "prev");
-		}
-	};
-
-	const handleNext = () => {
-		if (canGoNext && nextPageToken != null) {
-			onPageChange(nextPageToken, "next");
-		}
-	};
-
-	const handlePageSizeChange = (newPageSize: string) => {
-		const newSize = parseInt(newPageSize, 10);
-		if (!isNaN(newSize) && isValidPageSize(newSize) && newSize !== validPageSize) {
-			onPageSizeChange(newSize);
-			onPageChange("0", "first");
-		}
-	};
-
-	return (
-		<nav
-			className="w-full flex flex-row flex-wrap items-center justify-between gap-4 py-2"
-			aria-label="Search results pagination"
-		>
-			<div
-				className="flex items-center gap-2 shrink-0"
-				role="group"
-				aria-label="Page size selector"
-			>
-				<Label htmlFor="page-size-select" className="text-sm font-normal whitespace-nowrap">
-					Results per page:
-				</Label>
-				<Select value={validPageSize.toString()} onValueChange={handlePageSizeChange}>
-					<SelectTrigger
-						id="page-size-select"
-						className="w-[70px]"
-						aria-label="Select number of results per page"
-					>
-						<SelectValue />
-					</SelectTrigger>
-					<SelectContent>
-						{PAGE_SIZE_OPTIONS.map((option) => (
-							<SelectItem key={option.value} value={option.value}>
-								{option.label}
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-			</div>
-
-			<div className="flex items-center gap-1 shrink-0" role="group" aria-label="Page navigation">
-				<Button
-					type="button"
-					variant="outline"
-					size="sm"
-					disabled={!canGoPrevious}
-					onClick={handlePrevious}
-					aria-label={
-						canGoPrevious
-							? `Go to previous page (Page ${currentPage - 1})`
-							: "Previous page (disabled)"
-					}
-				>
-					<ChevronLeft className="size-4" aria-hidden />
-					Previous
-				</Button>
-				<span
-					className="min-w-[4rem] text-center text-sm text-muted-foreground px-2"
-					aria-label={`Page ${currentPage}, current page`}
-					aria-current="page"
-				>
-					Page {currentPage}
-				</span>
-				<Button
-					type="button"
-					variant="outline"
-					size="sm"
-					disabled={!canGoNext}
-					onClick={handleNext}
-					aria-label={
-						canGoNext ? `Go to next page (Page ${currentPage + 1})` : "Next page (disabled)"
-					}
-				>
-					Next
-					<ChevronRight className="size-4" aria-hidden />
-				</Button>
-			</div>
-		</nav>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/search/SearchResultCard.tsx

@@ -1,138 +0,0 @@
-/**
- * SearchResultCard Component
- *
- * Displays a single search result as a card with primary and secondary fields.
- * Clicking the card navigates to the detail page for that record.
- *
- * @param record - The search result record data to display
- * @param columns - Array of column definitions for field display
- * @param objectApiName - API name of the object (path param in detail URL: /object/:objectApiName/:recordId)
- *
- * @remarks
- * - Automatically identifies the primary field (usually "Name")
- * - Displays up to 3 secondary fields
- * - Supports keyboard navigation (Enter/Space to navigate)
- * - Handles nested field values (e.g., "Owner.Alias")
- *
- * @example
- * ```tsx
- * <SearchResultCard
- *   record={searchResult}
- *   columns={columns}
- *   objectApiName="Account"
- * />
- * ```
- */
-import React from "react";
-import { useNavigate } from "react-router";
-import { useMemo, useCallback } from "react";
-import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "../../../../components/ui/card";
-import type { Column, SearchResultRecordData } from "../../types/search/searchResults";
-import { getNestedFieldValue } from "../../utils/fieldUtils";
-import ResultCardFields from "./ResultCardFields";
-import { OBJECT_API_NAMES } from "../../constants";
-
-interface SearchResultCardProps {
-	record: SearchResultRecordData;
-	columns: Column[];
-	objectApiName?: string;
-}
-
-export default function SearchResultCard({
-	record,
-	columns,
-	objectApiName,
-}: SearchResultCardProps) {
-	const navigate = useNavigate();
-
-	const validColumns = useMemo(
-		() => (columns && Array.isArray(columns) && columns.length > 0 ? columns : []),
-		[columns],
-	);
-	const validRecord =
-		record?.id && record?.fields && typeof record.fields === "object" ? record : null;
-
-	const detailPath = useMemo(
-		() =>
-			validRecord
-				? `/object/${objectApiName?.trim() || OBJECT_API_NAMES[0]}/${validRecord.id}`
-				: "",
-		[validRecord, objectApiName],
-	);
-
-	const handleClick = useCallback(() => {
-		if (validRecord?.id) navigate(detailPath);
-	}, [validRecord?.id, detailPath, navigate]);
-
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				handleClick();
-			}
-		},
-		[handleClick],
-	);
-
-	const primaryField = useMemo(() => {
-		return (
-			validColumns.find(
-				(col) =>
-					col &&
-					col.fieldApiName &&
-					(col.fieldApiName.toLowerCase() === "name" ||
-						col.fieldApiName.toLowerCase().includes("name")),
-			) ||
-			validColumns[0] ||
-			null
-		);
-	}, [validColumns]);
-
-	const primaryValue = useMemo(() => {
-		return primaryField && primaryField.fieldApiName && validRecord?.fields
-			? getNestedFieldValue(validRecord.fields, primaryField.fieldApiName) || "Untitled"
-			: "Untitled";
-	}, [primaryField, validRecord]);
-
-	const secondaryColumns = useMemo(() => {
-		return validColumns.filter(
-			(col) => col && col.fieldApiName && col.fieldApiName !== primaryField?.fieldApiName,
-		);
-	}, [validColumns, primaryField]);
-
-	if (!validRecord) return null;
-	if (validColumns.length === 0) return null;
-
-	return (
-		<Card
-			className="cursor-pointer hover:shadow-md transition-shadow focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2"
-			onClick={handleClick}
-			onKeyDown={handleKeyDown}
-			role="button"
-			tabIndex={0}
-			aria-label={`View details for ${primaryValue}`}
-			aria-describedby={`result-${validRecord.id}-description`}
-		>
-			<CardHeader>
-				<CardTitle className="text-lg" id={`result-${validRecord.id}-title`}>
-					{primaryValue}
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div id={`result-${validRecord.id}-description`} className="sr-only">
-					Search result: {primaryValue}
-				</div>
-				<ResultCardFields
-					record={validRecord}
-					columns={secondaryColumns}
-					excludeFieldApiName={primaryField?.fieldApiName}
-				/>
-			</CardContent>
-		</Card>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/search/SearchResultsPanel.tsx

@@ -1,197 +0,0 @@
-/**
- * SearchResultsPanel Component
- *
- * Displays the search results panel with loading, error, and empty states.
- * Renders a list of SearchResultCard components and pagination controls.
- *
- * @param columns - Array of column definitions for displaying result data
- * @param results - Array of search result records to display
- * @param columnsLoading - Whether column metadata is currently loading
- * @param resultsLoading - Whether search results are currently loading
- * @param columnsError - Error message if column fetch failed
- * @param resultsError - Error message if results fetch failed
- * @param currentPageToken - Current pagination token
- * @param pageSize - Number of results per page
- * @param onPageChange - Callback when pagination changes; second arg optional: "next" | "prev" | "first" (cursor-stack pagination)
- * @param onPageSizeChange - Callback when page size changes
- *
- * @example
- * ```tsx
- * <SearchResultsPanel
- *   columns={columns}
- *   results={results}
- *   columnsLoading={false}
- *   resultsLoading={false}
- *   columnsError={null}
- *   resultsError={null}
- *   currentPageToken="0"
- *   pageSize={25}
- *   onPageChange={(token, direction) => handlePageChange(token, direction)}
- *   onPageSizeChange={(size) => setPageSize(size)}
- * />
- * ```
- */
-import { useMemo } from "react";
-import { Alert, AlertDescription, AlertTitle } from "../../../../components/ui/alert";
-import { Skeleton } from "../../../../components/ui/skeleton";
-import { AlertCircle } from "lucide-react";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
-import SearchResultCard from "./SearchResultCard";
-import SearchPagination from "./SearchPagination";
-import type { Column, SearchResultRecord } from "../../types/search/searchResults";
-import { getSafeKey } from "../../utils/recordUtils";
-
-interface SearchResultsPanelProps {
-	/** API name of the object being searched (e.g. for detail page navigation). */
-	objectApiName?: string;
-	columns: Column[];
-	results: SearchResultRecord[];
-	columnsLoading: boolean;
-	resultsLoading: boolean;
-	columnsError: string | null;
-	resultsError: string | null;
-	currentPageToken: string;
-	nextPageToken: string | null;
-	previousPageToken: string | null;
-	hasNextPage?: boolean;
-	hasPreviousPage?: boolean;
-	pageSize: number;
-	sortBy: string;
-	onPageChange: (newPageToken: string, direction?: "next" | "prev" | "first") => void;
-	onPageSizeChange: (newPageSize: number) => void;
-	onSortByChange: (newSortBy: string) => void;
-}
-
-export default function SearchResultsPanel({
-	objectApiName,
-	columns,
-	results,
-	columnsLoading,
-	resultsLoading,
-	columnsError,
-	resultsError,
-	currentPageToken,
-	nextPageToken,
-	previousPageToken,
-	hasNextPage = false,
-	hasPreviousPage = false,
-	pageSize,
-	sortBy,
-	onPageChange,
-	onPageSizeChange,
-	onSortByChange,
-}: SearchResultsPanelProps) {
-	const sortableColumns = useMemo(() => columns.filter(({ sortable }) => sortable), [columns]);
-
-	const validResults = useMemo(
-		() => results.filter((record) => record && record.record && record.record.id),
-		[results],
-	);
-	if (columnsError || resultsError) {
-		return (
-			<Alert variant="destructive" role="alert">
-				<AlertCircle className="h-4 w-4" aria-hidden="true" />
-				<AlertTitle>Error</AlertTitle>
-				<AlertDescription>
-					{columnsError || resultsError || "Failed to load search results"}
-				</AlertDescription>
-			</Alert>
-		);
-	}
-
-	if (resultsLoading || columnsLoading) {
-		return (
-			<div
-				className="space-y-4"
-				role="status"
-				aria-live="polite"
-				aria-label="Loading search results"
-			>
-				<span className="sr-only">Loading search results</span>
-				{[1, 2, 3].map((i) => (
-					<div key={i} className="border rounded-lg p-6" aria-hidden="true">
-						<Skeleton className="h-6 w-3/4 mb-4" />
-						<Skeleton className="h-4 w-full mb-2" />
-						<Skeleton className="h-4 w-2/3" />
-					</div>
-				))}
-			</div>
-		);
-	}
-
-	if (results.length === 0) {
-		return (
-			<div className="text-center py-12" role="status" aria-live="polite">
-				<p className="text-lg mb-2">No results found</p>
-				<p className="text-sm">Try adjusting your search query or filters</p>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			{sortableColumns.length > 0 && (
-				<div
-					className="mb-6 flex items-center gap-2 justify-end"
-					role="group"
-					aria-label="Sort options"
-				>
-					<Label htmlFor="sort-by-select" className="text-sm font-normal whitespace-nowrap">
-						Sort by:
-					</Label>
-					<Select value={sortBy || ""} onValueChange={onSortByChange}>
-						<SelectTrigger
-							id="sort-by-select"
-							className="w-[200px]"
-							aria-label="Sort search results by field"
-						>
-							<SelectValue placeholder="Select field..." />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="relevance">Relevance</SelectItem>
-							{sortableColumns.map((column) => (
-								<SelectItem key={column.fieldApiName} value={column.fieldApiName}>
-									{column.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
-			)}
-
-			<div className="space-y-4 mb-6" role="list" aria-label="Search results list">
-				{validResults.map((record, index) => {
-					const recordId = record.record.id;
-					const safeKey = getSafeKey(recordId, index);
-					return (
-						<div key={safeKey} role="listitem">
-							<SearchResultCard
-								record={record.record}
-								columns={columns}
-								objectApiName={objectApiName}
-							/>
-						</div>
-					);
-				})}
-			</div>
-
-			<SearchPagination
-				currentPageToken={currentPageToken}
-				nextPageToken={nextPageToken}
-				previousPageToken={previousPageToken}
-				hasNextPage={hasNextPage}
-				hasPreviousPage={hasPreviousPage}
-				pageSize={pageSize}
-				onPageChange={onPageChange}
-				onPageSizeChange={onPageSizeChange}
-			/>
-		</>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/components/shared/LoadingFallback.tsx

@@ -1,61 +0,0 @@
-/**
- * LoadingFallback Component
- *
- * Loading fallback component for Suspense boundaries.
- * Displays a centered spinner while lazy-loaded components are being fetched.
- *
- * @remarks
- * - Used with React Suspense for code splitting
- * - Simple centered spinner design
- * - Responsive and accessible
- *
- * @example
- * ```tsx
- * <Suspense fallback={<LoadingFallback />}>
- *   <LazyComponent />
- * </Suspense>
- * ```
- */
-import { cva, type VariantProps } from "class-variance-authority";
-import { Spinner } from "../../../../components/ui/spinner";
-
-/**
- * Spinner size variants based on content width.
- */
-const spinnerVariants = cva("", {
-	variants: {
-		contentMaxWidth: {
-			sm: "size-6",
-			md: "size-8",
-			lg: "size-10",
-		},
-	},
-	defaultVariants: {
-		contentMaxWidth: "sm",
-	},
-});
-
-interface LoadingFallbackProps extends VariantProps<typeof spinnerVariants> {
-	/**
-	 * Maximum width of the content container. Also scales the spinner size.
-	 * @default "sm"
-	 */
-	contentMaxWidth?: "sm" | "md" | "lg";
-	/**
-	 * Accessible label for screen readers.
-	 * @default "Loading…"
-	 */
-	loadingText?: string;
-}
-
-export default function LoadingFallback({
-	contentMaxWidth = "sm",
-	loadingText = "Loading…",
-}: LoadingFallbackProps) {
-	return (
-		<div className="flex justify-center" role="status" aria-live="polite">
-			<Spinner className={spinnerVariants({ contentMaxWidth })} aria-hidden="true" />
-			<span className="sr-only">{loadingText}</span>
-		</div>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/global-search/constants.ts

@@ -1,39 +0,0 @@
-/**
- * Application-wide Constants
- *
- * Defines constants used throughout the global search feature.
- */
-
-/**
- * Object API names to search across in the global search feature.
- * Currently supports single object search.
- *
- * @remarks
- * - Array of Salesforce object API names
- * - First element is used as the primary search object
- * - Can be extended to support multiple objects in the future
- *
- * @example
- * ```tsx
- * const objectApiName = OBJECT_API_NAMES[0]; // 'Account'
- * ```
- */
-export const OBJECT_API_NAMES = ["Account"] as const;
-
-/** Fallback title when record display name cannot be resolved (e.g. before load or no name field). */
-export const DEFAULT_DETAIL_PAGE_TITLE = "Untitled";
-
-/**
- * Default page size for search results pagination.
- * This should match one of the values in PAGE_SIZE_OPTIONS from paginationUtils.
- *
- * @remarks
- * - Default value is 20 (second option in PAGE_SIZE_OPTIONS)
- * - Can be changed by user via pagination controls
- *
- * @example
- * ```tsx
- * const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
- * ```
- */
-export const DEFAULT_PAGE_SIZE = 20;