@salesforce/webapp-template-feature-react-global-search-experimental 1.73.0 → 1.74.0

package/README.md

@@ -2,6 +2,18 @@
 
 This feature provides API services and utilities for implementing global search functionality in Salesforce Web Applications. It includes:
 
+## Consuming as a dependency
+
+Apps (e.g. `appreactsampleb2e`) can depend on this package and import **API, hooks, types, and utilities** (no UI). The package exposes a built ESM bundle.
+
+1. Add the dependency: `"@salesforce/webapp-template-feature-react-global-search-experimental": "^1.71.3"`.
+2. **Before building or running the app**, build the library bundle from this package:
+   ```bash
+   cd packages/template/feature/feature-react-global-search && npm run build:lib
+   ```
+   This produces `dist/index.js`, which is the package entry point.
+3. Import what you need (e.g. `useObjectListMetadata`, `parseFilterValue`, `sanitizeFilterValue`, `FilterCriteria`, `objectInfoService`). Use your own UI for filters and list pages.
+
 - **API Service Layer** - Type-safe API client for Salesforce search endpoints
 - **Type Definitions** - Complete TypeScript types with Zod schema validation
 - **Utility Functions** - Helper functions for debouncing and data extraction

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.
 
+# [1.74.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.73.1...v1.74.0) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.73.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.73.0...v1.73.1) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.73.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.72.0...v1.73.0) (2026-03-05)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-global-search/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.73.0",
-    "@salesforce/webapp-experimental": "^1.73.0",
+    "@salesforce/sdk-data": "^1.74.0",
+    "@salesforce/webapp-experimental": "^1.74.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "class-variance-authority": "^0.7.1",
@@ -40,7 +40,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.73.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.74.0",
     "@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/webapplications/feature-react-global-search/src/features/global-search/api/recordListGraphQLService.ts

@@ -149,10 +149,9 @@ export function buildWhereFromCriteria(
 
 	for (const c of criteria) {
 		if (!c.fieldPath || !c.operator || !c.values?.length) continue;
-		const value = c.values[0];
 		const op = c.operator;
 		const parts = c.fieldPath.split(".");
-		const fieldClause = { [op]: value };
+		const fieldClause = op === "in" ? { in: c.values } : { [op]: c.values[0] };
 		if (parts.length === 1) {
 			conditions.push({ [parts[0]]: fieldClause });
 		} else {

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

@@ -12,6 +12,7 @@ export const FILTER_OPERATORS = [
 	"eq", // Equals
 	"ne", // Not equals
 	"like", // Pattern matching (contains)
+	"in", // In list (multiple values)
 	"gt", // Greater than
 	"gte", // Greater than or equal
 	"lt", // Less than

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

@@ -1,4 +1,5 @@
 export * from "./filters/filters";
+export * from "./filters/picklist";
 export * from "./objectInfo/objectInfo";
 export * from "./recordDetail/recordDetail";
 export * from "./search/searchResults";

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Package entry for @salesforce/webapp-template-feature-react-global-search-experimental.
+ * Exports only API, hooks, utils, types, and constants so that consuming apps do not
+ * pull in the feature's UI (routes, __inherit__ components) which depend on @radix-ui.
+ */
+export * from "./features/global-search/api";
+export * from "./features/global-search/hooks";
+export * from "./features/global-search/utils";
+export * from "./features/global-search/types";
+export * from "./constants";

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.73.0",
+  "version": "1.74.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@salesforce/webapp-template-feature-react-global-search-experimental",
-  "version": "1.73.0",
+  "version": "1.74.0",
   "description": "Global search feature for Salesforce objects with filtering and pagination",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
-  "type": "module",
-  "main": "index.js",
+  "main": "src/force-app/main/default/webapplications/feature-react-global-search/src/index.ts",
+  "types": "src/force-app/main/default/webapplications/feature-react-global-search/src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/force-app/main/default/webapplications/feature-react-global-search/src/index.ts",
+      "import": "./src/force-app/main/default/webapplications/feature-react-global-search/src/index.ts",
+      "default": "./src/force-app/main/default/webapplications/feature-react-global-search/src/index.ts"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "clean": "rm -rf dist"
   },

package/src/force-app/main/default/webapplications/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/webapplications/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/webapplications/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/webapplications/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/webapplications/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(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	return <> </>;
+}
+
+export { Button, buttonVariants };

package/src/force-app/main/default/webapplications/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/webapplications/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/webapplications/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/webapplications/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/webapplications/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/webapplications/feature-react-global-search/src/components/ui/__inherit__select.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => <></>);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => <></>);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => <></>);
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => <></>);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => <></>);
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => <></>);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => <></>);
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};

package/src/force-app/main/default/webapplications/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/webapplications/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/webapplications/feature-react-global-search/src/constants.ts

@@ -0,0 +1,39 @@
+/**
+ * Application-wide Constants
+ *
+ * Defines constants used throughout the global search feature.
+ */
+
+/**
+ * Object API names to search across in the global search feature.
+ * Currently supports single object search.
+ *
+ * @remarks
+ * - Array of Salesforce object API names
+ * - First element is used as the primary search object
+ * - Can be extended to support multiple objects in the future
+ *
+ * @example
+ * ```tsx
+ * const objectApiName = OBJECT_API_NAMES[0]; // 'Account'
+ * ```
+ */
+export const OBJECT_API_NAMES = ["Account"] as const;
+
+/** Fallback title when record display name cannot be resolved (e.g. before load or no name field). */
+export const DEFAULT_DETAIL_PAGE_TITLE = "Untitled";
+
+/**
+ * Default page size for search results pagination.
+ * This should match one of the values in PAGE_SIZE_OPTIONS from paginationUtils.
+ *
+ * @remarks
+ * - Default value is 20 (second option in PAGE_SIZE_OPTIONS)
+ * - Can be changed by user via pagination controls
+ *
+ * @example
+ * ```tsx
+ * const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+ * ```
+ */
+export const DEFAULT_PAGE_SIZE = 20;

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

@@ -0,0 +1,19 @@
+/**
+ * API layer: object metadata (GraphQL), layout + record detail (REST layout + GraphQL record), record list/single (GraphQL).
+ */
+export { objectInfoService } from "./objectInfoService";
+export { objectDetailService, extractFieldsFromLayout } from "./objectDetailService";
+export type { RecordDetailResult } from "./objectDetailService";
+export {
+	getRecordsGraphQL,
+	getRecordByIdGraphQL,
+	buildGetRecordsQuery,
+	buildWhereFromCriteria,
+	buildOrderByFromSort,
+} from "./recordListGraphQLService";
+export type {
+	RecordListGraphQLResult,
+	RecordListGraphQLVariables,
+	RecordListGraphQLOptions,
+	GraphQLRecordNode,
+} from "./recordListGraphQLService";