@salesforce/webapp-template-app-react-sample-b2x-experimental 1.116.12 → 1.117.0

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+## [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/propertyrentalapp/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.117.0",
+    "@salesforce/webapp-experimental": "^1.117.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -47,7 +47,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.117.0",
     "@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/propertyrentalapp/propertyrentalapp.webapplication-meta.xml

@@ -4,4 +4,5 @@
     <description>A Salesforce web application.</description>
     <isActive>true</isActive>
     <version>1</version>
+    <target>Experience</target>
 </WebApplication>

package/dist/force-app/main/default/webapplications/propertyrentalapp/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/propertyrentalapp/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/propertyrentalapp/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/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.116.12",
+  "version": "1.117.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.116.12",
+      "version": "1.117.0",
       "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.117.0",
   "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-b2x-experimental",
-  "version": "1.116.12",
+  "version": "1.117.0",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",