@salesforce/ui-bundle-template-app-react-sample-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/components/filters/BooleanFilter.tsx

@@ -0,0 +1,78 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+const ALL_VALUE = "__all__";
+
+interface BooleanFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+}
+
+export function BooleanFilter({ field, label, helpText, className, ...props }: BooleanFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
+			<BooleanFilterSelect field={field} label={label} value={value} onChange={onChange} />
+		</FilterFieldWrapper>
+	);
+}
+
+interface BooleanFilterSelectProps {
+	field: string;
+	label: string;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+}
+
+export function BooleanFilterSelect({
+	field,
+	label,
+	value,
+	onChange,
+	triggerProps,
+	contentProps,
+}: BooleanFilterSelectProps) {
+	return (
+		<Select
+			value={value?.value ?? ALL_VALUE}
+			onValueChange={(v) => {
+				if (v === ALL_VALUE) {
+					onChange(undefined);
+				} else {
+					onChange({ field, label, type: "boolean", value: v });
+				}
+			}}
+		>
+			<SelectTrigger
+				id={`filter-${field}`}
+				{...triggerProps}
+				className={cn("w-full", triggerProps?.className)}
+			>
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent {...contentProps}>
+				<SelectItem value={ALL_VALUE}>All</SelectItem>
+				<SelectItem value="true">Yes</SelectItem>
+				<SelectItem value="false">No</SelectItem>
+			</SelectContent>
+		</Select>
+	);
+}

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

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { parseISO } from "date-fns";
+import {
+	DatePicker,
+	DatePickerTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+
+type DateOperator = "gt" | "lt";
+
+const OPERATOR_OPTIONS: { value: DateOperator; label: string }[] = [
+	{ value: "gt", label: "After" },
+	{ value: "lt", label: "Before" },
+];
+
+function operatorToField(op: DateOperator): "min" | "max" {
+	return op === "gt" ? "min" : "max";
+}
+
+interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+	filterType?: FilterFieldType;
+}
+
+export function DateFilter({
+	field,
+	label,
+	helpText,
+	filterType = "date",
+	className,
+	...props
+}: DateFilterProps) {
+	const { value, onChange } = useFilterField(field);
+
+	const initialOp: DateOperator = value?.min ? "gt" : "lt";
+	const [operator, setOperator] = useState<DateOperator>(initialOp);
+
+	const currentDate = toDate(value?.min ?? value?.max);
+
+	function handleOperatorChange(op: DateOperator) {
+		setOperator(op);
+		if (currentDate) {
+			emitChange(op, currentDate);
+		}
+	}
+
+	function handleDateChange(date: Date | undefined) {
+		if (!date) {
+			onChange(undefined);
+		} else {
+			emitChange(operator, date);
+		}
+	}
+
+	function emitChange(op: DateOperator, date: Date) {
+		const dateStr = toDateString(date);
+		const f = operatorToField(op);
+		onChange({
+			field,
+			label,
+			type: filterType,
+			value: op,
+			min: f === "min" ? dateStr : undefined,
+			max: f === "max" ? dateStr : undefined,
+		});
+	}
+
+	return (
+		<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">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{OPERATOR_OPTIONS.map((opt) => (
+							<SelectItem key={opt.value} value={opt.value}>
+								{opt.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<DatePicker>
+					<DatePickerTrigger
+						className="w-full flex-2"
+						date={currentDate}
+						dateFormat="MMM do, yyyy"
+						placeholder="Pick a date"
+						aria-label={label}
+					/>
+					<DatePickerContent>
+						<DatePickerCalendar
+							mode="single"
+							captionLayout="dropdown"
+							selected={currentDate}
+							onSelect={handleDateChange}
+						/>
+					</DatePickerContent>
+				</DatePicker>
+			</div>
+		</FilterFieldWrapper>
+	);
+}
+
+export function toDate(value: string | undefined): Date | undefined {
+	if (!value) return undefined;
+	const parsed = parseISO(value);
+	return isNaN(parsed.getTime()) ? undefined : parsed;
+}
+
+export function toDateString(date: Date | undefined): string {
+	if (!date) return "";
+	return date.toISOString().split("T")[0];
+}

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

@@ -0,0 +1,70 @@
+import type { DateRange } from "react-day-picker";
+import {
+	DatePicker,
+	DatePickerRangeTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+
+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) {
+	const { value, onChange } = useFilterField(field);
+
+	const dateRange: DateRange | undefined =
+		value?.min || value?.max ? { from: toDate(value?.min), to: toDate(value?.max) } : undefined;
+
+	function handleRangeSelect(range: DateRange | undefined) {
+		if (!range?.from && !range?.to) {
+			onChange(undefined);
+		} else {
+			onChange({
+				field,
+				label,
+				type: filterType,
+				min: toDateString(range?.from),
+				max: toDateString(range?.to),
+			});
+		}
+	}
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+			<DatePicker>
+				<DatePickerRangeTrigger
+					className="w-full"
+					dateRange={dateRange}
+					placeholder="Pick a date range"
+					aria-label={label}
+				/>
+				<DatePickerContent align="start">
+					<DatePickerCalendar
+						mode="range"
+						captionLayout="dropdown"
+						defaultMonth={dateRange?.from}
+						selected={dateRange}
+						onSelect={handleRangeSelect}
+						numberOfMonths={2}
+					/>
+				</DatePickerContent>
+			</DatePicker>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/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/uiBundles/propertyrentalapp/src/features/object-search/components/filters/MultiSelectFilter.tsx

@@ -0,0 +1,97 @@
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../components/ui/popover";
+import { Checkbox } from "../../../../components/ui/checkbox";
+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;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}
+
+export function MultiSelectFilter({
+	field,
+	label,
+	options,
+	helpText,
+	className,
+	...props
+}: MultiSelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const selected = value?.value ? value.value.split(",") : [];
+
+	const triggerLabel =
+		selected.length === 0
+			? `Select ${label.toLowerCase()}`
+			: selected.length === 1
+				? (options.find((o) => o.value === selected[0])?.label ?? selected[0])
+				: `${selected.length} selected`;
+
+	function handleToggle(optionValue: string) {
+		const next = selected.includes(optionValue)
+			? selected.filter((v) => v !== optionValue)
+			: [...selected, optionValue];
+
+		if (next.length === 0) {
+			onChange(undefined);
+		} else {
+			onChange({
+				field,
+				label,
+				type: "multipicklist",
+				value: next.join(","),
+			});
+		}
+	}
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						variant="outline"
+						role="combobox"
+						className={cn(
+							"w-full justify-between font-normal",
+							selected.length === 0 && "text-muted-foreground",
+						)}
+					>
+						<span className="truncate">{triggerLabel}</span>
+						<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="p-2" align="start">
+					<div className="max-h-48 overflow-y-auto space-y-1">
+						{options.map((opt) => {
+							const id = `filter-${field}-${opt.value}`;
+							return (
+								<div
+									key={opt.value}
+									className="flex items-center gap-2 rounded px-1 py-0.5 hover:bg-accent"
+								>
+									<Checkbox
+										id={id}
+										checked={selected.includes(opt.value)}
+										onCheckedChange={() => handleToggle(opt.value)}
+									/>
+									<Label htmlFor={id} className="text-sm font-normal cursor-pointer w-full">
+										{opt.label}
+									</Label>
+								</div>
+							);
+						})}
+					</div>
+				</PopoverContent>
+			</Popover>
+		</FilterFieldWrapper>
+	);
+}

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

