@salesforce/ui-bundle-template-feature-react-global-search 1.117.2

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@salesforce/ui-bundle-template-feature-react-global-search",
+  "version": "1.117.2",
+  "description": "Global search feature for Salesforce objects with filtering and pagination",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "",
+  "main": "src/force-app/main/default/uiBundles/feature-react-global-search/src/index.ts",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/force-app/main/default/uiBundles/feature-react-global-search/src/index.ts",
+      "default": "./src/force-app/main/default/uiBundles/feature-react-global-search/src/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router-dom": "^5.3.3",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.468.0",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "react-router-dom": "^7.10.1",
+    "zod": "^3.24.1"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "executor": "@salesforce/ui-bundle-template-cli:apply-patches"
+      },
+      "watch": {
+        "executor": "@salesforce/ui-bundle-template-cli:watch-patches"
+      },
+      "build:dist-app": {
+        "executor": "@salesforce/ui-bundle-template-cli:build-dist-app"
+      },
+      "dev": {
+        "executor": "@salesforce/ui-bundle-template-cli:dev-server"
+      }
+    }
+  }
+}

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/__inherit__appLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router";
+
+export default function AppLayout() {
+	return (
+		<>
+			<Outlet />
+		</>
+	);
+}

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/alerts/__inherit__status-alert.tsx

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const statusAlertVariants = cva("", {
+	variants: {
+		variant: {
+			error: "",
+			success: "",
+		},
+	},
+	defaultVariants: {
+		variant: "error",
+	},
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+	children?: React.ReactNode;
+	/** Alert variant type. @default "error" */
+	variant?: "error" | "success";
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({}: StatusAlertProps) {
+	return <></>;
+}

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/layouts/__inherit__card-layout.tsx

@@ -0,0 +1,9 @@
+interface CardLayoutProps {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+}
+
+export function CardLayout({}: CardLayoutProps) {
+	return <></>;
+}

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__alert.tsx

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	role,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return <> </>;
+}
+
+// Maintenance/A11y: Added 'asChild' pattern or a simple 'as' prop
+// to allow rendering semantic headings (h1-h6).
+interface AlertTitleProps extends React.ComponentProps<"div"> {
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p";
+}
+function AlertTitle({ className, as: Component = "div", ...props }: AlertTitleProps) {
+	return <></>;
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__button.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+	"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 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline:
+					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-8",
+				"icon-xs":
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm":
+					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+	return <> </>;
+}
+
+export { Button, buttonVariants };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__card.tsx

@@ -0,0 +1,33 @@
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return <> </>;
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <> </>;
+}
+
+function CardTitle({
+	className,
+	as: Component = "h3",
+	...props
+}: React.ComponentProps<"div"> & { as?: any }) {
+	return <> </>;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__field.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import { Label } from "./__inherit__label";
+
+function Field({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<"div"> & {
+	orientation?: "horizontal" | "vertical";
+}) {
+	return <> </>;
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+	return <> </>;
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return <> </>;
+}
+
+function FieldError({
+	className,
+	errors,
+	...props
+}: React.ComponentProps<"p"> & { errors?: (Error | undefined | null)[] }) {
+	const errorMessages = errors?.filter(Boolean).map((e) => e?.message);
+
+	if (!errorMessages?.length) {
+		return null;
+	}
+
+	return <></>;
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return <> </>;
+}
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return <> </>;
+}
+
+function FieldLegend({ className, ...props }: React.ComponentProps<"legend">) {
+	return <> </>;
+}
+
+function FieldSeparator({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+export {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+};

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__input.tsx

@@ -0,0 +1,5 @@
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return <> </>;
+}
+
+export { Input };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__label.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return <> </>;
+}
+
+export { Label };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__pagination.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Button } from "./__inherit__button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => <></>;
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+	({ className, ...props }, ref) => <></>,
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+	({ className, ...props }, ref) => <></>,
+);
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & React.ComponentProps<"button">;
+
+const PaginationLink = ({ className, isActive, disabled, ...props }: PaginationLinkProps) => <></>;
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	disabled,
+	...props
+}: React.ComponentProps<typeof Button>) => <></>;
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, disabled, ...props }: React.ComponentProps<typeof Button>) => (
+	<></>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => <></>;
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__select.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+function Select({}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <></>;
+}
+
+function SelectGroup({}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <></>;
+}
+
+function SelectValue({}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <></>;
+}
+
+function SelectTrigger({}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return <></>;
+}
+
+function SelectContent({}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return <></>;
+}
+
+function SelectLabel({}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return <></>;
+}
+
+function SelectItem({}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return <></>;
+}
+
+function SelectSeparator({}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return <></>;
+}
+
+function SelectScrollUpButton({}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return <></>;
+}
+
+function SelectScrollDownButton({}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return <></>;
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__skeleton.tsx

@@ -0,0 +1,5 @@
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return <></>;
+}
+
+export { Skeleton };

package/src/force-app/main/default/uiBundles/feature-react-global-search/src/components/ui/__inherit__spinner.tsx

@@ -0,0 +1,7 @@
+import { LoaderIcon } from "lucide-react";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+	return <> </>;
+}
+
+export { Spinner };

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

