@salesforce/ui-bundle-template-app-react-template-b2e 3.0.0 → 3.1.1

package/dist/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v3.1.0...v3.1.1) (2026-05-12)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [3.1.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v3.0.0...v3.1.0) (2026-05-12)
+
+
+### Features
+
+* post tdx changes @W-22390798 ([#500](https://github.com/salesforce-experience-platform-emu/webapps/issues/500)) ([b611d9e](https://github.com/salesforce-experience-platform-emu/webapps/commit/b611d9ecbadd07d052bd7d9a4f5659dec422bf22))
+
+
+
 ## [3.0.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v2.2.1...v3.0.0) (2026-05-11)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/alerts/status-alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { useId } from 'react';
 
@@ -8,6 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
+      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
     },
   },
   defaultVariants: {
@@ -18,11 +19,11 @@ const statusAlertVariants = cva('', {
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
   children?: React.ReactNode;
   /** Alert variant type. @default "error" */
-  variant?: 'error' | 'success';
+  variant?: 'error' | 'success' | 'info';
 }
 
 /**
- * Status alert component for displaying error or success messages.
+ * Status alert component for displaying error, success, or info messages.
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
@@ -31,6 +32,12 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
 
   const isError = variant === 'error';
 
+  const icon = {
+    error: <AlertCircleIcon aria-hidden="true" />,
+    success: <CheckCircle2Icon aria-hidden="true" />,
+    info: <InfoIcon aria-hidden="true" />,
+  }[variant];
+
   return (
     <Alert
       variant={isError ? 'destructive' : 'default'}
@@ -38,11 +45,7 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
       aria-describedby={descriptionId}
       role={isError ? 'alert' : 'status'}
     >
-      {isError ? (
-        <AlertCircleIcon aria-hidden="true" />
-      ) : (
-        <CheckCircle2Icon aria-hidden="true" />
-      )}
+      {icon}
       <AlertDescription id={descriptionId}>{children}</AlertDescription>
     </Alert>
   );

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/dist/force-app/main/default/uiBundles/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/reactinternalapp/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/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "3.0.0",
+      "version": "3.1.1",
       "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.1",
   "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": {}
   }
 }