@salesforce/ui-bundle-template-app-react-template-b2x 3.0.0 → 3.1.0

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/ResetPassword.tsx

@@ -8,13 +8,13 @@ import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { newPasswordSchema } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 export default function ResetPassword() {
 	const [searchParams] = useSearchParams();
 	const token = searchParams.get("token");
 	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { newPassword: "", confirmPassword: "" },
@@ -34,12 +34,27 @@ export default function ResetPassword() {
 						Accept: "application/json",
 					},
 				});
-				await handleApiResponse(response, "Password reset failed");
+				await handleApiResponse(response);
 				setSuccess(true);
 				// Scroll to top of page after successful submission so user sees it
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Password reset failed"));
+				console.error("Password reset failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						err.errors.length === 1 ? (
+							err.errors[0]
+						) : (
+							<ul>
+								{err.errors.map((e, i) => (
+									<li key={i}>{e}</li>
+								))}
+							</ul>
+						),
+					);
+				} else {
+					setSubmitError("Password reset failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/utils/helpers.ts

@@ -1,29 +1,22 @@
 /**
- * MAINTAINABILITY: Robust error extraction.
- * Handles strings, objects, and standard Error instances.
- *
- * @param err - The error object (unknown type)
- * @param fallback - Fallback message if error doesn't have a message property
- * @returns The error message string
+ * Error thrown when the API returns a non-OK response with structured error messages.
+ * The `errors` array contains user-facing messages that are safe to display —
+ * backend Apex classes guarantee that system exceptions are never exposed.
  */
-export function getErrorMessage(err: unknown, fallback: string): string {
-	if (err instanceof Error) return err.message;
-	if (typeof err === "string") return err;
-	// Check if it's an object with a message property
-	if (typeof err === "object" && err !== null && "message" in err) {
-		return String((err as { message: unknown }).message);
+export class ApiError extends Error {
+	errors: string[];
+	constructor(errors: string[]) {
+		super(errors[0]);
+		this.name = "ApiError";
+		this.errors = errors;
 	}
-	return fallback;
 }
 
 /**
  * [Dev Note] Helper to parse the fetch Response.
  * It handles the distinction between success (JSON) and failure (throwing Error).
  */
-export async function handleApiResponse<T = unknown>(
-	response: Response,
-	fallbackError: string,
-): Promise<T> {
+export async function handleApiResponse<T = unknown>(response: Response): Promise<T> {
 	// 1. Robustness: Handle 204 No Content gracefully
 	if (response.status === 204) {
 		return {} as T;
@@ -41,9 +34,11 @@ export async function handleApiResponse<T = unknown>(
 	}
 
 	if (!response.ok) {
-		// [Dev Note] Throwing here allows the calling component to catch and
-		// display the error via getErrorMessage()
-		throw new Error(parseApiResponseError(data, fallbackError));
+		console.error("API request failed", data);
+		if (data?.errors?.length) {
+			throw new ApiError(data.errors);
+		}
+		throw new Error("An unexpected error occurred");
 	}
 
 	return data as T;
@@ -87,35 +82,3 @@ export function flattenGraphQLRecord<T>(
 		]),
 	) as T;
 }
-
-/**
- * [Dev Note] Salesforce APIs may return errors as an array or a single object.
- * This helper standardizes the extraction of the error message string.
- *
- * @param data - The response data.
- * @param fallbackError - Fallback error message if response doesn't have a message property
- * @returns The error message string
- */
-function parseApiResponseError(
-	data: any,
-	fallbackError: string = "An unknown error occurred",
-): string {
-	if (data?.message) {
-		return data.message;
-	}
-	if (data?.error) {
-		return data.error;
-	}
-	if (data?.errors && Array.isArray(data.errors) && data.errors.length > 0) {
-		return data.errors.join(" ") || fallbackError;
-	}
-	if (Array.isArray(data) && data.length > 0) {
-		return (
-			data
-				.map((e) => e?.message)
-				.filter(Boolean)
-				.join(" ") || fallbackError
-		);
-	}
-	return fallbackError;
-}

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/__examples__/pages/AccountObjectDetailPage.tsx

@@ -18,7 +18,7 @@ import {
 } from "../../../../components/ui/collapsible";
 import { Separator } from "../../../../components/ui/separator";
 import { Skeleton } from "../../../../components/ui/skeleton";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { ObjectBreadcrumb } from "../../components/ObjectBreadcrumb";
 
 type AccountNode = NonNullable<
@@ -49,9 +49,7 @@ export default function AccountObjectDetail() {
 		data: account,
 		loading,
 		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
+	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
 	return (
 		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/__examples__/pages/AccountSearch.tsx

@@ -6,7 +6,7 @@ import {
 	fetchDistinctIndustries,
 	fetchDistinctTypes,
 } from "../api/accountSearchService";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { fieldValue } from "../../utils/fieldUtils";
 import { useObjectSearchParams } from "../../hooks/useObjectSearchParams";
 import { Alert, AlertTitle, AlertDescription } from "../../../../components/ui/alert";
@@ -42,8 +42,8 @@ import PaginationControls from "../../components/PaginationControls";
 import type { PaginationConfig } from "../../hooks/useObjectSearchParams";
 
 const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 6,
-	validPageSizes: [6, 12, 24, 48],
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
 };
 
 type AccountNode = NonNullable<
@@ -77,22 +77,15 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 
 export default function AccountSearch() {
 	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
-		key: "distinctIndustries",
-		ttl: 300_000,
-	});
-	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
-		key: "distinctTypes",
-		ttl: 300_000,
-	});
+	const { data: industryOptions } = useAsyncData(fetchDistinctIndustries, []);
+	const { data: typeOptions } = useAsyncData(fetchDistinctTypes, []);
 
 	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
 		Account_Filter,
 		Account_OrderBy
 	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
 
-	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
-	const { data, loading, error } = useCachedAsyncData(
+	const { data, loading, error } = useAsyncData(
 		() =>
 			searchAccounts({
 				where: query.where,
@@ -101,7 +94,6 @@ export default function AccountSearch() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
 	);
 
 	const pageInfo = data?.pageInfo;
@@ -196,7 +188,7 @@ export default function AccountSearch() {
 						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
 					</div>
 
-					<div className="min-h-112">
+					<div className="min-h-132">
 						{/* Loading state */}
 						{loading && (
 							<>

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/components/filters/NumericRangeFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 
 import { useFilterField } from "../FilterContext";
@@ -67,12 +67,16 @@ export function NumericRangeFilterInputs({
 
 	const externalMin = value?.min ?? "";
 	const externalMax = value?.max ?? "";
-	useEffect(() => {
+	const [prevExternalMin, setPrevExternalMin] = useState(externalMin);
+	const [prevExternalMax, setPrevExternalMax] = useState(externalMax);
+	if (prevExternalMin !== externalMin) {
+		setPrevExternalMin(externalMin);
 		setLocalMin(externalMin);
-	}, [externalMin]);
-	useEffect(() => {
+	}
+	if (prevExternalMax !== externalMax) {
+		setPrevExternalMax(externalMax);
 		setLocalMax(externalMax);
-	}, [externalMax]);
+	}
 
 	const isOutOfBounds = (v: string) => {
 		if (v === "") return false;

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/components/filters/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { SearchBar } from "../SearchBar";
 import { useFilterField } from "../FilterContext";
@@ -22,9 +22,11 @@ export function SearchFilter({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/components/filters/TextFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
@@ -62,9 +62,11 @@ export function TextFilterInput({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/object-search/hooks/useAsyncData.ts

@@ -22,16 +22,24 @@ export function useAsyncData<T>(
 	const [data, setData] = useState<T | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [generation, setGeneration] = useState(0);
 
 	const fetcherRef = useRef(fetcher);
 	useEffect(() => {
 		fetcherRef.current = fetcher;
 	});
 
+	// Detect dep changes during render to reset loading state and bump generation
+	const [prevDeps, setPrevDeps] = useState(deps);
+	if (deps.length !== prevDeps.length || deps.some((d, i) => d !== prevDeps[i])) {
+		setPrevDeps(deps);
+		setGeneration((g) => g + 1);
+		if (!loading) setLoading(true);
+		if (error !== null) setError(null);
+	}
+
 	useEffect(() => {
 		let cancelled = false;
-		setLoading(true);
-		setError(null);
 
 		fetcherRef
 			.current()
@@ -49,8 +57,7 @@ export function useAsyncData<T>(
 		return () => {
 			cancelled = true;
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps --- deps are explicitly managed by the caller
-	}, deps);
+	}, [generation]);
 
 	return { data, loading, error };
 }

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/hooks/useAsyncData.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseAsyncDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList
+): UseAsyncDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [generation, setGeneration] = useState(0);
+
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+
+  // Detect dep changes during render to reset loading state and bump generation
+  const [prevDeps, setPrevDeps] = useState(deps);
+  if (
+    deps.length !== prevDeps.length ||
+    deps.some((d, i) => d !== prevDeps[i])
+  ) {
+    setPrevDeps(deps);
+    setGeneration(g => g + 1);
+    if (!loading) setLoading(true);
+    if (error !== null) setError(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetcherRef
+      .current()
+      .then(result => {
+        if (!cancelled) setData(result);
+      })
+      .catch(err => {
+        console.error(err);
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'An error occurred');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generation]);
+
+  return { data, loading, error };
+}

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/pages/AccountObjectDetailPage.tsx

@@ -22,7 +22,7 @@ import {
 } from "../components/ui/collapsible";
 import { Separator } from "../components/ui/separator";
 import { Skeleton } from "../components/ui/skeleton";
-import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "../hooks/useAsyncData";
 import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
 
 type AccountNode = NonNullable<
@@ -53,9 +53,7 @@ export default function AccountObjectDetail() {
 		data: account,
 		loading,
 		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
+	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
 	return (
 		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/pages/AccountSearch.tsx

@@ -6,7 +6,7 @@ import {
 	fetchDistinctIndustries,
 	fetchDistinctTypes,
 } from "../api/account/accountSearchService";
-import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "../hooks/useAsyncData";
 import { fieldValue } from "../features/object-search/utils/fieldUtils";
 import { useObjectSearchParams } from "../features/object-search/hooks/useObjectSearchParams";
 import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
@@ -40,8 +40,8 @@ import PaginationControls from "../features/object-search/components/PaginationC
 import type { PaginationConfig } from "../features/object-search/hooks/useObjectSearchParams";
 
 const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 6,
-	validPageSizes: [6, 12, 24, 48],
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
 };
 
 type AccountNode = NonNullable<
@@ -75,22 +75,15 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 
 export default function AccountSearch() {
 	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
-		key: "distinctIndustries",
-		ttl: 300_000,
-	});
-	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
-		key: "distinctTypes",
-		ttl: 300_000,
-	});
+	const { data: industryOptions } = useAsyncData(fetchDistinctIndustries, []);
+	const { data: typeOptions } = useAsyncData(fetchDistinctTypes, []);
 
 	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
 		Account_Filter,
 		Account_OrderBy
 	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
 
-	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
-	const { data, loading, error } = useCachedAsyncData(
+	const { data, loading, error } = useAsyncData(
 		() =>
 			searchAccounts({
 				where: query.where,
@@ -99,7 +92,6 @@ export default function AccountSearch() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
 	);
 
 	const pageInfo = data?.pageInfo;
@@ -189,7 +181,7 @@ export default function AccountSearch() {
 						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
 					</div>
 
-					<div className="min-h-112">
+					<div className="min-h-132">
 						{/* Loading state */}
 						{loading && (
 							<>

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/routes.tsx

@@ -7,7 +7,6 @@ import ForgotPassword from "./features/authentication/pages/ForgotPassword";
 import ResetPassword from "./features/authentication/pages/ResetPassword";
 import Profile from "./features/authentication/pages/Profile";
 import ChangePassword from "./features/authentication/pages/ChangePassword";
-import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
 import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
 import { ROUTES } from "./features/authentication/authenticationConfig";
 import AccountSearch from "./pages/AccountSearch";
@@ -29,32 +28,27 @@ export const routes: RouteObject[] = [
         element: <NotFound />
       },
       {
-        element: <AuthenticationRoute />,
-        children: [
-          {
-            path: ROUTES.LOGIN.PATH,
-            element: <Login />,
-            handle: { showInNavigation: false, label: "Login", title: ROUTES.LOGIN.TITLE }
-          },
-          {
-            path: ROUTES.REGISTER.PATH,
-            element: <Register />,
-            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
-          },
-          {
-            path: ROUTES.FORGOT_PASSWORD.PATH,
-            element: <ForgotPassword />,
-            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
-          },
-          {
-            path: ROUTES.RESET_PASSWORD.PATH,
-            element: <ResetPassword />,
-            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
-          }
-        ]
+        path: ROUTES.LOGIN.PATH,
+        element: <Login />,
+        handle: { showInNavigation: false, label: "Login", title: ROUTES.LOGIN.TITLE }
+      },
+      {
+        path: ROUTES.REGISTER.PATH,
+        element: <Register />,
+        handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
+      },
+      {
+        path: ROUTES.FORGOT_PASSWORD.PATH,
+        element: <ForgotPassword />,
+        handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
+      },
+      {
+        path: ROUTES.RESET_PASSWORD.PATH,
+        element: <ResetPassword />,
+        handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
       },
       {
-        element: <PrivateRoute showCardSkeleton />,
+        element: <PrivateRoute />,
         children: [
           {
             path: ROUTES.PROFILE.PATH,

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "3.0.0",
+      "version": "3.1.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

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

package/dist/scripts/org-setup.config.json

@@ -1,6 +1,5 @@
 {
   "permsetAssignments": {
-    "defaultAssignee": "currentUser",
     "assignments": {}
   }
 }