@object-ui/fields 4.0.7 → 4.0.8

package/dist/packages/fields/src/index.d.ts

@@ -25,6 +25,12 @@ export declare function formatCurrency(value: number, currency?: string): string
  * E.g., $150,000 → $150K, $1,200,000 → $1.2M
  */
 export declare function formatCompactCurrency(value: number, currency?: string): string;
+/**
+ * Format a plain number with thousands separators, no currency symbol.
+ * Used as a safe fallback when a currency-typed field has no `currency`
+ * configured — we'd rather render `1,234.50` than silently assume USD.
+ */
+export declare function formatNumber(value: number, decimals?: number): string;
 /**
  * Format percent value
  * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
@@ -43,15 +49,15 @@ export declare function humanizeLabel(value: string): string;
 /**
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
  */
-export declare function formatRelativeDate(value: string | Date): string;
+export declare function formatRelativeDate(value: string | Date | number): string;
 /**
  * Format date value
  */
-export declare function formatDate(value: string | Date, style?: string): string;
+export declare function formatDate(value: string | Date | number, style?: string): string;
 /**
  * Format datetime value
  */
-export declare function formatDateTime(value: string | Date): string;
+export declare function formatDateTime(value: string | Date | number): string;
 /**
  * Text field cell renderer
  */
@@ -124,6 +130,16 @@ export declare function UserCellRenderer({ value }: CellRendererProps): React.Re
  * @param renderer React component to render the field
  */
 export declare function registerFieldRenderer(type: string, renderer: React.FC<CellRendererProps>): void;
+/**
+ * Resolve the canonical cell-renderer key for a field. Accepts either a
+ * raw type string (back-compat) or a field-metadata object so that
+ * format hints (`format: 'phone'` etc.) can promote a plain `text`
+ * field to its richer renderer counterpart.
+ */
+export declare function resolveCellRendererType(fieldOrType: string | {
+    type?: string;
+    format?: string;
+} | null | undefined): string;
 /**
  * Get the appropriate cell renderer for a field type
  */

package/dist/packages/fields/src/widgets/RecordPickerDialog.d.ts

