@salesforce/templates 66.13.5 → 66.13.6

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -1,52 +0,0 @@
-import { useState } from "react";
-
-import { SearchBar } from "../SearchBar";
-import { useFilterField } from "../FilterContext";
-import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
-
-interface SearchFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	field: string;
-	label: string;
-	placeholder?: string;
-}
-
-export function SearchFilter({
-	field,
-	label,
-	placeholder,
-	className,
-	...props
-}: SearchFilterProps) {
-	const { value, onChange } = useFilterField(field);
-	const [localValue, setLocalValue] = useState(value?.value ?? "");
-
-	const externalValue = value?.value ?? "";
-	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
-	if (prevExternalValue !== externalValue) {
-		setPrevExternalValue(externalValue);
-		setLocalValue(externalValue);
-	}
-
-	const debouncedOnChange = useDebouncedCallback((v: string) => {
-		if (v) {
-			onChange({ field, label, type: "search", value: v });
-		} else {
-			onChange(undefined);
-		}
-	});
-
-	return (
-		<FilterFieldWrapper label={label} htmlFor={`filter-${field}`} className={className} {...props}>
-			<SearchBar
-				value={localValue}
-				handleChange={(v) => {
-					setLocalValue(v);
-					debouncedOnChange(v);
-				}}
-				placeholder={placeholder}
-				inputProps={{ id: `filter-${field}` }}
-			/>
-		</FilterFieldWrapper>
-	);
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SelectFilter.tsx

@@ -1,97 +0,0 @@
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../../../../components/ui/select";
-import { cn } from "../../../../lib/utils";
-import { useFilterField } from "../FilterContext";
-import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import type { ActiveFilterValue } from "../../utils/filterUtils";
-
-const ALL_VALUE = "__all__";
-
-interface SelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	field: string;
-	label: string;
-	options: Array<{ value: string; label: string }>;
-	helpText?: string;
-}
-
-export function SelectFilter({
-	field,
-	label,
-	options,
-	helpText,
-	className,
-	...props
-}: SelectFilterProps) {
-	const { value, onChange } = useFilterField(field);
-	return (
-		<FilterFieldWrapper
-			label={label}
-			htmlFor={`filter-${field}`}
-			helpText={helpText}
-			className={className}
-			{...props}
-		>
-			<SelectFilterControl
-				field={field}
-				label={label}
-				options={options}
-				value={value}
-				onChange={onChange}
-			/>
-		</FilterFieldWrapper>
-	);
-}
-
-interface SelectFilterControlProps {
-	field: string;
-	label: string;
-	options: Array<{ value: string; label: string }>;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
-	contentProps?: React.ComponentProps<typeof SelectContent>;
-}
-
-export function SelectFilterControl({
-	field,
-	label,
-	options,
-	value,
-	onChange,
-	triggerProps,
-	contentProps,
-}: SelectFilterControlProps) {
-	return (
-		<Select
-			value={value?.value ?? ALL_VALUE}
-			onValueChange={(v) => {
-				if (v === ALL_VALUE) {
-					onChange(undefined);
-				} else {
-					onChange({ field, label, type: "picklist", value: v });
-				}
-			}}
-		>
-			<SelectTrigger
-				id={`filter-${field}`}
-				{...triggerProps}
-				className={cn("w-full", triggerProps?.className)}
-			>
-				<SelectValue placeholder={`Select ${label.toLowerCase()}`} />
-			</SelectTrigger>
-			<SelectContent {...contentProps}>
-				<SelectItem value={ALL_VALUE}>All</SelectItem>
-				{options.map((opt) => (
-					<SelectItem key={opt.value} value={opt.value}>
-						{opt.label}
-					</SelectItem>
-				))}
-			</SelectContent>
-		</Select>
-	);
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/TextFilter.tsx

@@ -1,93 +0,0 @@
-import { useState } from "react";
-import { Input } from "../../../../components/ui/input";
-import { cn } from "../../../../lib/utils";
-import { useFilterField } from "../FilterContext";
-import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
-import type { ActiveFilterValue } from "../../utils/filterUtils";
-
-interface TextFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	field: string;
-	label: string;
-	placeholder?: string;
-	helpText?: string;
-}
-
-export function TextFilter({
-	field,
-	label,
-	placeholder,
-	helpText,
-	className,
-	...props
-}: TextFilterProps) {
-	const { value, onChange } = useFilterField(field);
-	return (
-		<FilterFieldWrapper
-			label={label}
-			htmlFor={`filter-${field}`}
-			helpText={helpText}
-			className={className}
-			{...props}
-		>
-			<TextFilterInput
-				field={field}
-				label={label}
-				placeholder={placeholder}
-				value={value}
-				onChange={onChange}
-			/>
-		</FilterFieldWrapper>
-	);
-}
-
-interface TextFilterInputProps extends Omit<
-	React.ComponentProps<typeof Input>,
-	"onChange" | "value"
-> {
-	field: string;
-	label: string;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-}
-
-export function TextFilterInput({
-	field,
-	label,
-	value,
-	onChange,
-	className,
-	...props
-}: TextFilterInputProps) {
-	const [localValue, setLocalValue] = useState(value?.value ?? "");
-
-	const externalValue = value?.value ?? "";
-	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
-	if (prevExternalValue !== externalValue) {
-		setPrevExternalValue(externalValue);
-		setLocalValue(externalValue);
-	}
-
-	const debouncedOnChange = useDebouncedCallback((v: string) => {
-		if (v) {
-			onChange({ field, label, type: "text", value: v });
-		} else {
-			onChange(undefined);
-		}
-	});
-
-	return (
-		<Input
-			id={`filter-${field}`}
-			type="text"
-			placeholder={props.placeholder ?? `Filter by ${label.toLowerCase()}...`}
-			value={localValue}
-			onChange={(e) => {
-				setLocalValue(e.target.value);
-				debouncedOnChange(e.target.value);
-			}}
-			className={cn(className)}
-			{...props}
-		/>
-	);
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useDebouncedCallback.ts

@@ -1,34 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { debounce, FILTER_DEBOUNCE_MS } from "../utils/debounce";
-
-/**
- * Returns a stable debounced wrapper around the provided callback.
- *
- * The wrapper always invokes the *latest* version of `fn` (via a ref),
- * so the debounce timer is never reset when `fn` changes — only when
- * the caller invokes the returned function again.
- *
- * @param fn - The callback to debounce.
- * @param delay - Debounce delay in ms. Defaults to `FILTER_DEBOUNCE_MS`.
- */
-export function useDebouncedCallback<T extends (...args: any[]) => void>(
-	fn: T,
-	delay: number = FILTER_DEBOUNCE_MS,
-): (...args: Parameters<T>) => void {
-	const fnRef = useRef(fn);
-	const debouncedRef = useRef<((...args: any[]) => void) | null>(null);
-
-	useEffect(() => {
-		fnRef.current = fn;
-	});
-
-	useEffect(() => {
-		debouncedRef.current = debounce((...args: any[]) => {
-			fnRef.current(...(args as Parameters<T>));
-		}, delay);
-	}, [delay]);
-
-	return useCallback((...args: Parameters<T>) => {
-		debouncedRef.current?.(...args);
-	}, []);
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useObjectSearchParams.ts

@@ -1,254 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useSearchParams } from "react-router";
-import type { FilterFieldConfig, ActiveFilterValue } from "../utils/filterUtils";
-import type { SortFieldConfig, SortState } from "../utils/sortUtils";
-import { filtersToSearchParams, searchParamsToFilters, buildFilter } from "../utils/filterUtils";
-import { buildOrderBy } from "../utils/sortUtils";
-import { debounce } from "../utils/debounce";
-
-/** How long to wait before flushing local state changes to the URL. */
-const URL_SYNC_DEBOUNCE_MS = 300;
-
-export interface PaginationConfig {
-	defaultPageSize: number;
-	validPageSizes: number[];
-}
-
-export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
-	filters: {
-		active: ActiveFilterValue[];
-		set: (field: string, value: ActiveFilterValue | undefined) => void;
-		remove: (field: string) => void;
-	};
-	sort: {
-		current: SortState | null;
-		set: (sort: SortState | null) => void;
-	};
-	query: { where: TFilter; orderBy: TOrderBy };
-	pagination: {
-		pageSize: number;
-		pageIndex: number;
-		afterCursor: string | undefined;
-		setPageSize: (size: number) => void;
-		goToNextPage: (cursor: string) => void;
-		goToPreviousPage: () => void;
-	};
-	resetAll: () => void;
-}
-
-/**
- * Manages filter, sort, and cursor-based pagination state for an object search page.
- *
- * ## State model
- * Local React state is the primary driver for instant UI updates.
- * URL search params act as the durable source of truth so that a page
- * refresh or shared link restores the same view. Changes are synced to
- * the URL via a debounced write (300 ms) to avoid excessive history entries.
- *
- * ## Return shape
- * Returns memoized groups so each group's reference is stable unless its
- * contents change — safe to pass directly as props to `React.memo` children.
- *
- * - `filters`    — active filter values + set/remove callbacks
- * - `sort`       — current sort state + set callback
- * - `query`      — derived `where` / `orderBy` objects ready for the API
- * - `pagination` — page size, page index, cursor, and navigation callbacks
- * - `resetAll`   — clears all filters, sort, and pagination in one call
- */
-export function useObjectSearchParams<TFilter, TOrderBy>(
-	filterConfigs: FilterFieldConfig[],
-	_sortConfigs?: SortFieldConfig[],
-	paginationConfig?: PaginationConfig,
-) {
-	const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
-	const validPageSizes = useMemo(
-		() => paginationConfig?.validPageSizes ?? [defaultPageSize],
-		[paginationConfig?.validPageSizes, defaultPageSize],
-	);
-	const [searchParams, setSearchParams] = useSearchParams();
-
-	// Seed local state from URL on initial load
-	const initial = useMemo(
-		() => searchParamsToFilters(searchParams, filterConfigs),
-		// Only run on mount — local state takes over after that, no deps needed
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	const [filters, setFilters] = useState<ActiveFilterValue[]>(initial.filters);
-	const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
-
-	// Pagination — cursor-based with a stack to support "previous page" navigation.
-	const getValidPageSize = useCallback(
-		(size: number) => (validPageSizes.includes(size) ? size : defaultPageSize),
-		[validPageSizes, defaultPageSize],
-	);
-
-	const [pageSize, setPageSizeState] = useState<number>(
-		getValidPageSize(initial.pageSize ?? defaultPageSize),
-	);
-	const [pageIndex, setPageIndex] = useState(initial.pageIndex);
-	const [afterCursor, setAfterCursor] = useState<string | undefined>(undefined);
-	const cursorStackRef = useRef<string[]>([]);
-
-	// Debounced URL sync — keeps URL in sync without blocking the UI
-	const syncToUrl = useCallback(
-		(
-			nextFilters: ActiveFilterValue[],
-			nextSort: SortState | null,
-			nextPageSize?: number,
-			nextPageIndex?: number,
-		) => {
-			const params = filtersToSearchParams(nextFilters, nextSort, nextPageSize, nextPageIndex);
-			setSearchParams(params, { replace: true });
-		},
-		[setSearchParams],
-	);
-
-	const debouncedSyncRef = useRef(debounce(syncToUrl, URL_SYNC_DEBOUNCE_MS));
-	useEffect(() => {
-		debouncedSyncRef.current = debounce(syncToUrl, URL_SYNC_DEBOUNCE_MS);
-	}, [syncToUrl]);
-
-	// Snapshot ref — lets callbacks read the latest state without being
-	// recreated on every render (avoids infinite useCallback chains).
-	const stateRef = useRef({ filters, sort, pageSize, pageIndex });
-	useEffect(() => {
-		stateRef.current = { filters, sort, pageSize, pageIndex };
-	});
-
-	// Any filter/sort change resets pagination to the first page.
-	const resetPagination = useCallback(() => {
-		setPageIndex(0);
-		setAfterCursor(undefined);
-		cursorStackRef.current = [];
-	}, []);
-
-	// -- Filter callbacks -------------------------------------------------------
-
-	const setFilter = useCallback(
-		(field: string, value: ActiveFilterValue | undefined) => {
-			const { sort: s, pageSize: ps } = stateRef.current;
-			setFilters((prev) => {
-				const next = prev.filter((f) => f.field !== field);
-				if (value) next.push(value);
-				debouncedSyncRef.current(next, s, ps);
-				return next;
-			});
-			resetPagination();
-		},
-		[resetPagination],
-	);
-
-	const removeFilter = useCallback(
-		(field: string) => {
-			const { sort: s, pageSize: ps } = stateRef.current;
-			setFilters((prev) => {
-				const next = prev.filter((f) => f.field !== field);
-				debouncedSyncRef.current(next, s, ps);
-				return next;
-			});
-			resetPagination();
-		},
-		[resetPagination],
-	);
-
-	// -- Sort callback ----------------------------------------------------------
-
-	const setSort = useCallback(
-		(nextSort: SortState | null) => {
-			const { filters: f, pageSize: ps } = stateRef.current;
-			setLocalSort(nextSort);
-			debouncedSyncRef.current(f, nextSort, ps);
-			resetPagination();
-		},
-		[resetPagination],
-	);
-
-	// -- Reset ------------------------------------------------------------------
-
-	const resetAll = useCallback(() => {
-		setFilters([]);
-		setLocalSort(null);
-		resetPagination();
-		syncToUrl([], null, defaultPageSize, 0);
-		setPageSizeState(defaultPageSize);
-	}, [syncToUrl, resetPagination, defaultPageSize]);
-
-	// -- Pagination callbacks ---------------------------------------------------
-	// Uses a cursor stack to track visited pages. "Next" pushes the current
-	// endCursor onto the stack; "Previous" pops it to restore the prior cursor.
-
-	const goToNextPage = useCallback((endCursor: string) => {
-		cursorStackRef.current = [...cursorStackRef.current, endCursor];
-		setAfterCursor(endCursor);
-		setPageIndex((prev) => {
-			const nextIndex = prev + 1;
-			const { filters: f, sort: s, pageSize: ps } = stateRef.current;
-			debouncedSyncRef.current(f, s, ps, nextIndex);
-			return nextIndex;
-		});
-	}, []);
-
-	const goToPreviousPage = useCallback(() => {
-		const stack = cursorStackRef.current;
-		const next = stack.slice(0, -1);
-		cursorStackRef.current = next;
-		setAfterCursor(next.length > 0 ? next[next.length - 1] : undefined);
-		setPageIndex((prev) => {
-			const nextIndex = Math.max(0, prev - 1);
-			const { filters: f, sort: s, pageSize: ps } = stateRef.current;
-			debouncedSyncRef.current(f, s, ps, nextIndex);
-			return nextIndex;
-		});
-	}, []);
-
-	const setPageSize = useCallback(
-		(newSize: number) => {
-			const validated = getValidPageSize(newSize);
-			const { filters: f, sort: s } = stateRef.current;
-			setPageSizeState(validated);
-			resetPagination();
-			debouncedSyncRef.current(f, s, validated);
-		},
-		[resetPagination, getValidPageSize],
-	);
-
-	// -- Derived query objects ---------------------------------------------------
-	// Translate local filter/sort state into API-ready `where` and `orderBy`.
-
-	const where = useMemo(
-		() => buildFilter<TFilter>(filters, filterConfigs),
-		[filters, filterConfigs],
-	);
-
-	const orderBy = useMemo(() => buildOrderBy<TOrderBy>(sort), [sort]);
-
-	// -- Memoized return groups -------------------------------------------------
-	// Each group is individually memoized so its object reference stays stable
-	// unless the contained values change. This makes it safe to pass a group
-	// (e.g. `pagination`) directly as props to a React.memo child without
-	// causing unnecessary re-renders.
-
-	const filtersGroup = useMemo(
-		() => ({ active: filters, set: setFilter, remove: removeFilter }),
-		[filters, setFilter, removeFilter],
-	);
-
-	const sortGroup = useMemo(() => ({ current: sort, set: setSort }), [sort, setSort]);
-
-	const query = useMemo(() => ({ where, orderBy }), [where, orderBy]);
-
-	const pagination = useMemo(
-		() => ({ pageSize, pageIndex, afterCursor, setPageSize, goToNextPage, goToPreviousPage }),
-		[pageSize, pageIndex, afterCursor, setPageSize, goToNextPage, goToPreviousPage],
-	);
-
-	return {
-		filters: filtersGroup,
-		sort: sortGroup,
-		query,
-		pagination,
-		resetAll,
-	};
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/utils/debounce.ts

@@ -1,25 +0,0 @@
-/** Default debounce delay for keystroke-driven filter inputs (search, text, numeric). */
-export const FILTER_DEBOUNCE_MS = 300;
-
-/**
- * Creates a debounced version of the provided function.
- *
- * Each call to the returned function resets the internal timer. The wrapped
- * function is only invoked once the timer expires without being reset. This
- * makes it ideal for rate-limiting high-frequency events like input changes.
- *
- * @typeParam T - The function signature to debounce.
- * @param fn - The function to debounce.
- * @param ms - The debounce delay in milliseconds.
- * @returns A new function with the same signature that delays execution.
- */
-export function debounce<T extends (...args: any[]) => void>(
-	fn: T,
-	ms: number,
-): (...args: Parameters<T>) => void {
-	let timer: ReturnType<typeof setTimeout> | undefined;
-	return (...args: Parameters<T>) => {
-		clearTimeout(timer);
-		timer = setTimeout(() => fn(...args), ms);
-	};
-}