@salesforce/ui-bundle-template-feature-react-search 11.10.1 → 11.11.0

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

@@ -52,11 +52,11 @@ export function SourceSection({
 	const showResults = !loading && !error && nodes.length > 0;
 	const showEmpty = !loading && !error && nodes.length === 0;
 
-	const pageSizeOptions = config.validPageSizes ?? [pagination.pageSize];
+	const pageSizeOptions = pagination.pageSizeOptions ?? [pagination.pageSize];
 
 	const showFilterPanel = !!renderFilters && !hideFilterChrome;
 	const showActiveChips = !hideFilterChrome && filters.active.length > 0;
-	const showSortControl = !hideFilterChrome && (config.sortFields?.length ?? 0) > 0;
+	const showSortControl = !hideFilterChrome && (config.sortBy?.length ?? 0) > 0;
 
 	return (
 		<section className={`flex flex-col gap-6 ${className ?? ""}`}>
@@ -82,21 +82,12 @@ export function SourceSection({
 			<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}
-							/>
+						{showSortControl && config.sortBy ? (
+							<SortControl configs={config.sortBy} sort={sort.current} onSortChange={sort.set} />
 						) : null}
 						{showActiveChips && (
 							<ActiveFilters filters={filters.active} onRemove={filters.remove} />
@@ -104,6 +95,14 @@ export function SourceSection({
 					</div>
 				)}
 
+				{/* Result count, shown just above the results in every scope —
+				    including a locked / single-source (restrictTo) view. */}
+				{!loading && !error && totalCount != null && (
+					<p className="text-sm text-muted-foreground mb-3">
+						{totalCount} {totalCount === 1 ? "result" : "results"}
+					</p>
+				)}
+
 				<div className="min-h-32">
 					{loading && (
 						<div className="space-y-2">

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

@@ -1,7 +1,9 @@
 import {
 	Pagination,
 	PaginationContent,
+	PaginationEllipsis,
 	PaginationItem,
+	PaginationLink,
 	PaginationNext,
 	PaginationPrevious,
 } from "../../../../components/ui/__inherit__pagination";
@@ -24,10 +26,43 @@ interface PaginationControlsProps {
 	onNextPage: () => void;
 	onPreviousPage: () => void;
 	onPageSizeChange: (size: number) => void;
+	/**
+	 * Total number of pages. When provided (with {@link onGoToPage}) and `> 1`,
+	 * the control renders numbered page buttons with ellipsis truncation instead
+	 * of a plain "Page N" label. Omit for cursor-style sources where the total
+	 * page count is unknown.
+	 */
+	pageCount?: number;
+	/** Jump to a 0-based page. Required to render numbered page buttons. */
+	onGoToPage?: (pageIndex: number) => void;
 	disabled?: boolean;
 	idPrefix?: string;
 }
 
+/**
+ * Builds the list of page tokens to render: 0-based page numbers plus
+ * `"ellipsis"` gap markers. Always shows the first and last page, a window
+ * around the current page, and collapses the rest. e.g. for current=5,
+ * total=12 → [0, ellipsis, 4, 5, 6, ellipsis, 11].
+ */
+function getPageTokens(currentIndex: number, pageCount: number): Array<number | "ellipsis"> {
+	const SIBLINGS = 1; // pages shown on each side of the current page
+	const last = pageCount - 1;
+	const pages = new Set<number>([0, last]);
+	for (let p = currentIndex - SIBLINGS; p <= currentIndex + SIBLINGS; p++) {
+		if (p >= 0 && p <= last) pages.add(p);
+	}
+	const sorted = [...pages].sort((a, b) => a - b);
+	const tokens: Array<number | "ellipsis"> = [];
+	let prev = -1;
+	for (const p of sorted) {
+		if (prev !== -1 && p - prev > 1) tokens.push("ellipsis");
+		tokens.push(p);
+		prev = p;
+	}
+	return tokens;
+}
+
 export function PaginationControls({
 	pageIndex,
 	hasNextPage,
@@ -37,6 +72,8 @@ export function PaginationControls({
 	onNextPage,
 	onPreviousPage,
 	onPageSizeChange,
+	pageCount,
+	onGoToPage,
 	disabled = false,
 	idPrefix = "page-size",
 }: PaginationControlsProps) {
@@ -48,6 +85,9 @@ export function PaginationControls({
 	const nextDisabled = disabled || !hasNextPage;
 	const selectId = `${idPrefix}-select`;
 
+	// Numbered page buttons require both a known page count and a seek callback.
+	const showNumberedPages = pageCount != null && pageCount > 1 && onGoToPage != null;
+
 	// 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).
@@ -93,11 +133,41 @@ export function PaginationControls({
 							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>
+
+					{showNumberedPages ? (
+						getPageTokens(pageIndex, pageCount).map((token, i) =>
+							token === "ellipsis" ? (
+								<PaginationItem key={`ellipsis-${i}`}>
+									<PaginationEllipsis />
+								</PaginationItem>
+							) : (
+								<PaginationItem key={token}>
+									<PaginationLink
+										role="button"
+										tabIndex={disabled ? -1 : 0}
+										isActive={token === pageIndex}
+										aria-label={`Go to page ${token + 1}`}
+										aria-current={token === pageIndex ? "page" : undefined}
+										onClick={disabled ? undefined : () => onGoToPage(token)}
+										onKeyDown={disabled ? undefined : handleActivationKey(() => onGoToPage(token))}
+										aria-disabled={disabled}
+										className={disabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+									>
+										{token + 1}
+									</PaginationLink>
+								</PaginationItem>
+							),
+						)
+					) : (
+						<PaginationItem>
+							<span className="min-w-16 text-center text-sm text-muted-foreground px-2">
+								{pageCount != null && pageCount > 0
+									? `Page ${pageIndex + 1} of ${pageCount}`
+									: `Page ${pageIndex + 1}`}
+							</span>
+						</PaginationItem>
+					)}
+
 					<PaginationItem>
 						<PaginationNext
 							role="button"

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

@@ -1,7 +1,7 @@
 /**
  * Default filter panel used when no `renderFilters` is supplied for a source.
  *
- * Renders one input per entry in `source.filterFields`, picking the right
+ * Renders one input per entry in `source.filterBy`, picking the right
  * component for each `FilterFieldType`:
  *
  *   - text                                  → TextFilter
@@ -10,6 +10,7 @@
  *   - numeric                               → NumericRangeFilter
  *   - boolean                               → BooleanFilter
  *   - date / daterange / datetime / datetimerange → DateRangeFilter
+ *       (its Between / After / Before chrome is chosen by `filter.dateMode`)
  *
  * Applications can still pass `renderFilters[sourceKey]` to override the
  * entire panel for a specific source.
@@ -30,7 +31,7 @@ interface DefaultFilterPanelProps {
 }
 
 export function DefaultFilterPanel({ source }: DefaultFilterPanelProps) {
-	const filters = source.filterFields ?? [];
+	const filters = source.filterBy ?? [];
 	if (filters.length === 0) return null;
 	return (
 		<>
@@ -75,6 +76,7 @@ function DefaultFilterField({ filter, source }: DefaultFilterFieldProps) {
 					label={filter.label}
 					helpText={filter.helpText}
 					filterType="daterange"
+					mode={filter.dateMode}
 				/>
 			);
 		case "datetime":
@@ -85,6 +87,7 @@ function DefaultFilterField({ filter, source }: DefaultFilterFieldProps) {
 					label={filter.label}
 					helpText={filter.helpText}
 					filterType="datetimerange"
+					mode={filter.dateMode}
 				/>
 			);
 		default:

package/src/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/filters/inputs/DateRangeFilter.tsx

@@ -1,7 +1,19 @@
+import { useState } from "react";
 import { Input } from "../../../../../components/ui/__inherit__input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/__inherit__select";
 import { useFilterField } from "../FilterContext";
 import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import type { FilterFieldType } from "../../../utils/filterUtils";
+import type {
+	ActiveFilterValue,
+	DateFilterMode,
+	FilterFieldType,
+} from "../../../utils/filterUtils";
 
 interface DateRangeFilterProps {
 	field: string;
@@ -9,41 +21,139 @@ interface DateRangeFilterProps {
 	helpText?: string;
 	/** "daterange" (Date scalar) or "datetimerange" (DateTime scalar). */
 	filterType?: Extract<FilterFieldType, "daterange" | "datetimerange">;
+	/**
+	 * Which comparison chrome to show. See {@link DateFilterMode}. Defaults to
+	 * `"comparison"` (an After / Before selector with one date input).
+	 */
+	mode?: DateFilterMode;
 }
 
 /**
- * Two `<input type="date">` controls bound to `min` / `max` of the active
- * filter. Uses the platform-native picker — no popover/calendar dependency.
+ * The three ways to constrain a date field. They map directly onto the
+ * `min`/`max` bounds the query builder already understands:
+ *   - after   → only `min` set  → `gte`
+ *   - before  → only `max` set  → `lte`
+ *   - between → both set        → `gte` AND `lte`
+ */
+type DateOperator = "between" | "after" | "before";
+
+const OPERATOR_LABELS: Record<DateOperator, string> = {
+	between: "Between",
+	after: "After",
+	before: "Before",
+};
+
+/** The operators offered for each {@link DateFilterMode}. */
+const MODE_OPERATORS: Record<DateFilterMode, DateOperator[]> = {
+	range: ["between"],
+	comparison: ["after", "before"],
+	both: ["between", "after", "before"],
+};
+
+/** Pick the operator implied by an already-active filter (e.g. restored from the URL). */
+function operatorFor(value: ActiveFilterValue | undefined): DateOperator {
+	const hasMin = !!value?.min;
+	const hasMax = !!value?.max;
+	if (hasMax && !hasMin) return "before";
+	if (hasMin && !hasMax) return "after";
+	return "between";
+}
+
+/**
+ * A date constraint whose chrome is driven by `mode`:
+ *   - `"range"`: a single Between control (two date inputs).
+ *   - `"comparison"` (default): an After / Before selector with one input.
+ *   - `"both"`: a Between / After / Before selector spanning the two.
+ *
+ * "Between" shows two `<input type="date">` controls; "After" / "Before"
+ * collapse to one bound to the relevant end. Uses the platform-native picker —
+ * no popover/calendar dependency.
  */
 export function DateRangeFilter({
 	field,
 	label,
 	helpText,
 	filterType = "daterange",
+	mode = "comparison",
 }: DateRangeFilterProps) {
 	const { value, onChange } = useFilterField(field);
+	const operators = MODE_OPERATORS[mode];
+
+	// Operator is local UI state: it must survive a moment where no date is yet
+	// entered (which clears the active filter), so it can't be derived from
+	// `value` on every render. Seed it from any filter restored on mount, clamped
+	// to an operator this mode actually offers.
+	const [operator, setOperator] = useState<DateOperator>(() => {
+		const restored = operatorFor(value);
+		return operators.includes(restored) ? restored : operators[0];
+	});
 
-	const update = (nextMin: string | undefined, nextMax: string | undefined) => {
+	const emit = (nextMin: string | undefined, nextMax: string | undefined) => {
 		if (!nextMin && !nextMax) onChange(undefined);
 		else onChange({ field, label, type: filterType, min: nextMin, max: nextMax });
 	};
 
+	const changeOperator = (next: DateOperator) => {
+		setOperator(next);
+		// Re-emit, keeping only the bound(s) the new operator uses.
+		if (next === "after") emit(value?.min, undefined);
+		else if (next === "before") emit(undefined, value?.max);
+		else emit(value?.min, value?.max);
+	};
+
+	const operatorId = `filter-${field}-op`;
+	// A lone "between" operator (mode="range") needs no selector — it can't change.
+	const showSelector = operators.length > 1;
+
 	return (
 		<FilterFieldWrapper label={label} helpText={helpText}>
-			<div className="flex items-center gap-2">
-				<Input
-					type="date"
-					value={value?.min ?? ""}
-					onChange={(e) => update(e.target.value || undefined, value?.max)}
-					aria-label={`${label} from`}
-				/>
-				<span className="text-sm text-muted-foreground">–</span>
-				<Input
-					type="date"
-					value={value?.max ?? ""}
-					onChange={(e) => update(value?.min, e.target.value || undefined)}
-					aria-label={`${label} to`}
-				/>
+			<div className="flex flex-col gap-2">
+				{showSelector && (
+					<Select value={operator} onValueChange={(v) => changeOperator(v as DateOperator)}>
+						<SelectTrigger id={operatorId} className="w-full" aria-label={`${label} comparison`}>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{operators.map((op) => (
+								<SelectItem key={op} value={op}>
+									{OPERATOR_LABELS[op]}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				)}
+
+				{operator === "between" ? (
+					<div className="flex items-center gap-2">
+						<Input
+							type="date"
+							value={value?.min ?? ""}
+							onChange={(e) => emit(e.target.value || undefined, value?.max)}
+							aria-label={`${label} from`}
+						/>
+						<span className="text-sm text-muted-foreground">–</span>
+						<Input
+							type="date"
+							value={value?.max ?? ""}
+							onChange={(e) => emit(value?.min, e.target.value || undefined)}
+							aria-label={`${label} to`}
+						/>
+					</div>
+				) : operator === "after" ? (
+					<Input
+						type="date"
+						value={value?.min ?? ""}
+						onChange={(e) => emit(e.target.value || undefined, undefined)}
+						aria-label={`${label} after`}
+					/>
+				) : (
+					<Input
+						type="date"
+						value={value?.max ?? ""}
+						onChange={(e) => emit(undefined, e.target.value || undefined)}
+						aria-label={`${label} before`}
+					/>
+				)}
 			</div>
 		</FilterFieldWrapper>
 	);

package/src/force-app/main/default/uiBundles/feature-react-search/src/features/search/components/filters/inputs/MultiSelectFilter.tsx

@@ -1,5 +1,12 @@
+import { ChevronDown } from "lucide-react";
+import { Button } from "../../../../../components/ui/__inherit__button";
 import { Checkbox } from "../../../../../components/ui/__inherit__checkbox";
 import { Label } from "../../../../../components/ui/__inherit__label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../../components/ui/__inherit__popover";
 import { useFilterField } from "../FilterContext";
 import { FilterFieldWrapper } from "./FilterFieldWrapper";
 
@@ -23,25 +30,59 @@ export function MultiSelectFilter({ field, label, options, helpText }: MultiSele
 		else onChange({ field, label, type: "multipicklist", value: joined });
 	};
 
+	// Summarize the selection on the collapsed trigger: the sole label when one is
+	// picked, a count when several are, and a placeholder when none.
+	const summary =
+		selected.size === 0
+			? `Select ${label.toLowerCase()}`
+			: selected.size === 1
+				? (options.find((o) => selected.has(o.value))?.label ?? `${selected.size} selected`)
+				: `${selected.size} selected`;
+	const triggerId = `filter-${field}`;
+
 	return (
-		<FilterFieldWrapper label={label} helpText={helpText}>
-			<div className="flex flex-col gap-1">
-				{options.map((opt) => {
-					const id = `filter-${field}-${opt.value}`;
-					return (
-						<div key={opt.value} className="flex items-center gap-2">
-							<Checkbox
-								id={id}
-								checked={selected.has(opt.value)}
-								onCheckedChange={(checked) => toggle(opt.value, checked === true)}
-							/>
-							<Label htmlFor={id} className="text-sm font-normal cursor-pointer">
-								{opt.label}
-							</Label>
-						</div>
-					);
-				})}
-			</div>
+		<FilterFieldWrapper label={label} htmlFor={triggerId} helpText={helpText}>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						id={triggerId}
+						variant="outline"
+						className="w-full justify-between font-normal"
+						aria-label={`${label}: ${summary}`}
+					>
+						<span className={`truncate ${selected.size === 0 ? "text-muted-foreground" : ""}`}>
+							{summary}
+						</span>
+						<ChevronDown className="ml-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					align="start"
+					className="w-(--radix-popover-trigger-width) max-h-72 overflow-y-auto"
+				>
+					<div role="group" aria-label={label} className="flex flex-col gap-1">
+						{options.length === 0 ? (
+							<p className="px-1 py-2 text-sm text-muted-foreground">No options available.</p>
+						) : (
+							options.map((opt) => {
+								const id = `filter-${field}-${opt.value}`;
+								return (
+									<div key={opt.value} className="flex items-center gap-2">
+										<Checkbox
+											id={id}
+											checked={selected.has(opt.value)}
+											onCheckedChange={(checked) => toggle(opt.value, checked === true)}
+										/>
+										<Label htmlFor={id} className="text-sm font-normal cursor-pointer">
+											{opt.label}
+										</Label>
+									</div>
+								);
+							})
+						)}
+					</div>
+				</PopoverContent>
+			</Popover>
 		</FilterFieldWrapper>
 	);
 }

package/src/force-app/main/default/uiBundles/feature-react-search/src/features/search/config.json

@@ -1,10 +1,15 @@
 {
+  "pagination": {
+    "pageSize": 10,
+    "pageSizeOptions": [5, 10, 20]
+  },
   "sources": [
     {
       "kind": "sobject",
       "key": "accounts",
       "objectName": "Account",
       "label": "Accounts",
+      "labelSingular": "Account",
       "routePattern": "/accounts/:id",
       "searchableFields": ["Name", "Phone", "Industry"],
       "displayFields": [
@@ -15,25 +20,24 @@
         "AnnualRevenue",
         { "name": "Owner", "subfields": ["Name"] }
       ],
-      "filterFields": [
+      "filterBy": [
         { "field": "Industry", "label": "Industry", "type": "picklist" },
         { "field": "Type", "label": "Type", "type": "picklist" },
         { "field": "AnnualRevenue", "label": "Annual Revenue", "type": "numeric" }
       ],
-      "sortFields": [
+      "sortBy": [
         { "field": "Name", "label": "Name" },
         { "field": "Industry", "label": "Industry" },
         { "field": "AnnualRevenue", "label": "Annual Revenue" },
         { "field": "CreatedDate", "label": "Created Date" }
-      ],
-      "pageSize": 10,
-      "validPageSizes": [5, 10, 20]
+      ]
     },
     {
       "kind": "sobject",
       "key": "contacts",
       "objectName": "Contact",
       "label": "Contacts",
+      "labelSingular": "Contact",
       "routePattern": "/contacts/:id",
       "searchableFields": ["Name", "Email", "Phone"],
       "displayFields": [
@@ -43,18 +47,17 @@
         "Phone",
         { "name": "Account", "subfields": ["Name"] }
       ],
-      "sortFields": [
+      "sortBy": [
         { "field": "Name", "label": "Name" },
         { "field": "CreatedDate", "label": "Created Date" }
-      ],
-      "pageSize": 10,
-      "validPageSizes": [5, 10, 20]
+      ]
     },
     {
       "kind": "sobject",
       "key": "opportunities",
       "objectName": "Opportunity",
       "label": "Opportunities",
+      "labelSingular": "Opportunity",
       "routePattern": "/opportunities/:id",
       "searchableFields": ["Name"],
       "displayFields": [
@@ -64,19 +67,17 @@
         "CloseDate",
         { "name": "Account", "subfields": ["Name"] }
       ],
-      "filterFields": [
+      "filterBy": [
         { "field": "StageName", "label": "Stage", "type": "picklist" },
         { "field": "Amount", "label": "Amount", "type": "numeric" },
         { "field": "CloseDate", "label": "Close Date", "type": "daterange" }
       ],
-      "sortFields": [
+      "sortBy": [
         { "field": "CloseDate", "label": "Close Date" },
         { "field": "Amount", "label": "Amount" },
         { "field": "Name", "label": "Name" }
       ],
-      "defaultSort": { "field": "CloseDate", "direction": "DESC" },
-      "pageSize": 10,
-      "validPageSizes": [5, 10, 20]
+      "defaultSort": { "field": "CloseDate", "direction": "DESC" }
     }
   ]
 }