@@ -0,0 +1,102 @@
+/**
+ * Record detail service: layout (REST), object metadata (GraphQL), single record (GraphQL).
+ *
+ * getRecordDetail orchestrates layout + objectInfoBatch + getRecordByIdGraphQL for the detail page.
+ * Layout is still REST (uiApiClient); record and object info are GraphQL-backed.
+ *
+ * @module api/objectDetailService
+ */
+
+import { uiApiClient } from "@salesforce/ui-bundle/api";
+import type { LayoutResponse } from "../types/recordDetail/recordDetail";
+import { LayoutResponseSchema } from "../types/recordDetail/recordDetail";
+import { fetchAndValidate, safeEncodePath } from "../utils/apiUtils";
+import { objectInfoService } from "./objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+import { getRecordByIdGraphQL, type GraphQLRecordNode } from "./recordListGraphQLService";
+import type { Column } from "../types/search/searchResults";
+import { calculateFieldsToFetch } from "../utils/recordUtils";
+
+/** Fallback when record type is unknown. Prefer recordTypeId from the record (e.g. from search or record response) when available. */
+const DEFAULT_RECORD_TYPE_ID = "012000000000000AAA";
+
+/**
+ * Returns field API names to request for a record from the given layout and object metadata.
+ * Used to derive GraphQL columns from layout (detail view). Delegates to recordUtils.calculateFieldsToFetch.
+ *
+ * @param objectMetadata - Object info (fields, relationshipName, etc.).
+ * @param layout - Layout response (sections, layoutItems, layoutComponents).
+ * @returns Array of field API names (e.g. ["Name", "OwnerId", "Owner", "CreatedDate"]).
+ */
+export function extractFieldsFromLayout(
+	objectMetadata: ObjectInfoResult,
+	layout: LayoutResponse,
+): string[] {
+	const [optionalFields] = calculateFieldsToFetch(objectMetadata, layout, false);
+	return optionalFields;
+}
+
+export async function getLayout(
+	objectApiName: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+): Promise<LayoutResponse> {
+	const params = new URLSearchParams({
+		layoutType: "Full",
+		mode: "View",
+		recordTypeId,
+	});
+	return fetchAndValidate(
+		() => uiApiClient.get(`/layout/${safeEncodePath(objectApiName)}?${params.toString()}`),
+		{
+			schema: LayoutResponseSchema,
+			errorContext: `layout for ${objectApiName}`,
+		},
+	);
+}
+
+export interface RecordDetailResult {
+	layout: LayoutResponse;
+	record: GraphQLRecordNode;
+	objectMetadata: ObjectInfoResult;
+}
+
+/**
+ * Converts layout-derived optionalFields (field API names) to Column[] for GraphQL node selection.
+ * Uses unqualified names (no entity prefix) so the GraphQL query matches UI API shape.
+ * Other Column fields (label, searchable, sortable) are only required by the type; GraphQL selection uses fieldApiName only.
+ */
+function optionalFieldsToColumns(optionalFields: string[]): Column[] {
+	return optionalFields.map((fieldApiName) => ({
+		fieldApiName,
+		label: "",
+		searchable: false,
+		sortable: false,
+	}));
+}
+
+export async function getRecordDetail(
+	objectApiName: string,
+	recordId: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+): Promise<RecordDetailResult> {
+	const layout = await getLayout(objectApiName, recordTypeId);
+	const objectMetadata = await objectInfoService.getObjectInfoBatch(objectApiName);
+	const firstResult = objectMetadata?.results?.[0]?.result;
+	if (!firstResult) {
+		throw new Error(`Object metadata not found for ${objectApiName}`);
+	}
+	// Layout-driven optionalFields (fields shown on the detail layout), not list columns
+	const [optionalFields] = calculateFieldsToFetch(firstResult, layout, false);
+	const columns = optionalFieldsToColumns(optionalFields);
+	const record = await getRecordByIdGraphQL(objectApiName, recordId, columns);
+	if (!record) {
+		throw new Error(`Record not found: ${recordId}`);
+	}
+	return { layout, record, objectMetadata: firstResult };
+}
+
+export const objectDetailService = {
+	extractFieldsFromLayout,
+	getLayout,
+	getRecordDetail,
+};

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

