@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/formatted/FormattedEmail.tsx

@@ -0,0 +1,17 @@
+/** Email as mailto: link. */
+
+export interface FormattedEmailProps {
+	value: string;
+	className?: string;
+}
+
+export function FormattedEmail({ value, className }: FormattedEmailProps) {
+	const str = (value || "").trim();
+	if (!str) return null;
+	const href = `mailto:${encodeURIComponent(str)}`;
+	return (
+		<a href={href} className={className} aria-label={`Email ${str}`}>
+			{str}
+		</a>
+	);
+}

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

@@ -0,0 +1,24 @@
+/** Phone value as tel: link for dialer/VoIP. */
+
+export interface FormattedPhoneProps {
+	value: string;
+	className?: string;
+}
+
+/** Normalizes value for tel: (digits and + only). */
+function telHref(value: string): string {
+	const cleaned = value.replace(/[^\d+]/g, "");
+	return cleaned ? `tel:${cleaned}` : "#";
+}
+
+export function FormattedPhone({ value, className }: FormattedPhoneProps) {
+	if (!value) return null;
+	const trimmed = (value || "").trim();
+	const href = telHref(trimmed);
+	if (href === "#") return <span className={className}>{trimmed}</span>;
+	return (
+		<a href={href} className={className} aria-label={`Call ${trimmed}`}>
+			{trimmed}
+		</a>
+	);
+}

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

@@ -0,0 +1,11 @@
+/** Plain-text field value when dataType has no dedicated formatter. */
+
+export interface FormattedTextProps {
+	value: string | number | boolean | null | undefined;
+	className?: string;
+}
+
+export function FormattedText({ value, className }: FormattedTextProps) {
+	if (!value) return null;
+	return <span className={className}>{value as string}</span>;
+}

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

@@ -0,0 +1,29 @@
+/** URL as external link (new tab, noopener noreferrer). Falls back to plain text if not http(s). */
+
+import { isAllowedLinkUrl } from "../../../utils/linkUtils";
+
+export interface FormattedUrlProps {
+	value: string;
+	className?: string;
+	/** Optional display text; defaults to the URL. */
+	displayText?: string;
+}
+
+export function FormattedUrl({ value, className, displayText }: FormattedUrlProps) {
+	const str = (value || "").trim();
+	if (!str) return null;
+	const href = str.startsWith("http://") || str.startsWith("https://") ? str : `https://${str}`;
+	if (!isAllowedLinkUrl(href)) return <span className={className}>{str}</span>;
+	const label = displayText ?? str;
+	return (
+		<a
+			href={href}
+			target="_blank"
+			rel="noopener noreferrer"
+			className={className}
+			aria-label={`Open link in new tab: ${label}`}
+		>
+			{label}
+		</a>
+	);
+}

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

@@ -0,0 +1,54 @@
+/**
+ * FilterField Component
+ *
+ * Wrapper component that renders the appropriate filter input type based on filter affordance.
+ * Routes to FilterInput for text fields or FilterSelect for picklist fields.
+ *
+ * @param filter - Filter definition containing field path, label, and affordance
+ * @param value - Current filter value
+ * @param picklistValues - Array of picklist options (for select fields)
+ * @param onChange - Callback when filter value changes
+ *
+ * @remarks
+ * - Automatically determines input type from filter.affordance
+ * - Returns null if filter is invalid
+ * - Defaults to text input if affordance is not 'select'
+ *
+ * @example
+ * ```tsx
+ * <FilterField
+ *   filter={filter}
+ *   value={filterValue}
+ *   picklistValues={picklistOptions}
+ *   onChange={(value) => setFilterValue(value)}
+ * />
+ * ```
+ */
+import FilterInput from "./FilterInput";
+import FilterSelect from "./FilterSelect";
+import type { Filter } from "../../types/filters/filters";
+import type { PicklistValue } from "../../types/filters/picklist";
+
+interface FilterFieldProps {
+	filter: Filter;
+	value: string;
+	picklistValues: PicklistValue[];
+	onChange: (value: string) => void;
+}
+
+export default function FilterField({ filter, value, picklistValues, onChange }: FilterFieldProps) {
+	// Guard against invalid filter objects
+	if (!filter || !filter.targetFieldPath) {
+		return null;
+	}
+
+	const affordance = filter.affordance?.toLowerCase() || "";
+
+	if (affordance === "select") {
+		const options = picklistValues || [];
+		return <FilterSelect filter={filter} value={value} options={options} onChange={onChange} />;
+	}
+
+	// Default to text input
+	return <FilterInput filter={filter} value={value} onChange={onChange} />;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * 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/uiBundles/feature-react-global-search/src/features/global-search/components/filters/FilterSelect.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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>
+	);
+}

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

