@salesforce/ui-bundle-template-feature-react-search 11.21.0 → 11.22.1

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.22.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.22.0...v11.22.1) (2026-07-10)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [11.22.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.21.0...v11.22.0) (2026-07-10)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [11.21.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.20.0...v11.21.0) (2026-07-10)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/feature-react-search/package.json

@@ -18,8 +18,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^11.21.0",
-    "@salesforce/ui-bundle": "^11.21.0",
+    "@salesforce/platform-sdk": "^11.22.1",
+    "@salesforce/ui-bundle": "^11.22.1",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -44,8 +44,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/graphiti": "^11.21.0",
-    "@salesforce/vite-plugin-ui-bundle": "^11.21.0",
+    "@salesforce/graphiti": "^11.22.1",
+    "@salesforce/vite-plugin-ui-bundle": "^11.22.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

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

@@ -30,7 +30,7 @@ export function SortControl({ configs, sort, onSortChange, className }: SortCont
 					else onSortChange({ field: v, direction: sort?.direction ?? "ASC" });
 				}}
 			>
-				<SelectTrigger size="sm" className="w-[160px]">
+				<SelectTrigger size="sm" className="w-[160px]" aria-label="Sort by">
 					<SelectValue placeholder="Default" />
 				</SelectTrigger>
 				<SelectContent>

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

@@ -4,7 +4,9 @@ import { Label } from "../../../../../components/ui/label";
 interface FilterFieldWrapperProps {
 	label: string;
 	htmlFor?: string;
+	errorId?: string;
 	helpText?: string;
+	error?: string;
 	className?: string;
 	children: ReactNode;
 }
@@ -12,7 +14,9 @@ interface FilterFieldWrapperProps {
 export function FilterFieldWrapper({
 	label,
 	htmlFor,
+	errorId,
 	helpText,
+	error,
 	className,
 	children,
 }: FilterFieldWrapperProps) {
@@ -20,7 +24,15 @@ export function FilterFieldWrapper({
 		<div className={`space-y-1 ${className ?? ""}`}>
 			<Label htmlFor={htmlFor}>{label}</Label>
 			{children}
-			{helpText && <p className="text-xs text-muted-foreground min-h-4">{helpText}</p>}
+			<div className="min-h-4">
+				{error ? (
+					<p id={errorId} role="alert" className="text-xs text-destructive">
+						{error}
+					</p>
+				) : (
+					helpText && <p className="text-xs text-muted-foreground">{helpText}</p>
+				)}
+			</div>
 		</div>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Input } from "../../../../../components/ui/input";
 import { useFilterField } from "../FilterContext";
 import { FilterFieldWrapper } from "./FilterFieldWrapper";
@@ -14,6 +14,7 @@ interface NumericRangeFilterProps {
 
 export function NumericRangeFilter({ field, label, helpText, min, max }: NumericRangeFilterProps) {
 	const { value, onChange } = useFilterField(field);
+	const errorId = useId();
 	const [draftMin, setDraftMin] = useState(value?.min ?? "");
 	const [draftMax, setDraftMax] = useState(value?.max ?? "");
 
@@ -44,8 +45,33 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 		setDraftMax(value?.max ?? "");
 	}, [value?.min, value?.max]);
 
+	const isOutOfBounds = (v: string) => {
+		if (v === "") return false;
+		const n = Number(v);
+		return (min != null && n < min) || (max != null && n > max);
+	};
+	const minOutOfBounds = isOutOfBounds(draftMin);
+	const maxOutOfBounds = isOutOfBounds(draftMax);
+	const isRangeInverted = draftMin !== "" && draftMax !== "" && Number(draftMin) > Number(draftMax);
+	const hasError = minOutOfBounds || maxOutOfBounds || isRangeInverted;
+
+	const boundsLabel =
+		min != null && max != null
+			? `${min}–${max}`
+			: min != null
+				? `${min} or more`
+				: max != null
+					? `${max} or less`
+					: null;
+
+	const errorMessage = isRangeInverted
+		? "Min must not exceed max"
+		: (minOutOfBounds || maxOutOfBounds) && boundsLabel
+			? `Value must be between ${boundsLabel}`
+			: undefined;
+
 	return (
-		<FilterFieldWrapper label={label} helpText={helpText}>
+		<FilterFieldWrapper label={label} helpText={helpText} error={errorMessage} errorId={errorId}>
 			<div className="flex items-center gap-2">
 				<Input
 					type="number"
@@ -58,6 +84,8 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 						debouncedRef.current?.(e.target.value, draftMax);
 					}}
 					aria-label={`${label} minimum`}
+					aria-invalid={hasError || undefined}
+					aria-describedby={hasError ? errorId : undefined}
 				/>
 				<span className="text-sm text-muted-foreground">–</span>
 				<Input
@@ -71,6 +99,8 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 						debouncedRef.current?.(draftMin, e.target.value);
 					}}
 					aria-label={`${label} maximum`}