@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import { Input } from "../../../../components/ui/input";
+
+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;
+	min?: number;
+	max?: number;
+}
+
+export function NumericRangeFilter({
+	field,
+	label,
+	helpText,
+	min,
+	max,
+	className,
+	...props
+}: NumericRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<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>;
+}
+
+export function NumericRangeFilterInputs({
+	field,
+	label,
+	helpText,
+	value,
+	onChange,
+	min: boundMin,
+	max: boundMax,
+	className,
+	...props
+}: NumericRangeFilterInputsProps) {
+	const [localMin, setLocalMin] = useState(value?.min ?? "");
+	const [localMax, setLocalMax] = useState(value?.max ?? "");
+
+	const externalMin = value?.min ?? "";
+	const externalMax = value?.max ?? "";
+	useEffect(() => {
+		setLocalMin(externalMin);
+	}, [externalMin]);
+	useEffect(() => {
+		setLocalMax(externalMax);
+	}, [externalMax]);
+
+	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 debouncedOnChange = useDebouncedCallback((min: string, max: string) => {
+		if (!min && !max) {
+			onChange(undefined);
+			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 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 (
+		<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/uiBundles/propertyrentalapp/src/features/object-search/components/filters/SearchFilter.tsx

@@ -0,0 +1,50 @@
+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;
+	label: string;
+	placeholder?: string;
+}
+
+export function SearchFilter({
+	field,
+	label,
+	placeholder,
+	className,
+	...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 (
+		<FilterFieldWrapper label={label} htmlFor={`filter-${field}`} className={className} {...props}>
+			<SearchBar
+				value={localValue}
+				handleChange={(v) => {
+					setLocalValue(v);
+					debouncedOnChange(v);
+				}}
+				placeholder={placeholder}
+				inputProps={{ id: `filter-${field}` }}
+			/>
+		</FilterFieldWrapper>
+	);
+}