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

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.112.8](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.7...v1.112.8) (2026-03-24)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.112.7](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.6...v1.112.7) (2026-03-23)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.112.6](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.5...v1.112.6) (2026-03-23)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.112.6",
-    "@salesforce/webapp-experimental": "^1.112.6",
+    "@salesforce/sdk-data": "^1.112.8",
+    "@salesforce/webapp-experimental": "^1.112.8",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -42,7 +42,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.112.6",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.112.8",
     "@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/appreacttemplateb2e/src/api/graphqlClient.ts

@@ -0,0 +1,25 @@
+/**
+ * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ */
+import { createDataSDK } from '@salesforce/sdk-data';
+
+export async function executeGraphQL<TData, TVariables>(
+  query: string,
+  variables?: TVariables
+): Promise<TData> {
+  const data = await createDataSDK();
+  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
+  const response = await data.graphql?.<TData, TVariables>(query, variables);
+
+  if (!response) {
+    throw new Error('GraphQL response is undefined');
+  }
+
+  if (response?.errors?.length) {
+    const msg = response.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
+  }
+
+  return response.data;
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/object-search/__examples__/pages/AccountSearch.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "react-router";
-import { AlertCircle, SearchX } from "lucide-react";
+import { AlertCircle, ChevronDown, SearchX } from "lucide-react";
 import {
 	searchAccounts,
 	fetchDistinctIndustries,
@@ -10,8 +10,27 @@ import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
 import { fieldValue } from "../../utils/fieldUtils";
 import { useObjectSearchParams } from "../../hooks/useObjectSearchParams";
 import { Alert, AlertTitle, AlertDescription } from "../../../../components/ui/alert";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../../../components/ui/card";
+import { Button } from "../../../../components/ui/button";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../../../../components/ui/collapsible";
 import { Skeleton } from "../../../../components/ui/skeleton";
-import { FilterPanel } from "../../components/FilterPanel";
+import { FilterProvider, FilterResetButton } from "../../components/FilterContext";
+import { SearchFilter } from "../../components/filters/SearchFilter";
+import { TextFilter } from "../../components/filters/TextFilter";
+import { SelectFilter } from "../../components/filters/SelectFilter";
+import { MultiSelectFilter } from "../../components/filters/MultiSelectFilter";
+import { NumericRangeFilter } from "../../components/filters/NumericRangeFilter";
+import { DateFilter } from "../../components/filters/DateFilter";
+import { DateRangeFilter } from "../../components/filters/DateRangeFilter";
 import { ActiveFilters } from "../../components/ActiveFilters";
 import { SortControl } from "../../components/SortControl";
 import type { FilterFieldConfig } from "../../utils/filterUtils";
@@ -31,48 +50,21 @@ type AccountNode = NonNullable<
 	NonNullable<NonNullable<AccountSearchResult["edges"]>[number]>["node"]
 >;
 
-// -- Configuration ----------------------------------------------------------
-// Adding a new filterable field = adding one entry here. No component changes needed.
-// Picklist options are fetched dynamically via aggregate groupBy queries.
-
-function buildAccountFilterConfigs(
-	industryOptions: Array<{ value: string; label: string }>,
-	typeOptions: Array<{ value: string; label: string }>,
-): FilterFieldConfig[] {
-	return [
-		{
-			field: "search",
-			label: "Search",
-			type: "search",
-			searchFields: ["Name", "Phone", "Industry"],
-			placeholder: "Search by name, phone, or industry...",
-		},
-		{
-			field: "Name",
-			label: "Account Name",
-			type: "text",
-			placeholder: "Search by name...",
-		},
-		{
-			field: "Industry",
-			label: "Industry",
-			type: "picklist",
-			options: industryOptions,
-		},
-		{ field: "Type", label: "Type", type: "multipicklist", options: typeOptions },
-		{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
-		{
-			field: "CreatedDate",
-			label: "Created Date",
-			type: "date",
-		},
-		{
-			field: "LastModifiedDate",
-			label: "Last Modified Date",
-			type: "daterange",
-		},
-	];
-}
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone", "Industry"],
+		placeholder: "Search by name, phone, or industry...",
+	},
+	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
+	{ 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" },
+];
 
 const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 	{ field: "Name", label: "Name" },
@@ -84,6 +76,7 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 // -- Component --------------------------------------------------------------
 
 export default function AccountSearch() {
+	const [filtersOpen, setFiltersOpen] = useState(true);
 	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
 		key: "distinctIndustries",
 		ttl: 300_000,
@@ -93,15 +86,10 @@ export default function AccountSearch() {
 		ttl: 300_000,
 	});
 
-	const filterConfigs = useMemo(
-		() => buildAccountFilterConfigs(industryOptions ?? [], typeOptions ?? []),
-		[industryOptions, typeOptions],
-	);
-
 	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
 		Account_Filter,
 		Account_OrderBy
-	>(filterConfigs, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
+	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
 
 	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
@@ -139,12 +127,52 @@ export default function AccountSearch() {
 			<div className="flex flex-col lg:flex-row gap-6">
 				{/* Sidebar — Filter Panel */}
 				<aside className="w-full lg:w-80 shrink-0">
-					<FilterPanel
-						configs={filterConfigs}
+					<FilterProvider
 						filters={filters.active}
 						onFilterChange={filters.set}
+						onFilterRemove={filters.remove}
 						onReset={resetAll}
-					/>
+					>
+						<Card>
+							<Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
+								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+									<CardTitle className="text-base font-semibold">
+										<h2>Filters</h2>
+									</CardTitle>
+									<div className="flex items-center gap-1">
+										<FilterResetButton variant="destructive" size="sm" />
+										<CollapsibleTrigger asChild>
+											<Button variant="ghost" size="icon">
+												<ChevronDown
+													className={`h-4 w-4 transition-transform ${filtersOpen ? "" : "-rotate-90"}`}
+												/>
+												<span className="sr-only">Toggle filters</span>
+											</Button>
+										</CollapsibleTrigger>
+									</div>
+								</CardHeader>
+								<CollapsibleContent>
+									<CardContent className="space-y-4 pt-0">
+										<SearchFilter
+											field="search"
+											label="Search"
+											placeholder="Search by name, phone, or industry..."
+										/>
+										<TextFilter field="Name" label="Account Name" placeholder="Search by name..." />
+										<SelectFilter
+											field="Industry"
+											label="Industry"
+											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" />
+									</CardContent>
+								</CollapsibleContent>
+							</Collapsible>
+						</Card>
+					</FilterProvider>
 				</aside>
 
 				{/* Main area — Sort + Results */}

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

@@ -0,0 +1,73 @@
+import { createContext, useContext, useCallback, type ReactNode } from "react";
+import { Button } from "../../../components/ui/button";
+import type { ActiveFilterValue } from "../utils/filterUtils";
+
+interface FilterContextValue {
+	filters: ActiveFilterValue[];
+	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
+	onFilterRemove: (field: string) => void;
+	onReset: () => void;
+}
+
+const FilterContext = createContext<FilterContextValue | null>(null);
+
+interface FilterProviderProps {
+	filters: ActiveFilterValue[];
+	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
+	onFilterRemove: (field: string) => void;
+	onReset: () => void;
+	children: ReactNode;
+}
+
+export function FilterProvider({
+	filters,
+	onFilterChange,
+	onFilterRemove,
+	onReset,
+	children,
+}: FilterProviderProps) {
+	return (
+		<FilterContext.Provider value={{ filters, onFilterChange, onFilterRemove, onReset }}>
+			{children}
+		</FilterContext.Provider>
+	);
+}
+
+function useFilterContext() {
+	const ctx = useContext(FilterContext);
+	if (!ctx) throw new Error("useFilterField must be used within a FilterProvider");
+	return ctx;
+}
+
+export function useFilterField(field: string) {
+	const { filters, onFilterChange, onFilterRemove } = useFilterContext();
+	const value = filters.find((f) => f.field === field);
+	const onChange = useCallback(
+		(next: ActiveFilterValue | undefined) => {
+			if (next) {
+				onFilterChange(field, next);
+			} else {
+				onFilterRemove(field);
+			}
+		},
+		[field, onFilterChange, onFilterRemove],
+	);
+	return { value, onChange };
+}
+
+export function useFilterPanel() {
+	const { filters, onReset } = useFilterContext();
+	return { hasActiveFilters: filters.length > 0, resetAll: onReset };
+}
+
+interface FilterResetButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick"> {}
+
+export function FilterResetButton({ children, ...props }: FilterResetButtonProps) {
+	const { hasActiveFilters, resetAll } = useFilterPanel();
+	if (!hasActiveFilters) return null;
+	return (
+		<Button onClick={resetAll} aria-label="Reset filters" variant="destructive" {...props}>
+			{children ?? "Reset"}
+		</Button>
+	);
+}

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

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import {
 	Pagination,
 	PaginationContent,
@@ -14,112 +13,71 @@ import {
 	SelectValue,
 } from "../../../components/ui/select";
 import { Label } from "../../../components/ui/label";
-import { Button } from "../../../components/ui/button";
 
-/** Shared props: pagination state is from useObjectSearchParams (synced to URL). */
-interface PaginationControlsBase {
-	pageSize: number;
-	pageSizeOptions: readonly number[];
-	onPageSizeChange: (newPageSize: number) => void;
-	disabled?: boolean;
-}
-
-/** Default mode: Previous, Page N, Next (cursor-based, state in URL). */
-interface PaginationControlsDefaultProps extends PaginationControlsBase {
-	variant?: "default";
+interface PaginationControlsProps {
 	pageIndex: number;
 	hasNextPage: boolean;
 	hasPreviousPage: boolean;
+	pageSize: number;
+	pageSizeOptions: readonly number[];
 	onNextPage: () => void;
 	onPreviousPage: () => void;
+	onPageSizeChange: (newPageSize: number) => void;
+	disabled?: boolean;
 }
 
-/** Load More mode: optional page size + Load More button (or custom slot). */
-interface PaginationControlsLoadMoreProps extends PaginationControlsBase {
-	variant: "loadMore";
-	hasNextPage: boolean;
-	onLoadMore: () => void;
-	loadMoreLoading?: boolean;
-	/** Custom content for load-more (e.g. custom button). If not set, renders default Load More button. */
-	loadMoreSlot?: ReactNode;
-}
-
-export type PaginationControlsProps =
-	| PaginationControlsDefaultProps
-	| PaginationControlsLoadMoreProps;
-
-function isLoadMoreProps(props: PaginationControlsProps): props is PaginationControlsLoadMoreProps {
-	return props.variant === "loadMore";
-}
-
-export default function PaginationControls(props: PaginationControlsProps) {
-	const { pageSize, pageSizeOptions, onPageSizeChange, disabled = false } = props;
-
+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 pageSizeBlock = (
-		<div
-			className="flex justify-center sm:justify-start items-center gap-2 shrink-0"
-			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>
-	);
-
-	if (isLoadMoreProps(props)) {
-		const { hasNextPage, onLoadMore, loadMoreLoading = false, loadMoreSlot } = props;
-		return (
-			<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2">
-				{pageSizeBlock}
-				<div className="flex justify-center sm:justify-end">
-					{loadMoreSlot !== undefined ? (
-						loadMoreSlot
-					) : hasNextPage ? (
-						<Button
-							onClick={onLoadMore}
-							disabled={loadMoreLoading}
-							aria-label={loadMoreLoading ? "Loading..." : "Load More"}
-						>
-							{loadMoreLoading ? "Loading..." : "Load More"}
-						</Button>
-					) : null}
-				</div>
-			</div>
-		);
-	}
-
-	const { pageIndex, hasNextPage, hasPreviousPage, onNextPage, onPreviousPage } = props;
 	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">
-			{pageSizeBlock}
+			<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>

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/features/object-search/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)}
 			>