@salesforce/templates 66.6.2 → 66.7.0

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -1,7 +1,9 @@
-import { Label } from "../../../../components/ui/label";
-import { cn } from "../../../../lib/utils";
+import { useEffect, useState } from "react";
+
 import { SearchBar } from "../SearchBar";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
 
 interface SearchFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
@@ -17,21 +19,32 @@ export function SearchFilter({
 	...props
 }: SearchFilterProps) {
 	const { value, onChange } = useFilterField(field);
+	const [localValue, setLocalValue] = useState(value?.value ?? "");
+
+	const externalValue = value?.value ?? "";
+	useEffect(() => {
+		setLocalValue(externalValue);
+	}, [externalValue]);
+
+	const debouncedOnChange = useDebouncedCallback((v: string) => {
+		if (v) {
+			onChange({ field, label, type: "search", value: v });
+		} else {
+			onChange(undefined);
+		}
+	});
+
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper label={label} htmlFor={`filter-${field}`} className={className} {...props}>
 			<SearchBar
-				value={value?.value ?? ""}
+				value={localValue}
 				handleChange={(v) => {
-					if (v) {
-						onChange({ field, label, type: "search", value: v });
-					} else {
-						onChange(undefined);
-					}
+					setLocalValue(v);
+					debouncedOnChange(v);
 				}}
 				placeholder={placeholder}
 				inputProps={{ id: `filter-${field}` }}
 			/>
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SelectFilter.tsx

@@ -5,9 +5,9 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 const ALL_VALUE = "__all__";
@@ -29,8 +29,13 @@ export function SelectFilter({
 }: SelectFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<SelectFilterControl
 				field={field}
 				label={label}
@@ -38,8 +43,7 @@ export function SelectFilter({
 				value={value}
 				onChange={onChange}
 			/>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/TextFilter.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from "react";
 import { Input } from "../../../../components/ui/input";
-import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface TextFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
@@ -21,8 +23,13 @@ export function TextFilter({
 }: TextFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<TextFilterInput
 				field={field}
 				label={label}
@@ -30,8 +37,7 @@ export function TextFilter({
 				value={value}
 				onChange={onChange}
 			/>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 
@@ -53,19 +59,30 @@ export function TextFilterInput({
 	className,
 	...props
 }: TextFilterInputProps) {
+	const [localValue, setLocalValue] = useState(value?.value ?? "");
+
+	const externalValue = value?.value ?? "";
+	useEffect(() => {
+		setLocalValue(externalValue);
+	}, [externalValue]);
+
+	const debouncedOnChange = useDebouncedCallback((v: string) => {
+		if (v) {
+			onChange({ field, label, type: "text", value: v });
+		} else {
+			onChange(undefined);
+		}
+	});
+
 	return (
 		<Input
 			id={`filter-${field}`}
 			type="text"
 			placeholder={props.placeholder ?? `Filter by ${label.toLowerCase()}...`}
-			value={value?.value ?? ""}
+			value={localValue}
 			onChange={(e) => {
-				const v = e.target.value;
-				if (v) {
-					onChange({ field, label, type: "text", value: v });
-				} else {
-					onChange(undefined);
-				}
+				setLocalValue(e.target.value);
+				debouncedOnChange(e.target.value);
 			}}
 			className={cn(className)}
 			{...props}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useDebouncedCallback.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef } from "react";
+import { debounce, FILTER_DEBOUNCE_MS } from "../utils/debounce";
+
+/**
+ * Returns a stable debounced wrapper around the provided callback.
+ *
+ * The wrapper always invokes the *latest* version of `fn` (via a ref),
+ * so the debounce timer is never reset when `fn` changes — only when
+ * the caller invokes the returned function again.
+ *
+ * @param fn - The callback to debounce.
+ * @param delay - Debounce delay in ms. Defaults to `FILTER_DEBOUNCE_MS`.
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => void>(
+	fn: T,
+	delay: number = FILTER_DEBOUNCE_MS,
+): (...args: Parameters<T>) => void {
+	const fnRef = useRef(fn);
+	const debouncedRef = useRef<((...args: any[]) => void) | null>(null);
+
+	useEffect(() => {
+		fnRef.current = fn;
+	});
+
+	useEffect(() => {
+		debouncedRef.current = debounce((...args: any[]) => {
+			fnRef.current(...(args as Parameters<T>));
+		}, delay);
+	}, [delay]);
+
+	return useCallback((...args: Parameters<T>) => {
+		debouncedRef.current?.(...args);
+	}, []);
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useObjectSearchParams.ts

@@ -61,7 +61,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	paginationConfig?: PaginationConfig,
 ) {
 	const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
-	const validPageSizes = paginationConfig?.validPageSizes ?? [defaultPageSize];
+	const validPageSizes = useMemo(
+		() => paginationConfig?.validPageSizes ?? [defaultPageSize],
+		[paginationConfig?.validPageSizes, defaultPageSize],
+	);
 	const [searchParams, setSearchParams] = useSearchParams();
 
 	// Seed local state from URL on initial load
@@ -76,8 +79,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
 
 	// Pagination — cursor-based with a stack to support "previous page" navigation.
-	const getValidPageSize = (size: number) =>
-		validPageSizes.includes(size) ? size : defaultPageSize;
+	const getValidPageSize = useCallback(
+		(size: number) => (validPageSizes.includes(size) ? size : defaultPageSize),
+		[validPageSizes, defaultPageSize],
+	);
 
 	const [pageSize, setPageSizeState] = useState<number>(
 		getValidPageSize(initial.pageSize ?? defaultPageSize),
@@ -166,7 +171,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 		resetPagination();
 		syncToUrl([], null, defaultPageSize, 0);
 		setPageSizeState(defaultPageSize);
-	}, [syncToUrl, resetPagination]);
+	}, [syncToUrl, resetPagination, defaultPageSize]);
 
 	// -- Pagination callbacks ---------------------------------------------------
 	// Uses a cursor stack to track visited pages. "Next" pushes the current
@@ -204,7 +209,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			resetPagination();
 			debouncedSyncRef.current(f, s, validated);
 		},
-		[resetPagination],
+		[resetPagination, getValidPageSize],
 	);
 
 	// -- Derived query objects ---------------------------------------------------

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/utils/debounce.ts

@@ -1,3 +1,6 @@
+/** Default debounce delay for keystroke-driven filter inputs (search, text, numeric). */
+export const FILTER_DEBOUNCE_MS = 300;
+
 /**
  * Creates a debounced version of the provided function.
  *
@@ -10,7 +13,7 @@
  * @param ms - The debounce delay in milliseconds.
  * @returns A new function with the same signature that delays execution.
  */
-export function debounce<T extends (...args: never[]) => void>(
+export function debounce<T extends (...args: any[]) => void>(
 	fn: T,
 	ms: number,
 ): (...args: Parameters<T>) => void {

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/utils/filterUtils.ts

@@ -25,6 +25,8 @@ export type FilterFieldType =
 	| "boolean"
 	| "date"
 	| "daterange"
+	| "datetime"
+	| "datetimerange"
 	| "multipicklist"
 	| "search";
 
@@ -337,13 +339,34 @@ function buildSingleFilter<TFilter>(
 			return { [field]: { in: values } } as TFilter;
 		}
 		case "date": {
+			if (!min && !max) return null;
+			const op = value ?? (min ? "gte" : "lte");
+			const dateStr = min ?? max;
+			return { [field]: { [op]: { value: dateStr } } } as TFilter;
+		}
+		case "daterange": {
+			if (!min && !max) return null;
+			const clauses: TFilter[] = [];
+			if (min) {
+				clauses.push({
+					[field]: { gte: { value: min } },
+				} as TFilter);
+			}
+			if (max) {
+				clauses.push({
+					[field]: { lte: { value: max } },
+				} as TFilter);
+			}
+			return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
+		}
+		case "datetime": {
 			if (!min && !max) return null;
 			const op = value ?? (min ? "gte" : "lte");
 			const dateStr = min ?? max;
 			const isoStr = op === "gte" || op === "gt" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
 			return { [field]: { [op]: { value: isoStr } } } as TFilter;
 		}
-		case "daterange": {
+		case "datetimerange": {
 			if (!min && !max) return null;
 			const clauses: TFilter[] = [];
 			if (min) {

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/account/accountSearchService.ts

@@ -0,0 +1,46 @@
+import SEARCH_ACCOUNTS_QUERY from "./query/searchAccounts.graphql?raw";
+import DISTINCT_INDUSTRIES_QUERY from "./query/distinctAccountIndustries.graphql?raw";
+import DISTINCT_TYPES_QUERY from "./query/distinctAccountTypes.graphql?raw";
+import {
+	searchObjects,
+	fetchDistinctValues,
+	type ObjectSearchOptions,
+	type PicklistOption,
+} from "../../features/object-search/api/objectSearchService";
+import type {
+	SearchAccountsQuery,
+	SearchAccountsQueryVariables,
+	DistinctAccountIndustriesQuery,
+	DistinctAccountTypesQuery,
+} from "../graphql-operations-types";
+
+export type AccountSearchResult = NonNullable<SearchAccountsQuery["uiapi"]["query"]["Account"]>;
+
+export type AccountSearchOptions = ObjectSearchOptions<
+	SearchAccountsQueryVariables["where"],
+	SearchAccountsQueryVariables["orderBy"]
+>;
+
+export type { PicklistOption };
+
+export async function searchAccounts(
+	options: AccountSearchOptions = {},
+): Promise<AccountSearchResult> {
+	return searchObjects<AccountSearchResult, SearchAccountsQuery, SearchAccountsQueryVariables>(
+		SEARCH_ACCOUNTS_QUERY,
+		"Account",
+		options,
+	);
+}
+
+export async function fetchDistinctIndustries(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountIndustriesQuery>(
+		DISTINCT_INDUSTRIES_QUERY,
+		"Account",
+		"Industry",
+	);
+}
+
+export async function fetchDistinctTypes(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountTypesQuery>(DISTINCT_TYPES_QUERY, "Account", "Type");
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/account/query/distinctAccountIndustries.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountIndustries {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Industry: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Industry @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/account/query/distinctAccountTypes.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountTypes {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Type: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Type @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/account/query/getAccountDetail.graphql

@@ -0,0 +1,121 @@
+query GetAccountDetail($id: ID!) {
+	uiapi {
+		query {
+			Account(where: { Id: { eq: $id } }) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Fax @optional {
+							value
+							displayValue
+						}
+						Parent @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Website @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						NumberOfEmployees @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+						Description @optional {
+							value
+							displayValue
+						}
+						BillingStreet @optional {
+							value
+							displayValue
+						}
+						BillingCity @optional {
+							value
+							displayValue
+						}
+						BillingState @optional {
+							value
+							displayValue
+						}
+						BillingPostalCode @optional {
+							value
+							displayValue
+						}
+						BillingCountry @optional {
+							value
+							displayValue
+						}
+						ShippingStreet @optional {
+							value
+							displayValue
+						}
+						ShippingCity @optional {
+							value
+							displayValue
+						}
+						ShippingState @optional {
+							value
+							displayValue
+						}
+						ShippingPostalCode @optional {
+							value
+							displayValue
+						}
+						ShippingCountry @optional {
+							value
+							displayValue
+						}
+						CreatedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						CreatedDate @optional {
+							value
+							displayValue
+						}
+						LastModifiedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						LastModifiedDate @optional {
+							value
+							displayValue
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/account/query/searchAccounts.graphql

@@ -0,0 +1,51 @@
+query SearchAccounts(
+	$first: Int
+	$after: String
+	$where: Account_Filter
+	$orderBy: Account_OrderBy
+) {
+	uiapi {
+		query {
+			Account(first: $first, after: $after, where: $where, orderBy: $orderBy) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+					}
+				}
+				pageInfo {
+					hasNextPage
+					hasPreviousPage
+					endCursor
+					startCursor
+				}
+				totalCount
+			}
+		}
+	}
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/AgentforceConversationClient.tsx

@@ -57,6 +57,7 @@ export function AgentforceConversationClient({
 	agentId,
 	inline: inlineProp,
 	headerEnabled,
+	showHeaderIcon,
 	width,
 	height,
 	styleTokens,
@@ -68,6 +69,8 @@ export function AgentforceConversationClient({
 		const renderingConfig: NonNullable<AgentforceClientConfig["renderingConfig"]> = {
 			mode: inlineProp ? "inline" : "floating",
 			...(headerEnabled !== undefined && { headerEnabled }),
+			...(showHeaderIcon !== undefined && { showHeaderIcon }),
+			...{ showAvatar: false },
 			...(width !== undefined && { width }),
 			...(height !== undefined && { height }),
 		};
@@ -77,7 +80,7 @@ export function AgentforceConversationClient({
 			...(styleTokens !== undefined && { styleTokens }),
 			renderingConfig,
 		};
-	}, [agentId, inlineProp, headerEnabled, width, height, styleTokens]);
+	}, [agentId, inlineProp, headerEnabled, showHeaderIcon, width, height, styleTokens]);
 
 	const inline = normalizedAgentforceClientConfig?.renderingConfig?.mode === "inline";
 
@@ -85,7 +88,7 @@ export function AgentforceConversationClient({
 		if (!normalizedAgentforceClientConfig?.agentId) {
 			throw new Error(
 				"AgentforceConversationClient requires agentId. " +
-					"Pass flat props only (agentId, inline, headerEnabled, width, height, styleTokens).",
+					"Pass flat props only (agentId, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
 			);
 		}