@salesforce/templates 66.6.2 → 66.7.0

package/lib/templates/project/reactexternalapp/README.md

@@ -4,41 +4,41 @@ An external React starter template for customer-facing apps on the Salesforce pl
 
 ## What's included
 
-| Path                                                       | Description                                                                                                                              |
-| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `force-app/main/default/webapplications/reactexternalapp/` | React web app (source, config, tests)                                                                                                    |
-| `force-app/main/default/classes/`                          | Apex classes for authentication — `WebAppAuthUtils`, `WebAppChangePassword`, `WebAppForgotPassword`, `WebAppLogin`, `WebAppRegistration` |
-| `force-app/main/default/digitalExperienceConfigs/`         | Experience Cloud site configuration                                                                                                      |
-| `force-app/main/default/digitalExperiences/`               | Experience Cloud site definition                                                                                                         |
-| `force-app/main/default/networks/`                         | Experience Cloud network                                                                                                                 |
-| `force-app/main/default/sites/`                            | Salesforce site                                                                                                                          |
+| Path                                                 | Description                                                                                                                                        |
+| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `force-app/main/default/uiBundles/reactexternalapp/` | React UI Bundle (source, config, tests)                                                                                                            |
+| `force-app/main/default/classes/`                    | Apex classes for authentication — `UIBundleAuthUtils`, `UIBundleChangePassword`, `UIBundleForgotPassword`, `UIBundleLogin`, `UIBundleRegistration` |
+| `force-app/main/default/digitalExperienceConfigs/`   | Experience Cloud site configuration                                                                                                                |
+| `force-app/main/default/digitalExperiences/`         | Experience Cloud site definition                                                                                                                   |
+| `force-app/main/default/networks/`                   | Experience Cloud network                                                                                                                           |
+| `force-app/main/default/sites/`                      | Salesforce site                                                                                                                                    |
 
 ## Getting started
 
-Navigate to the web app and install dependencies:
+Navigate to the UI Bundle and install dependencies:
 
 ```bash
-cd force-app/main/default/webapplications/reactexternalapp
+cd force-app/main/default/uiBundles/reactexternalapp
 npm install
 npm run dev
 ```
 
-Opens at http://localhost:5173 by default. For build and test instructions, see the [web app README](force-app/main/default/webapplications/reactexternalapp/README.md).
+Opens at http://localhost:5173 by default. For build and test instructions, see the [UI Bundle README](force-app/main/default/uiBundles/reactexternalapp/README.md).
 
 ## Deploy
 
-### Deploy everything (metadata + Experience Cloud site + web app)
+### Deploy everything (metadata + Experience Cloud site + UI Bundle)
 
 ```bash
-cd force-app/main/default/webapplications/reactexternalapp && npm install && npm run build && cd -
+cd force-app/main/default/uiBundles/reactexternalapp && npm install && npm run build && cd -
 sf project deploy start --source-dir force-app --target-org <alias>
 ```
 
-### Deploy the web app only
+### Deploy the UI Bundle only
 
 ```bash
-cd force-app/main/default/webapplications/reactexternalapp && npm install && npm run build && cd -
-sf project deploy start --source-dir force-app/main/default/webapplications --target-org <alias>
+cd force-app/main/default/uiBundles/reactexternalapp && npm install && npm run build && cd -
+sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
 ```
 
 ### Deploy Experience Cloud site only

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/CHANGELOG.md

