@salesforce/ui-bundle-template-feature-react-global-search 1.117.2

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/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/uiBundles/feature-react-global-search/src/features/global-search/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/FieldValueDisplay";
+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;
+}) {
+	const labelId = useId();
+	const valueId = useId();
+	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;
+	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/uiBundles/feature-react-global-search/src/features/global-search/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 "../../../../components/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/uiBundles/feature-react-global-search/src/features/global-search/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>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/components/detail/Section.tsx

@@ -0,0 +1,108 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SectionProps {
+	sectionId: string;
+	titleLabel: string;
+	showHeader: boolean;
+	collapsible: boolean;
+	/** When provided, section is controlled (parent owns state). When undefined, section is uncontrolled (internal state). */
+	collapsed?: boolean;
+	onToggle?: (sectionId: string, collapsed: boolean) => void;
+	children: ReactNode;
+}
+
+/**
+ * Section block with optional heading and collapsible content. Controlled when
+ * `collapsed` is passed; uncontrolled otherwise. Accessible: aria-expanded, aria-controls, keyboard (Enter/Space).
+ */
+export function Section({
+	sectionId,
+	titleLabel,
+	showHeader,
+	collapsible,
+	collapsed: controlledCollapsed,
+	onToggle,
+	children,
+}: SectionProps) {
+	const [internalCollapsed, setInternalCollapsed] = useState(false);
+	const isControlled = controlledCollapsed !== undefined;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+
+	const warnedUncontrolledRef = useRef(false);
+	useEffect(() => {
+		if (
+			process.env.NODE_ENV === "development" &&
+			onToggle != null &&
+			!isControlled &&
+			!warnedUncontrolledRef.current
+		) {
+			warnedUncontrolledRef.current = true;
+			console.warn(
+				"[Section] onToggle is passed but collapsed is undefined; section is uncontrolled. Pass collapsed to control from parent.",
+			);
+		}
+	}, [onToggle, isControlled]);
+
+	const contentId = `section-content-${sectionId}`;
+	const headerId = `section-header-${sectionId}`;
+
+	const handleToggle = useCallback(() => {
+		const next = !collapsed;
+		if (!isControlled) setInternalCollapsed(next);
+		onToggle?.(sectionId, next);
+	}, [collapsed, isControlled, onToggle, sectionId]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (!collapsible) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleToggle();
+			}
+		},
+		[collapsible, handleToggle],
+	);
+
+	return (
+		<section
+			className="border-b border-border last:border-b-0 pb-6 last:pb-0"
+			aria-labelledby={showHeader ? headerId : undefined}
+		>
+			{showHeader && titleLabel && (
+				<h3 id={headerId} className="text-base font-semibold text-foreground mb-4">
+					{collapsible ? (
+						<button
+							type="button"
+							className="flex items-center gap-2 w-full text-left hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
+							onClick={handleToggle}
+							onKeyDown={handleKeyDown}
+							aria-expanded={!collapsed}
+							aria-controls={contentId}
+							aria-label={`${titleLabel}, ${collapsed ? "expand" : "collapse"} section`}
+							aria-roledescription="Section toggle"
+						>
+							{collapsed ? (
+								<ChevronRight className="h-4 w-4 shrink-0" aria-hidden />
+							) : (
+								<ChevronDown className="h-4 w-4 shrink-0" aria-hidden />
+							)}
+							<span>{titleLabel}</span>
+						</button>
+					) : (
+						<span className="block">{titleLabel}</span>
+					)}
+				</h3>
+			)}
+			<div
+				id={contentId}
+				className={showHeader && collapsible ? "mt-2" : ""}
+				aria-hidden={collapsible ? collapsed : undefined}
+				hidden={collapsible && collapsed}
+			>
+				{children}
+			</div>
+		</section>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/components/detail/SectionRow.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export interface SectionRowProps {
+	children: ReactNode;
+}
+
+/**
+ * One row of the detail form: definition list (dl) with two-column grid. Each child
+ * is a layout item (field cell or placeholder) from the layout API row.
+ */
+export function SectionRow({ children }: SectionRowProps) {
+	return (
+		<dl
+			className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 sm:gap-y-2"
+			aria-label="Row of fields"
+		>
+			{children}
+		</dl>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/components/detail/UiApiDetailForm.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo } from "react";
+import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
+import { useRecordDetailLayout } from "../../hooks/useRecordDetailLayout";
+import { toRecordDisplayNameMetadata } from "../../utils/fieldUtils";
+import { DetailForm } from "./DetailForm";
+import type { ObjectInfoResult } from "../../types/objectInfo/objectInfo";
+import type { ObjectInfoMetadata } from "../../utils/formDataTransformUtils";
+import type { ObjectInfo } from "../../utils/layoutTransformUtils";
+import type { GraphQLRecordNode } from "../../api/recordListGraphQLService";
+import { getGraphQLRecordDisplayName } from "../../utils/graphQLNodeFieldUtils";
+
+export interface UiApiDetailFormProps {
+	objectApiName: string;
+	recordId: string;
+	recordTypeId?: string | null;
+	/** When provided, skips fetching and uses this layout (controlled mode). */
+	layout?: LayoutResponse | null;
+	/** When provided with layout, skips fetching and uses this record (controlled mode). */
+	record?: GraphQLRecordNode | null;
+	/** When provided, skips fetching and uses this object metadata (controlled mode). */
+	objectMetadata?: ObjectInfoResult | null;
+	/** When true, shows a loading spinner until layout and record are ready. */
+	loadsWithSpinner?: boolean;
+	/** Reserved for future edit mode; no-op in read-only. */
+	hideFooter?: boolean;
+	/** Callback when layout and record are ready (e.g. for parent to show record title). */
+	onRecordDataUpdate?: (payload: { recordName: string; record: unknown }) => void;
+}
+
+/**
+ * Entry component for the record detail view. When layout/record are not provided,
+ * fetches them via useRecordDetailLayout. Shows optional loading spinner and renders
+ * a read-only DetailForm when ready. Mirrors LWC uiApiDetailForm (read-only).
+ *
+ * Passes objectInfo (mapped from object metadata) to DetailForm for layout transform.
+ * lookupRecords (picklist/lookup options) are not fetched in this flow; DetailForm
+ * accepts them when provided (e.g. from a future picklist API). Omit for read-only
+ * display without API-driven picklist labels.
+ */
+export function UiApiDetailForm({
+	objectApiName,
+	recordId,
+	recordTypeId = null,
+	layout: layoutProp,
+	record: recordProp,
+	objectMetadata: objectMetadataProp,
+	loadsWithSpinner = false,
+	onRecordDataUpdate,
+}: UiApiDetailFormProps) {
+	// Memoize so hook dependency doesn't change every render (avoids duplicate fetches)
+	const initialData = useMemo(
+		() =>
+			layoutProp && recordProp && objectMetadataProp
+				? {
+						layout: layoutProp,
+						record: recordProp,
+						objectMetadata: objectMetadataProp,
+					}
+				: null,
+		[layoutProp, recordProp, objectMetadataProp],
+	);
+
+	const fetched = useRecordDetailLayout({
+		objectApiName,
+		recordId,
+		recordTypeId,
+		initialData,
+	});
+
+	const layout = layoutProp ?? fetched.layout;
+	const record = recordProp ?? fetched.record;
+	const metadata = objectMetadataProp ?? fetched.objectMetadata;
+	const loading = layoutProp == null || recordProp == null ? fetched.loading : false;
+	const error = layoutProp == null || recordProp == null ? fetched.error : null;
+
+	const objectInfo: ObjectInfo | null = useMemo(() => {
+		if (!metadata?.fields) return null;
+		const apiName = metadata.ApiName;
+		return {
+			apiName,
+			fields: Object.fromEntries(
+				Object.entries(metadata.fields).map(([name, f]) => [
+					name,
+					{
+						compoundFieldName: f.compoundFieldName ?? undefined,
+						dataType: f.dataType ?? "",
+					},
+				]),
+			),
+		};
+	}, [metadata]);
+
+	const isReadyToRender = Boolean(layout && record && layout.sections?.length);
+
+	const showSpinner = !isReadyToRender && loadsWithSpinner && loading;
+
+	useEffect(() => {
+		if (!record || !onRecordDataUpdate || !isReadyToRender) return;
+		onRecordDataUpdate({
+			recordName: getGraphQLRecordDisplayName(record, toRecordDisplayNameMetadata(metadata)),
+			record,
+		});
+	}, [record, metadata, onRecordDataUpdate, isReadyToRender]);
+
+	if (showSpinner) {
+		return (
+			<div
+				className="min-h-[80px] flex items-center justify-center"
+				role="status"
+				aria-live="polite"
+				aria-label="Loading record details"
+			>
+				<span className="sr-only">Loading record details</span>
+				<div
+					className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"
+					aria-hidden
+				/>
+			</div>
+		);
+	}
+
+	if (error || !layout || !record) {
+		return null;
+	}
+
+	if (!isReadyToRender) {
+		return null;
+	}
+
+	return (
+		<DetailForm
+			layout={layout}
+			record={record}
+			metadata={metadata as ObjectInfoMetadata}
+			objectInfo={objectInfo}
+			showSectionHeaders
+			collapsibleSections
+		/>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/components/detail/formatted/FieldValueDisplay.tsx

@@ -0,0 +1,73 @@
+/**
+ * Picks formatter by dataType (Address, Phone, Url, Email) or plain text. Empty values show "—" with a11y label.
+ */
+import { FormattedAddress } from "./FormattedAddress";
+import { FormattedEmail } from "./FormattedEmail";
+import { FormattedPhone } from "./FormattedPhone";
+import { FormattedText } from "./FormattedText";
+import { FormattedUrl } from "./FormattedUrl";
+
+/** Salesforce UI API dataType values that have dedicated formatters. */
+const DATA_TYPES = {
+	Address: "Address",
+	Email: "Email",
+	Phone: "Phone",
+	Url: "Url",
+} as const;
+
+/** Normalize dataType to canonical casing so "PHONE" / "phone" match Phone, etc. */
+function normalizeDataType(dataType: string | undefined): string | undefined {
+	if (dataType == null || dataType === "") return dataType;
+	const lower = dataType.toLowerCase();
+	const canonical: Record<string, string> = {
+		phone: DATA_TYPES.Phone,
+		email: DATA_TYPES.Email,
+		url: DATA_TYPES.Url,
+		address: DATA_TYPES.Address,
+	};
+	return canonical[lower] ?? dataType;
+}
+
+export interface FieldValueDisplayProps {
+	/** Resolved display value (string, number, boolean, or null). */
+	value: string | number | boolean | null | undefined;
+	/** Field dataType from object info (e.g. Phone, Email, Url, Address). */
+	dataType?: string;
+	className?: string;
+}
+
+const DEFAULT_CLASS = "text-sm text-foreground";
+const LINK_CLASS =
+	"text-sm text-foreground text-primary underline underline-offset-2 hover:opacity-80";
+
+export function FieldValueDisplay({
+	value,
+	dataType,
+	className = DEFAULT_CLASS,
+}: FieldValueDisplayProps) {
+	const str = value || null;
+
+	if (str === null) {
+		return (
+			<span className={className} aria-label="No value">
+				—
+			</span>
+		);
+	}
+
+	const linkClassName = className === DEFAULT_CLASS ? LINK_CLASS : className;
+	const normalizedType = normalizeDataType(dataType);
+
+	switch (normalizedType) {
+		case DATA_TYPES.Address:
+			return <FormattedAddress value={str as string} className={linkClassName} />;
+		case DATA_TYPES.Phone:
+			return <FormattedPhone value={str as string} className={linkClassName} />;
+		case DATA_TYPES.Url:
+			return <FormattedUrl value={str as string} className={linkClassName} />;
+		case DATA_TYPES.Email:
+			return <FormattedEmail value={str as string} className={linkClassName} />;
+		default:
+			return <FormattedText value={value} className={className} />;
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/components/detail/formatted/FormattedAddress.tsx

@@ -0,0 +1,29 @@
+/** Address as link to Google Maps search. External link: target _blank, rel noopener noreferrer. */
+
+const GOOGLE_MAPS_SEARCH_BASE = "https://www.google.com/maps/search/?api=1&query=";
+
+export interface FormattedAddressProps {
+	/** Full address string (e.g. "10 Main Rd.\nNew York, NY 31349\nUSA"). */
+	value: string;
+	className?: string;
+}
+
+export function FormattedAddress({ value, className }: FormattedAddressProps) {
+	if (!value || !value.trim()) return null;
+	const url = GOOGLE_MAPS_SEARCH_BASE + encodeURIComponent(value.trim());
+	return (
+		<a
+			href={url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className={className}
+			aria-label="Open address in Google Maps"
+		>
+			{value.split("\n").map((line, i) => (
+				<span key={i} className="block">
+					{line}
+				</span>
+			))}
+		</a>
+	);
+}