@salesforce/ui-bundle-template-app-react-sample-b2e 11.19.0 → 11.21.0

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

@@ -0,0 +1,185 @@
+import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	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;
+	/**
+	 * 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,
+	hasPreviousPage,
+	pageSize,
+	pageSizeOptions,
+	onNextPage,
+	onPreviousPage,
+	onPageSizeChange,
+	pageCount,
+	onGoToPage,
+	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`;
+
+	// 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).
+	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>
+
+					{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"
+							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>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/controls/ScopeSelector.tsx

@@ -0,0 +1,55 @@
+/**
+ * Dropdown that narrows the search to a single source (or "All").
+ *
+ * Sits next to the search bar in the default {@link Search} layout. The
+ * options are derived from the configured sources: an "All" entry plus one
+ * entry per source (using each source's `label`).
+ *
+ * Selecting a non-"All" scope tells {@link useSearch} to fetch and render
+ * only that source. Switching scope resets per-source pagination cursors —
+ * the visible result set is changing.
+ */
+
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { ALL_SCOPE, type SearchConfig, type SearchScope } from "../../types";
+
+interface ScopeSelectorProps {
+	config: SearchConfig;
+	scope: SearchScope;
+	onScopeChange: (scope: SearchScope) => void;
+	allLabel?: string;
+	className?: string;
+}
+
+export function ScopeSelector({
+	config,
+	scope,
+	onScopeChange,
+	allLabel = "All",
+	className,
+}: ScopeSelectorProps) {
+	if (config.sources.length === 0) return null;
+	return (
+		<div className={className}>
+			<Select value={scope} onValueChange={onScopeChange}>
+				<SelectTrigger size="sm" className="min-w-[140px]" aria-label="Search scope">
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={ALL_SCOPE}>{allLabel}</SelectItem>
+					{config.sources.map((source) => (
+						<SelectItem key={source.key} value={source.key}>
+							{source.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/controls/SearchBar.tsx

@@ -0,0 +1,55 @@
+import { Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../../../components/ui/input";
+import { debounce } from "../../utils/debounce";
+
+const TYPE_DEBOUNCE_MS = 250;
+
+interface SearchBarProps {
+	value: string;
+	onChange: (next: string) => void;
+	placeholder?: string;
+	className?: string;
+}
+
+/**
+ * Debounced text input for the global `q` term. Keeps a local `draft` so
+ * keystrokes feel responsive while the upstream `onChange` is rate-limited.
+ */
+export function SearchBar({ value, onChange, placeholder = "Search…", className }: SearchBarProps) {
+	const [draft, setDraft] = useState(value);
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	});
+
+	// Build the debounced caller in a mount effect, not during render: creating it
+	// inline would read onChangeRef.current at render time (react-hooks/refs). It
+	// stays a single stable instance and always calls the latest onChange via the ref.
+	const debouncedRef = useRef<((next: string) => void) | undefined>(undefined);
+	useEffect(() => {
+		debouncedRef.current = debounce((next: string) => onChangeRef.current(next), TYPE_DEBOUNCE_MS);
+	}, []);
+
+	// External value can change (URL restore, reset). Keep draft in sync.
+	useEffect(() => {
+		setDraft(value);
+	}, [value]);
+
+	return (
+		<div className={`relative flex-1 ${className ?? ""}`}>
+			<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+			<Input
+				type="text"
+				value={draft}
+				onChange={(e) => {
+					setDraft(e.target.value);
+					debouncedRef.current?.(e.target.value);
+				}}
+				placeholder={placeholder}
+				className="pl-9"
+				aria-label="Unified search"
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,62 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Button } from "../../../../components/ui/button";
+import type { SortFieldConfig, SortState } from "../../utils/sortUtils";
+
+const NONE_VALUE = "__none__";
+
+interface SortControlProps {
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	onSortChange: (sort: SortState | null) => void;
+	className?: string;
+}
+
+export function SortControl({ configs, sort, onSortChange, className }: SortControlProps) {
+	if (configs.length === 0) return null;
+	return (
+		<div className={`flex items-center gap-2 ${className ?? ""}`}>
+			<span className="text-sm text-muted-foreground whitespace-nowrap">Sort by</span>
+			<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" className="w-[160px]">
+					<SelectValue placeholder="Default" />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={NONE_VALUE}>Default</SelectItem>
+					{configs.map((c) => (
+						<SelectItem key={c.field} value={c.field}>
+							{c.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			{sort && (
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					onClick={() =>
+						onSortChange({
+							...sort,
+							direction: sort.direction === "ASC" ? "DESC" : "ASC",
+						})
+					}
+					aria-label={`Sort ${sort.direction === "ASC" ? "descending" : "ascending"}`}
+				>
+					{sort.direction === "ASC" ? <ArrowUp /> : <ArrowDown />}
+				</Button>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,61 @@
+import { X } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+function formatLabel(filter: ActiveFilterValue): string {
+	const { label, type, value, min, max } = filter;
+	switch (type) {
+		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":
+		case "daterange":
+		case "datetime":
+		case "datetimerange": {
+			if (min && max) return `${label}: ${min} → ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max ?? ""}`;
+		}
+		default:
+			return label;
+	}
+}
+
+interface ActiveFiltersProps {
+	filters: ActiveFilterValue[];
+	onRemove: (field: string) => void;
+	className?: string;
+}
+
+export function ActiveFilters({ filters, onRemove, className }: ActiveFiltersProps) {
+	if (filters.length === 0) return null;
+	return (
+		<div className={`flex flex-wrap gap-2 ${className ?? ""}`}>
+			{filters.map((filter) => (
+				<Button
+					key={filter.field}
+					variant="outline"
+					size="sm"
+					className="gap-1 h-7 text-xs"
+					aria-label={`Remove ${formatLabel(filter)}`}
+					onClick={() => onRemove(filter.field)}
+				>
+					{formatLabel(filter)}
+					<X className="h-3 w-3" aria-hidden="true" />
+				</Button>
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,125 @@
+/**
+ * Default filter panel used when no `renderFilters` is supplied for a source.
+ *
+ * Renders one input per entry in `source.filterBy`, picking the right
+ * component for each `FilterFieldType`:
+ *
+ *   - text                                  → TextFilter
+ *   - picklist                              → SelectFilter (inline options or auto-fetched)
+ *   - multipicklist                         → MultiSelectFilter (inline options or auto-fetched)
+ *   - 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.
+ */
+
+import { TextFilter } from "./inputs/TextFilter";
+import { SelectFilter } from "./inputs/SelectFilter";
+import { MultiSelectFilter } from "./inputs/MultiSelectFilter";
+import { NumericRangeFilter } from "./inputs/NumericRangeFilter";
+import { BooleanFilter } from "./inputs/BooleanFilter";
+import { DateRangeFilter } from "./inputs/DateRangeFilter";
+import { useDistinctValues } from "../../hooks/useDistinctValues";
+import type { FilterFieldConfig } from "../../utils/filterUtils";
+import type { SObjectSourceConfig } from "../../types";
+
+interface DefaultFilterPanelProps {
+	source: SObjectSourceConfig;
+}
+
+export function DefaultFilterPanel({ source }: DefaultFilterPanelProps) {
+	const filters = source.filterBy ?? [];
+	if (filters.length === 0) return null;
+	return (
+		<>
+			{filters.map((filter) => (
+				<DefaultFilterField key={filter.field} filter={filter} source={source} />
+			))}
+		</>
+	);
+}
+
+interface DefaultFilterFieldProps {
+	filter: FilterFieldConfig;
+	source: SObjectSourceConfig;
+}
+
+function DefaultFilterField({ filter, source }: DefaultFilterFieldProps) {
+	switch (filter.type) {
+		case "text":
+			return (
+				<TextFilter
+					field={filter.field}
+					label={filter.label}
+					placeholder={filter.placeholder}
+					helpText={filter.helpText}
+				/>
+			);
+		case "picklist":
+			return <PicklistField filter={filter} source={source} multi={false} />;
+		case "multipicklist":
+			return <PicklistField filter={filter} source={source} multi={true} />;
+		case "numeric":
+			return (
+				<NumericRangeFilter field={filter.field} label={filter.label} helpText={filter.helpText} />
+			);
+		case "boolean":
+			return <BooleanFilter field={filter.field} label={filter.label} helpText={filter.helpText} />;
+		case "date":
+		case "daterange":
+			return (
+				<DateRangeFilter
+					field={filter.field}
+					label={filter.label}
+					helpText={filter.helpText}
+					filterType="daterange"
+					mode={filter.dateMode}
+				/>
+			);
+		case "datetime":
+		case "datetimerange":
+			return (
+				<DateRangeFilter
+					field={filter.field}
+					label={filter.label}
+					helpText={filter.helpText}
+					filterType="datetimerange"
+					mode={filter.dateMode}
+				/>
+			);
+		default:
+			return null;
+	}
+}
+
+/**
+ * Resolves picklist options from inline config first; falls back to fetching
+ * distinct values from the GraphQL aggregate API on first render.
+ */
+function PicklistField({
+	filter,
+	source,
+	multi,
+}: {
+	filter: FilterFieldConfig;
+	source: SObjectSourceConfig;
+	multi: boolean;
+}) {
+	const inline = filter.options;
+	const fetched = useDistinctValues(
+		inline ? null : { objectName: source.objectName, fieldName: filter.field },
+	);
+	const options = inline ?? fetched ?? [];
+	const Component = multi ? MultiSelectFilter : SelectFilter;
+	return (
+		<Component
+			field={filter.field}
+			label={filter.label}
+			options={options}
+			helpText={filter.helpText}
+		/>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/{object-search/components → search/components/filters}/FilterContext.tsx

@@ -1,6 +1,6 @@
-import { createContext, useContext, useCallback, type ReactNode } from "react";
-import { Button } from "../../../components/ui/button";
-import type { ActiveFilterValue } from "../utils/filterUtils";
+import { createContext, useCallback, useContext, type ReactNode } from "react";
+import { Button } from "../../../../components/ui/button";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface FilterContextValue {
 	filters: ActiveFilterValue[];
@@ -27,14 +27,7 @@ export function FilterProvider({
 	children,
 }: FilterProviderProps) {
 	return (
-		<FilterContext.Provider
-			value={{
-				filters,
-				onFilterChange,
-				onFilterRemove,
-				onReset,
-			}}
-		>
+		<FilterContext.Provider value={{ filters, onFilterChange, onFilterRemove, onReset }}>
 			{children}
 		</FilterContext.Provider>
 	);
@@ -51,11 +44,8 @@ export function useFilterField(field: string) {
 	const value = filters.find((f) => f.field === field);
 	const onChange = useCallback(
 		(next: ActiveFilterValue | undefined) => {
-			if (next) {
-				onFilterChange(field, next);
-			} else {
-				onFilterRemove(field);
-			}
+			if (next) onFilterChange(field, next);
+			else onFilterRemove(field);
 		},
 		[field, onFilterChange, onFilterRemove],
 	);
@@ -64,10 +54,7 @@ export function useFilterField(field: string) {
 
 export function useFilterPanel() {
 	const { filters, onReset } = useFilterContext();
-	return {
-		hasActiveFilters: filters.length > 0,
-		resetAll: onReset,
-	};
+	return { hasActiveFilters: filters.length > 0, resetAll: onReset };
 }
 
 type FilterResetButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick">;

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/BooleanFilter.tsx

@@ -0,0 +1,50 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+
+const ANY_VALUE = "__any__";
+
+interface BooleanFilterProps {
+	field: string;
+	label: string;
+	trueLabel?: string;
+	falseLabel?: string;
+	helpText?: string;
+}
+
+export function BooleanFilter({
+	field,
+	label,
+	trueLabel = "Yes",
+	falseLabel = "No",
+	helpText,
+}: BooleanFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const id = `filter-${field}`;
+	return (
+		<FilterFieldWrapper label={label} htmlFor={id} helpText={helpText}>
+			<Select
+				value={value?.value ?? ANY_VALUE}
+				onValueChange={(v) => {
+					if (v === ANY_VALUE) onChange(undefined);
+					else onChange({ field, label, type: "boolean", value: v });
+				}}
+			>
+				<SelectTrigger id={id} className="w-full">
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={ANY_VALUE}>Any</SelectItem>
+					<SelectItem value="true">{trueLabel}</SelectItem>
+					<SelectItem value="false">{falseLabel}</SelectItem>
+				</SelectContent>
+			</Select>
+		</FilterFieldWrapper>
+	);
+}