@@ -91,6 +91,14 @@ export interface RecordPickerDialogProps {
     columns?: Array<string | LookupColumnDef>;
     /** Primary display field (default: 'name') */
     displayField?: string;
+    /**
+     * Optional `titleFormat` template (e.g. `"{full_name}"` or
+     * `"{case_number} - {subject}"`). When set and the displayField column is
+     * auto-inferred, the column renders via the template instead of reading
+     * a possibly-missing field. Mirrors how DetailView/ObjectCalendar resolve
+     * record titles.
+     */
+    titleFormat?: string | null;
     /** Record id field (default: 'id') */
     idField?: string;
     /** Page size (default: 10) */
@@ -163,4 +171,4 @@ export interface RecordPickerDialogProps {
  * states, and single/multi-select.  Responsive: mobile-friendly width
  * via Tailwind breakpoints.
  */
-export declare function RecordPickerDialog({ open, onOpenChange, title, multiple, dataSource, objectName, columns: columnsProp, displayField, idField, pageSize, value, onSelect, onSelectRecords, lookupFilters, cellRenderer, filterColumns, renderFilterBar, renderGrid, }: RecordPickerDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecordPickerDialog({ open, onOpenChange, title, multiple, dataSource, objectName, columns: columnsProp, displayField, titleFormat, idField, pageSize, value, onSelect, onSelectRecords, lookupFilters, cellRenderer, filterColumns, renderFilterBar, renderGrid, }: RecordPickerDialogProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -26,13 +26,13 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "lucide-react": "^1.14.0",
-    "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "4.0.7",
-    "@object-ui/core": "4.0.7",
-    "@object-ui/i18n": "4.0.7",
-    "@object-ui/providers": "4.0.7",
-    "@object-ui/react": "4.0.7",
-    "@object-ui/types": "4.0.7"
+    "tailwind-merge": "^3.6.0",
+    "@object-ui/components": "4.0.8",
+    "@object-ui/core": "4.0.8",
+    "@object-ui/i18n": "4.0.8",
+    "@object-ui/providers": "4.0.8",
+    "@object-ui/react": "4.0.8",
+    "@object-ui/types": "4.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -43,7 +43,7 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.12",
     "vite-plugin-dts": "^5.0.0"
   },
   "publishConfig": {

package/src/index.tsx

@@ -11,6 +11,23 @@ import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry } from '@object-ui/core';
 import { Badge, Avatar, AvatarFallback, Button, Checkbox, EmptyValue } from '@object-ui/components';
 import { Check, X, Copy, Phone as PhoneIcon } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/react';
+
+/**
+ * Safe label resolver for cell-level UI strings. Falls back to the English
+ * default when no I18nProvider is available or when the key is missing.
+ */
+function useFieldLabel() {
+  try {
+    const { t } = useObjectTranslation();
+    return (key: string, fallback: string) => {
+      const v = t(key);
+      return !v || v === key ? fallback : v;
+    };
+  } catch {
+    return (_k: string, fallback: string) => fallback;
+  }
+}
 
 import { TextField } from './widgets/TextField';
 import { NumberField } from './widgets/NumberField';
@@ -127,6 +144,22 @@ export function formatCompactCurrency(value: number, currency: string = 'USD'):
   }
 }
 
+/**
+ * Format a plain number with thousands separators, no currency symbol.
+ * Used as a safe fallback when a currency-typed field has no `currency`
+ * configured — we'd rather render `1,234.50` than silently assume USD.
+ */
+export function formatNumber(value: number, decimals: number = 2): string {
+  try {
+    return new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(value);
+  } catch {
+    return value.toFixed(decimals);
+  }
+}
+
 /**
  * Format percent value
  * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
@@ -153,10 +186,10 @@ export function humanizeLabel(value: string): string {
 /**
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
  */
-export function formatRelativeDate(value: string | Date): string {
-  if (!value) return '—';
-  const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '—';
+export function formatRelativeDate(value: string | Date | number): string {
+  if (value === null || value === undefined || value === '') return '—';
+  const date = value instanceof Date ? value : new Date(value as any);
+  if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
 
   const now = new Date();
   const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
@@ -179,10 +212,10 @@ export function formatRelativeDate(value: string | Date): string {
 /**
  * Format date value
  */
-export function formatDate(value: string | Date, style?: string): string {
-  if (!value) return '—';
-  const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '—';
+export function formatDate(value: string | Date | number, style?: string): string {
+  if (value === null || value === undefined || value === '') return '—';
+  const date = value instanceof Date ? value : new Date(value as any);
+  if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
 
   if (style === 'short') {
     // Compact format for mobile: "Jan 15, '24"
@@ -207,10 +240,10 @@ export function formatDate(value: string | Date, style?: string): string {
 /**
  * Format datetime value
  */
-export function formatDateTime(value: string | Date): string {
-  if (!value) return '—';
-  const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '—';
+export function formatDateTime(value: string | Date | number): string {
+  if (value === null || value === undefined || value === '') return '—';
+  const date = value instanceof Date ? value : new Date(value as any);
+  if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
   
   return date.toLocaleDateString(undefined, {
     year: 'numeric',
@@ -255,9 +288,14 @@ export function CurrencyCellRenderer({ value, field }: CellRendererProps): React
   
   const safe = coerceToSafeValue(value);
   const currencyField = field as any;
-  const currency = currencyField.currency || 'USD';
+  // Honor both `currency` (legacy/grid configs) and `defaultCurrency`
+  // (the canonical key from `@objectstack/spec` Field.currency()).
+  const currency: string | undefined = currencyField.currency || currencyField.defaultCurrency;
   const num = Number(safe);
-  const formatted = !isNaN(num) ? formatCurrency(num, currency) : String(safe);
+  const decimals = currencyField.precision ?? currencyField.scale ?? currencyField.decimals ?? 2;
+  const formatted = !isNaN(num)
+    ? (currency ? formatCurrency(num, currency) : formatNumber(num, decimals))
+    : String(safe);
   
   return <span className="tabular-nums font-medium whitespace-nowrap">{formatted}</span>;
 }
@@ -351,7 +389,7 @@ export function BooleanCellRenderer({ value, field }: CellRendererProps): React.
   }
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex items-center justify-start">
       <Checkbox checked={!!value} disabled className="pointer-events-none" />
     </div>
   );
@@ -370,16 +408,16 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
   // Determine if date is overdue (in the past) — but only color it red when the
   // field is *semantically* a due/deadline. A plain "start_date" or "created_at"
   // in the past should not render in red.
-  const date = typeof safe === 'string' ? new Date(safe) : safe;
-  const isValidDate = date instanceof Date && !isNaN(date.getTime());
+  const date = safe != null ? new Date(safe as string | number) : null;
+  const isValidDate = date !== null && !isNaN(date.getTime());
   const startOfToday = new Date();
   startOfToday.setHours(0, 0, 0, 0);
   const fieldName = String(dateField?.name || dateField?.accessorKey || dateField?.key || '').toLowerCase();
   const dueLike =
     dateField?.dueLike === true ||
     /(^|_)(due|deadline|expires?|expiry|expiration|expected_close|target_close|sla|return_by|renewal|next_action)(_|$)/.test(fieldName);
-  const isOverdue = dueLike && isValidDate && date < startOfToday;
-  const isoString = isValidDate ? date.toISOString() : String(safe);
+  const isOverdue = dueLike && isValidDate && date! < startOfToday;
+  const isoString = isValidDate ? date!.toISOString() : String(safe);
 
   return (
     <span
@@ -397,8 +435,8 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
 export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <EmptyValue />;
   const safe = coerceToSafeValue(value);
-  const date = typeof safe === 'string' ? new Date(safe) : safe;
-  if (!(date instanceof Date) || isNaN(date.getTime())) return <EmptyValue />;
+  const date = safe != null ? new Date(safe as string | number) : null;
+  if (date === null || isNaN(date.getTime())) return <EmptyValue />;
 
   const datePart = date.toLocaleDateString(undefined, {
     month: 'numeric',
@@ -421,8 +459,9 @@ export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactE
 
 // Semantic color mapping (auto-detect from value text for priority & status fields)
 // Keys use underscore notation; lookup normalizes spaces/hyphens to underscores automatically.
+// Chinese keys are stored as-is and matched directly (no normalization side-effects).
 const SEMANTIC_COLOR_MAP: Record<string, string> = {
-  // Priority values
+  // Priority values (en)
   critical: 'red',
   urgent: 'red',
   high: 'orange',
@@ -430,7 +469,7 @@ const SEMANTIC_COLOR_MAP: Record<string, string> = {
   normal: 'blue',
   low: 'gray',
   none: 'gray',
-  // Status values
+  // Status values (en)
   paid: 'green',
   completed: 'green',
   done: 'green',
@@ -455,6 +494,52 @@ const SEMANTIC_COLOR_MAP: Record<string, string> = {
   overdue: 'red',
   delivered: 'purple',
   archived: 'indigo',
+  // CRM lifecycle values (en)
+  contacted: 'blue',
+  qualified: 'purple',
+  converted: 'green',
+  won: 'green',
+  lost: 'red',
+  // Priority values (zh)
+  紧急: 'red',
+  严重: 'red',
+  高: 'orange',
+  中: 'yellow',
+  普通: 'blue',
+  低: 'gray',
+  无: 'gray',
+  // Status values (zh)
+  新建: 'gray',
+  草稿: 'gray',
+  待处理: 'yellow',
+  待审核: 'yellow',
+  待联系: 'yellow',
+  挂起: 'yellow',
+  进行中: 'blue',
+  处理中: 'blue',
+  已联系: 'blue',
+  跟进中: 'blue',
+  已发货: 'blue',
+  打开: 'blue',
+  已确认: 'green',
+  已审核: 'green',
+  已通过: 'green',
+  已完成: 'green',
+  已支付: 'green',
+  已签收: 'green',
+  已转化: 'green',
+  成单: 'green',
+  赢得: 'green',
+  已签约: 'green',
+  已交付: 'purple',
+  已归档: 'indigo',
+  已关闭: 'gray',
+  已取消: 'red',
+  已拒绝: 'red',
+  失败: 'red',
+  逾期: 'red',
+  流失: 'red',
+  丢失: 'red',
 };
 
 // Color to Tailwind class mapping for custom Badge styling
@@ -511,18 +596,29 @@ function getBadgeColorClasses(color?: string, val?: unknown): string {
 export function SelectCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   const selectField = field as any;
   const options: SelectOptionMetadata[] = selectField.options || [];
-  
+
   if (value == null || value === '') return <EmptyValue />;
-  
+
+  // Match a stored value to a configured option, falling back to a
+  // case-insensitive comparison so seed data with mixed case
+  // (e.g. "Referral" stored, "referral" defined) still resolves to the
+  // localized option label.
+  const findOption = (val: any): SelectOptionMetadata | undefined => {
+    const exact = options.find(opt => opt.value === val);
+    if (exact) return exact;
+    const norm = String(val).toLowerCase();
+    return options.find(opt => String(opt.value).toLowerCase() === norm);
+  };
+
   // Handle multiple values
   if (Array.isArray(value)) {
     return (
       <div className="flex flex-wrap gap-1">
         {value.map((val, idx) => {
-          const option = options.find(opt => opt.value === val);
+          const option = findOption(val);
           const label = option?.label || humanizeLabel(String(val));
           const colorClasses = getBadgeColorClasses(option?.color, val);
-          
+
           return (
             <Badge
               key={idx}
@@ -536,9 +632,9 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
       </div>
     );
   }
-  
+
   // Handle single value
-  const option = options.find(opt => opt.value === value);
+  const option = findOption(value);
   const label = option?.label || humanizeLabel(String(value));
   const colorClasses = getBadgeColorClasses(option?.color, value);
   
@@ -557,7 +653,8 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
  */
 export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <EmptyValue />;
-  
+
+  const label = useFieldLabel();
   const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
 
@@ -588,7 +685,7 @@ export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElem
         type="button"
         className="opacity-0 group-hover/email:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
         onClick={handleCopy}
-        aria-label="Copy email"
+        aria-label={label('detail.copyEmail', 'Copy email')}
       >
         {copied ? (
           <Check className="h-3 w-3 text-green-600" />
@@ -630,7 +727,8 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
  */
 export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <EmptyValue />;
-  
+
+  const label = useFieldLabel();
   const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
 
@@ -657,7 +755,7 @@ export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElem
         type="button"
         className="opacity-0 group-hover/phone:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
         onClick={handleCopy}
-        aria-label="Copy phone number"
+        aria-label={label('detail.copyPhone', 'Copy phone number')}
       >
         {copied ? (
           <Check className="h-3 w-3 text-green-600" />
@@ -868,6 +966,51 @@ export function registerFieldRenderer(type: string, renderer: React.FC<CellRende
   fieldRegistry.set(type, renderer);
 }
 
+/**
+ * Format hints (e.g. `{ type: 'text', format: 'phone' }`) that should
+ * map to a richer cell renderer than the bare type would imply. The
+ * canonical ObjectStack pattern uses `Field.text({ format: 'phone' })`
+ * for plain text columns that should still render with a tel: link,
+ * `Field.text({ format: 'url' })` for clickable links, etc.
+ *
+ * Only applies when the field's base type is a generic text type;
+ * explicit types like 'phone'/'email'/'currency' already win without
+ * any format hint.
+ */
+const FORMAT_TO_RENDERER: Record<string, string> = {
+  phone: 'phone',
+  tel: 'phone',
+  telephone: 'phone',
+  email: 'email',
+  url: 'url',
+  uri: 'url',
+  link: 'url',
+  currency: 'currency',
+  money: 'currency',
+  percent: 'percent',
+  percentage: 'percent',
+};
+
+const TEXTUAL_BASE_TYPES = new Set(['text', 'textarea', 'string', 'longtext', '']);
+
+/**
+ * Resolve the canonical cell-renderer key for a field. Accepts either a
+ * raw type string (back-compat) or a field-metadata object so that
+ * format hints (`format: 'phone'` etc.) can promote a plain `text`
+ * field to its richer renderer counterpart.
+ */
+export function resolveCellRendererType(fieldOrType: string | { type?: string; format?: string } | null | undefined): string {
+  if (!fieldOrType) return 'text';
+  if (typeof fieldOrType === 'string') return fieldOrType;
+  const baseType = (fieldOrType.type || '').toLowerCase();
+  const formatRaw = fieldOrType.format;
+  const format = typeof formatRaw === 'string' ? formatRaw.toLowerCase() : '';
+  if (format && FORMAT_TO_RENDERER[format] && TEXTUAL_BASE_TYPES.has(baseType)) {
+    return FORMAT_TO_RENDERER[format];
+  }
+  return fieldOrType.type || 'text';
+}
+
 /**
  * Get the appropriate cell renderer for a field type
  */

package/src/widgets/CurrencyField.tsx

@@ -3,29 +3,47 @@ import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
- * Format currency value for display
+ * Format currency value for display. When `currency` is undefined the value
+ * is rendered as a plain number with thousands separators (no symbol),
+ * because silently assuming USD is misleading for non-USD businesses.
  */
-function formatCurrency(value: number, currency: string = 'USD'): string {
+function formatAmount(value: number, currency: string | undefined, precision: number): string {
+  if (currency) {
+    try {
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(value);
+    } catch {
+      return `${currency} ${value.toFixed(precision)}`;
+    }
+  }
   try {
     return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency,
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
     }).format(value);
   } catch {
-    return `${currency} ${value.toFixed(2)}`;
+    return value.toFixed(precision);
   }
 }
 
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  USD: '$',
+};
+
 export function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
   const currencyField = (field || (props as any).schema) as any;
-  const currency = currencyField?.currency || 'USD';
+  const currency: string | undefined = currencyField?.currency;
   const precision = currencyField?.precision ?? 2;
 
   if (readonly) {
     if (value == null) return <EmptyValue />;
     return (
       <span className="text-sm font-medium tabular-nums">
-        {formatCurrency(Number(value), currency)}
+        {formatAmount(Number(value), currency, precision)}
       </span>
     );
   }
@@ -38,11 +56,15 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
     }
   };
 
+  const symbol = currency ? (currency === 'USD' ? '$' : currency) : '';
+
   return (
     <div className="relative">
-      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
-        {currency === 'USD' ? '$' : currency}
-      </span>
+      {symbol && (
+        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
+          {symbol}
+        </span>
+      )}
       <Input
         {...props}
         type="number"
@@ -54,7 +76,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         onBlur={handleBlur}
         placeholder={currencyField?.placeholder || '0.00'}
         disabled={readonly || props.disabled}
-        className={`pl-8 ${className || ''}`}
+        className={`${symbol ? 'pl-8' : ''} ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
       />