@salesforce/templates 66.5.6 → 66.6.0

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/PaginationControls.tsx

@@ -0,0 +1,109 @@
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+} from "../../../components/ui/pagination";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Label } from "../../../components/ui/label";
+
+interface PaginationControlsProps {
+	pageIndex: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	pageSize: number;
+	pageSizeOptions: readonly number[];
+	onNextPage: () => void;
+	onPreviousPage: () => void;
+	onPageSizeChange: (newPageSize: number) => void;
+	disabled?: boolean;
+}
+
+export default function PaginationControls({
+	pageIndex,
+	hasNextPage,
+	hasPreviousPage,
+	pageSize,
+	pageSizeOptions,
+	onNextPage,
+	onPreviousPage,
+	onPageSizeChange,
+	disabled = false,
+}: PaginationControlsProps) {
+	const handlePageSizeChange = (newValue: string) => {
+		const newSize = parseInt(newValue, 10);
+		if (!isNaN(newSize) && newSize !== pageSize) {
+			onPageSizeChange(newSize);
+		}
+	};
+	const currentPage = pageIndex + 1;
+	const prevDisabled = disabled || !hasPreviousPage;
+	const nextDisabled = disabled || !hasNextPage;
+
+	return (
+		<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2">
+			<div
+				className="flex justify-center sm:justify-start items-center gap-2 shrink-0 row-2 sm:row-1"
+				role="group"
+				aria-label="Page size selector"
+			>
+				<Label htmlFor="page-size-select" className="text-sm font-normal whitespace-nowrap">
+					Results per page:
+				</Label>
+				<Select
+					value={pageSize.toString()}
+					onValueChange={handlePageSizeChange}
+					disabled={disabled}
+				>
+					<SelectTrigger
+						id="page-size-select"
+						className="w-16"
+						aria-label="Select number of results per page"
+					>
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{pageSizeOptions.map((size) => (
+							<SelectItem key={size} value={size.toString()}>
+								{size}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+			<Pagination className="w-full mx-0 sm:justify-end">
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							onClick={prevDisabled ? undefined : onPreviousPage}
+							aria-disabled={prevDisabled}
+							className={prevDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+						/>
+					</PaginationItem>
+					<PaginationItem>
+						<span
+							className="min-w-16 text-center text-sm text-muted-foreground px-2"
+							aria-current="page"
+						>
+							Page {currentPage}
+						</span>
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationNext
+							onClick={nextDisabled ? undefined : onNextPage}
+							aria-disabled={nextDisabled}
+							className={nextDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+		</div>
+	);
+}

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/BooleanFilter.tsx

@@ -7,52 +7,31 @@ 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 BooleanFilterProps 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 BooleanFilterSelect>,
-		"config" | "value" | "onChange"
-	>;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	helpText?: string;
 }
 
-export function BooleanFilter({
-	config,
-	value,
-	onChange,
-	className,
-	labelProps,
-	controlProps,
-	helpTextProps,
-	...props
-}: BooleanFilterProps) {
+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-${config.field}`} {...labelProps}>
-				{labelProps?.children ?? config.label}
-			</Label>
-			<BooleanFilterSelect 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>
+			<BooleanFilterSelect field={field} label={label} value={value} onChange={onChange} />
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }
 
 interface BooleanFilterSelectProps {
-	config: FilterFieldConfig;
+	field: string;
+	label: string;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
 	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
@@ -60,7 +39,8 @@ interface BooleanFilterSelectProps {
 }
 
 export function BooleanFilterSelect({
-	config,
+	field,
+	label,
 	value,
 	onChange,
 	triggerProps,
@@ -73,12 +53,12 @@ export function BooleanFilterSelect({
 				if (v === ALL_VALUE) {
 					onChange(undefined);
 				} else {
-					onChange({ field: config.field, label: config.label, type: "boolean", value: v });
+					onChange({ field, label, type: "boolean", value: v });
 				}
 			}}
 		>
 			<SelectTrigger
-				id={`filter-${config.field}`}
+				id={`filter-${field}`}
 				{...triggerProps}
 				className={cn("w-full", triggerProps?.className)}
 			>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateFilter.tsx

@@ -0,0 +1,121 @@
+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 {
+	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;
+}
+
+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);
+
+	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: "date",
+			value: op,
+			min: f === "min" ? dateStr : undefined,
+			max: f === "max" ? dateStr : undefined,
+		});
+	}
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<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) => (
+							<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>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}
+
+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/lib/templates/project/{reactb2e → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/_os_/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/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/_os_/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/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/_os_/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/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -0,0 +1,37 @@
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import { SearchBar } from "../SearchBar";
+import { useFilterField } from "../FilterContext";
+
+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);
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<SearchBar
+				value={value?.value ?? ""}
+				handleChange={(v) => {
+					if (v) {
+						onChange({ field, label, type: "search", value: v });
+					} else {
+						onChange(undefined);
+					}
+				}}
+				placeholder={placeholder}
+				inputProps={{ id: `filter-${field}` }}
+			/>
+		</div>
+	);
+}