@@ -0,0 +1,137 @@
+/**
+ * Object metadata GraphQL service (uiapi.objectInfos).
+ *
+ * Single endpoint for object describe and picklist values. Used by objectInfoService
+ * to implement getObjectInfoBatch and getPicklistValues. Not used directly by UI.
+ *
+ * @module api/objectInfoGraphQLService
+ */
+
+import { createDataSDK, gql } from "@salesforce/sdk-data";
+import type {
+	GetObjectInfosQuery,
+	GetObjectInfosQueryVariables,
+	GetPicklistValuesQuery,
+	GetPicklistValuesQueryVariables,
+	ObjectInfoInput,
+} from "../types/schema";
+
+/**
+ * Builds objectInfos query (metadata only). Uses apiNames only — do not pass objectInfoInputs.
+ */
+const OBJECT_INFOS_QUERY = gql`
+	query GetObjectInfos($apiNames: [String!]!) {
+		uiapi {
+			objectInfos(apiNames: $apiNames) {
+				ApiName
+				label
+				labelPlural
+				nameFields
+				defaultRecordTypeId
+				keyPrefix
+				layoutable
+				queryable
+				searchable
+				updateable
+				deletable
+				createable
+				custom
+				mruEnabled
+				feedEnabled
+				fields {
+					ApiName
+					label
+					dataType
+					relationshipName
+					reference
+					compound
+					compoundFieldName
+					compoundComponentName
+					controllingFields
+					controllerName
+					referenceToInfos {
+						ApiName
+						nameFields
+					}
+				}
+				recordTypeInfos {
+					recordTypeId
+					name
+					master
+					available
+					defaultRecordTypeMapping
+				}
+				themeInfo {
+					color
+					iconUrl
+				}
+				childRelationships {
+					relationshipName
+					fieldName
+					childObjectApiName
+				}
+				dependentFields {
+					controllingField
+				}
+			}
+		}
+	}
+`;
+
+/**
+ * Builds objectInfos query with picklist values (API v65.0+).
+ * Schema requires objectInfos to be called with either apiNames or objectInfoInputs, not both.
+ * This query uses objectInfoInputs only.
+ * Optimized to only fetch fields used by extractPicklistValuesFromGraphQLObjectInfo.
+ */
+const PICKLIST_VALUES_QUERY = gql`
+	query GetPicklistValues($objectInfoInputs: [ObjectInfoInput!]!) {
+		uiapi {
+			objectInfos(objectInfoInputs: $objectInfoInputs) {
+				ApiName
+				fields {
+					ApiName
+					... on PicklistField {
+						picklistValuesByRecordTypeIDs {
+							recordTypeID
+							defaultValue {
+								value
+							}
+							picklistValues {
+								label
+								value
+								validFor
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export async function queryForObjectInfos(apiNames: string[]): Promise<GetObjectInfosQuery> {
+	return runQuery<GetObjectInfosQuery, GetObjectInfosQueryVariables>(OBJECT_INFOS_QUERY, {
+		apiNames,
+	});
+}
+
+export async function queryForPicklistValues(
+	objectInfoInputs: ObjectInfoInput[],
+): Promise<GetPicklistValuesQuery> {
+	return runQuery<GetPicklistValuesQuery, GetPicklistValuesQueryVariables>(PICKLIST_VALUES_QUERY, {
+		objectInfoInputs,
+	});
+}
+
+async function runQuery<Q, V>(query: string, variables: V): Promise<Q> {
+	const data = await createDataSDK();
+	const response = await data.graphql?.<Q, V>(query, variables);
+
+	if (response?.errors?.length) {
+		const errorMessages = response.errors.map((e) => e.message).join("; ");
+		throw new Error(`GraphQL Error: ${errorMessages}`);
+	}
+
+	return response?.data ?? ({} as Q);
+}