@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/forms/filters-form.tsx

@@ -1,114 +0,0 @@
-import { FieldGroup } from "../../../../components/ui/field";
-import { StatusAlert } from "../../../../components/alerts/status-alert";
-import { CardLayout } from "../../../../components/layouts/card-layout";
-import { SubmitButton } from "./submit-button";
-import { Button } from "../../../../components/ui/button";
-import { useFormContext } from "../../hooks/form";
-import { useId, useEffect, useRef } from "react";
-
-const SUCCESS_AUTO_DISMISS_DELAY = 3000;
-
-interface FiltersFormProps extends Omit<React.ComponentProps<"form">, "onSubmit"> {
-	title: string;
-	description?: string;
-	error?: React.ReactNode;
-	success?: React.ReactNode;
-	submit: {
-		text: string;
-		loadingText?: string;
-	};
-	reset?: {
-		text: string;
-		onReset: () => void;
-	};
-	onSuccessDismiss?: () => void;
-}
-
-/**
- * Wrapper component that provides consistent layout and error/success alert positioning
- * for all filter forms.
- */
-export function FiltersForm({
-	id: providedId,
-	title,
-	description,
-	error,
-	success,
-	children,
-	submit,
-	reset,
-	onSuccessDismiss,
-	...props
-}: FiltersFormProps) {
-	const form = useFormContext();
-	const generatedId = useId();
-	const id = providedId ?? generatedId;
-
-	const isSubmittingSelector = (state: { isSubmitting: boolean }) => state.isSubmitting;
-	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(() => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current);
-			timeoutRef.current = null;
-		}
-
-		if (success && onSuccessDismiss) {
-			timeoutRef.current = setTimeout(() => {
-				onSuccessDismiss();
-				timeoutRef.current = null;
-			}, SUCCESS_AUTO_DISMISS_DELAY);
-		}
-
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, [success, onSuccessDismiss]);
-
-	return (
-		<CardLayout title={title} description={description}>
-			<div className="space-y-6">
-				{error && <StatusAlert variant="error">{error}</StatusAlert>}
-				{success && <StatusAlert variant="success">{success}</StatusAlert>}
-
-				<form
-					id={id}
-					onSubmit={(e) => {
-						e.preventDefault();
-						e.stopPropagation();
-						form.handleSubmit();
-					}}
-					{...props}
-				>
-					<FieldGroup>{children}</FieldGroup>
-					<div className="flex flex-col sm:flex-row gap-2 pt-4">
-						<SubmitButton
-							form={id}
-							label={submit.text}
-							loadingLabel={submit.loadingText}
-							className="flex-1"
-						/>
-						{reset && (
-							<form.Subscribe selector={isSubmittingSelector}>
-								{(isSubmitting: boolean) => (
-									<Button
-										type="button"
-										variant="outline"
-										onClick={reset.onReset}
-										className="flex-1"
-										disabled={isSubmitting}
-									>
-										{reset.text}
-									</Button>
-								)}
-							</form.Subscribe>
-						)}
-					</div>
-				</form>
-			</div>
-		</CardLayout>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/forms/submit-button.tsx

@@ -1,47 +0,0 @@
-import { Button } from "../../../../components/ui/button";
-import { Spinner } from "../../../../components/ui/spinner";
-import { cn } from "../../../../lib/utils";
-import { useFormContext } from "../../hooks/form";
-
-interface SubmitButtonProps extends Omit<React.ComponentProps<typeof Button>, "type" | "disabled"> {
-	/** Button text when not submitting */
-	label: string;
-	/** Button text while submitting */
-	loadingLabel?: string;
-	/** Form id to associate with (for buttons outside form element) */
-	form?: string;
-}
-
-const isSubmittingSelector = (state: { isSubmitting: boolean }) => state.isSubmitting;
-
-/**
- * Submit button that subscribes to form submission state.
- * Disables interaction during submission and provides visual feedback.
- */
-export function SubmitButton({
-	label,
-	loadingLabel = "Applying…",
-	className,
-	form: formId,
-	...props
-}: SubmitButtonProps) {
-	const form = useFormContext();
-	return (
-		<form.Subscribe selector={isSubmittingSelector}>
-			{(isSubmitting: boolean) => (
-				<Button
-					type="submit"
-					form={formId}
-					className={cn("w-full", className)}
-					disabled={isSubmitting}
-					aria-label={isSubmitting ? loadingLabel : label}
-					aria-busy={isSubmitting}
-					{...props}
-				>
-					{isSubmitting && <Spinner className="mr-2" aria-hidden="true" />}
-					<span aria-live="polite">{isSubmitting ? loadingLabel : label}</span>
-				</Button>
-			)}
-		</form.Subscribe>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/search/GlobalSearchInput.tsx

@@ -1,114 +0,0 @@
-/**
- * GlobalSearchInput Component
- *
- * Search input with two actions: Search (navigate to results for query) and
- * Browse All (navigate to same results UI with all records for the object).
- */
-import { useState, useCallback, useMemo, useId } from "react";
-import type { KeyboardEvent, ChangeEvent } from "react";
-import { useNavigate } from "react-router";
-import { Card, CardContent } from "../../../../components/ui/card";
-import { Input } from "../../../../components/ui/input";
-import { Button } from "../../../../components/ui/button";
-import { Search } from "lucide-react";
-import { OBJECT_API_NAMES } from "../../constants";
-import { useObjectInfoBatch } from "../../hooks/useObjectInfoBatch";
-
-const BROWSE_SEGMENT = "browse__all";
-
-const FALLBACK_LABEL_PLURAL = "records";
-
-export function GlobalSearchInput() {
-	const [searchQuery, setSearchQuery] = useState("");
-	const navigate = useNavigate();
-	const inputId = useId();
-	const searchButtonId = useId();
-	const browseButtonId = useId();
-	const inputDescriptionId = `${inputId}-description`;
-	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
-	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? FALLBACK_LABEL_PLURAL;
-
-	const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-		setSearchQuery(e.target.value);
-	}, []);
-
-	const handleSearch = useCallback(() => {
-		const trimmed = searchQuery.trim();
-		if (trimmed) {
-			navigate(`/global-search/${encodeURIComponent(trimmed)}`);
-		}
-	}, [searchQuery, navigate]);
-
-	const handleBrowseAll = useCallback(() => {
-		navigate(`/global-search/${BROWSE_SEGMENT}`);
-	}, [navigate]);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent<HTMLInputElement>) => {
-			if (e.key === "Enter") {
-				e.preventDefault();
-				handleSearch();
-			}
-		},
-		[handleSearch],
-	);
-
-	const isSearchDisabled = useMemo(() => !searchQuery.trim(), [searchQuery]);
-
-	return (
-		<div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-			<Card className="w-full">
-				<CardContent className="pt-6">
-					<div className="flex flex-col sm:flex-row gap-3">
-						<div className="flex-1 relative">
-							<Search
-								className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-600"
-								aria-hidden="true"
-							/>
-							<Input
-								id={inputId}
-								type="search"
-								placeholder={`Search for ${labelPlural}`}
-								value={searchQuery}
-								onChange={handleInputChange}
-								onKeyDown={handleKeyDown}
-								className="pl-10"
-								aria-label={`Search for ${labelPlural}`}
-								aria-describedby={inputDescriptionId}
-							/>
-							<p id={inputDescriptionId} className="sr-only">
-								Enter your search query and press Enter or click Search. Or click Browse All to see
-								all {labelPlural}.
-							</p>
-						</div>
-
-						<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
-							<Button
-								id={searchButtonId}
-								onClick={handleSearch}
-								disabled={isSearchDisabled}
-								className="w-full sm:w-auto"
-								aria-label="Search"
-								aria-describedby={inputDescriptionId}
-								variant="default"
-							>
-								<Search className="h-4 w-4 mr-2" aria-hidden="true" />
-								Search
-							</Button>
-							<Button
-								id={browseButtonId}
-								variant="outline"
-								onClick={handleBrowseAll}
-								className="w-full sm:w-auto"
-								aria-label={`Browse all ${labelPlural}`}
-								aria-describedby={inputDescriptionId}
-							>
-								Browse All {labelPlural}
-							</Button>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/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/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/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/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/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/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/search/SearchResultCard.tsx

@@ -1,136 +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 { 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();
-
-	if (!record || !record.id) {
-		return null;
-	}
-
-	if (!columns || !Array.isArray(columns) || columns.length === 0) {
-		return null;
-	}
-
-	if (!record.fields || typeof record.fields !== "object") {
-		return null;
-	}
-
-	const detailPath = useMemo(
-		() => `/object/${objectApiName?.trim() || OBJECT_API_NAMES[0]}/${record.id}`,
-		[record.id, objectApiName],
-	);
-
-	const handleClick = useCallback(() => {
-		if (record.id) navigate(detailPath);
-	}, [record.id, detailPath, navigate]);
-
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				handleClick();
-			}
-		},
-		[handleClick],
-	);
-
-	const primaryField = useMemo(() => {
-		return (
-			columns.find(
-				(col) =>
-					col &&
-					col.fieldApiName &&
-					(col.fieldApiName.toLowerCase() === "name" ||
-						col.fieldApiName.toLowerCase().includes("name")),
-			) ||
-			columns[0] ||
-			null
-		);
-	}, [columns]);
-
-	const primaryValue = useMemo(() => {
-		return primaryField && primaryField.fieldApiName
-			? getNestedFieldValue(record.fields, primaryField.fieldApiName) || "Untitled"
-			: "Untitled";
-	}, [primaryField, record.fields]);
-
-	const secondaryColumns = useMemo(() => {
-		return columns.filter(
-			(col) => col && col.fieldApiName && col.fieldApiName !== primaryField?.fieldApiName,
-		);
-	}, [columns, primaryField]);
-
-	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-${record.id}-description`}
-		>
-			<CardHeader>
-				<CardTitle className="text-lg" id={`result-${record.id}-title`}>
-					{primaryValue}
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div id={`result-${record.id}-description`} className="sr-only">
-					Search result: {primaryValue}
-				</div>
-				<ResultCardFields
-					record={record}
-					columns={secondaryColumns}
-					excludeFieldApiName={primaryField?.fieldApiName}
-				/>
-			</CardContent>
-		</Card>
-	);
-}