@salesforce/webapp-template-app-react-sample-b2e-experimental 1.116.12 → 1.116.13

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.116.13](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.116.12...v1.116.13) (2026-03-27)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.116.12](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.116.11...v1.116.12) (2026-03-27)
 
 

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

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.116.12",
-    "@salesforce/webapp-experimental": "^1.116.12",
+    "@salesforce/sdk-data": "^1.116.13",
+    "@salesforce/webapp-experimental": "^1.116.13",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,7 +43,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.116.12",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.116.13",
     "@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/propertymanagementapp/src/features/object-search/components/FilterContext.tsx

@@ -7,6 +7,9 @@ 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);
@@ -16,6 +19,9 @@ interface FilterProviderProps {
 	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
 	onFilterRemove: (field: string) => void;
 	onReset: () => void;
+	onApply?: () => void;
+	hasPendingChanges?: boolean;
+	hasValidationError?: boolean;
 	children: ReactNode;
 }
 
@@ -24,10 +30,23 @@ export function FilterProvider({
 	onFilterChange,
 	onFilterRemove,
 	onReset,
+	onApply,
+	hasPendingChanges = false,
+	hasValidationError = false,
 	children,
 }: FilterProviderProps) {
 	return (
-		<FilterContext.Provider value={{ filters, onFilterChange, onFilterRemove, onReset }}>
+		<FilterContext.Provider
+			value={{
+				filters,
+				onFilterChange,
+				onFilterRemove,
+				onReset,
+				onApply: onApply ?? (() => {}),
+				hasPendingChanges,
+				hasValidationError,
+			}}
+		>
 			{children}
 		</FilterContext.Provider>
 	);
@@ -56,8 +75,14 @@ export function useFilterField(field: string) {
 }
 
 export function useFilterPanel() {
-	const { filters, onReset } = useFilterContext();
-	return { hasActiveFilters: filters.length > 0, resetAll: onReset };
+	const { filters, onReset, onApply, hasPendingChanges, hasValidationError } = useFilterContext();
+	return {
+		hasActiveFilters: filters.length > 0,
+		hasPendingChanges,
+		hasValidationError,
+		resetAll: onReset,
+		apply: onApply,
+	};
 }
 
 type FilterResetButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick">;
@@ -71,3 +96,19 @@ 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/propertymanagementapp/src/features/object-search/components/filters/NumericRangeFilter.tsx

@@ -1,5 +1,6 @@
 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 type { ActiveFilterValue } from "../../utils/filterUtils";
@@ -8,6 +9,8 @@ interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onC
 	field: string;
 	label: string;
 	helpText?: string;
+	minInputProps?: React.ComponentProps<typeof Input>;
+	maxInputProps?: React.ComponentProps<typeof Input>;
 }
 
 export function NumericRangeFilter({
@@ -15,13 +18,22 @@ export function NumericRangeFilter({
 	label,
 	helpText,
 	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} />
+			<NumericRangeFilterInputs
+				field={field}
+				label={label}
+				value={value}
+				onChange={onChange}
+				minInputProps={minInputProps}
+				maxInputProps={maxInputProps}
+			/>
 			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
@@ -46,6 +58,24 @@ export function NumericRangeFilterInputs({
 	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;
+
+		if (!min || !max) return null;
+
+		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 handleChange = (bound: "min" | "max", v: string) => {
 		const next = {
 			field,
@@ -55,6 +85,7 @@ export function NumericRangeFilterInputs({
 			max: value?.max ?? "",
 			[bound]: v,
 		};
+
 		if (!next.min && !next.max) {
 			onChange(undefined);
 		} else {
@@ -62,6 +93,20 @@ export function NumericRangeFilterInputs({
 		}
 	};
 
+	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 });
+		}
+	};
+
 	return (
 		<div className={cn("flex gap-2", className)} {...props}>
 			<Input
@@ -69,6 +114,7 @@ export function NumericRangeFilterInputs({
 				placeholder="Min"
 				value={value?.min ?? ""}
 				onChange={(e) => handleChange("min", e.target.value)}
+				onBlur={(e) => handleBlur("min", e.target.value)}
 				aria-label={`${label} minimum`}
 				{...minInputProps}
 			/>
@@ -77,6 +123,7 @@ export function NumericRangeFilterInputs({
 				placeholder="Max"
 				value={value?.max ?? ""}
 				onChange={(e) => handleChange("max", e.target.value)}
+				onBlur={(e) => handleBlur("max", e.target.value)}
 				aria-label={`${label} maximum`}
 				{...maxInputProps}
 			/>

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/hooks/useObjectSearchParams.ts

@@ -20,6 +20,11 @@ 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;
@@ -36,6 +41,40 @@ 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.
  *
@@ -59,7 +98,11 @@ 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],
@@ -76,6 +119,7 @@ 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.
@@ -126,6 +170,15 @@ 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);
@@ -135,11 +188,16 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[resetPagination],
+		[isManualFilterSync, 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);
@@ -148,9 +206,17 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[resetPagination],
+		[isManualFilterSync, 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(
@@ -167,6 +233,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	const resetAll = useCallback(() => {
 		setFilters([]);
+		setAppliedFilters([]);
 		setLocalSort(null);
 		resetPagination();
 		syncToUrl([], null, defaultPageSize, 0);
@@ -216,8 +283,8 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	// Translate local filter/sort state into API-ready `where` and `orderBy`.
 
 	const where = useMemo(
-		() => buildFilter<TFilter>(filters, filterConfigs),
-		[filters, filterConfigs],
+		() => buildFilter<TFilter>(isManualFilterSync ? appliedFilters : filters, filterConfigs),
+		[appliedFilters, filters, filterConfigs, isManualFilterSync],
 	);
 
 	const orderBy = useMemo(() => buildOrderBy<TOrderBy>(sort), [sort]);
@@ -229,10 +296,23 @@ 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]);
@@ -244,6 +324,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	return {
 		filters: filtersGroup,
+		filterState,
 		sort: sortGroup,
 		query,
 		pagination,

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/lib/filterUtils.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+
+export const nonNegativeNumberInputProps: ComponentProps<"input"> = {
+	min: 0,
+	onKeyDown: (event) => {
+		if (event.key === "-" || event.key === "Minus") event.preventDefault();
+	},
+	onPaste: (event) => {
+		if (event.clipboardData.getData("text").includes("-")) event.preventDefault();
+	},
+};

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/ApplicationSearch.tsx

@@ -16,12 +16,13 @@ import type { ApplicationSearchNode } from "../api/applications/applicationSearc
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
+	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
 import { FilterRow } from "../components/layout/FilterRow";
 import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
 import { DateFilter } from "../features/object-search/components/filters/DateFilter";
 import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
 import PaginationControls from "../features/object-search/components/PaginationControls";
@@ -75,14 +76,13 @@ export default function ApplicationSearch() {
 		ttl: 30_000,
 	});
 
-	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
 		Application__C_Filter,
 		Application__C_OrderBy
-	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
 	const effectiveOrderBy: Application__C_OrderBy = query.orderBy ?? {
 		CreatedDate: { order: ResultOrder.Desc },
 	};
-
 	const searchKey = `applications:${JSON.stringify({ where: query.where, orderBy: effectiveOrderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
 		() =>
@@ -138,6 +138,7 @@ export default function ApplicationSearch() {
 				<PageHeader title="Applications" description="Manage and review rental applications" />
 				<ApplicationSearchFilters
 					filters={filters}
+					filterState={filterState}
 					statusOptions={statusOptions ?? []}
 					resetAll={resetAll}
 				/>
@@ -192,10 +193,15 @@ export default function ApplicationSearch() {
 
 function ApplicationSearchFilters({
 	filters,
+	filterState,
 	statusOptions,
 	resetAll,
 }: {
 	filters: UseObjectSearchParamsReturn<Application__C_Filter, Application__C_OrderBy>["filters"];
+	filterState: UseObjectSearchParamsReturn<
+		Application__C_Filter,
+		Application__C_OrderBy
+	>["filterState"];
 	statusOptions: Array<{ value: string; label: string }>;
 	resetAll: () => void;
 }) {
@@ -205,6 +211,9 @@ function ApplicationSearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
+			onApply={filterState.apply}
+			hasPendingChanges={filterState.hasPendingChanges}
+			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Applications filters">
 				<SearchFilter
@@ -213,7 +222,7 @@ function ApplicationSearchFilters({
 					placeholder="Search by name..."
 					className="w-full sm:w-50"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Status__c"
 					label="Status"
 					options={statusOptions ?? []}
@@ -221,6 +230,7 @@ function ApplicationSearchFilters({
 				/>
 				<DateFilter field="Start_Date__c" label="Start Date" className="w-full sm:w-56" />
 				<DateFilter field="CreatedDate" label="Created Date" className="w-full sm:w-56" />
+				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx

@@ -18,12 +18,13 @@ import type { SortFieldConfig } from "../features/object-search/utils/sortUtils"
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
+	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
 import { FilterRow } from "../components/layout/FilterRow";
 import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
 import { DateFilter } from "../features/object-search/components/filters/DateFilter";
 import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
 import PaginationControls from "../features/object-search/components/PaginationControls";
@@ -101,14 +102,13 @@ export default function MaintenanceRequestSearch() {
 		{ key: "distinctMaintenanceRequestPriority", ttl: 30_000 },
 	);
 
-	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
 		Maintenance_Request__C_Filter,
 		Maintenance_Request__C_OrderBy
-	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
 	const effectiveOrderBy: Maintenance_Request__C_OrderBy = query.orderBy ?? {
 		CreatedDate: { order: ResultOrder.Desc },
 	};
-
 	const searchKey = `maintenance-requests:${JSON.stringify({ where: query.where, orderBy: effectiveOrderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
 		() =>
@@ -167,6 +167,7 @@ export default function MaintenanceRequestSearch() {
 				/>
 				<MaintenanceRequestSearchFilters
 					filters={filters}
+					filterState={filterState}
 					statusOptions={statusOptions ?? []}
 					typeOptions={typeOptions ?? []}
 					priorityOptions={priorityOptions ?? []}
@@ -224,6 +225,7 @@ export default function MaintenanceRequestSearch() {
 
 function MaintenanceRequestSearchFilters({
 	filters,
+	filterState,
 	statusOptions,
 	typeOptions,
 	priorityOptions,
@@ -233,6 +235,10 @@ function MaintenanceRequestSearchFilters({
 		Maintenance_Request__C_Filter,
 		Maintenance_Request__C_OrderBy
 	>["filters"];
+	filterState: UseObjectSearchParamsReturn<
+		Maintenance_Request__C_Filter,
+		Maintenance_Request__C_OrderBy
+	>["filterState"];
 	statusOptions: Array<{ value: string; label: string }>;
 	typeOptions: Array<{ value: string; label: string }>;
 	priorityOptions: Array<{ value: string; label: string }>;
@@ -244,6 +250,9 @@ function MaintenanceRequestSearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
+			onApply={filterState.apply}
+			hasPendingChanges={filterState.hasPendingChanges}
+			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Maintenance Requests filters">
 				<SearchFilter
@@ -252,25 +261,26 @@ function MaintenanceRequestSearchFilters({
 					placeholder="Search by name..."
 					className="w-full sm:w-50"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Status__c"
 					label="Status"
 					options={statusOptions}
 					className="w-full sm:w-36"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Type__c"
 					label="Type"
 					options={typeOptions}
 					className="w-full sm:w-36"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Priority__c"
 					label="Priority"
 					options={priorityOptions}
 					className="w-full sm:w-36"
 				/>
 				<DateFilter field="Scheduled__c" label="Scheduled" className="w-full sm:w-56" />
+				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx

@@ -15,12 +15,13 @@ import type { SortFieldConfig } from "../features/object-search/utils/sortUtils"
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
+	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
 import { FilterRow } from "../components/layout/FilterRow";
 import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
 import { TextFilter } from "../features/object-search/components/filters/TextFilter";
 import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
 import { DateFilter } from "../features/object-search/components/filters/DateFilter";
@@ -41,6 +42,7 @@ import type {
 	Maintenance_Worker__C_OrderBy,
 } from "../api/graphql-operations-types";
 import { PAGINATION_CONFIG } from "../lib/constants";
+import { nonNegativeNumberInputProps } from "../lib/filterUtils";
 
 const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{
@@ -72,10 +74,10 @@ export default function MaintenanceWorkerSearch() {
 		ttl: 30_000,
 	});
 
-	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
 		Maintenance_Worker__C_Filter,
 		Maintenance_Worker__C_OrderBy
-	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
 
 	const searchKey = `maintenance-workers:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
@@ -109,6 +111,7 @@ export default function MaintenanceWorkerSearch() {
 				<PageHeader title="Maintenance Workers" description="View and filter maintenance workers" />
 				<MaintenanceWorkerSearchFilters
 					filters={filters}
+					filterState={filterState}
 					typeOptions={typeOptions ?? []}
 					resetAll={resetAll}
 				/>
@@ -163,6 +166,7 @@ export default function MaintenanceWorkerSearch() {
 
 function MaintenanceWorkerSearchFilters({
 	filters,
+	filterState,
 	typeOptions,
 	resetAll,
 }: {
@@ -170,6 +174,10 @@ function MaintenanceWorkerSearchFilters({
 		Maintenance_Worker__C_Filter,
 		Maintenance_Worker__C_OrderBy
 	>["filters"];
+	filterState: UseObjectSearchParamsReturn<
+		Maintenance_Worker__C_Filter,
+		Maintenance_Worker__C_OrderBy
+	>["filterState"];
 	typeOptions: Array<{ value: string; label: string }>;
 	resetAll: () => void;
 }) {
@@ -179,6 +187,9 @@ function MaintenanceWorkerSearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
+			onApply={filterState.apply}
+			hasPendingChanges={filterState.hasPendingChanges}
+			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Maintenance Workers filters">
 				<SearchFilter
@@ -187,7 +198,7 @@ function MaintenanceWorkerSearchFilters({
 					placeholder="By name, or phone..."
 					className="w-full sm:w-50"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Employment_Type__c"
 					label="Employment Type"
 					options={typeOptions}
@@ -199,8 +210,15 @@ function MaintenanceWorkerSearchFilters({
 					placeholder="Location"
 					className="w-full sm:w-50"
 				/>
-				<NumericRangeFilter field="Hourly_Rate__c" label="Hourly Rate" className="w-full sm:w-50" />
+				<NumericRangeFilter
+					field="Hourly_Rate__c"
+					label="Hourly Rate"
+					className="w-full sm:w-50"
+					minInputProps={nonNegativeNumberInputProps}
+					maxInputProps={nonNegativeNumberInputProps}
+				/>
 				<DateFilter field="CreatedDate" label="Created Date" className="w-full sm:w-56" />
+				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/PropertySearch.tsx

@@ -17,12 +17,13 @@ import type { Property__C_Filter, Property__C_OrderBy } from "../api/graphql-ope
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
+	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
 import { FilterRow } from "../components/layout/FilterRow";
 import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
 import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
 import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
 import PaginationControls from "../features/object-search/components/PaginationControls";
@@ -30,6 +31,7 @@ import { PropertyCard } from "../components/properties/PropertyCard";
 import { PropertyDetailsModal } from "../components/properties/PropertyDetailsModal";
 import { Skeleton } from "../components/ui/skeleton";
 import { PAGINATION_CONFIG } from "../lib/constants";
+import { nonNegativeNumberInputProps } from "../lib/filterUtils";
 
 const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{
@@ -65,10 +67,10 @@ export default function PropertySearch() {
 		ttl: 30_000,
 	});
 
-	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
 		Property__C_Filter,
 		Property__C_OrderBy
-	>(FILTER_CONFIGS, PROPERTY_SORT_CONFIGS, PAGINATION_CONFIG);
+	>(FILTER_CONFIGS, PROPERTY_SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
 
 	const searchKey = `properties:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
@@ -102,6 +104,7 @@ export default function PropertySearch() {
 				<PageHeader title="Properties" description="Browse and manage available properties" />
 				<PropertySearchFilters
 					filters={filters}
+					filterState={filterState}
 					statusOptions={statusOptions ?? []}
 					typeOptions={typeOptions ?? []}
 					resetAll={resetAll}
@@ -148,11 +151,13 @@ export default function PropertySearch() {
 
 function PropertySearchFilters({
 	filters,
+	filterState,
 	statusOptions,
 	typeOptions,
 	resetAll,
 }: {
 	filters: UseObjectSearchParamsReturn<Property__C_Filter, Property__C_OrderBy>["filters"];
+	filterState: UseObjectSearchParamsReturn<Property__C_Filter, Property__C_OrderBy>["filterState"];
 	statusOptions: Array<{ value: string; label: string }>;
 	typeOptions: Array<{ value: string; label: string }>;
 	resetAll: () => void;
@@ -163,6 +168,9 @@ function PropertySearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
+			onApply={filterState.apply}
+			hasPendingChanges={filterState.hasPendingChanges}
+			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Properties filters">
 				<SearchFilter
@@ -171,13 +179,13 @@ function PropertySearchFilters({
 					placeholder="Search by name or address..."
 					className="w-full sm:w-50"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Status__c"
 					label="Status"
 					options={statusOptions}
 					className="w-full sm:w-36"
 				/>
-				<SelectFilter
+				<MultiSelectFilter
 					field="Type__c"
 					label="Type"
 					options={typeOptions}
@@ -187,8 +195,17 @@ function PropertySearchFilters({
 					field="Monthly_Rent__c"
 					label="Monthly Rent"
 					className="w-full sm:w-50"
+					minInputProps={nonNegativeNumberInputProps}
+					maxInputProps={nonNegativeNumberInputProps}
 				/>
-				<NumericRangeFilter field="Bedrooms__c" label="Bedrooms" className="w-full sm:w-50" />
+				<NumericRangeFilter
+					field="Bedrooms__c"
+					label="Bedrooms"
+					className="w-full sm:w-50"
+					minInputProps={nonNegativeNumberInputProps}
+					maxInputProps={nonNegativeNumberInputProps}
+				/>
+				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.116.12",
+  "version": "1.116.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.116.12",
+      "version": "1.116.13",
       "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.116.12",
+  "version": "1.116.13",
   "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-sample-b2e-experimental",
-  "version": "1.116.12",
+  "version": "1.116.13",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/webapp-experimental": "^1.116.12",
+    "@salesforce/webapp-experimental": "^1.116.13",
     "sonner": "^1.7.0"
   },
   "devDependencies": {