@salesforce/webapp-template-app-react-template-b2e-experimental 1.112.6 → 1.112.8

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

@@ -1,41 +1,36 @@
 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 TextFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	config: FilterFieldConfig;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	labelProps?: React.ComponentProps<typeof Label>;
-	inputProps?: Omit<React.ComponentProps<typeof TextFilterInput>, "config" | "value" | "onChange">;
-	helpTextProps?: React.ComponentProps<"p">;
+	field: string;
+	label: string;
+	placeholder?: string;
+	helpText?: string;
 }
 
 export function TextFilter({
-	config,
-	value,
-	onChange,
+	field,
+	label,
+	placeholder,
+	helpText,
 	className,
-	labelProps,
-	inputProps,
-	helpTextProps,
 	...props
 }: TextFilterProps) {
+	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>
-			<TextFilterInput config={config} value={value} onChange={onChange} {...inputProps} />
-			{config.helpText && (
-				<p
-					{...helpTextProps}
-					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
-				>
-					{helpTextProps?.children ?? config.helpText}
-				</p>
-			)}
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<TextFilterInput
+				field={field}
+				label={label}
+				placeholder={placeholder}
+				value={value}
+				onChange={onChange}
+			/>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
 		</div>
 	);
 }
@@ -44,13 +39,15 @@ interface TextFilterInputProps extends Omit<
 	React.ComponentProps<typeof Input>,
 	"onChange" | "value"
 > {
-	config: FilterFieldConfig;
+	field: string;
+	label: string;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
 }
 
 export function TextFilterInput({
-	config,
+	field,
+	label,
 	value,
 	onChange,
 	className,
@@ -58,14 +55,14 @@ export function TextFilterInput({
 }: TextFilterInputProps) {
 	return (
 		<Input
-			id={`filter-${config.field}`}
+			id={`filter-${field}`}
 			type="text"
-			placeholder={config.placeholder ?? `Filter by ${config.label.toLowerCase()}...`}
+			placeholder={props.placeholder ?? `Filter by ${label.toLowerCase()}...`}
 			value={value?.value ?? ""}
 			onChange={(e) => {
 				const v = e.target.value;
 				if (v) {
-					onChange({ field: config.field, label: config.label, type: "text", value: v });
+					onChange({ field, label, type: "text", value: v });
 				} else {
 					onChange(undefined);
 				}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/object-search/hooks/useAsyncData.ts

@@ -38,6 +38,7 @@ export function useAsyncData<T>(
 				if (!cancelled) setData(result);
 			})
 			.catch((err) => {
+				console.error(err);
 				if (!cancelled) setError(err instanceof Error ? err.message : "An error occurred");
 			})
 			.finally(() => {

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/object-search/hooks/useCachedAsyncData.ts

@@ -166,6 +166,7 @@ export function useCachedAsyncData<T>(
 				}
 			})
 			.catch((err) => {
+				console.error(err);
 				if (!cancelled) setError(err instanceof Error ? err.message : "An error occurred");
 			})
 			.finally(() => {

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/object-search/hooks/useObjectSearchParams.ts

@@ -14,6 +14,28 @@ export interface PaginationConfig {
 	validPageSizes: number[];
 }
 
+export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
+	filters: {
+		active: ActiveFilterValue[];
+		set: (field: string, value: ActiveFilterValue | undefined) => void;
+		remove: (field: string) => void;
+	};
+	sort: {
+		current: SortState | null;
+		set: (sort: SortState | null) => void;
+	};
+	query: { where: TFilter; orderBy: TOrderBy };
+	pagination: {
+		pageSize: number;
+		pageIndex: number;
+		afterCursor: string | undefined;
+		setPageSize: (size: number) => void;
+		goToNextPage: (cursor: string) => void;
+		goToPreviousPage: () => void;
+	};
+	resetAll: () => void;
+}
+
 /**
  * Manages filter, sort, and cursor-based pagination state for an object search page.
  *

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.112.6",
+  "version": "1.112.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.112.6",
+      "version": "1.112.8",
       "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.112.6",
+  "version": "1.112.8",
   "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-template-b2e-experimental",
-  "version": "1.112.6",
+  "version": "1.112.8",
   "description": "B2E template app (from BYO)",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

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

@@ -1,127 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
-import { Button } from "../../../components/ui/button";
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "../../../components/ui/collapsible";
-import { cn } from "../../../lib/utils";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-import type { FilterFieldConfig, ActiveFilterValue } from "../utils/filterUtils";
-import { TextFilter } from "./filters/TextFilter";
-import { SelectFilter } from "./filters/SelectFilter";
-import { NumericRangeFilter } from "./filters/NumericRangeFilter";
-import { BooleanFilter } from "./filters/BooleanFilter";
-import { DateFilter } from "./filters/DateFilter";
-import { DateRangeFilter } from "./filters/DateRangeFilter";
-import { MultiSelectFilter } from "./filters/MultiSelectFilter";
-import { SearchFilter } from "./filters/SearchFilter";
-
-interface FilterPanelProps extends Omit<React.ComponentProps<"div">, "onReset"> {
-	configs: FilterFieldConfig[];
-	filters: ActiveFilterValue[];
-	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
-	onReset: () => void;
-	headerProps?: React.ComponentProps<typeof CardHeader>;
-	titleProps?: React.ComponentProps<typeof CardTitle>;
-	contentProps?: React.ComponentProps<typeof CardContent>;
-	resetButtonProps?: React.ComponentProps<typeof Button>;
-	toggleButtonProps?: React.ComponentProps<typeof Button>;
-}
-
-function getFilterValue(
-	filters: ActiveFilterValue[],
-	field: string,
-): ActiveFilterValue | undefined {
-	return filters.find((f) => f.field === field);
-}
-
-function renderFilter(
-	config: FilterFieldConfig,
-	value: ActiveFilterValue | undefined,
-	onChange: (value: ActiveFilterValue | undefined) => void,
-) {
-	switch (config.type) {
-		case "text":
-			return <TextFilter config={config} value={value} onChange={onChange} />;
-		case "picklist":
-			return <SelectFilter config={config} value={value} onChange={onChange} />;
-		case "numeric":
-			return <NumericRangeFilter config={config} value={value} onChange={onChange} />;
-		case "boolean":
-			return <BooleanFilter config={config} value={value} onChange={onChange} />;
-		case "date":
-			return <DateFilter config={config} value={value} onChange={onChange} />;
-		case "daterange":
-			return <DateRangeFilter config={config} value={value} onChange={onChange} />;
-		case "multipicklist":
-			return <MultiSelectFilter config={config} value={value} onChange={onChange} />;
-		case "search":
-			return <SearchFilter config={config} value={value} onChange={onChange} />;
-	}
-}
-
-export function FilterPanel({
-	configs,
-	filters,
-	onFilterChange,
-	onReset,
-	className,
-	headerProps,
-	titleProps,
-	contentProps,
-	resetButtonProps,
-	toggleButtonProps,
-	...props
-}: FilterPanelProps) {
-	const [open, setOpen] = useState(true);
-	const hasActiveFilters = filters.length > 0;
-
-	return (
-		<Card className={cn(className)} {...props}>
-			<Collapsible open={open} onOpenChange={setOpen}>
-				<CardHeader
-					{...headerProps}
-					className={cn(
-						"flex flex-row items-center justify-between space-y-0 pb-2",
-						headerProps?.className,
-					)}
-				>
-					<CardTitle
-						{...titleProps}
-						className={cn("text-base font-semibold", titleProps?.className)}
-					>
-						{titleProps?.children ?? <h2>Filters</h2>}
-					</CardTitle>
-					<div className="flex items-center gap-1">
-						{hasActiveFilters && (
-							<Button variant="destructive" size="sm" onClick={onReset} {...resetButtonProps}>
-								{resetButtonProps?.children ?? "Reset"}
-							</Button>
-						)}
-						<CollapsibleTrigger asChild>
-							<Button variant="ghost" size="icon" {...toggleButtonProps}>
-								<ChevronDown
-									className={`h-4 w-4 transition-transform ${open ? "" : "-rotate-90"}`}
-								/>
-								<span className="sr-only">Toggle filters</span>
-							</Button>
-						</CollapsibleTrigger>
-					</div>
-				</CardHeader>
-				<CollapsibleContent>
-					<CardContent {...contentProps} className={cn("space-y-4 pt-0", contentProps?.className)}>
-						{configs.map((config) => (
-							<div key={config.field}>
-								{renderFilter(config, getFilterValue(filters, config.field), (value) =>
-									onFilterChange(config.field, value),
-								)}
-							</div>
-						))}
-					</CardContent>
-				</CollapsibleContent>
-			</Collapsible>
-		</Card>
-	);
-}