@salesforce/webapp-template-app-react-template-b2e-experimental 1.117.0 → 1.117.1

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.117.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.117.0...v1.117.1) (2026-03-28)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.117.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.116.13...v1.117.0) (2026-03-27)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/reactinternalapp/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.117.0",
-    "@salesforce/webapp-experimental": "^1.117.0",
+    "@salesforce/sdk-data": "^1.117.1",
+    "@salesforce/webapp-experimental": "^1.117.1",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -42,7 +42,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.117.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.117.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/__examples__/pages/AccountSearch.tsx

@@ -62,8 +62,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{ field: "Industry", label: "Industry", type: "picklist" },
 	{ field: "Type", label: "Type", type: "multipicklist" },
 	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
-	{ field: "CreatedDate", label: "Created Date", type: "date" },
-	{ field: "LastModifiedDate", label: "Last Modified Date", type: "daterange" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
+	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
 ];
 
 const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
@@ -152,7 +152,7 @@ export default function AccountSearch() {
 									</div>
 								</CardHeader>
 								<CollapsibleContent>
-									<CardContent className="space-y-4 pt-0">
+									<CardContent className="space-y-1 pt-0">
 										<SearchFilter
 											field="search"
 											label="Search"
@@ -165,9 +165,18 @@ export default function AccountSearch() {
 											options={industryOptions ?? []}
 										/>
 										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
-										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
-										<DateFilter field="CreatedDate" label="Created Date" />
-										<DateRangeFilter field="LastModifiedDate" label="Last Modified Date" />
+										<NumericRangeFilter
+											field="AnnualRevenue"
+											label="Annual Revenue"
+											min={0}
+											max={1_000_000_000_000}
+										/>
+										<DateFilter field="CreatedDate" label="Created Date" filterType="datetime" />
+										<DateRangeFilter
+											field="LastModifiedDate"
+											label="Last Modified Date"
+											filterType="datetimerange"
+										/>
 									</CardContent>
 								</CollapsibleContent>
 							</Collapsible>

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/FilterContext.tsx

@@ -7,9 +7,6 @@ interface FilterContextValue {
 	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
 	onFilterRemove: (field: string) => void;
 	onReset: () => void;
-	onApply: () => void;
-	hasPendingChanges: boolean;
-	hasValidationError: boolean;
 }
 
 const FilterContext = createContext<FilterContextValue | null>(null);
@@ -19,9 +16,6 @@ interface FilterProviderProps {
 	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
 	onFilterRemove: (field: string) => void;
 	onReset: () => void;
-	onApply?: () => void;
-	hasPendingChanges?: boolean;
-	hasValidationError?: boolean;
 	children: ReactNode;
 }
 
@@ -30,9 +24,6 @@ export function FilterProvider({
 	onFilterChange,
 	onFilterRemove,
 	onReset,
-	onApply,
-	hasPendingChanges = false,
-	hasValidationError = false,
 	children,
 }: FilterProviderProps) {
 	return (
@@ -42,9 +33,6 @@ export function FilterProvider({
 				onFilterChange,
 				onFilterRemove,
 				onReset,
-				onApply: onApply ?? (() => {}),
-				hasPendingChanges,
-				hasValidationError,
 			}}
 		>
 			{children}
@@ -75,13 +63,10 @@ export function useFilterField(field: string) {
 }
 
 export function useFilterPanel() {
-	const { filters, onReset, onApply, hasPendingChanges, hasValidationError } = useFilterContext();
+	const { filters, onReset } = useFilterContext();
 	return {
 		hasActiveFilters: filters.length > 0,
-		hasPendingChanges,
-		hasValidationError,
 		resetAll: onReset,
-		apply: onApply,
 	};
 }
 
@@ -96,19 +81,3 @@ export function FilterResetButton({ children, ...props }: FilterResetButtonProps
 		</Button>
 	);
 }
-
-type FilterApplyButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick" | "disabled">;
-
-export function FilterApplyButton({ children, ...props }: FilterApplyButtonProps) {
-	const { apply, hasPendingChanges, hasValidationError } = useFilterPanel();
-	return (
-		<Button
-			onClick={apply}
-			disabled={!hasPendingChanges || hasValidationError}
-			aria-label="Apply filters"
-			{...props}
-		>
-			{children ?? "Apply"}
-		</Button>
-	);
-}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/BooleanFilter.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__";
@@ -21,11 +21,15 @@ interface BooleanFilterProps extends Omit<React.ComponentProps<"div">, "onChange
 export function BooleanFilter({ field, label, helpText, className, ...props }: BooleanFilterProps) {
 	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}
+		>
 			<BooleanFilterSelect field={field} label={label} value={value} onChange={onChange} />
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/DateFilter.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { parseISO } from "date-fns";
-import { Label } from "../../../../components/ui/label";
 import {
 	DatePicker,
 	DatePickerTrigger,
 	DatePickerContent,
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
 import {
 	Select,
 	SelectContent,
@@ -32,9 +33,17 @@ interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange">
 	field: string;
 	label: string;
 	helpText?: string;
+	filterType?: FilterFieldType;
 }
 
-export function DateFilter({ field, label, helpText, className, ...props }: DateFilterProps) {
+export function DateFilter({
+	field,
+	label,
+	helpText,
+	filterType = "date",
+	className,
+	...props
+}: DateFilterProps) {
 	const { value, onChange } = useFilterField(field);
 
 	const initialOp: DateOperator = value?.min ? "gt" : "lt";
@@ -63,7 +72,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 		onChange({
 			field,
 			label,
-			type: "date",
+			type: filterType,
 			value: op,
 			min: f === "min" ? dateStr : undefined,
 			max: f === "max" ? dateStr : undefined,
@@ -71,8 +80,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<div className="flex gap-2">
 				<Select value={operator} onValueChange={(v) => handleOperatorChange(v as DateOperator)}>
 					<SelectTrigger className="w-full flex-1">
@@ -104,8 +112,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 					</DatePickerContent>
 				</DatePicker>
 			</div>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/DateRangeFilter.tsx

@@ -1,25 +1,28 @@
 import type { DateRange } from "react-day-picker";
-import { Label } from "../../../../components/ui/label";
 import {
 	DatePicker,
 	DatePickerRangeTrigger,
 	DatePickerContent,
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
 import { toDate, toDateString } from "./DateFilter";
 
 interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
 	helpText?: string;
+	filterType?: FilterFieldType;
 }
 
 export function DateRangeFilter({
 	field,
 	label,
 	helpText,
+	filterType = "daterange",
 	className,
 	...props
 }: DateRangeFilterProps) {
@@ -35,7 +38,7 @@ export function DateRangeFilter({
 			onChange({
 				field,
 				label,
-				type: "daterange",
+				type: filterType,
 				min: toDateString(range?.from),
 				max: toDateString(range?.to),
 			});
@@ -43,8 +46,7 @@ export function DateRangeFilter({
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<DatePicker>
 				<DatePickerRangeTrigger
 					className="w-full"
@@ -63,7 +65,6 @@ export function DateRangeFilter({
 					/>
 				</DatePickerContent>
 			</DatePicker>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/FilterFieldWrapper.tsx

@@ -0,0 +1,33 @@
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+
+interface FilterFieldWrapperProps extends React.ComponentProps<"div"> {
+	label: string;
+	htmlFor?: string;
+	helpText?: string;
+	error?: string;
+}
+
+export function FilterFieldWrapper({
+	label,
+	htmlFor,
+	helpText,
+	error,
+	className,
+	children,
+	...props
+}: FilterFieldWrapperProps) {
+	return (
+		<div className={cn("space-y-1", className)} {...props}>
+			<Label htmlFor={htmlFor}>{label}</Label>
+			{children}
+			<div className="min-h-4">
+				{error ? (
+					<p className="text-xs text-destructive">{error}</p>
+				) : (
+					helpText && <p className="text-xs text-muted-foreground">{helpText}</p>
+				)}
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/MultiSelectFilter.tsx

@@ -4,11 +4,12 @@ import {
 	PopoverTrigger,
 } from "../../../../components/ui/popover";
 import { Checkbox } from "../../../../components/ui/checkbox";
-import { Label } from "../../../../components/ui/label";
 import { Button } from "../../../../components/ui/button";
 import { cn } from "../../../../lib/utils";
+import { Label } from "../../../../components/ui/label";
 import { ChevronDown } from "lucide-react";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 
 interface MultiSelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
@@ -53,8 +54,7 @@ export function MultiSelectFilter({
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<Popover>
 				<PopoverTrigger asChild>
 					<Button
@@ -92,7 +92,6 @@ export function MultiSelectFilter({
 					</div>
 				</PopoverContent>
 			</Popover>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/components/filters/NumericRangeFilter.tsx

@@ -1,49 +1,52 @@
+import { useEffect, useState } from "react";
 import { Input } from "../../../../components/ui/input";
-import { Label } from "../../../../components/ui/label";
-import { toast } from "sonner";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
 	helpText?: string;
-	minInputProps?: React.ComponentProps<typeof Input>;
-	maxInputProps?: React.ComponentProps<typeof Input>;
+	min?: number;
+	max?: number;
 }
 
 export function NumericRangeFilter({
 	field,
 	label,
 	helpText,
+	min,
+	max,
 	className,
-	minInputProps,
-	maxInputProps,
 	...props
 }: NumericRangeFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
-			<NumericRangeFilterInputs
-				field={field}
-				label={label}
-				value={value}
-				onChange={onChange}
-				minInputProps={minInputProps}
-				maxInputProps={maxInputProps}
-			/>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		<NumericRangeFilterInputs
+			field={field}
+			label={label}
+			helpText={helpText}
+			value={value}
+			onChange={onChange}
+			min={min}
+			max={max}
+			className={className}
+			{...props}
+		/>
 	);
 }
 
 interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
+	helpText?: string;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
+	min?: number;
+	max?: number;
 	minInputProps?: React.ComponentProps<typeof Input>;
 	maxInputProps?: React.ComponentProps<typeof Input>;
 }
@@ -51,82 +54,110 @@ interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">
 export function NumericRangeFilterInputs({
 	field,
 	label,
+	helpText,
 	value,
 	onChange,
+	min: boundMin,
+	max: boundMax,
 	className,
-	minInputProps,
-	maxInputProps,
 	...props
 }: NumericRangeFilterInputsProps) {
-	const validateNumericRangeFilter = (filter: ActiveFilterValue) => {
-		if (filter.type !== "numeric") return null;
-
-		const min = filter.min?.trim();
-		const max = filter.max?.trim();
-		const filterLabel = filter.label || filter.field;
+	const [localMin, setLocalMin] = useState(value?.min ?? "");
+	const [localMax, setLocalMax] = useState(value?.max ?? "");
 
-		if (!min || !max) return null;
+	const externalMin = value?.min ?? "";
+	const externalMax = value?.max ?? "";
+	useEffect(() => {
+		setLocalMin(externalMin);
+	}, [externalMin]);
+	useEffect(() => {
+		setLocalMax(externalMax);
+	}, [externalMax]);
 
-		const minValue = Number(min);
-		const maxValue = Number(max);
-		if (!Number.isNaN(minValue) && !Number.isNaN(maxValue) && minValue >= maxValue) {
-			return `${filterLabel}: minimum value must be less than maximum value.`;
-		}
-
-		return null;
+	const isOutOfBounds = (v: string) => {
+		if (v === "") return false;
+		const n = Number(v);
+		return (boundMin != null && n < boundMin) || (boundMax != null && n > boundMax);
 	};
+	const minOutOfBounds = isOutOfBounds(localMin);
+	const maxOutOfBounds = isOutOfBounds(localMax);
+	const isRangeInverted = localMin !== "" && localMax !== "" && Number(localMin) > Number(localMax);
+	const hasError = minOutOfBounds || maxOutOfBounds || isRangeInverted;
 
-	const handleChange = (bound: "min" | "max", v: string) => {
-		const next = {
-			field,
-			label,
-			type: "numeric" as const,
-			min: value?.min ?? "",
-			max: value?.max ?? "",
-			[bound]: v,
-		};
-
-		if (!next.min && !next.max) {
+	const debouncedOnChange = useDebouncedCallback((min: string, max: string) => {
+		if (!min && !max) {
 			onChange(undefined);
-		} else {
-			onChange(next);
+			return;
 		}
-	};
+		const minNum = min !== "" ? Number(min) : null;
+		const maxNum = max !== "" ? Number(max) : null;
+		if (minNum != null && maxNum != null && minNum > maxNum) return;
+		if (
+			minNum != null &&
+			((boundMin != null && minNum < boundMin) || (boundMax != null && minNum > boundMax))
+		)
+			return;
+		if (
+			maxNum != null &&
+			((boundMin != null && maxNum < boundMin) || (boundMax != null && maxNum > boundMax))
+		)
+			return;
+		onChange({ field, label, type: "numeric" as const, min, max });
+	});
 
-	const handleBlur = (bound: "min" | "max", currentValue: string) => {
-		const next = {
-			field,
-			label,
-			type: "numeric" as const,
-			min: bound === "min" ? currentValue : (value?.min ?? ""),
-			max: bound === "max" ? currentValue : (value?.max ?? ""),
-		};
-		const validationError = validateNumericRangeFilter(next);
-		if (validationError) {
-			toast.error("Invalid range filter", { description: validationError });
-		}
-	};
+	const boundsLabel =
+		boundMin != null && boundMax != null
+			? `${boundMin}–${boundMax}`
+			: boundMin != null
+				? `${boundMin} or more`
+				: boundMax != null
+					? `${boundMax} or less`
+					: null;
+
+	const errorMessage = isRangeInverted
+		? "Min must not exceed max"
+		: (minOutOfBounds || maxOutOfBounds) && boundsLabel
+			? `Value must be between ${boundsLabel}`
+			: undefined;
 
 	return (
-		<div className={cn("flex gap-2", className)} {...props}>
-			<Input
-				type="number"
-				placeholder="Min"
-				value={value?.min ?? ""}
-				onChange={(e) => handleChange("min", e.target.value)}
-				onBlur={(e) => handleBlur("min", e.target.value)}
-				aria-label={`${label} minimum`}
-				{...minInputProps}
-			/>
-			<Input
-				type="number"
-				placeholder="Max"
-				value={value?.max ?? ""}
-				onChange={(e) => handleChange("max", e.target.value)}
-				onBlur={(e) => handleBlur("max", e.target.value)}
-				aria-label={`${label} maximum`}
-				{...maxInputProps}
-			/>
-		</div>
+		<FilterFieldWrapper
+			label={label}
+			helpText={helpText}
+			error={errorMessage}
+			className={className}
+			{...props}
+		>
+			<div className="flex gap-2">
+				<Input
+					type="number"
+					placeholder="Min"
+					value={localMin}
+					min={boundMin}
+					max={boundMax}
+					onChange={(e) => {
+						const v = e.target.value;
+						setLocalMin(v);
+						debouncedOnChange(v, localMax);
+					}}
+					aria-label={`${label} minimum`}
+					aria-invalid={hasError || undefined}
+				/>
+				<Input
+					type="number"
+					placeholder="Max"
+					value={localMax}
+					min={boundMin}
+					max={boundMax}
+					onChange={(e) => {
+						const v = e.target.value;
+						setLocalMax(v);
+						debouncedOnChange(localMin, v);
+					}}
+					aria-label={`${label} maximum`}
+					aria-invalid={hasError || undefined}
+				/>
+			</div>
+		</FilterFieldWrapper>
 	);
 }

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/hooks/useObjectSearchParams.ts

@@ -20,11 +20,6 @@ export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
 		set: (field: string, value: ActiveFilterValue | undefined) => void;
 		remove: (field: string) => void;
 	};
-	filterState: {
-		apply: () => void;
-		hasPendingChanges: boolean;
-		hasValidationError: boolean;
-	};
 	sort: {
 		current: SortState | null;
 		set: (sort: SortState | null) => void;
@@ -41,40 +36,6 @@ export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
 	resetAll: () => void;
 }
 
-export interface UseObjectSearchParamsOptions {
-	filterSyncMode?: "immediate" | "manual";
-}
-
-function areFiltersEqual(left: ActiveFilterValue[], right: ActiveFilterValue[]) {
-	if (left.length !== right.length) return false;
-	const normalize = (filters: ActiveFilterValue[]) =>
-		[...filters]
-			.sort((a, b) => a.field.localeCompare(b.field))
-			.map((filter) => ({
-				field: filter.field,
-				type: filter.type,
-				value: filter.value ?? "",
-				min: filter.min ?? "",
-				max: filter.max ?? "",
-			}));
-	return JSON.stringify(normalize(left)) === JSON.stringify(normalize(right));
-}
-
-function hasFilterValidationError(filters: ActiveFilterValue[]) {
-	for (const filter of filters) {
-		if (filter.type !== "numeric") continue;
-		const min = filter.min?.trim();
-		const max = filter.max?.trim();
-		if (!min || !max) continue;
-		const minValue = Number(min);
-		const maxValue = Number(max);
-		if (!Number.isNaN(minValue) && !Number.isNaN(maxValue) && minValue >= maxValue) {
-			return true;
-		}
-	}
-	return false;
-}
-
 /**
  * Manages filter, sort, and cursor-based pagination state for an object search page.
  *
@@ -98,11 +59,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	filterConfigs: FilterFieldConfig[],
 	_sortConfigs?: SortFieldConfig[],
 	paginationConfig?: PaginationConfig,
-	options?: UseObjectSearchParamsOptions,
 ) {
-	const filterSyncMode = options?.filterSyncMode ?? "immediate";
-	const isManualFilterSync = filterSyncMode === "manual";
-
 	const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
 	const validPageSizes = useMemo(
 		() => paginationConfig?.validPageSizes ?? [defaultPageSize],
@@ -119,7 +76,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	);
 
 	const [filters, setFilters] = useState<ActiveFilterValue[]>(initial.filters);
-	const [appliedFilters, setAppliedFilters] = useState<ActiveFilterValue[]>(initial.filters);
 	const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
 
 	// Pagination — cursor-based with a stack to support "previous page" navigation.
@@ -170,15 +126,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	const setFilter = useCallback(
 		(field: string, value: ActiveFilterValue | undefined) => {
-			if (isManualFilterSync) {
-				setFilters((prev) => {
-					const next = prev.filter((f) => f.field !== field);
-					if (value) next.push(value);
-					return next;
-				});
-				return;
-			}
-
 			const { sort: s, pageSize: ps } = stateRef.current;
 			setFilters((prev) => {
 				const next = prev.filter((f) => f.field !== field);
@@ -188,16 +135,11 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[isManualFilterSync, resetPagination],
+		[resetPagination],
 	);
 
 	const removeFilter = useCallback(
 		(field: string) => {
-			if (isManualFilterSync) {
-				setFilters((prev) => prev.filter((f) => f.field !== field));
-				return;
-			}
-
 			const { sort: s, pageSize: ps } = stateRef.current;
 			setFilters((prev) => {
 				const next = prev.filter((f) => f.field !== field);
@@ -206,17 +148,9 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[isManualFilterSync, resetPagination],
+		[resetPagination],
 	);
 
-	const applyFilters = useCallback(() => {
-		if (!isManualFilterSync) return;
-		const { filters: nextFilters, sort: s, pageSize: ps } = stateRef.current;
-		setAppliedFilters(nextFilters);
-		resetPagination();
-		syncToUrl(nextFilters, s, ps);
-	}, [isManualFilterSync, resetPagination, syncToUrl]);
-
 	// -- Sort callback ----------------------------------------------------------
 
 	const setSort = useCallback(
@@ -233,7 +167,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	const resetAll = useCallback(() => {
 		setFilters([]);
-		setAppliedFilters([]);
 		setLocalSort(null);
 		resetPagination();
 		syncToUrl([], null, defaultPageSize, 0);
@@ -283,8 +216,8 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	// Translate local filter/sort state into API-ready `where` and `orderBy`.
 
 	const where = useMemo(
-		() => buildFilter<TFilter>(isManualFilterSync ? appliedFilters : filters, filterConfigs),
-		[appliedFilters, filters, filterConfigs, isManualFilterSync],
+		() => buildFilter<TFilter>(filters, filterConfigs),
+		[filters, filterConfigs],
 	);
 
 	const orderBy = useMemo(() => buildOrderBy<TOrderBy>(sort), [sort]);
@@ -296,23 +229,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	// causing unnecessary re-renders.
 
 	const filtersGroup = useMemo(
-		() => ({
-			active: filters,
-			set: setFilter,
-			remove: removeFilter,
-		}),
+		() => ({ active: filters, set: setFilter, remove: removeFilter }),
 		[filters, setFilter, removeFilter],
 	);
 
-	const filterState = useMemo(
-		() => ({
-			apply: applyFilters,
-			hasPendingChanges: isManualFilterSync ? !areFiltersEqual(filters, appliedFilters) : false,
-			hasValidationError: hasFilterValidationError(filters),
-		}),
-		[applyFilters, isManualFilterSync, filters, appliedFilters],
-	);
-
 	const sortGroup = useMemo(() => ({ current: sort, set: setSort }), [sort, setSort]);
 
 	const query = useMemo(() => ({ where, orderBy }), [where, orderBy]);
@@ -324,7 +244,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	return {
 		filters: filtersGroup,
-		filterState,
 		sort: sortGroup,
 		query,
 		pagination,

package/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/features/object-search/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/dist/force-app/main/default/webapplications/reactinternalapp/src/pages/AccountSearch.tsx

@@ -60,8 +60,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{ field: "Industry", label: "Industry", type: "picklist" },
 	{ field: "Type", label: "Type", type: "multipicklist" },
 	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
-	{ field: "CreatedDate", label: "Created Date", type: "date" },
-	{ field: "LastModifiedDate", label: "Last Modified Date", type: "daterange" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
+	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
 ];
 
 const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
@@ -150,7 +150,7 @@ export default function AccountSearch() {
 									</div>
 								</CardHeader>
 								<CollapsibleContent>
-									<CardContent className="space-y-4 pt-0">
+									<CardContent className="space-y-1 pt-0">
 										<SearchFilter
 											field="search"
 											label="Search"
@@ -164,8 +164,12 @@ export default function AccountSearch() {
 										/>
 										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
 										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
-										<DateFilter field="CreatedDate" label="Created Date" />
-										<DateRangeFilter field="LastModifiedDate" label="Last Modified Date" />
+										<DateFilter field="CreatedDate" label="Created Date" filterType="datetime" />
+										<DateRangeFilter
+											field="LastModifiedDate"
+											label="Last Modified Date"
+											filterType="datetimerange"
+										/>
 									</CardContent>
 								</CollapsibleContent>
 							</Collapsible>

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.117.0",
+  "version": "1.117.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.117.0",
+      "version": "1.117.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.117.0",
+  "version": "1.117.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-b2e-experimental",
-  "version": "1.117.0",
+  "version": "1.117.1",
   "description": "Salesforce React internal app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",