@@ -7,4 +7,4 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-- auto bump base react app versions and fix issue with base webapplication json ([#175](https://github.com/salesforce-experience-platform-emu/webapps/issues/175)) ([048b5a8](https://github.com/salesforce-experience-platform-emu/webapps/commit/048b5a8449c899fc923aeebc3c76bc5bf1c5e0d4))
+- auto bump base react app versions and fix issue with base ui-bundle json ([#175](https://github.com/salesforce-experience-platform-emu/webapps/issues/175)) ([048b5a8](https://github.com/salesforce-experience-platform-emu/webapps/commit/048b5a8449c899fc923aeebc3c76bc5bf1c5e0d4))

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/README.md

@@ -24,7 +24,7 @@ Starts the Vite dev server (default: http://localhost:5173).
 npm run build
 ```
 
-Writes the production bundle to `dist/` inside the web app folder.
+Writes the production bundle to `dist/` inside the UI Bundle folder.
 
 ## Test
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/eslint.config.js

@@ -18,7 +18,12 @@ const schemaExists = existsSync(schemaPath);
 const config = [
   // Global ignores
   {
-    ignores: ['build/**/*', 'dist/**/*', 'coverage/**/*'],
+    ignores: [
+      'build/**/*',
+      'dist/**/*',
+      'coverage/**/*',
+      'src/api/graphql-operations-types.ts',
+    ],
   },
   // Config files and build tools (first to avoid inheritance)
   {
@@ -89,11 +94,17 @@ const config = [
       'react/no-unescaped-entities': 'off',
       '@typescript-eslint/no-unused-vars': [
         'error',
-        { argsIgnorePattern: '^_' },
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
       ],
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+      'react-hooks/set-state-in-effect': 'warn',
     },
     settings: {
       react: {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.114.0",
-    "@salesforce/webapp-experimental": "^1.114.0",
+    "@salesforce/sdk-data": "file:../../../../../../../../../sdk/sdk-data",
+    "@salesforce/ui-bundle": "file:../../../../../../../../../ui-bundle",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.114.0",
+    "@salesforce/vite-plugin-ui-bundle": "file:../../../../../../../../../vite-plugin-ui-bundle",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/reactexternalapp.uibundle-meta.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <masterLabel>reactexternalapp</masterLabel>
+    <description>A Salesforce UI Bundle.</description>
+    <isActive>true</isActive>
+    <version>1</version>
+    <target>Experience</target>
+</UIBundle>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/scripts/get-graphql-schema.mjs

@@ -10,7 +10,7 @@
  */
 import { writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { getOrgInfo } from '@salesforce/webapp-experimental/app';
+import { getOrgInfo } from '@salesforce/ui-bundle/app';
 import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
 import { pruneSchema } from '@graphql-tools/utils';
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/_ex_/pages/AccountSearch.tsx

@@ -62,8 +62,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{ field: "Industry", label: "Industry", type: "picklist" },
 	{ field: "Type", label: "Type", type: "multipicklist" },
 	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
-	{ field: "CreatedDate", label: "Created Date", type: "date" },
-	{ field: "LastModifiedDate", label: "Last Modified Date", type: "daterange" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
+	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
 ];
 
 const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
@@ -152,7 +152,7 @@ export default function AccountSearch() {
 									</div>
 								</CardHeader>
 								<CollapsibleContent>
-									<CardContent className="space-y-4 pt-0">
+									<CardContent className="space-y-1 pt-0">
 										<SearchFilter
 											field="search"
 											label="Search"
@@ -165,9 +165,18 @@ export default function AccountSearch() {
 											options={industryOptions ?? []}
 										/>
 										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
-										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
-										<DateFilter field="CreatedDate" label="Created Date" />
-										<DateRangeFilter field="LastModifiedDate" label="Last Modified Date" />
+										<NumericRangeFilter
+											field="AnnualRevenue"
+											label="Annual Revenue"
+											min={0}
+											max={1_000_000_000_000}
+										/>
+										<DateFilter field="CreatedDate" label="Created Date" filterType="datetime" />
+										<DateRangeFilter
+											field="LastModifiedDate"
+											label="Last Modified Date"
+											filterType="datetimerange"
+										/>
 									</CardContent>
 								</CollapsibleContent>
 							</Collapsible>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/FilterContext.tsx

@@ -27,7 +27,14 @@ export function FilterProvider({
 	children,
 }: FilterProviderProps) {
 	return (
-		<FilterContext.Provider value={{ filters, onFilterChange, onFilterRemove, onReset }}>
+		<FilterContext.Provider
+			value={{
+				filters,
+				onFilterChange,
+				onFilterRemove,
+				onReset,
+			}}
+		>
 			{children}
 		</FilterContext.Provider>
 	);
@@ -57,10 +64,13 @@ 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,
+	};
 }
 
-interface FilterResetButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick"> {}
+type FilterResetButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick">;
 
 export function FilterResetButton({ children, ...props }: FilterResetButtonProps) {
 	const { hasActiveFilters, resetAll } = useFilterPanel();

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/BooleanFilter.tsx

@@ -5,9 +5,9 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 const ALL_VALUE = "__all__";
@@ -21,11 +21,15 @@ interface BooleanFilterProps extends Omit<React.ComponentProps<"div">, "onChange
 export function BooleanFilter({ field, label, helpText, className, ...props }: BooleanFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<BooleanFilterSelect field={field} label={label} value={value} onChange={onChange} />
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateFilter.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { parseISO } from "date-fns";
-import { Label } from "../../../../components/ui/label";
 import {
 	DatePicker,
 	DatePickerTrigger,
 	DatePickerContent,
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
 import {
 	Select,
 	SelectContent,
@@ -32,9 +33,17 @@ interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange">
 	field: string;
 	label: string;
 	helpText?: string;
+	filterType?: FilterFieldType;
 }
 
-export function DateFilter({ field, label, helpText, className, ...props }: DateFilterProps) {
+export function DateFilter({
+	field,
+	label,
+	helpText,
+	filterType = "date",
+	className,
+	...props
+}: DateFilterProps) {
 	const { value, onChange } = useFilterField(field);
 
 	const initialOp: DateOperator = value?.min ? "gt" : "lt";
@@ -63,7 +72,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 		onChange({
 			field,
 			label,
-			type: "date",
+			type: filterType,
 			value: op,
 			min: f === "min" ? dateStr : undefined,
 			max: f === "max" ? dateStr : undefined,
@@ -71,8 +80,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<div className="flex gap-2">
 				<Select value={operator} onValueChange={(v) => handleOperatorChange(v as DateOperator)}>
 					<SelectTrigger className="w-full flex-1">
@@ -104,8 +112,7 @@ export function DateFilter({ field, label, helpText, className, ...props }: Date
 					</DatePickerContent>
 				</DatePicker>
 			</div>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateRangeFilter.tsx

@@ -1,25 +1,28 @@
 import type { DateRange } from "react-day-picker";
-import { Label } from "../../../../components/ui/label";
 import {
 	DatePicker,
 	DatePickerRangeTrigger,
 	DatePickerContent,
 	DatePickerCalendar,
 } from "../../../../components/ui/datePicker";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
 import { toDate, toDateString } from "./DateFilter";
 
 interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
 	helpText?: string;
+	filterType?: FilterFieldType;
 }
 
 export function DateRangeFilter({
 	field,
 	label,
 	helpText,
+	filterType = "daterange",
 	className,
 	...props
 }: DateRangeFilterProps) {
@@ -35,7 +38,7 @@ export function DateRangeFilter({
 			onChange({
 				field,
 				label,
-				type: "daterange",
+				type: filterType,
 				min: toDateString(range?.from),
 				max: toDateString(range?.to),
 			});
@@ -43,8 +46,7 @@ export function DateRangeFilter({
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<DatePicker>
 				<DatePickerRangeTrigger
 					className="w-full"
@@ -63,7 +65,6 @@ export function DateRangeFilter({
 					/>
 				</DatePickerContent>
 			</DatePicker>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/FilterFieldWrapper.tsx

@@ -0,0 +1,33 @@
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+
+interface FilterFieldWrapperProps extends React.ComponentProps<"div"> {
+	label: string;
+	htmlFor?: string;
+	helpText?: string;
+	error?: string;
+}
+
+export function FilterFieldWrapper({
+	label,
+	htmlFor,
+	helpText,
+	error,
+	className,
+	children,
+	...props
+}: FilterFieldWrapperProps) {
+	return (
+		<div className={cn("space-y-1", className)} {...props}>
+			<Label htmlFor={htmlFor}>{label}</Label>
+			{children}
+			<div className="min-h-4">
+				{error ? (
+					<p className="text-xs text-destructive">{error}</p>
+				) : (
+					helpText && <p className="text-xs text-muted-foreground">{helpText}</p>
+				)}
+			</div>
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/MultiSelectFilter.tsx

@@ -4,11 +4,12 @@ import {
 	PopoverTrigger,
 } from "../../../../components/ui/popover";
 import { Checkbox } from "../../../../components/ui/checkbox";
-import { Label } from "../../../../components/ui/label";
 import { Button } from "../../../../components/ui/button";
 import { cn } from "../../../../lib/utils";
+import { Label } from "../../../../components/ui/label";
 import { ChevronDown } from "lucide-react";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 
 interface MultiSelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
@@ -53,8 +54,7 @@ export function MultiSelectFilter({
 	}
 
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<Popover>
 				<PopoverTrigger asChild>
 					<Button
@@ -92,7 +92,6 @@ export function MultiSelectFilter({
 					</div>
 				</PopoverContent>
 			</Popover>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/NumericRangeFilter.tsx

@@ -1,37 +1,52 @@
+import { useEffect, useState } from "react";
 import { Input } from "../../../../components/ui/input";
-import { Label } from "../../../../components/ui/label";
-import { cn } from "../../../../lib/utils";
+
 import { useFilterField } from "../FilterContext";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
 	helpText?: string;
+	min?: number;
+	max?: number;
 }
 
 export function NumericRangeFilter({
 	field,
 	label,
 	helpText,
+	min,
+	max,
 	className,
 	...props
 }: NumericRangeFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label>{label}</Label>
-			<NumericRangeFilterInputs field={field} label={label} value={value} onChange={onChange} />
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		<NumericRangeFilterInputs
+			field={field}
+			label={label}
+			helpText={helpText}
+			value={value}
+			onChange={onChange}
+			min={min}
+			max={max}
+			className={className}
+			{...props}
+		/>
 	);
 }
 
 interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
 	label: string;
+	helpText?: string;
 	value: ActiveFilterValue | undefined;
 	onChange: (value: ActiveFilterValue | undefined) => void;
+	min?: number;
+	max?: number;
 	minInputProps?: React.ComponentProps<typeof Input>;
 	maxInputProps?: React.ComponentProps<typeof Input>;
 }
@@ -39,47 +54,110 @@ interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">
 export function NumericRangeFilterInputs({
 	field,
 	label,
+	helpText,
 	value,
 	onChange,
+	min: boundMin,
+	max: boundMax,
 	className,
-	minInputProps,
-	maxInputProps,
 	...props
 }: NumericRangeFilterInputsProps) {
-	const handleChange = (bound: "min" | "max", v: string) => {
-		const next = {
-			field,
-			label,
-			type: "numeric" as const,
-			min: value?.min ?? "",
-			max: value?.max ?? "",
-			[bound]: v,
-		};
-		if (!next.min && !next.max) {
+	const [localMin, setLocalMin] = useState(value?.min ?? "");
+	const [localMax, setLocalMax] = useState(value?.max ?? "");
+
+	const externalMin = value?.min ?? "";
+	const externalMax = value?.max ?? "";
+	useEffect(() => {
+		setLocalMin(externalMin);
+	}, [externalMin]);
+	useEffect(() => {
+		setLocalMax(externalMax);
+	}, [externalMax]);
+
+	const isOutOfBounds = (v: string) => {
+		if (v === "") return false;
+		const n = Number(v);
+		return (boundMin != null && n < boundMin) || (boundMax != null && n > boundMax);
+	};
+	const minOutOfBounds = isOutOfBounds(localMin);
+	const maxOutOfBounds = isOutOfBounds(localMax);
+	const isRangeInverted = localMin !== "" && localMax !== "" && Number(localMin) > Number(localMax);
+	const hasError = minOutOfBounds || maxOutOfBounds || isRangeInverted;
+
+	const debouncedOnChange = useDebouncedCallback((min: string, max: string) => {
+		if (!min && !max) {
 			onChange(undefined);
-		} else {
-			onChange(next);
+			return;
 		}
-	};
+		const minNum = min !== "" ? Number(min) : null;
+		const maxNum = max !== "" ? Number(max) : null;
+		if (minNum != null && maxNum != null && minNum > maxNum) return;
+		if (
+			minNum != null &&
+			((boundMin != null && minNum < boundMin) || (boundMax != null && minNum > boundMax))
+		)
+			return;
+		if (
+			maxNum != null &&
+			((boundMin != null && maxNum < boundMin) || (boundMax != null && maxNum > boundMax))
+		)
+			return;
+		onChange({ field, label, type: "numeric" as const, min, max });
+	});
+
+	const boundsLabel =
+		boundMin != null && boundMax != null
+			? `${boundMin}–${boundMax}`
+			: boundMin != null
+				? `${boundMin} or more`
+				: boundMax != null
+					? `${boundMax} or less`
+					: null;
+
+	const errorMessage = isRangeInverted
+		? "Min must not exceed max"
+		: (minOutOfBounds || maxOutOfBounds) && boundsLabel
+			? `Value must be between ${boundsLabel}`
+			: undefined;
 
 	return (
-		<div className={cn("flex gap-2", className)} {...props}>
-			<Input
-				type="number"
-				placeholder="Min"
-				value={value?.min ?? ""}
-				onChange={(e) => handleChange("min", e.target.value)}
-				aria-label={`${label} minimum`}
-				{...minInputProps}
-			/>
-			<Input
-				type="number"
-				placeholder="Max"
-				value={value?.max ?? ""}
-				onChange={(e) => handleChange("max", e.target.value)}
-				aria-label={`${label} maximum`}
-				{...maxInputProps}
-			/>
-		</div>
+		<FilterFieldWrapper
+			label={label}
+			helpText={helpText}
+			error={errorMessage}
+			className={className}
+			{...props}
+		>
+			<div className="flex gap-2">
+				<Input
+					type="number"
+					placeholder="Min"
+					value={localMin}
+					min={boundMin}
+					max={boundMax}
+					onChange={(e) => {
+						const v = e.target.value;
+						setLocalMin(v);
+						debouncedOnChange(v, localMax);
+					}}
+					aria-label={`${label} minimum`}
+					aria-invalid={hasError || undefined}
+				/>
+				<Input
+					type="number"
+					placeholder="Max"
+					value={localMax}
+					min={boundMin}
+					max={boundMax}
+					onChange={(e) => {
+						const v = e.target.value;
+						setLocalMax(v);
+						debouncedOnChange(localMin, v);
+					}}
+					aria-label={`${label} maximum`}
+					aria-invalid={hasError || undefined}
+				/>
+			</div>
+		</FilterFieldWrapper>
 	);
 }