@salesforce/webapp-template-feature-react-global-search-experimental 1.107.2 → 1.107.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.107.2",
+  "version": "1.107.4",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
@@ -10,7 +10,7 @@
     "sf-project-setup": "node scripts/sf-project-setup.mjs",
     "build": "echo 'No build required for base-sfdx-project'",
     "clean": "echo 'No clean required for base-sfdx-project'",
-    "lint": "eslint **/{aura,lwc}/**/*.js",
+    "lint": "eslint --no-error-on-unmatched-pattern **/{aura,lwc}/**/*.js",
     "test": "npm run test:unit",
     "test:coverage": "npm run test",
     "test:unit": "sfdx-lwc-jest -- --passWithNoTests",
@@ -23,13 +23,13 @@
     "setup": "node scripts/setup-cli.mjs"
   },
   "devDependencies": {
-    "@lwc/eslint-plugin-lwc": "^2.0.0",
+    "@lwc/eslint-plugin-lwc": "^3.3.0",
     "@prettier/plugin-xml": "^3.2.2",
-    "@salesforce/eslint-config-lwc": "^3.2.3",
-    "@salesforce/eslint-plugin-aura": "^2.0.0",
-    "@salesforce/eslint-plugin-lightning": "^1.0.0",
+    "@salesforce/eslint-config-lwc": "^4.1.0",
+    "@salesforce/eslint-plugin-aura": "^3.0.0",
+    "@salesforce/eslint-plugin-lightning": "^2.0.0",
     "@salesforce/sfdx-lwc-jest": "^7.0.1",
-    "eslint": "8.57.1",
+    "eslint": "^9.39.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest": "^28.8.1",
     "husky": "^9.1.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-global-search-experimental",
-  "version": "1.107.2",
+  "version": "1.107.4",
   "description": "Global search feature for Salesforce objects with filtering and pagination",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/api/recordListGraphQLService.ts

@@ -104,10 +104,10 @@ function serializeSelectionTree(tree: SelectionTree, indent: string): string {
 			if (key === "Id") {
 				lines.push(`${indent}Id`);
 			} else {
-				lines.push(`${indent}${key} { value }`);
+				lines.push(`${indent}${key} @optional { value }`);
 			}
 		} else {
-			lines.push(`${indent}${key} {`);
+			lines.push(`${indent}${key} @optional {`);
 			lines.push(serializeSelectionTree(val, childIndent));
 			lines.push(`${indent}}`);
 		}

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/components/detail/DetailForm.tsx

@@ -36,6 +36,8 @@ function FieldCell({
 	record: GraphQLRecordNode;
 	metadata?: ObjectInfoMetadata | null;
 }) {
+	const labelId = useId();
+	const valueId = useId();
 	if (!item.isField || item.apiName == null) return null;
 	const label = item.label ?? item.apiName;
 	const hasComponents = item.layoutComponentApiNames && item.layoutComponentApiNames.length > 0;
@@ -51,8 +53,6 @@ function FieldCell({
 		: getDisplayValueForDetailFieldFromNode(record, item.apiName, metadata);
 	const dataType =
 		(hasComponents ? layoutResult?.dataType : undefined) ?? item.dataType ?? undefined;
-	const labelId = useId();
-	const valueId = useId();
 	return (
 		<div
 			className="flex flex-col gap-1"

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/components/filters/FiltersPanel.tsx

@@ -207,7 +207,7 @@ export default function FiltersPanel({
 		}
 
 		previousLoadingRef.current = loading;
-	}, [loading, defaultValues]);
+	}, [loading, defaultValues, form]);
 
 	const handleSuccessDismiss = useCallback(() => {
 		setSubmitSuccess(null);

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/components/search/SearchResultCard.tsx

@@ -23,6 +23,7 @@
  * />
  * ```
  */
+import React from "react";
 import { useNavigate } from "react-router";
 import { useMemo, useCallback } from "react";
 import {
@@ -49,26 +50,24 @@ export default function SearchResultCard({
 }: SearchResultCardProps) {
 	const navigate = useNavigate();
 
-	if (!record || !record.id) {
-		return null;
-	}
-
-	if (!columns || !Array.isArray(columns) || columns.length === 0) {
-		return null;
-	}
-
-	if (!record.fields || typeof record.fields !== "object") {
-		return null;
-	}
+	const validColumns = useMemo(
+		() => (columns && Array.isArray(columns) && columns.length > 0 ? columns : []),
+		[columns],
+	);
+	const validRecord =
+		record?.id && record?.fields && typeof record.fields === "object" ? record : null;
 
 	const detailPath = useMemo(
-		() => `/object/${objectApiName?.trim() || OBJECT_API_NAMES[0]}/${record.id}`,
-		[record.id, objectApiName],
+		() =>
+			validRecord
+				? `/object/${objectApiName?.trim() || OBJECT_API_NAMES[0]}/${validRecord.id}`
+				: "",
+		[validRecord, objectApiName],
 	);
 
 	const handleClick = useCallback(() => {
-		if (record.id) navigate(detailPath);
-	}, [record.id, detailPath, navigate]);
+		if (validRecord?.id) navigate(detailPath);
+	}, [validRecord?.id, detailPath, navigate]);
 
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent) => {
@@ -82,29 +81,32 @@ export default function SearchResultCard({
 
 	const primaryField = useMemo(() => {
 		return (
-			columns.find(
+			validColumns.find(
 				(col) =>
 					col &&
 					col.fieldApiName &&
 					(col.fieldApiName.toLowerCase() === "name" ||
 						col.fieldApiName.toLowerCase().includes("name")),
 			) ||
-			columns[0] ||
+			validColumns[0] ||
 			null
 		);
-	}, [columns]);
+	}, [validColumns]);
 
 	const primaryValue = useMemo(() => {
-		return primaryField && primaryField.fieldApiName
-			? getNestedFieldValue(record.fields, primaryField.fieldApiName) || "Untitled"
+		return primaryField && primaryField.fieldApiName && validRecord?.fields
+			? getNestedFieldValue(validRecord.fields, primaryField.fieldApiName) || "Untitled"
 			: "Untitled";
-	}, [primaryField, record.fields]);
+	}, [primaryField, validRecord]);
 
 	const secondaryColumns = useMemo(() => {
-		return columns.filter(
+		return validColumns.filter(
 			(col) => col && col.fieldApiName && col.fieldApiName !== primaryField?.fieldApiName,
 		);
-	}, [columns, primaryField]);
+	}, [validColumns, primaryField]);
+
+	if (!validRecord) return null;
+	if (validColumns.length === 0) return null;
 
 	return (
 		<Card
@@ -114,19 +116,19 @@ export default function SearchResultCard({
 			role="button"
 			tabIndex={0}
 			aria-label={`View details for ${primaryValue}`}
-			aria-describedby={`result-${record.id}-description`}
+			aria-describedby={`result-${validRecord.id}-description`}
 		>
 			<CardHeader>
-				<CardTitle className="text-lg" id={`result-${record.id}-title`}>
+				<CardTitle className="text-lg" id={`result-${validRecord.id}-title`}>
 					{primaryValue}
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<div id={`result-${record.id}-description`} className="sr-only">
+				<div id={`result-${validRecord.id}-description`} className="sr-only">
 					Search result: {primaryValue}
 				</div>
 				<ResultCardFields
-					record={record}
+					record={validRecord}
 					columns={secondaryColumns}
 					excludeFieldApiName={primaryField?.fieldApiName}
 				/>

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/form.tsx

@@ -1,4 +1,4 @@
-import { useId } from "react";
+import React, { useId } from "react";
 import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
 import {
 	Field,

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/useObjectInfoBatch.ts

@@ -35,10 +35,10 @@ export function useObjectInfoBatch(objectApiNames: string[]): UseObjectInfoBatch
 		isCancelled.current = false;
 		const names = objectApiNames.filter(Boolean);
 		if (names.length === 0) {
-			setState({ objectInfos: [], loading: false, error: null });
+			queueMicrotask(() => setState({ objectInfos: [], loading: false, error: null }));
 			return;
 		}
-		setState((s) => ({ ...s, loading: true, error: null }));
+		queueMicrotask(() => setState((s) => ({ ...s, loading: true, error: null })));
 		objectInfoService
 			.getObjectInfoBatch(names.join(","))
 			.then((res) => {
@@ -59,7 +59,7 @@ export function useObjectInfoBatch(objectApiNames: string[]): UseObjectInfoBatch
 		return () => {
 			isCancelled.current = true;
 		};
-	}, [objectApiNames.join(",")]);
+	}, [objectApiNames]);
 
 	return state;
 }

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/useObjectSearchData.ts

@@ -85,14 +85,14 @@ export function useObjectListMetadata(objectApiName: string | null): ObjectListM
 
 	useEffect(() => {
 		if (!objectApiName) {
-			setState((s) => ({ ...s, loading: false, error: "Invalid object" }));
+			queueMicrotask(() => setState((s) => ({ ...s, loading: false, error: "Invalid object" })));
 			return;
 		}
 
 		let isCancelled = false;
 
 		const run = async () => {
-			setState((s) => ({ ...s, loading: true, error: null }));
+			queueMicrotask(() => setState((s) => ({ ...s, loading: true, error: null })));
 			try {
 				const filters = await getSharedFilters(objectApiName!);
 				if (isCancelled) return;
@@ -119,7 +119,7 @@ export function useObjectListMetadata(objectApiName: string | null): ObjectListM
 					loading: false,
 					error: null,
 				});
-			} catch (err) {
+			} catch {
 				if (isCancelled) return;
 				setState((s) => ({
 					...s,

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/useRecordDetailLayout.ts

@@ -110,7 +110,7 @@ export function useRecordDetailLayout({
 				setLayout(layoutData);
 				setRecord(recordData);
 				setObjectMetadata(objectMetadataData);
-			} catch (err) {
+			} catch {
 				if (isCancelled) return;
 				setError("Failed to load record details");
 			} finally {

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/hooks/useRecordListGraphQL.ts

@@ -115,7 +115,7 @@ export function useRecordListGraphQL(
 	useEffect(() => {
 		if (!objectApiName || columnsLoading || columnsError) return;
 		if (columns.length === 0 && !columnsLoading) return;
-		fetchRecords();
+		queueMicrotask(() => fetchRecords());
 	}, [objectApiName, columns, columnsLoading, columnsError, fetchRecords]);
 
 	const objectData = data?.uiapi?.query?.[objectApiName];

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/pages/GlobalSearch.tsx

@@ -46,7 +46,7 @@ export default function GlobalSearch() {
 		if (!query) return "";
 		try {
 			return decodeURIComponent(query);
-		} catch (e) {
+		} catch {
 			return query;
 		}
 	}, [query]);
@@ -56,9 +56,11 @@ export default function GlobalSearch() {
 
 	// Reset pagination when the URL search query changes so we don't use an old cursor with a new result set
 	useEffect(() => {
-		setAfterCursor(null);
-		setPageIndex(0);
-		setCursorStack([null]);
+		queueMicrotask(() => {
+			setAfterCursor(null);
+			setPageIndex(0);
+			setCursorStack([null]);
+		});
 	}, [query]);
 
 	const listMeta = useObjectListMetadata(objectApiName);
@@ -87,10 +89,12 @@ export default function GlobalSearch() {
 		if (resultsLoading) return;
 		const cursor = pageInfo?.endCursor ?? null;
 		if (cursor == null) return;
-		setCursorStack((prev) => {
-			const next = [...prev];
-			next[pageIndex + 1] = cursor;
-			return next;
+		queueMicrotask(() => {
+			setCursorStack((prev) => {
+				const next = [...prev];
+				next[pageIndex + 1] = cursor;
+				return next;
+			});
 		});
 	}, [resultsLoading, pageInfo?.endCursor, pageIndex]);
 
@@ -116,8 +120,10 @@ export default function GlobalSearch() {
 
 	const cursorStackRef = useRef(cursorStack);
 	const pageIndexRef = useRef(pageIndex);
-	cursorStackRef.current = cursorStack;
-	pageIndexRef.current = pageIndex;
+	useEffect(() => {
+		cursorStackRef.current = cursorStack;
+		pageIndexRef.current = pageIndex;
+	}, [cursorStack, pageIndex]);
 
 	const canRenderFilters =
 		!listMeta.loading && listMeta.filters !== undefined && listMeta.picklistValues !== undefined;

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/types/filters/filters.ts

@@ -108,8 +108,8 @@ export type FilterCriteria = z.infer<typeof FilterCriteriaSchema>;
 // Export schema for validation
 export const FilterCriteriaArraySchema = z.array(FilterCriteriaSchema);
 
-// Zod Schema for Filters Response
-const FiltersResponseSchema = z.record(z.string(), z.unknown()).and(
+// Zod Schema for Filters Response (used for type inference via z.infer)
+export const FiltersResponseSchema = z.record(z.string(), z.unknown()).and(
 	z.object({
 		filters: FilterArraySchema.optional(),
 	}),

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/utils/debounce.ts

@@ -57,6 +57,7 @@ export function debounce<T extends (...args: any[]) => any>(
 	let lastArgs: Parameters<T> | null = null;
 	function debounced(this: ThisParameterType<T>, ...args: Parameters<T>) {
 		// 2. Context Safety: Capture 'this' to support class methods
+		// eslint-disable-next-line @typescript-eslint/no-this-alias -- required for debouncing class methods
 		lastContext = this;
 		lastArgs = args;
 		if (timeoutId) {

package/src/force-app/main/default/webapplications/feature-react-global-search/src/features/global-search/utils/sanitizationUtils.ts

@@ -43,6 +43,7 @@ export function sanitizeFilterValue(value: string, maxLength: number = 1000): st
 		sanitized = sanitized.substring(0, maxLength);
 	}
 
+	// eslint-disable-next-line no-control-regex -- intentionally matching control chars for sanitization
 	sanitized = sanitized.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
 
 	return sanitized;

package/dist/.a4drules/skills/generating-micro-frontend-lwc/SKILL.md

@@ -1,137 +0,0 @@
----
-name: generating-micro-frontend-lwc
-description: Generate a Micro Frontend LWC component for a Web Application.
-license: Proprietary. LICENSE.txt has complete terms
-metadata:
-  author: salesforce-experience-platform-emu/lwc-admins
----
-
-# Micro Frontend generation (workflow)
-
-When the user wants a Micro Frontend for a Web Application, follow this workflow.
-
-## 1. Install the dependency
-
-Micro Frontends are generated using the `generate-micro-frontend` CLI command from the `@salesforce/micro-frontends-experimental` package.
-
-```bash
-npm install @salesforce/micro-frontends-experimental
-```
-
-The dependency should be added to the project's `package.json` dependencies.
-
-## 2. Identify the Web Application
-
-- Verify the Web Application exists in `force-app/main/default/webapplications/<web-app-name>/`.
-- Confirm the Web Application has a `lightningOut` target in its `webapplication-meta.xml` file.
-- If no Web Application exists, the user must create one first using the Web Apps template system.
-
-## 3. Generate the Micro Frontend component
-
-Run the `generate-micro-frontend` command with the Web Application name from the root of an SFDX project:
-
-```bash
-npx generate-micro-frontend <web-app-name>
-```
-
-This creates:
-
-- A custom wrapper LWC component in `force-app/main/default/lwc/<webAppName>/`. This is the "Micro Frontend component".
-- The static `microFrontendShell` component that handles iframe communication.
-
-Notes:
-
-- The command may be added to the project's `package.json` scripts for convenience.
-- The Micro Frontend component uses the Web Application name (e.g. `my-web-app/`) in camelCase for its folder and file names (e.g. `myWebApp/myWebApp.js`, `myWebApp/myWebApp.html`).
-
-## 4. Customize the Micro Frontend component metadata
-
-Edit the `<webAppName>.js-meta.xml` file to:
-
-- Set appropriate `targets` (e.g. `lightning__HomePage`, `lightning__AppPage`, `lightning__RecordPage`, `lightningCommunity__Page`)
-- Add `targetConfigs` for page-specific properties
-- Optionally update the `masterLabel` and `description`
-
-Example:
-
-```xml
-<targetConfigs>
-    <targetConfig targets="lightning__HomePage">
-        <property name="height" type="Integer" min="0" max="600" default="300" />
-    </targetConfig>
-</targetConfigs>
-```
-
-## 5. Pass properties to the Micro Frontend component
-
-Edit the `<webAppName>.js` file to customize the `properties` getter:
-
-```javascript
-@api height;
-
-@api get properties() {
-    return {
-        height: this.height,
-        // Add any other data your Web Application needs
-    };
-}
-```
-
-All properties are passed to the embedded Web Application via `postMessage` and can be accessed in the app's code.
-
-## 6. Deploy and test
-
-Deploy the Micro Frontend component using standard SF CLI commands:
-
-```bash
-sf project deploy start --source-dir force-app/main/default
-```
-
-Add the component to a page using Lightning App Builder or Experience Builder and verify it loads correctly.
-
-# Micro Frontend component customization examples
-
-## Record page example
-
-Command to generate a Micro Frontend component for the `my-site` Web Application:
-
-```bash
-npx generate-micro-frontend my-site
-```
-
-`mySite.js-meta.xml` file with a `lightning__RecordPage` target:
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>66.0</apiVersion>
-    <isExposed>true</isExposed>
-    <masterLabel>Micro Frontend for "My Site"</masterLabel>
-    <targets>
-        <target>lightning__RecordPage</target>
-    </targets>
-        <targetConfigs>
-        <targetConfig targets="lightning__RecordPage">
-            <property name="mode" type="String" default="dark" />
-        </targetConfig>
-    </targetConfigs>
-</LightningComponentBundle>
-```
-
-`mySite.js` file with public properties and `properties` getter:
-
-```js
-// Micro Frontend component
-export default class mySite extends LightningElement {
-  @api recordId;
-  @api mode;
-
-  @api get properties() {
-    // This data is passed to the Micro Frontend
-    return {
-      recordId: this.recordId, // automatically populated for lightning__RecordPage target
-      mode: this.mode, // matches the mode targetConfig
-    };
-  }
-}
-```

package/dist/.a4drules/skills/integrating-agentforce-conversation-client/SKILL.md

@@ -1,92 +0,0 @@
----
-name: integrating-agentforce-conversation-client
-description: Embed an Agentforce conversation client (chat UI) into a React web application using the AgentforceConversationClient component. Use when the user wants to add or integrate a chat widget, chatbot, conversation client, agent chat, or conversational interface in a React app, or when they mention Agentforce chat, Agentforce widget, employee agent, travel agent, HR agent, or embedding a Salesforce agent. ALWAYS use this skill instead of building a chat UI from scratch. NEVER generate custom chat components, use third-party chat libraries, or implement chat with WebSockets or REST APIs. Do NOT use for Lightning Web Components (LWC), non-React frameworks.
----
-
-# Embedded Agentforce chat (flat-prop API)
-
-Use this workflow whenever the user wants add or update Agentforce chat in React.
-
-## 1) Get agent id first
-
-Ask for the Salesforce agent id (18-char id starting with `0Xx`). Do not proceed without it.
-
-Placeholder convention for all examples in this file:
-
-`<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />`
-
-## 2) Install package
-
-```bash
-npm install @salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental
-```
-
-## 3) Use component in app layout
-
-Render a single instance in the shared layout (alongside `<Outlet />`).
-
-```tsx
-import { Outlet } from "react-router";
-import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
-
-export default function AppLayout() {
-  return (
-    <>
-      <Outlet />
-      <AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
-    </>
-  );
-}
-```
-
-## 4) Flat props only
-
-This package uses a flat prop API. Use these props directly on the component:
-
-- `agentId` (required in practice)
-- `inline` (`true` = inline, omitted/false = floating)
-- `headerEnabled` (defaults to true for floating; actual use case for inline mode)
-- `width`, `height` (actual work is when inline mode is true)
-- `styleTokens`
-- `salesforceOrigin`, `frontdoorUrl`
-
-## 5) Inline mode example
-
-```tsx
-<AgentforceConversationClient
-  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
-  inline
-  width={420}
-  height={600}
-/>
-```
-
-## 6) Theming example
-
-```tsx
-<AgentforceConversationClient
-  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
-  styleTokens={{
-    headerBlockBackground: "#0176d3",
-    headerBlockTextColor: "#ffffff",
-  }}
-/>
-```
-
-## 7) Do not do this
-
-- Do not create custom chat UIs.
-- Do not use third-party chat libraries.
-- Do not call `embedAgentforceClient` directly from @salesforce/agentforce-conversation-client.
-
-## 8) Prerequisites
-
-Ensure org setup is valid:
-
-1. Agent is active and deployed to the correct channel.
-2. `localhost:<PORT>` is trusted for inline frames in local dev.
-3. First-party Salesforce cookie restriction is disabled when required for embedding.
-
-## Troubleshooting
-
-If the chat widget does not appear, fails to authenticate, or behaves unexpectedly, see [troubleshooting.md](docs/troubleshooting.md).