@salesforce/webapp-template-app-react-sample-b2x-experimental 1.112.7 → 1.112.9

package/dist/force-app/main/default/webapplications/appreactsampleb2x/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/appreactsampleb2x/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/appreactsampleb2x/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/appreactsampleb2x/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/appreactsampleb2x/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/appreactsampleb2x/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;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/filters/FilterInput.tsx

@@ -1,55 +0,0 @@
-/**
- * FilterInput Component
- *
- * Renders a text input field for filter values.
- * Used for filters that don't have a picklist (affordance !== 'select').
- *
- * @param filter - Filter definition containing field path, label, and attributes
- * @param value - Current filter input value
- * @param onChange - Callback when input value changes
- *
- * @remarks
- * - Displays filter label or field path as the label
- * - Shows placeholder text from filter attributes or generates default
- * - Displays help message if available
- *
- * @example
- * ```tsx
- * <FilterInput
- *   filter={textFilter}
- *   value={filterValue}
- *   onChange={(value) => setFilterValue(value)}
- * />
- * ```
- */
-import { Input } from "../../../components/ui/input";
-import { Field, FieldLabel, FieldDescription } from "../../../components/ui/field";
-import type { Filter } from "../types/filters/filters";
-
-interface FilterInputProps {
-	filter: Filter;
-	value: string;
-	onChange: (value: string) => void;
-}
-
-export default function FilterInput({ filter, value, onChange }: FilterInputProps) {
-	return (
-		<Field>
-			<FieldLabel htmlFor={filter.targetFieldPath}>
-				{filter.label || filter.targetFieldPath}
-			</FieldLabel>
-			<Input
-				id={filter.targetFieldPath}
-				type="text"
-				value={value}
-				onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-				placeholder={
-					filter.attributes?.placeholder ||
-					`Enter ${(filter.label || filter.targetFieldPath).toLowerCase()}`
-				}
-				aria-label={filter.label || filter.targetFieldPath}
-			/>
-			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
-		</Field>
-	);
-}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/filters/FilterSelect.tsx

@@ -1,72 +0,0 @@
-/**
- * FilterSelect Component
- *
- * Renders a dropdown select field for filter values with picklist options.
- * Used for filters with affordance === 'select'.
- *
- * @param filter - Filter definition containing field path, label, and attributes
- * @param value - Currently selected filter value
- * @param options - Array of picklist values to display as options
- * @param onChange - Callback when selection changes
- *
- * @remarks
- * - Filters out invalid options (null/undefined values)
- * - Displays option label if available, otherwise uses value
- * - Shows placeholder from filter attributes or default "Select..."
- *
- * @example
- * ```tsx
- * <FilterSelect
- *   filter={selectFilter}
- *   value={selectedValue}
- *   options={picklistOptions}
- *   onChange={(value) => setSelectedValue(value)}
- * />
- * ```
- */
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../../../components/ui/select";
-import { Field, FieldLabel, FieldDescription } from "../../../components/ui/field";
-import type { Filter } from "../types/filters/filters";
-import type { PicklistValue } from "../types/filters/picklist";
-
-interface FilterSelectProps {
-	filter: Filter;
-	value: string;
-	options: PicklistValue[];
-	onChange: (value: string) => void;
-}
-
-export default function FilterSelect({ filter, value, options, onChange }: FilterSelectProps) {
-	return (
-		<Field>
-			<FieldLabel htmlFor={filter.targetFieldPath}>
-				{filter.label || filter.targetFieldPath}
-			</FieldLabel>
-			<Select value={value} onValueChange={onChange}>
-				<SelectTrigger
-					id={filter.targetFieldPath}
-					aria-label={filter.label || filter.targetFieldPath}
-				>
-					<SelectValue placeholder={filter.attributes?.placeholder || "Select..."} />
-				</SelectTrigger>
-				<SelectContent>
-					{options.map((option) => {
-						if (!option || !option.value) return null;
-						return (
-							<SelectItem key={option.value} value={option.value}>
-								{option.label || option.value}
-							</SelectItem>
-						);
-					})}
-				</SelectContent>
-			</Select>
-			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
-		</Field>
-	);
-}