@salesforce/ui-bundle-template-app-react-sample-b2e 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/propertymanagementapp/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",
@@ -46,8 +46,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/propertymanagementapp/src/components/applications/ApplicationDetailsModal.tsx

@@ -1,5 +1,11 @@
 import React, { useState } from "react";
-import { X } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "../ui/dialog";
 import { Button } from "../ui/button";
 import type { ApplicationSearchNode } from "../../api/applications/applicationSearchService";
 
@@ -39,8 +45,6 @@ export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = (
 		}
 	};
 
-	if (!isOpen) return null;
-
 	const applicantName = application.User__r?.Name?.value || "Unknown";
 	const propertyName = application.Property__r?.Name?.value;
 	const propertyAddress = application.Property__r?.Address__c?.value || "";
@@ -48,22 +52,13 @@ export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = (
 	const references = application.References__c?.value;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
-			<div className="fixed inset-0 bg-black/50" onClick={onClose} />
-
-			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
-				<div className="flex items-center justify-between p-6 border-b border-gray-200">
-					<h2 className="text-xl font-semibold text-gray-900">Application Details</h2>
-					<button
-						onClick={onClose}
-						aria-label="Close"
-						className="text-gray-400 hover:text-gray-600 transition-colors"
-					>
-						<X className="w-6 h-6" aria-hidden="true" />
-					</button>
-				</div>
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Application Details</DialogTitle>
+				</DialogHeader>
 
-				<div className="p-6 space-y-6">
+				<div className="space-y-6">
 					<div>
 						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
 							Applicant
@@ -127,7 +122,7 @@ export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = (
 					</div>
 				</div>
 
-				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+				<DialogFooter>
 					<Button variant="outline" onClick={onClose} disabled={isSaving}>
 						Close
 					</Button>
@@ -140,8 +135,8 @@ export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = (
 							{isSaving ? "Saving..." : "Save Changes"}
 						</Button>
 					)}
-				</div>
-			</div>
-		</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx

@@ -1,5 +1,11 @@
 import React, { useState } from "react";
-import { X } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "../ui/dialog";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
 import type { MaintenanceRequestSearchNode } from "../../api/maintenanceRequests/maintenanceRequestSearchService";
@@ -53,8 +59,6 @@ export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = (
 		}
 	};
 
-	if (!isOpen) return null;
-
 	const description = request.Description__c?.value || "";
 	const issueType = request.Type__c?.value || "General";
 	const propertyAddress = request.Property__r?.Address__c?.value || "Unknown Address";
@@ -64,22 +68,13 @@ export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = (
 	const priority = request.Priority__c?.value;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
-			<div className="fixed inset-0 bg-black/50" onClick={onClose} />
-
-			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
-				<div className="flex items-center justify-between p-6 border-b border-gray-200">
-					<h2 className="text-xl font-semibold text-gray-900">Maintenance Request Details</h2>
-					<button
-						onClick={onClose}
-						aria-label="Close"
-						className="text-gray-400 hover:text-gray-600 transition-colors"
-					>
-						<X className="w-6 h-6" aria-hidden="true" />
-					</button>
-				</div>
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Maintenance Request Details</DialogTitle>
+				</DialogHeader>
 
-				<div className="p-6 space-y-6">
+				<div className="space-y-6">
 					{/* Description */}
 					<div>
 						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
@@ -160,7 +155,7 @@ export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = (
 					</div>
 				</div>
 
-				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+				<DialogFooter>
 					<Button variant="outline" onClick={onClose} disabled={isSaving}>
 						Close
 					</Button>
@@ -173,9 +168,9 @@ export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = (
 							{isSaving ? "Saving..." : "Save Changes"}
 						</Button>
 					)}
-				</div>
-			</div>
-		</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };
 

package/dist/force-app/main/default/uiBundles/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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-app-react-sample-b2e",
-  "version": "11.21.0",
+  "version": "11.22.1",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/ui-bundle": "^11.21.0",
+    "@salesforce/ui-bundle": "^11.22.1",
     "sonner": "^1.7.0"
   },
   "devDependencies": {