@salesforce/webapp-template-feature-react-global-search-experimental 1.73.0 → 1.74.0

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/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/__inherit__select";
+import { Field, FieldLabel, FieldDescription } from "../../../components/ui/__inherit__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/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/form.tsx

@@ -0,0 +1,209 @@
+import { useId } from "react";
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../../../components/ui/__inherit__field";
+import { Input } from "../../../components/ui/__inherit__input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/__inherit__select";
+import { cn } from "../../../lib/__inherit__utils";
+import type { PicklistValue } from "../types/filters/picklist";
+import { getUniqueErrors } from "../utils/formUtils";
+
+export type { FormError } from "../utils/formUtils";
+export { validateRangeValues } from "../utils/formUtils";
+
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+	createFormHookContexts();
+
+interface FilterTextFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterTextField({
+	label,
+	id: providedId,
+	description,
+	placeholder,
+	type = "text",
+	...props
+}: FilterTextFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<FieldLabel htmlFor={id}>{label}</FieldLabel>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				placeholder={placeholder}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+interface FilterSelectFieldProps {
+	label: string;
+	id?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+	options: PicklistValue[];
+}
+
+function FilterSelectField({
+	label,
+	id: providedId,
+	description,
+	placeholder = "Select...",
+	options,
+}: FilterSelectFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<FieldLabel htmlFor={id}>{label}</FieldLabel>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Select value={field.state.value ?? ""} onValueChange={(value) => field.handleChange(value)}>
+				<SelectTrigger
+					id={id}
+					aria-invalid={isInvalid}
+					aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				>
+					<SelectValue placeholder={placeholder} />
+				</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>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+interface FilterRangeFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterRangeFieldBase({
+	label,
+	id: providedId,
+	description,
+	placeholder,
+	type = "text",
+	...props
+}: FilterRangeFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<div>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				placeholder={placeholder}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</div>
+	);
+}
+
+interface FilterRangeMinFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+interface FilterRangeMaxFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterRangeMinField({ placeholder = "Min", ...props }: FilterRangeMinFieldProps) {
+	return <FilterRangeFieldBase placeholder={placeholder} {...props} />;
+}
+
+function FilterRangeMaxField({ placeholder = "Max", ...props }: FilterRangeMaxFieldProps) {
+	return <FilterRangeFieldBase placeholder={placeholder} {...props} />;
+}
+
+export const { useAppForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		FilterTextField,
+		FilterSelectField,
+		FilterRangeMinField,
+		FilterRangeMaxField,
+	},
+	formComponents: {},
+});

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/index.ts

@@ -0,0 +1,22 @@
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+export {
+	useObjectColumns,
+	useObjectSearchResults,
+	useObjectFilters,
+	useObjectListMetadata,
+} from "./useObjectSearchData";
+export type { ObjectListMetadata } from "./useObjectSearchData";
+export { useRecordListGraphQL } from "./useRecordListGraphQL";
+export type {
+	UseRecordListGraphQLReturn,
+	UseRecordListGraphQLOptions,
+} from "./useRecordListGraphQL";
+export { useRecordDetailLayout } from "./useRecordDetailLayout";
+export type {
+	UseRecordDetailLayoutReturn,
+	UseRecordDetailLayoutParams,
+} from "./useRecordDetailLayout";
+export { useObjectInfoBatch } from "./useObjectInfoBatch";
+export type { UseObjectInfoBatchResult } from "./useObjectInfoBatch";

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/useObjectInfoBatch.ts

@@ -0,0 +1,65 @@
+/**
+ * useObjectInfoBatch
+ *
+ * Fetches object metadata (label, labelPlural, fields, etc.) for the given object API names.
+ * Uses the shared cache in objectInfoService so List, Home, and Detail views reuse one request.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { objectInfoService } from "../api/objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+
+export interface UseObjectInfoBatchResult {
+	/** Object metadata in the same order as the requested objectApiNames. */
+	objectInfos: ObjectInfoResult[];
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Fetches batch object info for the given object API names. Results are cached;
+ * multiple callers (List, Home, Detail) share the same request.
+ *
+ * @param objectApiNames - Array of object API names (e.g. OBJECT_API_NAMES)
+ * @returns objectInfos (same order as input), loading, error
+ */
+export function useObjectInfoBatch(objectApiNames: string[]): UseObjectInfoBatchResult {
+	const [state, setState] = useState<UseObjectInfoBatchResult>({
+		objectInfos: [],
+		loading: objectApiNames.length > 0,
+		error: null,
+	});
+	const isCancelled = useRef(false);
+
+	useEffect(() => {
+		isCancelled.current = false;
+		const names = objectApiNames.filter(Boolean);
+		if (names.length === 0) {
+			setState({ objectInfos: [], loading: false, error: null });
+			return;
+		}
+		setState((s) => ({ ...s, loading: true, error: null }));
+		objectInfoService
+			.getObjectInfoBatch(names.join(","))
+			.then((res) => {
+				if (isCancelled.current) return;
+				const objectInfos = names
+					.map((apiName) => res.results?.find((r) => r.result?.apiName === apiName)?.result)
+					.filter((r) => r != null) as ObjectInfoResult[];
+				setState({ objectInfos, loading: false, error: null });
+			})
+			.catch((err) => {
+				if (isCancelled.current) return;
+				setState({
+					objectInfos: [],
+					loading: false,
+					error: err instanceof Error ? err.message : (err as string),
+				});
+			});
+		return () => {
+			isCancelled.current = true;
+		};
+	}, [objectApiNames.join(",")]);
+
+	return state;
+}