@@ -0,0 +1,380 @@
+/**
+ * FiltersPanel Component
+ *
+ * Displays a panel of filter inputs for refining search results.
+ * Supports both text inputs and select dropdowns based on filter affordance.
+ *
+ * @param filters - Array of filter definitions to display
+ * @param picklistValues - Record of picklist values keyed by field path
+ * @param loading - Whether filters are currently loading
+ * @param onApplyFilters - Callback when filters are applied, receives filter values object
+ *
+ * @remarks
+ * - Automatically initializes filter values from defaultValues
+ * - Shows loading skeleton while filters are being fetched
+ * - Supports "Apply Filters" and "Reset" actions
+ * - Uses TanStack Form for form state management (similar to Login page)
+ * - Uses FiltersForm wrapper for consistent UX/UI (similar to AuthForm pattern)
+ *
+ * @example
+ * ```tsx
+ * <FiltersPanel
+ *   filters={filters}
+ *   picklistValues={picklistValues}
+ *   loading={false}
+ *   onApplyFilters={(values) => applyFilters(values)}
+ * />
+ * ```
+ */
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../../../components/ui/card";
+import { Skeleton } from "../../../../components/ui/skeleton";
+import { FiltersForm } from "../forms/filters-form";
+import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
+import { useAppForm, validateRangeValues } from "../../hooks/form";
+import type { Filter, FilterCriteria } from "../../types/filters/filters";
+import type { PicklistValue } from "../../types/filters/picklist";
+import { parseFilterValue } from "../../utils/filterUtils";
+import { sanitizeFilterValue } from "../../utils/sanitizationUtils";
+import { getFormValueByPath } from "../../utils/formUtils";
+
+interface FiltersPanelProps {
+	filters: Filter[];
+	picklistValues: Record<string, PicklistValue[]>;
+	loading: boolean;
+	objectApiName: string;
+	onApplyFilters: (filterCriteria: FilterCriteria[]) => void;
+}
+
+export default function FiltersPanel({
+	filters,
+	picklistValues,
+	loading,
+	objectApiName,
+	onApplyFilters,
+}: FiltersPanelProps) {
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitSuccess, setSubmitSuccess] = useState<string | null>(null);
+
+	const defaultValues = useMemo(() => {
+		if (!filters || !Array.isArray(filters)) {
+			return {};
+		}
+
+		const values: Record<string, string> = {};
+		filters.forEach((filter) => {
+			if (filter && filter.targetFieldPath) {
+				const affordance = filter.affordance?.toLowerCase() || "";
+
+				if (affordance === "range") {
+					const minFieldName = `${filter.targetFieldPath}_min`;
+					const maxFieldName = `${filter.targetFieldPath}_max`;
+
+					if (filter.defaultValues && filter.defaultValues.length >= 2) {
+						values[minFieldName] = filter.defaultValues[0] || "";
+						values[maxFieldName] = filter.defaultValues[1] || "";
+					} else {
+						values[minFieldName] = "";
+						values[maxFieldName] = "";
+					}
+				} else {
+					if (filter.defaultValues && filter.defaultValues.length > 0) {
+						values[filter.targetFieldPath] = filter.defaultValues[0];
+					} else {
+						values[filter.targetFieldPath] = "";
+					}
+				}
+			}
+		});
+		return values;
+	}, [filters]);
+
+	const form = useAppForm({
+		defaultValues,
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSubmitSuccess(null);
+			try {
+				const filterCriteria: FilterCriteria[] = [];
+
+				for (const filter of filters) {
+					if (!filter || !filter.targetFieldPath) {
+						continue;
+					}
+
+					const affordance = filter.affordance?.toLowerCase() || "";
+
+					if (affordance === "range") {
+						const minFieldName = `${filter.targetFieldPath}_min`;
+						const maxFieldName = `${filter.targetFieldPath}_max`;
+						const minValueRaw = value[minFieldName] || "";
+						const maxValueRaw = value[maxFieldName] || "";
+
+						const minValue = sanitizeFilterValue(minValueRaw);
+						const maxValue = sanitizeFilterValue(maxValueRaw);
+
+						if (minValue && maxValue) {
+							const rangeError = validateRangeValues(minValue, maxValue);
+							if (rangeError) {
+								setSubmitError(rangeError);
+								return;
+							}
+						}
+
+						if (minValue) {
+							const parsedMin = parseFilterValue(minValue);
+							if (parsedMin !== "") {
+								filterCriteria.push({
+									objectApiName,
+									fieldPath: filter.targetFieldPath,
+									operator: "gte",
+									values: [parsedMin],
+								});
+							}
+						}
+
+						if (maxValue) {
+							const parsedMax = parseFilterValue(maxValue);
+							if (parsedMax !== "") {
+								filterCriteria.push({
+									objectApiName,
+									fieldPath: filter.targetFieldPath,
+									operator: "lte",
+									values: [parsedMax],
+								});
+							}
+						}
+					} else {
+						const fieldValueRaw =
+							getFormValueByPath(value as Record<string, unknown>, filter.targetFieldPath) || "";
+						const fieldValue = sanitizeFilterValue(fieldValueRaw);
+
+						if (fieldValue) {
+							if (affordance === "select") {
+								filterCriteria.push({
+									objectApiName,
+									fieldPath: filter.targetFieldPath,
+									operator: "eq",
+									values: [fieldValue],
+								});
+							} else {
+								const likeValue = `%${fieldValue}%`;
+								filterCriteria.push({
+									objectApiName,
+									fieldPath: filter.targetFieldPath,
+									operator: "like",
+									values: [likeValue],
+								});
+							}
+						}
+					}
+				}
+
+				if (filterCriteria.length === 0) {
+					setSubmitSuccess("No filters applied. Showing all results.");
+				} else {
+					setSubmitSuccess("Filters applied successfully");
+				}
+
+				onApplyFilters(filterCriteria);
+			} catch (err) {
+				const errorMessage = err instanceof Error ? err.message : "Failed to apply filters";
+				setSubmitError(errorMessage);
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	const previousDefaultValuesRef = useRef<Record<string, string>>({});
+	const previousLoadingRef = useRef<boolean>(true);
+
+	useEffect(() => {
+		const loadingJustCompleted = previousLoadingRef.current && !loading;
+		const defaultValuesChanged =
+			JSON.stringify(previousDefaultValuesRef.current) !== JSON.stringify(defaultValues);
+
+		if (loadingJustCompleted && defaultValues && Object.keys(defaultValues).length > 0) {
+			form.reset(defaultValues);
+			previousDefaultValuesRef.current = defaultValues;
+		} else if (defaultValuesChanged && !loading && Object.keys(defaultValues).length > 0) {
+			form.reset(defaultValues);
+			previousDefaultValuesRef.current = defaultValues;
+		}
+
+		previousLoadingRef.current = loading;
+	}, [loading, defaultValues, form]);
+
+	const handleSuccessDismiss = useCallback(() => {
+		setSubmitSuccess(null);
+	}, []);
+
+	const handleReset = useCallback(() => {
+		if (!filters || !Array.isArray(filters)) {
+			form.reset();
+			onApplyFilters([]);
+			setSubmitError(null);
+			setSubmitSuccess(null);
+			return;
+		}
+
+		const resetValues: Record<string, string> = {};
+		filters.forEach((filter) => {
+			if (filter && filter.targetFieldPath) {
+				const affordance = filter.affordance?.toLowerCase() || "";
+
+				if (affordance === "range") {
+					resetValues[`${filter.targetFieldPath}_min`] = "";
+					resetValues[`${filter.targetFieldPath}_max`] = "";
+				} else {
+					resetValues[filter.targetFieldPath] = "";
+				}
+			}
+		});
+		form.reset(resetValues);
+		onApplyFilters([]);
+		setSubmitError(null);
+		setSubmitSuccess(null);
+	}, [filters, onApplyFilters, form]);
+
+	if (loading) {
+		return (
+			<Card className="w-full" role="region" aria-label="Filters panel">
+				<CardHeader>
+					<CardTitle>Filters</CardTitle>
+				</CardHeader>
+				<CardContent
+					className="space-y-4"
+					role="status"
+					aria-live="polite"
+					aria-label="Loading filters"
+				>
+					<span className="sr-only">Loading filters</span>
+					{[1, 2, 3].map((i) => (
+						<div key={i} className="space-y-2" aria-hidden="true">
+							<Skeleton className="h-4 w-24" />
+							<Skeleton className="h-9 w-full" />
+						</div>
+					))}
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (!filters || !Array.isArray(filters) || filters.length === 0) {
+		return (
+			<Card className="w-full" role="region" aria-label="Filters panel">
+				<CardHeader>
+					<CardTitle>Filters</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="text-sm text-muted-foreground">No filters available</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<form.AppForm>
+			<FiltersForm
+				title="Filters"
+				description="Refine your search results by applying filters"
+				error={submitError}
+				success={submitSuccess}
+				onSuccessDismiss={handleSuccessDismiss}
+				submit={{
+					text: "Apply Filters",
+					loadingText: "Applying filters…",
+				}}
+				reset={{
+					text: "Reset",
+					onReset: handleReset,
+				}}
+			>
+				{filters.map((filter) => {
+					if (!filter || !filter.targetFieldPath) {
+						return null;
+					}
+
+					const fieldPicklistValues = picklistValues[filter.targetFieldPath] || [];
+					const affordance = filter.affordance?.toLowerCase() || "";
+
+					if (affordance === "range") {
+						const minFieldName = `${filter.targetFieldPath}_min`;
+						const maxFieldName = `${filter.targetFieldPath}_max`;
+						const inputType = "text";
+						const placeholder =
+							filter.attributes?.placeholder === "null"
+								? undefined
+								: filter.attributes?.placeholder;
+
+						return (
+							<Field key={filter.targetFieldPath}>
+								<FieldLabel>{filter.label || filter.targetFieldPath}</FieldLabel>
+								{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
+								<div
+									className="grid grid-cols-2 gap-3"
+									role="group"
+									aria-label={`${filter.label || filter.targetFieldPath} range filter`}
+								>
+									<form.AppField name={minFieldName}>
+										{(field) => (
+											<field.FilterRangeMinField
+												placeholder={placeholder || "Min"}
+												type={inputType}
+												aria-label={`${filter.label || filter.targetFieldPath} - Minimum`}
+											/>
+										)}
+									</form.AppField>
+									<form.AppField name={maxFieldName}>
+										{(field) => (
+											<field.FilterRangeMaxField
+												placeholder={placeholder || "Max"}
+												type={inputType}
+												aria-label={`${filter.label || filter.targetFieldPath} - Maximum`}
+											/>
+										)}
+									</form.AppField>
+								</div>
+							</Field>
+						);
+					}
+
+					if (affordance === "select") {
+						return (
+							<form.AppField key={filter.targetFieldPath} name={filter.targetFieldPath}>
+								{(field) => (
+									<field.FilterSelectField
+										label={filter.label || filter.targetFieldPath}
+										description={filter.helpMessage || undefined}
+										placeholder={filter.attributes?.placeholder || "Select..."}
+										options={fieldPicklistValues}
+									/>
+								)}
+							</form.AppField>
+						);
+					}
+
+					return (
+						<form.AppField key={filter.targetFieldPath} name={filter.targetFieldPath}>
+							{(field) => (
+								<field.FilterTextField
+									label={filter.label || filter.targetFieldPath}
+									description={filter.helpMessage || undefined}
+									placeholder={
+										filter.attributes?.placeholder ||
+										`Enter ${(filter.label || filter.targetFieldPath).toLowerCase()}`
+									}
+								/>
+							)}
+						</form.AppField>
+					);
+				})}
+			</FiltersForm>
+		</form.AppForm>
+	);
+}