+					aria-invalid={hasError || undefined}
+					aria-describedby={hasError ? errorId : undefined}
 				/>
 			</div>
 		</FilterFieldWrapper>

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.21.0",
+  "version": "11.22.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-      "version": "11.21.0",
+      "version": "11.22.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "fast-xml-parser": "^5.9.3",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.21.0",
+  "version": "11.22.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-feature-react-search",
-  "version": "11.21.0",
+  "version": "11.22.1",
   "description": "[Beta] Configuration-driven multi-source search for UI Bundles",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

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

@@ -30,7 +30,7 @@ export function SortControl({ configs, sort, onSortChange, className }: SortCont
 					else onSortChange({ field: v, direction: sort?.direction ?? "ASC" });
 				}}
 			>
-				<SelectTrigger size="sm" className="w-[160px]">
+				<SelectTrigger size="sm" className="w-[160px]" aria-label="Sort by">
 					<SelectValue placeholder="Default" />
 				</SelectTrigger>
 				<SelectContent>

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

@@ -4,7 +4,9 @@ import { Label } from "../../../../../components/ui/__inherit__label";
 interface FilterFieldWrapperProps {
 	label: string;
 	htmlFor?: string;
+	errorId?: string;
 	helpText?: string;
+	error?: string;
 	className?: string;
 	children: ReactNode;
 }
@@ -12,7 +14,9 @@ interface FilterFieldWrapperProps {
 export function FilterFieldWrapper({
 	label,
 	htmlFor,
+	errorId,
 	helpText,
+	error,
 	className,
 	children,
 }: FilterFieldWrapperProps) {
@@ -20,7 +24,15 @@ export function FilterFieldWrapper({
 		<div className={`space-y-1 ${className ?? ""}`}>
 			<Label htmlFor={htmlFor}>{label}</Label>
 			{children}
-			{helpText && <p className="text-xs text-muted-foreground min-h-4">{helpText}</p>}
+			<div className="min-h-4">
+				{error ? (
+					<p id={errorId} role="alert" className="text-xs text-destructive">
+						{error}
+					</p>
+				) : (
+					helpText && <p className="text-xs text-muted-foreground">{helpText}</p>
+				)}
+			</div>
 		</div>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Input } from "../../../../../components/ui/__inherit__input";
 import { useFilterField } from "../FilterContext";
 import { FilterFieldWrapper } from "./FilterFieldWrapper";
@@ -14,6 +14,7 @@ interface NumericRangeFilterProps {
 
 export function NumericRangeFilter({ field, label, helpText, min, max }: NumericRangeFilterProps) {
 	const { value, onChange } = useFilterField(field);
+	const errorId = useId();
 	const [draftMin, setDraftMin] = useState(value?.min ?? "");
 	const [draftMax, setDraftMax] = useState(value?.max ?? "");
 
@@ -44,8 +45,33 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 		setDraftMax(value?.max ?? "");
 	}, [value?.min, value?.max]);
 
+	const isOutOfBounds = (v: string) => {
+		if (v === "") return false;
+		const n = Number(v);
+		return (min != null && n < min) || (max != null && n > max);
+	};
+	const minOutOfBounds = isOutOfBounds(draftMin);
+	const maxOutOfBounds = isOutOfBounds(draftMax);
+	const isRangeInverted = draftMin !== "" && draftMax !== "" && Number(draftMin) > Number(draftMax);
+	const hasError = minOutOfBounds || maxOutOfBounds || isRangeInverted;
+
+	const boundsLabel =
+		min != null && max != null
+			? `${min}–${max}`
+			: min != null
+				? `${min} or more`
+				: max != null
+					? `${max} or less`
+					: null;
+
+	const errorMessage = isRangeInverted
+		? "Min must not exceed max"
+		: (minOutOfBounds || maxOutOfBounds) && boundsLabel
+			? `Value must be between ${boundsLabel}`
+			: undefined;
+
 	return (
-		<FilterFieldWrapper label={label} helpText={helpText}>
+		<FilterFieldWrapper label={label} helpText={helpText} error={errorMessage} errorId={errorId}>
 			<div className="flex items-center gap-2">
 				<Input
 					type="number"
@@ -58,6 +84,8 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 						debouncedRef.current?.(e.target.value, draftMax);
 					}}
 					aria-label={`${label} minimum`}
+					aria-invalid={hasError || undefined}
+					aria-describedby={hasError ? errorId : undefined}
 				/>
 				<span className="text-sm text-muted-foreground">–</span>
 				<Input
@@ -71,6 +99,8 @@ export function NumericRangeFilter({ field, label, helpText, min, max }: Numeric
 						debouncedRef.current?.(draftMin, e.target.value);
 					}}
 					aria-label={`${label} maximum`}
+					aria-invalid={hasError || undefined}
+					aria-describedby={hasError ? errorId : undefined}
 				/>
 			</div>
 		</FilterFieldWrapper>