@salesforce/templates 66.6.2 → 66.7.0

package/lib/templates/project/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/context/AuthContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
-import { getCurrentUser } from "@salesforce/webapp-experimental/api";
+import { getCurrentUser } from "@salesforce/ui-bundle/api";
 import { API_ROUTES } from "../authenticationConfig";
 
 interface User {
@@ -86,7 +86,7 @@ export function useAuth(): AuthContextType {
  * @returns {User} The authenticated user object
  * @throws {Error} If not used within AuthProvider or user is not authenticated
  */
-export function getUser(): User {
+export function useUser(): User {
 	const context = useAuth();
 	if (!context.user) {
 		throw new Error("Authenticated context not established");

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/hooks/useCountdownTimer.ts

@@ -107,7 +107,7 @@ function formatAccessibilityAnnouncement(seconds: number): string {
 			// @ts-expect-error - DurationFormat is not yet in TypeScript lib
 			const formatter = new Intl.DurationFormat(navigator.language, { style: "long" });
 			return formatter.format({ minutes, seconds: secs });
-		} catch (e) {
+		} catch {
 			// Fallback to manual formatting
 		}
 	}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Profile.tsx

@@ -8,7 +8,7 @@ import { useAppForm } from "../hooks/form";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema } from "../authHelpers";
 import { getErrorMessage } from "../utils/helpers";
-import { getUser } from "../context/AuthContext";
+import { useUser } from "../context/AuthContext";
 import { fetchUserProfile, updateUserProfile } from "../api/userProfileApi";
 
 const optionalString = z
@@ -33,7 +33,7 @@ const profileSchema = z.object({
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
 export default function Profile() {
-	const user = getUser();
+	const user = useUser();
 	const [profile, setProfile] = useState<ProfileFormValues | null>(null);
 	const [loadError, setLoadError] = useState<string | null>(null);
 	const [success, setSuccess] = useState(false);
@@ -104,7 +104,7 @@ export default function Profile() {
 			const formData = profileSchema.parse(profile);
 			form.reset(formData);
 		}
-	}, [profile]);
+	}, [profile, form]);
 
 	if (!profile && !loadError) {
 		return <CardSkeleton contentMaxWidth="md" loadingText="Loading profile…" />;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Register.tsx

@@ -46,7 +46,7 @@ export default function Register() {
 				// "/services/apexrest/auth/register" refers to a custom Apex Class exposed as a REST resource.
 				// You must ensure this Apex class exists in your org and handles registration
 				// (e.g., duplicate checks and user creation such as Site.createExternalUser).
-				const { confirmPassword, ...request } = formFieldValues;
+				const { confirmPassword: _confirmPassword, ...request } = formFieldValues;
 				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/register", {
 					method: "POST",

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/sessionTimeout/SessionTimeoutValidator.tsx

@@ -496,8 +496,18 @@ export default function SessionTimeoutValidator({
 	// Get current location from React Router
 	const location = useLocation();
 
-	// State for session expired alert
-	const [showExpiredAlert, setShowExpiredAlert] = useState(false);
+	// Session expired alert — checked once at mount via lazy initializer.
+	// The session timeout handler triggers a hard navigation (window.location.replace),
+	// so the component always mounts fresh on the login page after expiry.
+	const [showExpiredAlert, setShowExpiredAlert] = useState(() => {
+		const isLoginPage = location.pathname === ROUTES.LOGIN.PATH;
+		const shouldShow =
+			isLoginPage && sessionStorage.getItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE) === "true";
+		if (shouldShow) {
+			sessionStorage.removeItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE);
+		}
+		return shouldShow;
+	});
 
 	// Session timeout monitoring hook
 	const sessionTimeout = useSessionTimeout({
@@ -505,22 +515,6 @@ export default function SessionTimeoutValidator({
 		isGuest,
 	});
 
-	/**
-	 * Check if we should show expired session message
-	 * Called on mount and whenever pathname changes
-	 */
-	useEffect(() => {
-		// Check if we're on the login page and should show expired message
-		const isLoginPage = location.pathname === ROUTES.LOGIN.PATH;
-		const shouldShowMessage = sessionStorage.getItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE) === "true";
-
-		if (isLoginPage && shouldShowMessage) {
-			setShowExpiredAlert(true);
-			// Clear the flag immediately after reading
-			sessionStorage.removeItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE);
-		}
-	}, [location.pathname]);
-
 	/**
 	 * Handle session extension
 	 * Called when user clicks "Continue Working" in warning modal

package/lib/templates/project/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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
+			}
+		}
+	}
+}