@salesforce/webapp-template-app-react-template-b2x-experimental 1.109.5 → 1.109.7

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

@@ -1,146 +0,0 @@
-import { useState, useCallback, useMemo, useId } from "react";
-import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
-import type { GraphQLRecordNode } from "../../api/recordListGraphQLService";
-import {
-	getDisplayValueForLayoutItemFromNode,
-	getDisplayValueForDetailFieldFromNode,
-} from "../../utils/graphQLNodeFieldUtils";
-import type { ObjectInfoMetadata } from "../../utils/formDataTransformUtils";
-import {
-	getTransformedSections,
-	type LayoutTransformContext,
-	type ObjectInfo,
-	type PicklistOption,
-	type TransformedLayoutItem,
-} from "../../utils/layoutTransformUtils";
-import { FieldValueDisplay } from "./formatted/FieldValueDisplay";
-import { Section } from "./Section";
-import { SectionRow } from "./SectionRow";
-
-export interface DetailFormProps {
-	layout: LayoutResponse;
-	record: GraphQLRecordNode;
-	metadata?: ObjectInfoMetadata | null;
-	objectInfo?: ObjectInfo | null;
-	lookupRecords?: Record<string, PicklistOption[] | null> | null;
-	showSectionHeaders?: boolean;
-	collapsibleSections?: boolean;
-}
-
-function FieldCell({
-	item,
-	record,
-	metadata,
-}: {
-	item: TransformedLayoutItem;
-	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;
-	const layoutResult = hasComponents
-		? getDisplayValueForLayoutItemFromNode(
-				record,
-				item.layoutComponentApiNames as string[],
-				metadata,
-			)
-		: null;
-	const value = hasComponents
-		? (layoutResult?.value ?? null)
-		: getDisplayValueForDetailFieldFromNode(record, item.apiName, metadata);
-	const dataType =
-		(hasComponents ? layoutResult?.dataType : undefined) ?? item.dataType ?? undefined;
-	return (
-		<div
-			className="flex flex-col gap-1"
-			role="group"
-			aria-labelledby={labelId}
-			aria-describedby={valueId}
-		>
-			<dt id={labelId} className="text-sm font-medium text-muted-foreground">
-				{label}
-			</dt>
-			<dd id={valueId} className="text-sm text-foreground">
-				<FieldValueDisplay value={value} dataType={dataType} />
-			</dd>
-		</div>
-	);
-}
-
-/**
- * Read-only detail form: layout API + record (+ optional object info) drive sections, rows, and
- * field values. Uses layoutComponents to club multi-component items (address, Created By, etc.).
- */
-export function DetailForm({
-	layout,
-	record,
-	metadata = null,
-	objectInfo = null,
-	lookupRecords = null,
-	showSectionHeaders = true,
-	collapsibleSections = true,
-}: DetailFormProps) {
-	const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
-
-	const recordId = (record.Id as string) ?? "";
-
-	const layoutObjectInfo = objectInfo ?? metadata;
-
-	const transformContext: LayoutTransformContext = useMemo(
-		() => ({
-			recordId,
-			objectInfo: layoutObjectInfo,
-			lookupRecords,
-			getSectionCollapsedState: (sectionId: string) => Boolean(collapsedSections[sectionId]),
-		}),
-		[recordId, layoutObjectInfo, lookupRecords, collapsedSections],
-	);
-
-	const computedSections = useMemo(
-		() => getTransformedSections(layout.sections, transformContext),
-		[layout.sections, transformContext],
-	);
-
-	const handleSectionToggle = useCallback((sectionId: string, collapsed: boolean) => {
-		setCollapsedSections((prev) => ({ ...prev, [sectionId]: collapsed }));
-	}, []);
-
-	return (
-		<div
-			className="space-y-6"
-			role="region"
-			aria-label="Record details"
-			aria-roledescription="Detail form"
-		>
-			{computedSections.map((section) => (
-				<Section
-					key={section.key}
-					sectionId={section.id}
-					titleLabel={section.heading}
-					showHeader={showSectionHeaders && section.useHeading}
-					collapsible={collapsibleSections && section.collapsible}
-					collapsed={section.collapsed}
-					onToggle={handleSectionToggle}
-				>
-					<div className="space-y-4">
-						{section.layoutRows.map((row) => (
-							<SectionRow key={row.key}>
-								{row.layoutItems.map((item) => {
-									const cellKey = `${section.key}-${row.key}-${item.apiName ?? item.key}`;
-									return item.isField ? (
-										<FieldCell key={cellKey} item={item} record={record} metadata={metadata} />
-									) : (
-										<div key={cellKey} className="min-h-[2.5rem]" aria-hidden="true" />
-									);
-								})}
-							</SectionRow>
-						))}
-					</div>
-				</Section>
-			))}
-		</div>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/DetailHeader.tsx

@@ -1,34 +0,0 @@
-/**
- * Back button and title for the record detail page.
- *
- * @param title - Record title (e.g. record name) shown next to the back control.
- * @param onBack - Called when the user activates the back control.
- */
-import { Button } from "../../../../components/ui/button";
-import { ArrowLeft } from "lucide-react";
-
-interface DetailHeaderProps {
-	title: string;
-	onBack: () => void;
-}
-
-export default function DetailHeader({ title, onBack }: DetailHeaderProps) {
-	return (
-		<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
-			<Button
-				variant="ghost"
-				onClick={onBack}
-				className="w-fit"
-				aria-label="Go back to search results"
-			>
-				<ArrowLeft className="h-4 w-4 mr-2" aria-hidden="true" />
-				Back
-			</Button>
-			{title ? (
-				<h1 className="text-xl font-semibold text-foreground truncate" id="detail-page-title">
-					{title}
-				</h1>
-			) : null}
-		</div>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/DetailLayoutSections.tsx

@@ -1,80 +0,0 @@
-/**
- * Alternative detail rendering: layout sections → rows → items → label/value grid.
- *
- * Use when you have raw Layout API response + record and do not need the full
- * layoutTransformUtils + formDataTransformUtils pipeline. The primary detail view
- * (DetailPage) uses DetailForm via UiApiDetailForm; use this component for other
- * entry points that already have layout + record in hand.
- */
-import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
-import type { SearchResultRecordData } from "../../types/search/searchResults";
-import { getNestedFieldValue } from "../../utils/fieldUtils";
-
-interface DetailLayoutSectionsProps {
-	layout: LayoutResponse;
-	record: SearchResultRecordData;
-}
-
-interface FieldEntry {
-	key: string;
-	label: string;
-	value: string | number | boolean | null;
-}
-
-function getSectionFieldEntries(
-	section: LayoutResponse["sections"][number],
-	record: SearchResultRecordData,
-): FieldEntry[] {
-	const entries: FieldEntry[] = [];
-	section.layoutRows.forEach((row, rowIdx) => {
-		row.layoutItems.forEach((item, itemIdx) => {
-			item.layoutComponents.forEach((comp, compIdx) => {
-				if (comp.componentType !== "Field" || !comp.apiName) return;
-				const value = getNestedFieldValue(record.fields, comp.apiName);
-				const label = comp.label ?? item.label;
-				entries.push({
-					key: `${section.id}-${rowIdx}-${itemIdx}-${comp.apiName ?? compIdx}`,
-					label: label || comp.apiName,
-					value: value ?? null,
-				});
-			});
-		});
-	});
-	return entries;
-}
-
-export default function DetailLayoutSections({ layout, record }: DetailLayoutSectionsProps) {
-	return (
-		<div className="space-y-8" role="region" aria-label="Record details">
-			{layout.sections.map((section) => {
-				const entries = getSectionFieldEntries(section, record);
-				if (entries.length === 0) return null;
-
-				return (
-					<section
-						key={section.id}
-						className="space-y-4"
-						aria-labelledby={section.useHeading ? `section-${section.id}` : undefined}
-					>
-						{section.useHeading && section.heading ? (
-							<h3
-								id={`section-${section.id}`}
-								className="text-base font-semibold text-foreground border-b pb-2"
-							>
-								{section.heading}
-							</h3>
-						) : null}
-						<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
-							{entries.map(({ key, label, value }) => (
-								<div key={key} className="flex flex-col gap-1">
-									<dt className="text-sm font-medium text-muted-foreground">{label}</dt>
-									<dd className="text-sm text-foreground">{value || "—"}</dd>
-								</div>
-							))}
-						</dl>
-					</section>
-				);
-			})}
-		</div>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/Section.tsx

@@ -1,108 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import type { ReactNode } from "react";
-
-export interface SectionProps {
-	sectionId: string;
-	titleLabel: string;
-	showHeader: boolean;
-	collapsible: boolean;
-	/** When provided, section is controlled (parent owns state). When undefined, section is uncontrolled (internal state). */
-	collapsed?: boolean;
-	onToggle?: (sectionId: string, collapsed: boolean) => void;
-	children: ReactNode;
-}
-
-/**
- * Section block with optional heading and collapsible content. Controlled when
- * `collapsed` is passed; uncontrolled otherwise. Accessible: aria-expanded, aria-controls, keyboard (Enter/Space).
- */
-export function Section({
-	sectionId,
-	titleLabel,
-	showHeader,
-	collapsible,
-	collapsed: controlledCollapsed,
-	onToggle,
-	children,
-}: SectionProps) {
-	const [internalCollapsed, setInternalCollapsed] = useState(false);
-	const isControlled = controlledCollapsed !== undefined;
-	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
-
-	const warnedUncontrolledRef = useRef(false);
-	useEffect(() => {
-		if (
-			process.env.NODE_ENV === "development" &&
-			onToggle != null &&
-			!isControlled &&
-			!warnedUncontrolledRef.current
-		) {
-			warnedUncontrolledRef.current = true;
-			console.warn(
-				"[Section] onToggle is passed but collapsed is undefined; section is uncontrolled. Pass collapsed to control from parent.",
-			);
-		}
-	}, [onToggle, isControlled]);
-
-	const contentId = `section-content-${sectionId}`;
-	const headerId = `section-header-${sectionId}`;
-
-	const handleToggle = useCallback(() => {
-		const next = !collapsed;
-		if (!isControlled) setInternalCollapsed(next);
-		onToggle?.(sectionId, next);
-	}, [collapsed, isControlled, onToggle, sectionId]);
-
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (!collapsible) return;
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				handleToggle();
-			}
-		},
-		[collapsible, handleToggle],
-	);
-
-	return (
-		<section
-			className="border-b border-border last:border-b-0 pb-6 last:pb-0"
-			aria-labelledby={showHeader ? headerId : undefined}
-		>
-			{showHeader && titleLabel && (
-				<h3 id={headerId} className="text-base font-semibold text-foreground mb-4">
-					{collapsible ? (
-						<button
-							type="button"
-							className="flex items-center gap-2 w-full text-left hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
-							onClick={handleToggle}
-							onKeyDown={handleKeyDown}
-							aria-expanded={!collapsed}
-							aria-controls={contentId}
-							aria-label={`${titleLabel}, ${collapsed ? "expand" : "collapse"} section`}
-							aria-roledescription="Section toggle"
-						>
-							{collapsed ? (
-								<ChevronRight className="h-4 w-4 shrink-0" aria-hidden />
-							) : (
-								<ChevronDown className="h-4 w-4 shrink-0" aria-hidden />
-							)}
-							<span>{titleLabel}</span>
-						</button>
-					) : (
-						<span className="block">{titleLabel}</span>
-					)}
-				</h3>
-			)}
-			<div
-				id={contentId}
-				className={showHeader && collapsible ? "mt-2" : ""}
-				aria-hidden={collapsible ? collapsed : undefined}
-				hidden={collapsible && collapsed}
-			>
-				{children}
-			</div>
-		</section>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/SectionRow.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface SectionRowProps {
-	children: ReactNode;
-}
-
-/**
- * One row of the detail form: definition list (dl) with two-column grid. Each child
- * is a layout item (field cell or placeholder) from the layout API row.
- */
-export function SectionRow({ children }: SectionRowProps) {
-	return (
-		<dl
-			className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 sm:gap-y-2"
-			aria-label="Row of fields"
-		>
-			{children}
-		</dl>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/UiApiDetailForm.tsx

@@ -1,140 +0,0 @@
-import { useEffect, useMemo } from "react";
-import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
-import { useRecordDetailLayout } from "../../hooks/useRecordDetailLayout";
-import { toRecordDisplayNameMetadata } from "../../utils/fieldUtils";
-import { DetailForm } from "./DetailForm";
-import type { ObjectInfoResult } from "../../types/objectInfo/objectInfo";
-import type { ObjectInfoMetadata } from "../../utils/formDataTransformUtils";
-import type { ObjectInfo } from "../../utils/layoutTransformUtils";
-import type { GraphQLRecordNode } from "../../api/recordListGraphQLService";
-import { getGraphQLRecordDisplayName } from "../../utils/graphQLNodeFieldUtils";
-
-export interface UiApiDetailFormProps {
-	objectApiName: string;
-	recordId: string;
-	recordTypeId?: string | null;
-	/** When provided, skips fetching and uses this layout (controlled mode). */
-	layout?: LayoutResponse | null;
-	/** When provided with layout, skips fetching and uses this record (controlled mode). */
-	record?: GraphQLRecordNode | null;
-	/** When provided, skips fetching and uses this object metadata (controlled mode). */
-	objectMetadata?: ObjectInfoResult | null;
-	/** When true, shows a loading spinner until layout and record are ready. */
-	loadsWithSpinner?: boolean;
-	/** Reserved for future edit mode; no-op in read-only. */
-	hideFooter?: boolean;
-	/** Callback when layout and record are ready (e.g. for parent to show record title). */
-	onRecordDataUpdate?: (payload: { recordName: string; record: unknown }) => void;
-}
-
-/**
- * Entry component for the record detail view. When layout/record are not provided,
- * fetches them via useRecordDetailLayout. Shows optional loading spinner and renders
- * a read-only DetailForm when ready. Mirrors LWC uiApiDetailForm (read-only).
- *
- * Passes objectInfo (mapped from object metadata) to DetailForm for layout transform.
- * lookupRecords (picklist/lookup options) are not fetched in this flow; DetailForm
- * accepts them when provided (e.g. from a future picklist API). Omit for read-only
- * display without API-driven picklist labels.
- */
-export function UiApiDetailForm({
-	objectApiName,
-	recordId,
-	recordTypeId = null,
-	layout: layoutProp,
-	record: recordProp,
-	objectMetadata: objectMetadataProp,
-	loadsWithSpinner = false,
-	onRecordDataUpdate,
-}: UiApiDetailFormProps) {
-	// Memoize so hook dependency doesn't change every render (avoids duplicate fetches)
-	const initialData = useMemo(
-		() =>
-			layoutProp && recordProp && objectMetadataProp
-				? {
-						layout: layoutProp,
-						record: recordProp,
-						objectMetadata: objectMetadataProp,
-					}
-				: null,
-		[layoutProp, recordProp, objectMetadataProp],
-	);
-
-	const fetched = useRecordDetailLayout({
-		objectApiName,
-		recordId,
-		recordTypeId,
-		initialData,
-	});
-
-	const layout = layoutProp ?? fetched.layout;
-	const record = recordProp ?? fetched.record;
-	const metadata = objectMetadataProp ?? fetched.objectMetadata;
-	const loading = layoutProp == null || recordProp == null ? fetched.loading : false;
-	const error = layoutProp == null || recordProp == null ? fetched.error : null;
-
-	const objectInfo: ObjectInfo | null = useMemo(() => {
-		if (!metadata?.fields) return null;
-		const apiName = metadata.ApiName;
-		return {
-			apiName,
-			fields: Object.fromEntries(
-				Object.entries(metadata.fields).map(([name, f]) => [
-					name,
-					{
-						compoundFieldName: f.compoundFieldName ?? undefined,
-						dataType: f.dataType ?? "",
-					},
-				]),
-			),
-		};
-	}, [metadata]);
-
-	const isReadyToRender = Boolean(layout && record && layout.sections?.length);
-
-	const showSpinner = !isReadyToRender && loadsWithSpinner && loading;
-
-	useEffect(() => {
-		if (!record || !onRecordDataUpdate || !isReadyToRender) return;
-		onRecordDataUpdate({
-			recordName: getGraphQLRecordDisplayName(record, toRecordDisplayNameMetadata(metadata)),
-			record,
-		});
-	}, [record, metadata, onRecordDataUpdate, isReadyToRender]);
-
-	if (showSpinner) {
-		return (
-			<div
-				className="min-h-[80px] flex items-center justify-center"
-				role="status"
-				aria-live="polite"
-				aria-label="Loading record details"
-			>
-				<span className="sr-only">Loading record details</span>
-				<div
-					className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"
-					aria-hidden
-				/>
-			</div>
-		);
-	}
-
-	if (error || !layout || !record) {
-		return null;
-	}
-
-	if (!isReadyToRender) {
-		return null;
-	}
-
-	return (
-		<DetailForm
-			layout={layout}
-			record={record}
-			metadata={metadata as ObjectInfoMetadata}
-			objectInfo={objectInfo}
-			showSectionHeaders
-			collapsibleSections
-		/>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/formatted/FieldValueDisplay.tsx

@@ -1,73 +0,0 @@
-/**
- * Picks formatter by dataType (Address, Phone, Url, Email) or plain text. Empty values show "—" with a11y label.
- */
-import { FormattedAddress } from "./FormattedAddress";
-import { FormattedEmail } from "./FormattedEmail";
-import { FormattedPhone } from "./FormattedPhone";
-import { FormattedText } from "./FormattedText";
-import { FormattedUrl } from "./FormattedUrl";
-
-/** Salesforce UI API dataType values that have dedicated formatters. */
-const DATA_TYPES = {
-	Address: "Address",
-	Email: "Email",
-	Phone: "Phone",
-	Url: "Url",
-} as const;
-
-/** Normalize dataType to canonical casing so "PHONE" / "phone" match Phone, etc. */
-function normalizeDataType(dataType: string | undefined): string | undefined {
-	if (dataType == null || dataType === "") return dataType;
-	const lower = dataType.toLowerCase();
-	const canonical: Record<string, string> = {
-		phone: DATA_TYPES.Phone,
-		email: DATA_TYPES.Email,
-		url: DATA_TYPES.Url,
-		address: DATA_TYPES.Address,
-	};
-	return canonical[lower] ?? dataType;
-}
-
-export interface FieldValueDisplayProps {
-	/** Resolved display value (string, number, boolean, or null). */
-	value: string | number | boolean | null | undefined;
-	/** Field dataType from object info (e.g. Phone, Email, Url, Address). */
-	dataType?: string;
-	className?: string;
-}
-
-const DEFAULT_CLASS = "text-sm text-foreground";
-const LINK_CLASS =
-	"text-sm text-foreground text-primary underline underline-offset-2 hover:opacity-80";
-
-export function FieldValueDisplay({
-	value,
-	dataType,
-	className = DEFAULT_CLASS,
-}: FieldValueDisplayProps) {
-	const str = value || null;
-
-	if (str === null) {
-		return (
-			<span className={className} aria-label="No value">
-				—
-			</span>
-		);
-	}
-
-	const linkClassName = className === DEFAULT_CLASS ? LINK_CLASS : className;
-	const normalizedType = normalizeDataType(dataType);
-
-	switch (normalizedType) {
-		case DATA_TYPES.Address:
-			return <FormattedAddress value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Phone:
-			return <FormattedPhone value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Url:
-			return <FormattedUrl value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Email:
-			return <FormattedEmail value={str as string} className={linkClassName} />;
-		default:
-			return <FormattedText value={value} className={className} />;
-	}
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/formatted/FormattedAddress.tsx

@@ -1,29 +0,0 @@
-/** Address as link to Google Maps search. External link: target _blank, rel noopener noreferrer. */
-
-const GOOGLE_MAPS_SEARCH_BASE = "https://www.google.com/maps/search/?api=1&query=";
-
-export interface FormattedAddressProps {
-	/** Full address string (e.g. "10 Main Rd.\nNew York, NY 31349\nUSA"). */
-	value: string;
-	className?: string;
-}
-
-export function FormattedAddress({ value, className }: FormattedAddressProps) {
-	if (!value || !value.trim()) return null;
-	const url = GOOGLE_MAPS_SEARCH_BASE + encodeURIComponent(value.trim());
-	return (
-		<a
-			href={url}
-			target="_blank"
-			rel="noopener noreferrer"
-			className={className}
-			aria-label="Open address in Google Maps"
-		>
-			{value.split("\n").map((line, i) => (
-				<span key={i} className="block">
-					{line}
-				</span>
-			))}
-		</a>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/formatted/FormattedEmail.tsx

@@ -1,17 +0,0 @@
-/** Email as mailto: link. */
-
-export interface FormattedEmailProps {
-	value: string;
-	className?: string;
-}
-
-export function FormattedEmail({ value, className }: FormattedEmailProps) {
-	const str = (value || "").trim();
-	if (!str) return null;
-	const href = `mailto:${encodeURIComponent(str)}`;
-	return (
-		<a href={href} className={className} aria-label={`Email ${str}`}>
-			{str}
-		</a>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/formatted/FormattedPhone.tsx

@@ -1,24 +0,0 @@
-/** Phone value as tel: link for dialer/VoIP. */
-
-export interface FormattedPhoneProps {
-	value: string;
-	className?: string;
-}
-
-/** Normalizes value for tel: (digits and + only). */
-function telHref(value: string): string {
-	const cleaned = value.replace(/[^\d+]/g, "");
-	return cleaned ? `tel:${cleaned}` : "#";
-}
-
-export function FormattedPhone({ value, className }: FormattedPhoneProps) {
-	if (!value) return null;
-	const trimmed = (value || "").trim();
-	const href = telHref(trimmed);
-	if (href === "#") return <span className={className}>{trimmed}</span>;
-	return (
-		<a href={href} className={className} aria-label={`Call ${trimmed}`}>
-			{trimmed}
-		</a>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/components/detail/formatted/FormattedText.tsx

@@ -1,11 +0,0 @@
-/** Plain-text field value when dataType has no dedicated formatter. */
-
-export interface FormattedTextProps {
-	value: string | number | boolean | null | undefined;
-	className?: string;
-}
-
-export function FormattedText({ value, className }: FormattedTextProps) {
-	if (!value) return null;
-	return <span className={className}>{value as string}</span>;
-}