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

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.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
+
+
+
+
+
 ## [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

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.13",
-    "@salesforce/webapp-experimental": "^1.116.13",
+    "@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",
@@ -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.13",
+    "@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/propertymanagementapp/src/components/layout/FilterRow.tsx

@@ -12,7 +12,7 @@ export function FilterRow({
 }: FilterRowProps) {
 	return (
 		<div
-			className={cn("bg-white rounded-lg shadow-sm border border-gray-200 p-4", className)}
+			className={cn("bg-white rounded-lg shadow-sm border border-gray-200 p-4 pb-2", className)}
 			role="region"
 			aria-label={ariaLabel}
 			{...props}

package/dist/force-app/main/default/webapplications/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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>
 	);
 }