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

package/dist/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/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/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/dist/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/button";
 import { Checkbox } from "../../../../../components/ui/checkbox";
 import { Label } from "../../../../../components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../../components/ui/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/dist/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" }
     }
   ]
 }