@salesforce/ui-bundle-template-app-react-template-b2e 1.117.2

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/pages/Home.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { SearchBar } from "../../components/SearchBar";
+import { Button } from "../../../../components/ui/button";
+
+export default function HomePage() {
+	const navigate = useNavigate();
+	const [text, setText] = useState("");
+
+	const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		const params = text ? `?q=${encodeURIComponent(text)}` : "";
+		navigate(`/accounts${params}`);
+	};
+
+	return (
+		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="flex items-center gap-6 mb-6">
+				<h1 className="text-2xl font-bold">Account Search</h1>
+				<Button variant="outline" size="sm" onClick={() => navigate("/accounts")}>
+					Browse All Accounts
+				</Button>
+			</div>
+			<form onSubmit={handleSubmit} className="flex gap-2">
+				<SearchBar
+					placeholder="Search by name, phone, or industry..."
+					value={text}
+					handleChange={setText}
+				/>
+				<Button type="submit">Search</Button>
+			</form>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/api/objectSearchService.ts

@@ -0,0 +1,84 @@
+import { createDataSDK } from "@salesforce/sdk-data";
+
+export interface ObjectSearchOptions<TWhere, TOrderBy> {
+	where?: TWhere;
+	orderBy?: TOrderBy;
+	first?: number;
+	after?: string;
+}
+
+export type PicklistOption = { value: string; label: string };
+
+/**
+ * Executes a GraphQL search query and extracts the result for the given object name
+ * from the standard `uiapi.query.<ObjectName>` response shape.
+ */
+export async function searchObjects<TResult, TQuery, TVariables>(
+	query: string,
+	objectName: string,
+	options: ObjectSearchOptions<unknown, unknown> = {},
+): Promise<TResult> {
+	const { where, orderBy, first = 20, after } = options;
+
+	const data = await createDataSDK();
+	const response = await data.graphql?.<TQuery, TVariables>(query, {
+		first,
+		after,
+		where,
+		orderBy,
+	} as TVariables);
+
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+		| Record<string, unknown>
+		| undefined;
+	const queryResult = (result?.query as Record<string, unknown> | undefined)?.[objectName] as
+		| TResult
+		| undefined;
+
+	if (!queryResult) {
+		throw new Error(`No ${objectName} data returned`);
+	}
+
+	return queryResult;
+}
+
+/**
+ * Executes a GraphQL aggregate/groupBy query and extracts picklist options
+ * from the standard `uiapi.aggregate.<ObjectName>` response shape.
+ */
+export async function fetchDistinctValues<TQuery>(
+	query: string,
+	objectName: string,
+	fieldName: string,
+): Promise<PicklistOption[]> {
+	const data = await createDataSDK();
+	const response = await data.graphql?.<TQuery>(query);
+	const errors = response?.errors;
+
+	if (errors?.length) {
+		throw new Error(errors.map((e) => e.message).join("; "));
+	}
+
+	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+		| Record<string, unknown>
+		| undefined;
+	const aggregate = (result?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
+		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
+		| undefined;
+
+	const edges = aggregate?.edges ?? [];
+	return edges
+		.map((edge) => {
+			const field = edge?.node?.aggregate?.[fieldName] as
+				| { value?: string | null; displayValue?: string | null; label?: string | null }
+				| undefined;
+			const value = field?.value;
+			if (!value) return null;
+			return { value, label: field.label ?? field.displayValue ?? value };
+		})
+		.filter((opt): opt is PicklistOption => opt !== null);
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/ActiveFilters.tsx

@@ -0,0 +1,89 @@
+import { X } from "lucide-react";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+import type { ActiveFilterValue } from "../utils/filterUtils";
+
+function formatFilterLabel(filter: ActiveFilterValue): string {
+	const { label, type, value, min, max } = filter;
+
+	switch (type) {
+		case "search":
+			return `Search: ${value}`;
+		case "text":
+		case "picklist":
+			return `${label}: ${value}`;
+		case "multipicklist": {
+			const values = value ? value.split(",") : [];
+			if (values.length <= 2) return `${label}: ${values.join(", ")}`;
+			return `${label}: ${values.length} selected`;
+		}
+		case "boolean":
+			return `${label}: ${value === "true" ? "Yes" : "No"}`;
+		case "numeric": {
+			if (min && max) return `${label}: ${min} - ${max}`;
+			if (min) return `${label}: >= ${min}`;
+			return `${label}: <= ${max}`;
+		}
+		case "date": {
+			if (min && max) return `${label}: ${min} to ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max}`;
+		}
+		default:
+			return label;
+	}
+}
+
+interface ActiveFiltersProps extends React.ComponentProps<"div"> {
+	filters: ActiveFilterValue[];
+	onRemove: (field: string) => void;
+	buttonProps?: Omit<React.ComponentProps<typeof ActiveFilterButton>, "filter" | "onRemove">;
+}
+
+export function ActiveFilters({
+	filters,
+	onRemove,
+	className,
+	buttonProps,
+	...props
+}: ActiveFiltersProps) {
+	if (filters.length === 0) return null;
+
+	return (
+		<div className={cn("flex flex-wrap gap-2", className)} {...props}>
+			{filters.map((filter) => (
+				<ActiveFilterButton
+					key={filter.field}
+					filter={filter}
+					onRemove={onRemove}
+					{...buttonProps}
+				/>
+			))}
+		</div>
+	);
+}
+
+interface ActiveFilterButtonProps extends React.ComponentProps<typeof Button> {
+	filter: ActiveFilterValue;
+	onRemove: (field: string) => void;
+}
+
+export function ActiveFilterButton({
+	filter,
+	onRemove,
+	className,
+	...props
+}: ActiveFilterButtonProps) {
+	return (
+		<Button
+			variant="outline"
+			size="sm"
+			className={cn("gap-1 h-7 text-xs", className)}
+			onClick={() => onRemove(filter.field)}
+			{...props}
+		>
+			{formatFilterLabel(filter)}
+			<X className="h-3 w-3" />
+		</Button>
+	);
+}

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

@@ -0,0 +1,83 @@
+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,
+	};
+}
+
+type FilterResetButtonProps = 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/uiBundles/reactinternalapp/src/features/object-search/components/ObjectBreadcrumb.tsx

@@ -0,0 +1,66 @@
+import { Link } from "react-router";
+import {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbPage,
+} from "../../../components/ui/breadcrumb";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+interface ObjectBreadcrumbProps {
+	listPath: string;
+	listLabel: string;
+	recordName?: string;
+	loading?: boolean;
+	includeHome?: boolean; // default is true
+	homeLabel?: string; // default is "Home"
+}
+
+export function ObjectBreadcrumb({
+	listPath,
+	listLabel,
+	recordName,
+	loading,
+	includeHome = true,
+	homeLabel = "Home",
+}: ObjectBreadcrumbProps) {
+	const isDetailView = loading || recordName;
+
+	return (
+		<Breadcrumb className="mb-3">
+			<BreadcrumbList>
+				{includeHome && (
+					<BreadcrumbItem>
+						<BreadcrumbLink asChild>
+							<Link to="/">{homeLabel}</Link>
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+				)}
+				<BreadcrumbSeparator />
+				{isDetailView ? (
+					<>
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<Link to={listPath}>{listLabel}</Link>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							{loading && !recordName ? (
+								<Skeleton className="h-4 w-32" />
+							) : (
+								<BreadcrumbPage>{recordName}</BreadcrumbPage>
+							)}
+						</BreadcrumbItem>
+					</>
+				) : (
+					<BreadcrumbItem>
+						<BreadcrumbPage>{listLabel}</BreadcrumbPage>
+					</BreadcrumbItem>
+				)}
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}

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

@@ -0,0 +1,41 @@
+import { Search } from "lucide-react";
+import { Input } from "../../../components/ui/input";
+import { cn } from "../../../lib/utils";
+
+interface SearchBarProps extends React.ComponentProps<"div"> {
+	value: string;
+	handleChange: (value: string) => void;
+	placeholder?: string;
+	iconProps?: React.ComponentProps<typeof Search>;
+	inputProps?: Omit<React.ComponentProps<typeof Input>, "value">;
+}
+
+export function SearchBar({
+	value,
+	handleChange,
+	placeholder,
+	className,
+	iconProps,
+	inputProps,
+	...props
+}: SearchBarProps) {
+	return (
+		<div className={cn("relative flex-1", className)} title={placeholder} {...props}>
+			<Search
+				{...iconProps}
+				className={cn(
+					"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground",
+					iconProps?.className,
+				)}
+			/>
+			<Input
+				type="text"
+				value={value}
+				onChange={(e) => handleChange(e.target.value)}
+				placeholder={placeholder}
+				{...inputProps}
+				className={cn("pl-9", inputProps?.className)}
+			/>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/SortControl.tsx

@@ -0,0 +1,143 @@
+import { ArrowUp, ArrowDown } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+import type { SortFieldConfig, SortState } from "../utils/sortUtils";
+
+const NONE_VALUE = "__none__";
+
+interface SortControlProps extends React.ComponentProps<"div"> {
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	onSortChange: (sort: SortState | null) => void;
+	labelProps?: React.ComponentProps<"span">;
+	selectProps?: Omit<
+		React.ComponentProps<typeof SortControlSelect>,
+		"configs" | "sort" | "onSortChange"
+	>;
+	directionButtonProps?: Omit<
+		React.ComponentProps<typeof SortDirectionButton>,
+		"sort" | "onSortChange"
+	>;
+}
+
+export function SortControl({
+	configs,
+	sort,
+	onSortChange,
+	className,
+	labelProps,
+	selectProps,
+	directionButtonProps,
+	...props
+}: SortControlProps) {
+	return (
+		<div className={cn("flex items-center gap-2", className)} {...props}>
+			<span
+				{...labelProps}
+				className={cn("text-sm text-muted-foreground whitespace-nowrap", labelProps?.className)}
+			>
+				{labelProps?.children ?? "Sort by"}
+			</span>
+			<SortControlSelect
+				configs={configs}
+				sort={sort}
+				onSortChange={onSortChange}
+				{...selectProps}
+			/>
+			{sort && (
+				<SortDirectionButton sort={sort} onSortChange={onSortChange} {...directionButtonProps} />
+			)}
+		</div>
+	);
+}
+
+interface SortControlSelectProps {
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	onSortChange: (sort: SortState | null) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+	selectValueProps?: React.ComponentProps<typeof SelectValue>;
+	selectItemProps?: Omit<React.ComponentProps<typeof SelectItem>, "value">;
+}
+
+export function SortControlSelect({
+	configs,
+	sort,
+	onSortChange,
+	triggerProps,
+	contentProps,
+	selectValueProps,
+	selectItemProps,
+}: SortControlSelectProps) {
+	return (
+		<Select
+			value={sort?.field ?? NONE_VALUE}
+			onValueChange={(v) => {
+				if (v === NONE_VALUE) {
+					onSortChange(null);
+				} else {
+					onSortChange({
+						field: v,
+						direction: sort?.direction ?? "ASC",
+					});
+				}
+			}}
+		>
+			<SelectTrigger
+				size="sm"
+				{...triggerProps}
+				className={cn("w-[160px]", triggerProps?.className)}
+			>
+				<SelectValue placeholder="Default" {...selectValueProps} />
+			</SelectTrigger>
+			<SelectContent {...contentProps}>
+				<SelectItem value={NONE_VALUE} {...selectItemProps}>
+					Default
+				</SelectItem>
+				{configs.map((c) => (
+					<SelectItem key={c.field} value={c.field} {...selectItemProps}>
+						{c.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}
+
+interface SortDirectionButtonProps extends React.ComponentProps<typeof Button> {
+	sort: SortState;
+	onSortChange: (sort: SortState) => void;
+}
+
+export function SortDirectionButton({
+	sort,
+	onSortChange,
+	className,
+	...props
+}: SortDirectionButtonProps) {
+	return (
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			className={cn(className)}
+			onClick={() =>
+				onSortChange({
+					...sort,
+					direction: sort.direction === "ASC" ? "DESC" : "ASC",
+				})
+			}
+			aria-label={`Sort ${sort.direction === "ASC" ? "descending" : "ascending"}`}
+			{...props}
+		>
+			{sort.direction === "ASC" ? <ArrowUp /> : <ArrowDown />}
+		</Button>
+	);
+}