@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/PropertyMap.tsx

@@ -0,0 +1,113 @@
+/**
+ * Leaflet map for property search and detail. Uses OpenStreetMap tiles (no API key).
+ * Renders one pin per property (each marker in the markers array).
+ */
+import { useMemo, useState, useEffect } from "react";
+import { MapContainer, TileLayer, Marker, Popup, useMap, AttributionControl } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Type for leaflet L when using declaration-only (no @types/leaflet)
+const Leaflet = L as {
+	divIcon: (opts: {
+		className?: string;
+		html?: string;
+		iconSize?: [number, number];
+		iconAnchor?: [number, number];
+		popupAnchor?: [number, number];
+	}) => unknown;
+};
+
+// Custom pin icon so each property shows a visible pin (no dependency on external marker images)
+const pinIcon = Leaflet.divIcon({
+	className: "property-map-pin",
+	html: `<span class="property-pin-shape" aria-hidden="true"></span>`,
+	iconSize: [28, 40],
+	iconAnchor: [14, 40],
+	popupAnchor: [0, -40],
+});
+
+export interface MapMarker {
+	lat: number;
+	lng: number;
+	label?: string;
+}
+
+interface PropertyMapProps {
+	/** Center [lat, lng] */
+	center: [number, number];
+	/** Initial zoom 1–18 */
+	zoom?: number;
+	/** Optional markers */
+	markers?: MapMarker[];
+	/** CSS class for the container (e.g. height) */
+	className?: string;
+}
+
+function MapCenterUpdater({ center, zoom = 13 }: { center: [number, number]; zoom?: number }) {
+	const map = useMap() as { setView: (center: [number, number], zoom: number) => void };
+	useEffect(() => {
+		map.setView(center, zoom);
+	}, [map, center[0], center[1], zoom]);
+	return null;
+}
+
+export default function PropertyMap({
+	center,
+	zoom = 13,
+	markers = [],
+	className = "h-[400px] w-full rounded-xl overflow-hidden",
+}: PropertyMapProps) {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	const hasMarkers = markers.length > 0;
+	const effectiveCenter = useMemo((): [number, number] => {
+		if (hasMarkers) {
+			const sum = markers.reduce((acc, m) => [acc[0] + m.lat, acc[1] + m.lng], [0, 0]);
+			return [sum[0] / markers.length, sum[1] / markers.length];
+		}
+		return center;
+	}, [center, hasMarkers, markers]);
+
+	if (!mounted || typeof window === "undefined") {
+		return (
+			<div
+				className={
+					className + " bg-muted flex items-center justify-center text-muted-foreground text-sm"
+				}
+				aria-hidden
+			>
+				Loading map…
+			</div>
+		);
+	}
+
+	return (
+		<div className={className} aria-label="Property map">
+			<MapContainer
+				center={effectiveCenter}
+				zoom={zoom}
+				scrollWheelZoom
+				attributionControl={false}
+				className="h-full w-full"
+				style={{ minHeight: 200 }}
+			>
+				<AttributionControl prefix='<a href="https://leafletjs.com/">Leaflet</a>' />
+				<MapCenterUpdater center={effectiveCenter} zoom={zoom} />
+				<TileLayer
+					attribution='Data by &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+					url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+					maxZoom={19}
+				/>
+				{markers.map((m, i) => (
+					<Marker key={`${m.lat}-${m.lng}-${i}`} position={[m.lat, m.lng]} icon={pinIcon}>
+						<Popup>{m.label ?? "Property"}</Popup>
+					</Marker>
+				))}
+			</MapContainer>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/SearchResultCard.tsx

@@ -0,0 +1,131 @@
+/**
+ * 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 "./ui/card";
+import type { Column, SearchResultRecordData } from "../types/search/searchResults";
+import { getNestedFieldValue } from "../utils/fieldUtils";
+import ResultCardFields from "./search/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>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/alerts/status-alert.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Alert, AlertDescription } from "../ui/alert";
+import { useId } from "react";
+import { AlertCircle, CheckCircle } from "lucide-react";
+
+const statusAlertVariants = cva("", {
+	variants: {
+		variant: {
+			error: "",
+			success: "",
+		},
+	},
+	defaultVariants: {
+		variant: "error",
+	},
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+	children?: React.ReactNode;
+	/** Alert variant type. @default "error" */
+	variant?: "error" | "success";
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({ children, variant = "error" }: StatusAlertProps) {
+	if (!children) return null;
+
+	const isError = variant === "error";
+	const descriptionId = useId();
+
+	return (
+		<Alert
+			variant={isError ? "destructive" : "default"}
+			className={statusAlertVariants({ variant })}
+			aria-describedby={descriptionId}
+			role={isError ? "alert" : "status"}
+		>
+			{isError ? <AlertCircle aria-hidden="true" /> : <CheckCircle aria-hidden="true" />}
+			<AlertDescription id={descriptionId}>{children}</AlertDescription>
+		</Alert>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/detail/DetailFields.tsx

@@ -0,0 +1,55 @@
+/**
+ * Alternative detail rendering: columns + record → label/value list.
+ *
+ * Use when you have list columns + record (e.g. from filters-derived columns + searchResults)
+ * and do not need the Layout API. The primary detail view (DetailPage) uses DetailForm
+ * via UiApiDetailForm (layout + GraphQL record).
+ *
+ * @param record - Record data to display
+ * @param columns - Column definitions (e.g. derived from getObjectListFilters)
+ */
+import type { Column, SearchResultRecordData } from "../../types/search/searchResults";
+import { getNestedFieldValue } from "../../utils/fieldUtils";
+
+interface DetailFieldsProps {
+	record: SearchResultRecordData;
+	columns: Column[];
+}
+
+function hasVisibleValue(value: string | number | boolean | null | undefined): boolean {
+	return value !== null && value !== undefined && value !== "";
+}
+
+export default function DetailFields({ record, columns }: DetailFieldsProps) {
+	const rows = columns.filter(
+		(col) =>
+			col?.fieldApiName && hasVisibleValue(getNestedFieldValue(record.fields, col.fieldApiName)),
+	);
+
+	if (columns.length > 0 && rows.length === 0) {
+		return (
+			<div role="status" className="text-sm text-muted-foreground py-4">
+				No field values to display
+			</div>
+		);
+	}
+
+	return (
+		<dl className="space-y-4" role="list">
+			{rows.map((column) => {
+				const fieldApiName = column.fieldApiName as string;
+				const displayValue = getNestedFieldValue(record.fields, fieldApiName);
+				return (
+					<div key={fieldApiName} className="border-b pb-4 last:border-0" role="listitem">
+						<div className="flex flex-col sm:flex-row sm:items-start gap-2">
+							<dt className="font-semibold text-sm text-muted-foreground min-w-[150px]">
+								{column.label || fieldApiName}:
+							</dt>
+							<dd className="text-sm text-foreground flex-1">{displayValue}</dd>
+						</div>
+					</div>
+				);
+			})}
+		</dl>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/detail/DetailForm.tsx

@@ -0,0 +1,146 @@
+import { useState, useCallback, useMemo, useId } from "react";
+import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
+import type { GraphQLRecordNode } from "../../api/recordListGraphQLService";
+import {
+	getDisplayValueForLayoutItemFromNode,
+	getDisplayValueForDetailFieldFromNode,
+} from "../../utils/graphQLNodeFieldUtils";
+import type { ObjectInfoMetadata } from "../../utils/formDataTransformUtils";
+import {
+	getTransformedSections,
+	type LayoutTransformContext,
+	type ObjectInfo,
+	type PicklistOption,
+	type TransformedLayoutItem,
+} from "../../utils/layoutTransformUtils";
+import { FieldValueDisplay } from "./formatted";
+import { Section } from "./Section";
+import { SectionRow } from "./SectionRow";
+
+export interface DetailFormProps {
+	layout: LayoutResponse;
+	record: GraphQLRecordNode;
+	metadata?: ObjectInfoMetadata | null;
+	objectInfo?: ObjectInfo | null;
+	lookupRecords?: Record<string, PicklistOption[] | null> | null;
+	showSectionHeaders?: boolean;
+	collapsibleSections?: boolean;
+}
+
+function FieldCell({
+	item,
+	record,
+	metadata,
+}: {
+	item: TransformedLayoutItem;
+	record: GraphQLRecordNode;
+	metadata?: ObjectInfoMetadata | null;
+}) {
+	if (!item.isField || item.apiName == null) return null;
+	const label = item.label ?? item.apiName;
+	const hasComponents = item.layoutComponentApiNames && item.layoutComponentApiNames.length > 0;
+	const layoutResult = hasComponents
+		? getDisplayValueForLayoutItemFromNode(
+				record,
+				item.layoutComponentApiNames as string[],
+				metadata,
+			)
+		: null;
+	const value = hasComponents
+		? (layoutResult?.value ?? null)
+		: getDisplayValueForDetailFieldFromNode(record, item.apiName, metadata);
+	const dataType =
+		(hasComponents ? layoutResult?.dataType : undefined) ?? item.dataType ?? undefined;
+	const labelId = useId();
+	const valueId = useId();
+	return (
+		<div
+			className="flex flex-col gap-1"
+			role="group"
+			aria-labelledby={labelId}
+			aria-describedby={valueId}
+		>
+			<dt id={labelId} className="text-sm font-medium text-muted-foreground">
+				{label}
+			</dt>
+			<dd id={valueId} className="text-sm text-foreground">
+				<FieldValueDisplay value={value} dataType={dataType} />
+			</dd>
+		</div>
+	);
+}
+
+/**
+ * Read-only detail form: layout API + record (+ optional object info) drive sections, rows, and
+ * field values. Uses layoutComponents to club multi-component items (address, Created By, etc.).
+ */
+export function DetailForm({
+	layout,
+	record,
+	metadata = null,
+	objectInfo = null,
+	lookupRecords = null,
+	showSectionHeaders = true,
+	collapsibleSections = true,
+}: DetailFormProps) {
+	const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
+
+	const recordId = (record.Id as string) ?? "";
+
+	const layoutObjectInfo = objectInfo ?? metadata;
+
+	const transformContext: LayoutTransformContext = useMemo(
+		() => ({
+			recordId,
+			objectInfo: layoutObjectInfo,
+			lookupRecords,
+			getSectionCollapsedState: (sectionId: string) => Boolean(collapsedSections[sectionId]),
+		}),
+		[recordId, layoutObjectInfo, lookupRecords, collapsedSections],
+	);
+
+	const computedSections = useMemo(
+		() => getTransformedSections(layout.sections, transformContext),
+		[layout.sections, transformContext],
+	);
+
+	const handleSectionToggle = useCallback((sectionId: string, collapsed: boolean) => {
+		setCollapsedSections((prev) => ({ ...prev, [sectionId]: collapsed }));
+	}, []);
+
+	return (
+		<div
+			className="space-y-6"
+			role="region"
+			aria-label="Record details"
+			aria-roledescription="Detail form"
+		>
+			{computedSections.map((section) => (
+				<Section
+					key={section.key}
+					sectionId={section.id}
+					titleLabel={section.heading}
+					showHeader={showSectionHeaders && section.useHeading}
+					collapsible={collapsibleSections && section.collapsible}
+					collapsed={section.collapsed}
+					onToggle={handleSectionToggle}
+				>
+					<div className="space-y-4">
+						{section.layoutRows.map((row) => (
+							<SectionRow key={row.key}>
+								{row.layoutItems.map((item) => {
+									const cellKey = `${section.key}-${row.key}-${item.apiName ?? item.key}`;
+									return item.isField ? (
+										<FieldCell key={cellKey} item={item} record={record} metadata={metadata} />
+									) : (
+										<div key={cellKey} className="min-h-[2.5rem]" aria-hidden="true" />
+									);
+								})}
+							</SectionRow>
+						))}
+					</div>
+				</Section>
+			))}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/detail/DetailHeader.tsx

@@ -0,0 +1,34 @@
+/**
+ * Back button and title for the record detail page.
+ *
+ * @param title - Record title (e.g. record name) shown next to the back control.
+ * @param onBack - Called when the user activates the back control.
+ */
+import { Button } from "../ui/button";
+import { ArrowLeft } from "lucide-react";
+
+interface DetailHeaderProps {
+	title: string;
+	onBack: () => void;
+}
+
+export default function DetailHeader({ title, onBack }: DetailHeaderProps) {
+	return (
+		<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+			<Button
+				variant="ghost"
+				onClick={onBack}
+				className="w-fit"
+				aria-label="Go back to search results"
+			>
+				<ArrowLeft className="h-4 w-4 mr-2" aria-hidden="true" />
+				Back
+			</Button>
+			{title ? (
+				<h1 className="text-xl font-semibold text-foreground truncate" id="detail-page-title">
+					{title}
+				</h1>
+			) : null}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/detail/DetailLayoutSections.tsx

@@ -0,0 +1,80 @@
+/**
+ * Alternative detail rendering: layout sections → rows → items → label/value grid.
+ *
+ * Use when you have raw Layout API response + record and do not need the full
+ * layoutTransformUtils + formDataTransformUtils pipeline. The primary detail view
+ * (DetailPage) uses DetailForm via UiApiDetailForm; use this component for other
+ * entry points that already have layout + record in hand.
+ */
+import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
+import type { SearchResultRecordData } from "../../types/search/searchResults";
+import { getNestedFieldValue } from "../../utils/fieldUtils";
+
+interface DetailLayoutSectionsProps {
+	layout: LayoutResponse;
+	record: SearchResultRecordData;
+}
+
+interface FieldEntry {
+	key: string;
+	label: string;
+	value: string | number | boolean | null;
+}
+
+function getSectionFieldEntries(
+	section: LayoutResponse["sections"][number],
+	record: SearchResultRecordData,
+): FieldEntry[] {
+	const entries: FieldEntry[] = [];
+	section.layoutRows.forEach((row, rowIdx) => {
+		row.layoutItems.forEach((item, itemIdx) => {
+			item.layoutComponents.forEach((comp, compIdx) => {
+				if (comp.componentType !== "Field" || !comp.apiName) return;
+				const value = getNestedFieldValue(record.fields, comp.apiName);
+				const label = comp.label ?? item.label;
+				entries.push({
+					key: `${section.id}-${rowIdx}-${itemIdx}-${comp.apiName ?? compIdx}`,
+					label: label || comp.apiName,
+					value: value ?? null,
+				});
+			});
+		});
+	});
+	return entries;
+}
+
+export default function DetailLayoutSections({ layout, record }: DetailLayoutSectionsProps) {
+	return (
+		<div className="space-y-8" role="region" aria-label="Record details">
+			{layout.sections.map((section) => {
+				const entries = getSectionFieldEntries(section, record);
+				if (entries.length === 0) return null;
+
+				return (
+					<section
+						key={section.id}
+						className="space-y-4"
+						aria-labelledby={section.useHeading ? `section-${section.id}` : undefined}
+					>
+						{section.useHeading && section.heading ? (
+							<h3
+								id={`section-${section.id}`}
+								className="text-base font-semibold text-foreground border-b pb-2"
+							>
+								{section.heading}
+							</h3>
+						) : null}
+						<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
+							{entries.map(({ key, label, value }) => (
+								<div key={key} className="flex flex-col gap-1">
+									<dt className="text-sm font-medium text-muted-foreground">{label}</dt>
+									<dd className="text-sm text-foreground">{value || "—"}</dd>
+								</div>
+							))}
+						</dl>
+					</section>
+				);
+			})}
+		</div>
+	);
+}