@salesforce/webapp-template-app-react-template-b2e-experimental 1.112.5 → 1.112.7

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

@@ -1,13 +1,6 @@
 import { useState } from "react";
 import { parseISO } from "date-fns";
-import { ChevronDown, Check } from "lucide-react";
 import { Label } from "../../../../components/ui/label";
-import { Button } from "../../../../components/ui/button";
-import {
-	Popover,
-	PopoverTrigger,
-	PopoverContent,
-} from "../../../../components/ui/popover";
 import {
 	DatePicker,
 	DatePickerTrigger,
@@ -15,7 +8,14 @@ import {
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
 import { cn } from "../../../../lib/utils";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
 
 type DateOperator = "gt" | "lt";
 
@@ -24,29 +24,19 @@ const OPERATOR_OPTIONS: { value: DateOperator; label: string }[] = [
 	{ value: "lt", label: "Before" },
 ];
 
-/** Maps operator to the ActiveFilterValue field used to carry the date. */
 function operatorToField(op: DateOperator): "min" | "max" {
 	return op === "gt" ? "min" : "max";
 }
 
 interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	helpText?: string;
 }
 
-export function DateFilter({
-	config,
-	value,
-	onChange,
-	className,
-	labelProps,
-	helpTextProps,
-	...props
-}: DateFilterProps) {
-	// Derive initial operator from the existing value (min → gt, max → lt)
+export function DateFilter({ field, label, helpText, className, ...props }: DateFilterProps) {
+	const { value, onChange } = useFilterField(field);
+
 	const initialOp: DateOperator = value?.min ? "gt" : "lt";
 	const [operator, setOperator] = useState<DateOperator>(initialOp);
 
@@ -69,67 +59,40 @@ export function DateFilter({
 
 	function emitChange(op: DateOperator, date: Date) {
 		const dateStr = toDateString(date);
-		const field = operatorToField(op);
+		const f = operatorToField(op);
 		onChange({
-			field: config.field,
-			label: config.label,
+			field,
+			label,
 			type: "date",
 			value: op,
-			min: field === "min" ? dateStr : undefined,
-			max: field === "max" ? dateStr : undefined,
+			min: f === "min" ? dateStr : undefined,
+			max: f === "max" ? dateStr : undefined,
 		});
 	}
 
-	const [operatorOpen, setOperatorOpen] = useState(false);
-	const operatorLabel = OPERATOR_OPTIONS.find((o) => o.value === operator)?.label ?? "After";
-
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
-			<div className="flex min-w-0 gap-2">
-				<Popover open={operatorOpen} onOpenChange={setOperatorOpen}>
-					<PopoverTrigger asChild>
-						<Button
-							variant="outline"
-							className="h-9 w-[7rem] shrink-0 justify-between px-2.5 font-normal"
-							aria-label="Date operator"
-						>
-							<span className="truncate">{operatorLabel}</span>
-							<ChevronDown className="ml-1 size-4 shrink-0 opacity-50" />
-						</Button>
-					</PopoverTrigger>
-					<PopoverContent align="start" className="w-auto min-w-[7rem] p-1">
+			<Label>{label}</Label>
+			<div className="flex gap-2">
+				<Select value={operator} onValueChange={(v) => handleOperatorChange(v as DateOperator)}>
+					<SelectTrigger className="w-full flex-1">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
 						{OPERATOR_OPTIONS.map((opt) => (
-							<button
-								key={opt.value}
-								type="button"
-								className={cn(
-									"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-accent",
-									opt.value === operator && "font-medium",
-								)}
-								onClick={() => {
-									handleOperatorChange(opt.value);
-									setOperatorOpen(false);
-								}}
-							>
-								<Check
-									className={cn(
-										"size-4 shrink-0",
-										opt.value === operator ? "opacity-100" : "opacity-0",
-									)}
-								/>
+							<SelectItem key={opt.value} value={opt.value}>
 								{opt.label}
-							</button>
+							</SelectItem>
 						))}
-					</PopoverContent>
-				</Popover>
+					</SelectContent>
+				</Select>
 				<DatePicker>
 					<DatePickerTrigger
-						className="min-w-0 flex-1 basis-0 !w-auto max-w-full"
+						className="w-full flex-2"
 						date={currentDate}
 						dateFormat="MMM do, yyyy"
 						placeholder="Pick a date"
-						aria-label={config.label}
+						aria-label={label}
 					/>
 					<DatePickerContent>
 						<DatePickerCalendar
@@ -141,14 +104,7 @@ export function DateFilter({
 					</DatePickerContent>
 				</DatePicker>
 			</div>
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }

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

@@ -7,26 +7,24 @@ import {
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
 import { cn } from "../../../../lib/utils";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
 import { toDate, toDateString } from "./DateFilter";
 
 interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	helpText?: string;
 }
 
 export function DateRangeFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	helpText,
 	className,
-	labelProps,
-	helpTextProps,
 	...props
 }: DateRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+
 	const dateRange: DateRange | undefined =
 		value?.min || value?.max ? { from: toDate(value?.min), to: toDate(value?.max) } : undefined;
 
@@ -35,8 +33,8 @@ export function DateRangeFilter({
 			onChange(undefined);
 		} else {
 			onChange({
-				field: config.field,
-				label: config.label,
+				field,
+				label,
 				type: "daterange",
 				min: toDateString(range?.from),
 				max: toDateString(range?.to),
@@ -46,13 +44,13 @@ export function DateRangeFilter({
 
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
+			<Label>{label}</Label>
 			<DatePicker>
 				<DatePickerRangeTrigger
 					className="w-full"
 					dateRange={dateRange}
 					placeholder="Pick a date range"
-					aria-label={config.label}
+					aria-label={label}
 				/>
 				<DatePickerContent align="start">
 					<DatePickerCalendar
@@ -65,14 +63,7 @@ export function DateRangeFilter({
 					/>
 				</DatePickerContent>
 			</DatePicker>
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }

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

@@ -8,32 +8,31 @@ import { Label } from "../../../../components/ui/label";
 import { Button } from "../../../../components/ui/button";
 import { cn } from "../../../../lib/utils";
 import { ChevronDown } from "lucide-react";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
 
 interface MultiSelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
 }
 
 export function MultiSelectFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	options,
+	helpText,
 	className,
-	labelProps,
-	helpTextProps,
 	...props
 }: MultiSelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
 	const selected = value?.value ? value.value.split(",") : [];
 
 	const triggerLabel =
 		selected.length === 0
-			? `Select ${config.label.toLowerCase()}`
+			? `Select ${label.toLowerCase()}`
 			: selected.length === 1
-				? (config.options?.find((o) => o.value === selected[0])?.label ?? selected[0])
+				? (options.find((o) => o.value === selected[0])?.label ?? selected[0])
 				: `${selected.length} selected`;
 
 	function handleToggle(optionValue: string) {
@@ -45,8 +44,8 @@ export function MultiSelectFilter({
 			onChange(undefined);
 		} else {
 			onChange({
-				field: config.field,
-				label: config.label,
+				field,
+				label,
 				type: "multipicklist",
 				value: next.join(","),
 			});
@@ -55,7 +54,7 @@ export function MultiSelectFilter({
 
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
+			<Label>{label}</Label>
 			<Popover>
 				<PopoverTrigger asChild>
 					<Button
@@ -72,8 +71,8 @@ export function MultiSelectFilter({
 				</PopoverTrigger>
 				<PopoverContent className="p-2" align="start">
 					<div className="max-h-48 overflow-y-auto space-y-1">
-						{config.options?.map((opt) => {
-							const id = `filter-${config.field}-${opt.value}`;
+						{options.map((opt) => {
+							const id = `filter-${field}-${opt.value}`;
 							return (
 								<div
 									key={opt.value}
@@ -93,14 +92,7 @@ export function MultiSelectFilter({
 					</div>
 				</PopoverContent>
 			</Popover>
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }

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

@@ -1,53 +1,35 @@
 import { Input } from "../../../../components/ui/input";
 import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	controlProps?: Omit<
-		React.ComponentProps<typeof NumericRangeFilterInputs>,
-		"config" | "value" | "onChange"
-	>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	helpText?: string;
 }
 
 export function NumericRangeFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	helpText,
 	className,
-	labelProps,
-	controlProps,
-	helpTextProps,
 	...props
 }: NumericRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
-			<NumericRangeFilterInputs
-				config={config}
-				value={value}
-				onChange={onChange}
-				{...controlProps}
-			/>
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			<Label>{label}</Label>
+			<NumericRangeFilterInputs field={field} label={label} value={value} onChange={onChange} />
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }
 
 interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
+	field: string;
+	label: string;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
 	minInputProps?: React.ComponentProps<typeof Input>;
@@ -55,7 +37,8 @@ interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">
 }
 
 export function NumericRangeFilterInputs({
-	config,
+	field,
+	label,
 	value,
 	onChange,
 	className,
@@ -63,14 +46,14 @@ export function NumericRangeFilterInputs({
 	maxInputProps,
 	...props
 }: NumericRangeFilterInputsProps) {
-	const handleChange = (field: "min" | "max", v: string) => {
+	const handleChange = (bound: "min" | "max", v: string) => {
 		const next = {
-			field: config.field,
-			label: config.label,
+			field,
+			label,
 			type: "numeric" as const,
 			min: value?.min ?? "",
 			max: value?.max ?? "",
-			[field]: v,
+			[bound]: v,
 		};
 		if (!next.min && !next.max) {
 			onChange(undefined);
@@ -86,7 +69,7 @@ export function NumericRangeFilterInputs({
 				placeholder="Min"
 				value={value?.min ?? ""}
 				onChange={(e) => handleChange("min", e.target.value)}
-				aria-label={`${config.label} minimum`}
+				aria-label={`${label} minimum`}
 				{...minInputProps}
 			/>
 			<Input
@@ -94,7 +77,7 @@ export function NumericRangeFilterInputs({
 				placeholder="Max"
 				value={value?.max ?? ""}
 				onChange={(e) => handleChange("max", e.target.value)}
-				aria-label={`${config.label} maximum`}
+				aria-label={`${label} maximum`}
 				{...maxInputProps}
 			/>
 		</div>

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

@@ -1,39 +1,36 @@
 import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { SearchBar } from "../SearchBar";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
 
 interface SearchFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
+	field: string;
+	label: string;
+	placeholder?: string;
 }
 
 export function SearchFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	placeholder,
 	className,
-	labelProps,
 	...props
 }: SearchFilterProps) {
+	const { value, onChange } = useFilterField(field);
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${config.field}`} {...labelProps}>
-				{labelProps?.children ?? config.label}
-			</Label>
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
 			<SearchBar
 				value={value?.value ?? ""}
 				handleChange={(v) => {
 					if (v) {
-						onChange({ field: config.field, label: config.label, type: "search", value: v });
+						onChange({ field, label, type: "search", value: v });
 					} else {
 						onChange(undefined);
 					}
 				}}
-				placeholder={config.placeholder}
-				inputProps={{ id: `filter-${config.field}` }}
+				placeholder={placeholder}
+				inputProps={{ id: `filter-${field}` }}
 			/>
 		</div>
 	);

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

@@ -7,52 +7,46 @@ import {
 } from "../../../../components/ui/select";
 import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
-import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { useFilterField } from "../FilterContext";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 const ALL_VALUE = "__all__";
 
 interface SelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	controlProps?: Omit<
-		React.ComponentProps<typeof SelectFilterControl>,
-		"config" | "value" | "onChange"
-	>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
 }
 
 export function SelectFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	options,
+	helpText,
 	className,
-	labelProps,
-	controlProps,
-	helpTextProps,
 	...props
 }: SelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
 	return (
 		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${config.field}`} {...labelProps}>
-				{labelProps?.children ?? config.label}
-			</Label>
-			<SelectFilterControl config={config} value={value} onChange={onChange} {...controlProps} />
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<SelectFilterControl
+				field={field}
+				label={label}
+				options={options}
+				value={value}
+				onChange={onChange}
+			/>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }
 
 interface SelectFilterControlProps {
-	config: FilterFieldConfig;
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
 	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
@@ -60,7 +54,9 @@ interface SelectFilterControlProps {
 }
 
 export function SelectFilterControl({
-	config,
+	field,
+	label,
+	options,
 	value,
 	onChange,
 	triggerProps,
@@ -73,20 +69,20 @@ export function SelectFilterControl({
 				if (v === ALL_VALUE) {
 					onChange(undefined);
 				} else {
-					onChange({ field: config.field, label: config.label, type: "picklist", value: v });
+					onChange({ field, label, type: "picklist", value: v });
 				}
 			}}
 		>
 			<SelectTrigger
-				id={`filter-${config.field}`}
+				id={`filter-${field}`}
 				{...triggerProps}
 				className={cn("w-full", triggerProps?.className)}
 			>
-				<SelectValue placeholder={`Select ${config.label.toLowerCase()}`} />
+				<SelectValue placeholder={`Select ${label.toLowerCase()}`} />
 			</SelectTrigger>
 			<SelectContent {...contentProps}>
 				<SelectItem value={ALL_VALUE}>All</SelectItem>
-				{config.options?.map((opt) => (
+				{options.map((opt) => (
 					<SelectItem key={opt.value} value={opt.value}>
 						{opt.label}
 					</SelectItem>