@salesforce/ui-bundle-template-feature-react-search 11.3.0

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/api/distinctValuesService.ts

@@ -0,0 +1,84 @@
+/**
+ * Fetches distinct values for a picklist field via the uiapi aggregate
+ * `groupBy` query.
+ *
+ * Used by the auto-render pathway when a picklist filter does not declare
+ * inline `options`. Each call hits the GraphQL endpoint once and returns the
+ * sorted set of distinct values plus their display labels.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+
+export interface PicklistOption {
+	value: string;
+	label: string;
+}
+
+const KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+function assertValidIdentifier(name: string, kind: string): void {
+	if (!KEY_PATTERN.test(name)) {
+		throw new Error(
+			`Invalid ${kind} "${name}". Must match /^[A-Za-z_][A-Za-z0-9_]*$/ to be a valid GraphQL identifier.`,
+		);
+	}
+}
+
+/**
+ * Builds and executes a `uiapi.aggregate.<objectName>(groupBy: { <field>: { group: true } })`
+ * query and extracts the distinct values.
+ */
+export async function fetchDistinctValues(
+	objectName: string,
+	fieldName: string,
+): Promise<PicklistOption[]> {
+	assertValidIdentifier(objectName, "objectName");
+	assertValidIdentifier(fieldName, "fieldName");
+
+	const document = `query DistinctValues {
+		uiapi {
+			aggregate {
+				${objectName}(groupBy: { ${fieldName}: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								${fieldName} @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}`;
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown>({ query: document });
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const aggregate = (root?.uiapi as Record<string, unknown> | undefined)?.aggregate as
+		| Record<string, unknown>
+		| undefined;
+	const objectAgg = aggregate?.[objectName] as
+		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
+		| undefined;
+	const edges = objectAgg?.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 == null || 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/feature-react-search/src/features/search/api/searchService.ts

@@ -0,0 +1,71 @@
+/**
+ * Executes a search request and parses results into a per-source map.
+ *
+ * Today there's only one adapter — SObjects via the platform-sdk uiapi GraphQL
+ * bridge. Future adapters (CMS, REST, etc.) can run alongside this one and
+ * have their results merged into the same `Record<sourceKey, SourceResult>`
+ * by the hook.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+import { buildSearchQuery, type SourceRequest } from "../queryBuilder";
+import type { SourceResult } from "../types";
+
+interface RawSourceResult {
+	edges?: Array<{ node?: unknown }> | null;
+	pageInfo?: {
+		hasNextPage?: boolean | null;
+		hasPreviousPage?: boolean | null;
+		startCursor?: string | null;
+		endCursor?: string | null;
+	} | null;
+	totalCount?: number | null;
+}
+
+/**
+ * Runs a single multi-aliased GraphQL request against uiapi.query.
+ *
+ * Returns a plain object keyed by source.key. A source whose alias is missing
+ * from the response (e.g. due to a partial GraphQL error) is omitted; the
+ * caller can detect this by `result[sourceKey] == null`.
+ */
+export async function runSearch(requests: SourceRequest[]): Promise<Record<string, SourceResult>> {
+	const { document, variables } = buildSearchQuery(requests);
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown, Record<string, unknown>>({
+		query: document,
+		variables,
+	});
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const queryRoot = (root?.uiapi as Record<string, unknown> | undefined)?.query as
+		| Record<string, RawSourceResult | null | undefined>
+		| undefined;
+
+	const out: Record<string, SourceResult> = {};
+	for (const request of requests) {
+		const raw = queryRoot?.[request.source.key];
+		if (raw == null) continue;
+		const nodes = (raw.edges ?? [])
+			.map((edge) => edge?.node)
+			.filter((node): node is unknown => node != null);
+		out[request.source.key] = {
+			nodes,
+			pageInfo: raw.pageInfo
+				? {
+						hasNextPage: raw.pageInfo.hasNextPage ?? false,
+						hasPreviousPage: raw.pageInfo.hasPreviousPage ?? false,
+						startCursor: raw.pageInfo.startCursor ?? null,
+						endCursor: raw.pageInfo.endCursor ?? null,
+					}
+				: null,
+			totalCount: raw.totalCount ?? null,
+		};
+	}
+	return out;
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/Search.tsx

@@ -0,0 +1,160 @@
+/**
+ * Drop-in search component. Given a `SearchConfig`, renders a complete
+ * search experience: search bar, an aggregate result count (shown only when
+ * 2+ sources are in scope), and one results section per configured source
+ * (with auto-rendered rows + filters).
+ *
+ * The simplest possible integration:
+ *
+ * ```tsx
+ * import { Search, config } from ".../features/search";
+ * export default function MySearchPage() {
+ *   return <Search config={config} />;
+ * }
+ * ```
+ *
+ * Override slots:
+ *   - `renderResult[sourceKey]` — replace the default row renderer for one
+ *     source. Pass `false` to hide that source entirely.
+ *   - `renderFilters[sourceKey]` — replace the default filter sidebar for
+ *     one source. Pass `false` to suppress filters for that source.
+ *   - `renderHeader` — replace the default header (title + subtitle).
+ *   - `searchPlaceholder` — placeholder text for the search input.
+ *   - `title`, `subtitle` — defaults passed to the built-in header.
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { useSearch } from "../hooks/useSearch";
+import { SearchBar } from "./controls/SearchBar";
+import { ScopeSelector } from "./controls/ScopeSelector";
+import { SearchResults } from "./SearchResults";
+import { ALL_SCOPE } from "../types";
+import type { SearchConfig, SearchHandle, SObjectSourceConfig } from "../types";
+
+type ResultRenderer = ((node: unknown) => ReactNode) | false;
+type FilterRenderer = (() => ReactNode) | false;
+
+/**
+ * Locks the search to a single source. Reuses the same shared `config.json`
+ * but shows only results matching the given (kind, key) tuple.
+ *
+ * When set:
+ *   - The scope dropdown is hidden.
+ *   - URL `?scope=` is not written (the page route already implies the source).
+ *   - Only the matching source is fetched and rendered.
+ */
+export interface RestrictTo {
+	kind: SObjectSourceConfig["kind"];
+	key: string;
+}
+
+interface SearchProps {
+	config: SearchConfig;
+	renderResult?: Record<string, ResultRenderer>;
+	renderFilters?: Record<string, FilterRenderer>;
+	emptyMessages?: Record<string, string>;
+	searchPlaceholder?: string;
+	title?: string;
+	subtitle?: string;
+	/**
+	 * Lock the search to a single source by `(kind, key)`. Hides the scope
+	 * dropdown and forces results to that one source. Useful for embedding
+	 * a single-object search inside a page where the source is implicit.
+	 */
+	restrictTo?: RestrictTo;
+	/**
+	 * Show the source-scope dropdown next to the search bar.
+	 * Defaults to `true` when the config has 2+ sources, `false` otherwise
+	 * (a one-source dropdown would be redundant). Always hidden when
+	 * `restrictTo` is set.
+	 */
+	showScopeSelector?: boolean;
+	/** Label for the "search everything" entry in the scope dropdown. */
+	allScopeLabel?: string;
+	/** Optional override for the entire header region. */
+	renderHeader?: (handle: SearchHandle) => ReactNode;
+	className?: string;
+}
+
+export function Search({
+	config,
+	renderResult,
+	renderFilters,
+	emptyMessages,
+	searchPlaceholder = "Search…",
+	title = "Search",
+	subtitle,
+	restrictTo,
+	showScopeSelector,
+	allScopeLabel,
+	renderHeader,
+	className,
+}: SearchProps) {
+	// Resolve restrictTo to a lockedScope value, surfacing a clear error if
+	// the (kind, key) pair doesn't match any source. Memoize so it's
+	// stable across renders.
+	const lockedScope = useMemo<string | undefined>(() => {
+		if (!restrictTo) return undefined;
+		const match = config.sources.find(
+			(s) => s.kind === restrictTo.kind && s.key === restrictTo.key,
+		);
+		if (!match) {
+			console.warn(
+				`<Search restrictTo>: no source with kind="${restrictTo.kind}" and key="${restrictTo.key}" in config. Falling back to "all".`,
+			);
+			return undefined;
+		}
+		return match.key;
+	}, [restrictTo, config.sources]);
+
+	const handle = useSearch(config, { lockedScope });
+	const totalResults = Object.values(handle.sources).reduce(
+		(acc, controller) => acc + (controller.result?.totalCount ?? 0),
+		0,
+	);
+	const shouldShowScope = !handle.scopeLocked && (showScopeSelector ?? config.sources.length >= 2);
+	// The aggregate count is only meaningful when results from more than one
+	// source are combined. With a single configured source, a locked scope, or
+	// a specific source picked in the dropdown, exactly one source is on screen
+	// and that source's own section already shows its count — so suppress the
+	// redundant total here.
+	const sourcesInScope = handle.scope === ALL_SCOPE ? config.sources.length : 1;
+	const showTotalResults = sourcesInScope >= 2;
+
+	return (
+		<div className={`max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 ${className ?? ""}`}>
+			{renderHeader ? (
+				renderHeader(handle)
+			) : (
+				<header className="space-y-2">
+					<h1 className="text-2xl font-bold">{title}</h1>
+					{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+				</header>
+			)}
+
+			<div className="flex flex-wrap items-center gap-3">
+				<SearchBar value={handle.q} onChange={handle.setQ} placeholder={searchPlaceholder} />
+				{shouldShowScope && (
+					<ScopeSelector
+						config={config}
+						scope={handle.scope}
+						onScopeChange={handle.setScope}
+						allLabel={allScopeLabel}
+					/>
+				)}
+				{showTotalResults && !handle.loading && (
+					<span className="text-sm text-muted-foreground">
+						{totalResults} total result{totalResults === 1 ? "" : "s"}
+					</span>
+				)}
+			</div>
+
+			<SearchResults
+				handle={handle}
+				renderResult={renderResult}
+				renderFilters={renderFilters}
+				emptyMessages={emptyMessages}
+			/>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/SearchResults.tsx

@@ -0,0 +1,77 @@
+/**
+ * Renders one SourceSection per configured source, in declaration order.
+ *
+ * Customization is optional — sensible defaults kick in for any source you
+ * don't override:
+ *   - `renderResult[sourceKey]` — per-node renderer. Default: title from
+ *     `displayFields[0]`, subtitle from the rest, optional `<Link>` driven
+ *     by `routePattern`.
+ *   - `renderFilters[sourceKey]` — sidebar filter UI. Default: one input per
+ *     `filterFields` entry, with picklist options resolved from inline
+ *     config or auto-fetched from the GraphQL aggregate API.
+ *
+ * Pass `false` for either entry to suppress the default for that source.
+ *
+ * Filter chrome (sidebar + active-filter chips + sort dropdown) is
+ * automatically hidden when `handle.scope === "all"` — per-source controls
+ * would be unreachable with every source on screen, and dangling chips
+ * would be confusing. Pre-existing filter / sort selections stay in state,
+ * so narrowing the scope brings them back unchanged.
+ */
+
+import type { ReactNode } from "react";
+import { SourceSection } from "./SourceSection";
+import { DefaultResultRow } from "./results/DefaultResultRow";
+import { DefaultFilterPanel } from "./filters/DefaultFilterPanel";
+import { ALL_SCOPE, type SearchHandle } from "../types";
+
+type ResultRenderer = ((node: unknown) => ReactNode) | false;
+type FilterRenderer = (() => ReactNode) | false;
+
+interface SearchResultsProps {
+	handle: SearchHandle;
+	renderResult?: Record<string, ResultRenderer>;
+	renderFilters?: Record<string, FilterRenderer>;
+	emptyMessages?: Record<string, string>;
+}
+
+export function SearchResults({
+	handle,
+	renderResult,
+	renderFilters,
+	emptyMessages,
+}: SearchResultsProps) {
+	const filtersHidden = handle.scope === ALL_SCOPE;
+	return (
+		<div className="space-y-10">
+			{Object.entries(handle.sources).map(([key, controller]) => {
+				if (handle.scope !== ALL_SCOPE && handle.scope !== key) return null;
+				const overrideResult = renderResult?.[key];
+				if (overrideResult === false) return null;
+				const resolvedRenderResult: (node: unknown) => ReactNode =
+					overrideResult ?? ((node) => <DefaultResultRow node={node} source={controller.config} />);
+
+				const overrideFilters = renderFilters?.[key];
+				const hasFilterFields = (controller.config.filterFields?.length ?? 0) > 0;
+				const resolvedRenderFilters: (() => ReactNode) | undefined =
+					overrideFilters === false
+						? undefined
+						: (overrideFilters ??
+							(hasFilterFields
+								? () => <DefaultFilterPanel source={controller.config} />
+								: undefined));
+
+				return (
+					<SourceSection
+						key={key}
+						controller={controller}
+						renderResult={resolvedRenderResult}
+						renderFilters={resolvedRenderFilters}
+						hideFilterChrome={filtersHidden}
+						emptyMessage={emptyMessages?.[key]}
+					/>
+				);
+			})}
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/SourceSection.tsx

@@ -0,0 +1,167 @@
+/**
+ * Renders one source's slice of a search result: optional filter
+ * panel, sort dropdown, active-filter chips, the result list (delegated to
+ * the caller via `renderResult`), and pagination controls.
+ *
+ * The component is "smart" only about orchestration. The actual list-item UI
+ * is owned by the application via the `renderResult(node)` callback —
+ * search never decides how an Account or Contact card looks.
+ */
+
+import type { ReactNode } from "react";
+import { AlertCircle, SearchX } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { ActiveFilters } from "./filters/ActiveFilters";
+import { FilterProvider, FilterResetButton } from "./filters/FilterContext";
+import { PaginationControls } from "./controls/PaginationControls";
+import { SortControl } from "./controls/SortControl";
+import type { SourceController } from "../types";
+
+interface SourceSectionProps {
+	controller: SourceController;
+	renderResult: (node: unknown) => ReactNode;
+	/** Optional filter UI (TextFilter, SelectFilter, ...) rendered above the results. */
+	renderFilters?: () => ReactNode;
+	/**
+	 * Suppress the filter panel, the active-filter chips, and the sort
+	 * dropdown. Pre-existing filter / sort selections stay in state (and
+	 * apply to the GraphQL query) so the caller can restore the chrome
+	 * without losing the user's selections, but no chrome surface is rendered.
+	 *
+	 * Set by `<SearchResults>` when the current scope is "all" — per-source
+	 * controls would be unreachable while every source is on screen, and
+	 * dangling chips would be confusing.
+	 */
+	hideFilterChrome?: boolean;
+	emptyMessage?: string;
+	className?: string;
+}
+
+export function SourceSection({
+	controller,
+	renderResult,
+	renderFilters,
+	hideFilterChrome,
+	emptyMessage,
+	className,
+}: SourceSectionProps) {
+	const { config, result, loading, error, filters, sort, pagination } = controller;
+	const nodes = result?.nodes ?? [];
+	const totalCount = result?.totalCount;
+	const showResults = !loading && !error && nodes.length > 0;
+	const showEmpty = !loading && !error && nodes.length === 0;
+
+	const pageSizeOptions = config.validPageSizes ?? [pagination.pageSize];
+
+	const showFilterPanel = !!renderFilters && !hideFilterChrome;
+	const showActiveChips = !hideFilterChrome && filters.active.length > 0;
+	const showSortControl = !hideFilterChrome && (config.sortFields?.length ?? 0) > 0;
+
+	return (
+		<section className={`flex flex-col gap-6 ${className ?? ""}`}>
+			{showFilterPanel && (
+				<FilterProvider
+					filters={filters.active}
+					onFilterChange={filters.set}
+					onFilterRemove={filters.remove}
+					onReset={() => filters.active.forEach((f) => filters.remove(f.field))}
+				>
+					<div className="rounded-md border p-3 space-y-3">
+						<div className="flex items-center justify-between">
+							<h3 className="text-sm font-semibold">Filters</h3>
+							<FilterResetButton size="sm" />
+						</div>
+						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+							{renderFilters!()}
+						</div>
+					</div>
+				</FilterProvider>
+			)}
+
+			<div className="min-w-0">
+				<header className="flex flex-wrap items-baseline gap-3 mb-3">
+					<h2 className="text-lg font-semibold">{config.label}</h2>
+					{totalCount != null && (
+						<span className="text-sm text-muted-foreground">
+							{totalCount} {totalCount === 1 ? "result" : "results"}
+						</span>
+					)}
+				</header>
+
+				{(showSortControl || showActiveChips) && (
+					<div className="flex flex-wrap items-center gap-2 mb-3">
+						{showSortControl && config.sortFields ? (
+							<SortControl
+								configs={config.sortFields}
+								sort={sort.current}
+								onSortChange={sort.set}
+							/>
+						) : null}
+						{showActiveChips && (
+							<ActiveFilters filters={filters.active} onRemove={filters.remove} />
+						)}
+					</div>
+				)}
+
+				<div className="min-h-32">
+					{loading && (
+						<div className="space-y-2">
+							{Array.from({ length: Math.min(pagination.pageSize, 5) }, (_, i) => (
+								<Skeleton key={i} className="h-12 w-full" />
+							))}
+						</div>
+					)}
+
+					{error && (
+						<Alert variant="destructive" role="alert">
+							<AlertCircle />
+							<AlertTitle>Failed to load {config.label}</AlertTitle>
+							<AlertDescription>{error}</AlertDescription>
+						</Alert>
+					)}
+
+					{showResults && (
+						<ul className="divide-y">
+							{nodes.map((node, i) => (
+								<li key={getNodeKey(node, config.idField, i)} className="py-3">
+									{renderResult(node)}
+								</li>
+							))}
+						</ul>
+					)}
+
+					{showEmpty && (
+						<div className="flex flex-col items-center justify-center py-10 text-center">
+							<SearchX className="size-10 text-muted-foreground mb-3" />
+							<p className="text-sm text-muted-foreground">
+								{emptyMessage ?? `No ${config.label.toLowerCase()} found.`}
+							</p>
+						</div>
+					)}
+				</div>
+
+				<PaginationControls
+					pageIndex={pagination.pageIndex}
+					hasNextPage={pagination.hasNextPage}
+					hasPreviousPage={pagination.hasPreviousPage}
+					pageSize={pagination.pageSize}
+					pageSizeOptions={pageSizeOptions}
+					onNextPage={pagination.goToNextPage}
+					onPreviousPage={pagination.goToPreviousPage}
+					onPageSizeChange={pagination.setPageSize}
+					disabled={loading || !!error}
+					idPrefix={`page-size-${config.key}`}
+				/>
+			</div>
+		</section>
+	);
+}
+
+function getNodeKey(node: unknown, idField: string | undefined, fallback: number): string | number {
+	if (node && typeof node === "object") {
+		const id = (node as Record<string, unknown>)[idField ?? "Id"];
+		if (typeof id === "string" || typeof id === "number") return id;
+	}
+	return fallback;
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/controls/PaginationControls.tsx

@@ -0,0 +1,115 @@
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationNext,
+	PaginationPrevious,
+} from "../../../../components/ui/pagination";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
+import type { KeyboardEvent } from "react";
+
+interface PaginationControlsProps {
+	pageIndex: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	pageSize: number;
+	pageSizeOptions: readonly number[];
+	onNextPage: () => void;
+	onPreviousPage: () => void;
+	onPageSizeChange: (size: number) => void;
+	disabled?: boolean;
+	idPrefix?: string;
+}
+
+export function PaginationControls({
+	pageIndex,
+	hasNextPage,
+	hasPreviousPage,
+	pageSize,
+	pageSizeOptions,
+	onNextPage,
+	onPreviousPage,
+	onPageSizeChange,
+	disabled = false,
+	idPrefix = "page-size",
+}: PaginationControlsProps) {
+	const handlePageSizeChange = (next: string) => {
+		const size = parseInt(next, 10);
+		if (!isNaN(size) && size !== pageSize) onPageSizeChange(size);
+	};
+	const prevDisabled = disabled || !hasPreviousPage;
+	const nextDisabled = disabled || !hasNextPage;
+	const selectId = `${idPrefix}-select`;
+
+	// The underlying pagination control renders an <a> without an href, so it is
+	// not keyboard-operable on its own. Activate it on Enter/Space to match the
+	// behaviour of a native button (WCAG 2.2 SC 2.1.1 Keyboard).
+	const handleActivationKey = (action: () => void) => (event: KeyboardEvent) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			action();
+		}
+	};
+
+	return (
+		<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center gap-4 py-2">
+			<div className="flex justify-center sm:justify-start items-center gap-2">
+				<Label htmlFor={selectId} className="text-sm font-normal whitespace-nowrap">
+					Results per page:
+				</Label>
+				<Select
+					value={pageSize.toString()}
+					onValueChange={handlePageSizeChange}
+					disabled={disabled}
+				>
+					<SelectTrigger id={selectId} className="w-16">
+						<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
+							role="button"
+							tabIndex={prevDisabled ? -1 : 0}
+							onClick={prevDisabled ? undefined : onPreviousPage}
+							onKeyDown={prevDisabled ? undefined : handleActivationKey(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">
+							Page {pageIndex + 1}
+						</span>
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationNext
+							role="button"
+							tabIndex={nextDisabled ? -1 : 0}
+							onClick={nextDisabled ? undefined : onNextPage}
+							onKeyDown={nextDisabled ? undefined : handleActivationKey(onNextPage)}
+							aria-disabled={nextDisabled}
+							className={nextDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+		</div>
+	);
+}