@object-ui/fields 3.3.0 → 3.3.1

package/src/record-picker.test.tsx

@@ -1113,29 +1113,36 @@ describe('RecordPickerDialog — renderGrid slot', () => {
       expect(screen.getByTestId('custom-grid')).toBeInTheDocument();
     });
 
-    // renderGrid should have been called with grid slot props
-    expect(renderGrid).toHaveBeenCalledWith(
-      expect.objectContaining({
-        columns: expect.arrayContaining([
-          expect.objectContaining({ field: 'name' }),
-        ]),
-        records: expect.arrayContaining([
-          expect.objectContaining({ id: '1', name: 'Acme Corp' }),
-        ]),
-        loading: false,
-        totalCount: 1,
-        currentPage: 1,
-        pageSize: 10,
-        sortField: null,
-        sortDirection: 'asc',
-        onSort: expect.any(Function),
-        onPageChange: expect.any(Function),
-        onRowClick: expect.any(Function),
-        isSelected: expect.any(Function),
-        multiple: false,
-        idField: 'id',
-      }),
-    );
+    // Wait for data to load, then check the last renderGrid call has records
+    await waitFor(() => {
+      expect(renderGrid).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          columns: expect.arrayContaining([
+            expect.objectContaining({ field: 'name' }),
+          ]),
+          records: expect.arrayContaining([
+            expect.objectContaining({ id: '1', name: 'Acme Corp' }),
+          ]),
+          loading: false,
+          totalCount: 1,
+        }),
+      );
+    });
+
+    // Verify all expected props are present in the last call
+    const lastCallArgs = renderGrid.mock.calls[renderGrid.mock.calls.length - 1][0];
+    expect(lastCallArgs).toMatchObject({
+      currentPage: 1,
+      pageSize: 10,
+      sortField: null,
+      sortDirection: 'asc',
+      multiple: false,
+      idField: 'id',
+    });
+    expect(lastCallArgs.onSort).toBeTypeOf('function');
+    expect(lastCallArgs.onPageChange).toBeTypeOf('function');
+    expect(lastCallArgs.onRowClick).toBeTypeOf('function');
+    expect(lastCallArgs.isSelected).toBeTypeOf('function');
   });
 
   it('hides built-in table when renderGrid is provided', async () => {

package/src/remaining-widgets.test.tsx

@@ -37,7 +37,7 @@ describe('Remaining Field Widgets', () => {
 
     it('should render dash for null value', () => {
       render(<AutoNumberField {...baseProps} value={null as any} />);
-      expect(screen.getByText('-')).toBeInTheDocument();
+      expect(screen.getByText('—')).toBeInTheDocument();
     });
   });
 

package/src/widgets/AddressField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Label } from '@object-ui/components';
+import { Input, Label, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -34,11 +34,12 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
       [addr.state, addr.zipCode].filter(Boolean).join(' '),
       addr.country,
     ].filter(Boolean);
-    return parts.join(', ') || '-';
+    return parts.join(', ');
   };
 
   if (readonly) {
-    return <span className="text-sm">{formatAddress(address)}</span>;
+    const formatted = formatAddress(address);
+    return formatted ? <span className="text-sm">{formatted}</span> : <EmptyValue />;
   }
 
   return (

package/src/widgets/AutoNumberField.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -6,11 +7,12 @@ import { FieldWidgetProps } from './types';
  * Values are automatically generated by the system and cannot be edited
  */
 export function AutoNumberField({ value, field, ...props }: FieldWidgetProps<string | number>) {
-  const displayValue = value != null ? String(value) : '-';
-
+  if (value == null) {
+    return <EmptyValue className={props.className} />;
+  }
   return (
     <span className={`text-sm font-mono text-gray-700 ${props.className || ''}`}>
-      {displayValue}
+      {String(value)}
     </span>
   );
 }

package/src/widgets/CodeField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Textarea, cn } from '@object-ui/components';
+import { Textarea, cn, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -15,7 +15,7 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
   if (readonly) {
     return (
       <pre className={cn("text-sm bg-muted p-2 rounded overflow-x-auto border", props.className)}>
-        <code>{value || '-'}</code>
+        <code>{value || <EmptyValue />}</code>
       </pre>
     );
   }

package/src/widgets/ColorField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -16,7 +16,7 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
           className="w-6 h-6 rounded border border-input"
           style={{ backgroundColor: value || '#000000' }}
         />
-        <span className="text-sm">{value || '-'}</span>
+        <span className="text-sm">{value || <EmptyValue />}</span>
       </div>
     );
   }

package/src/widgets/CurrencyField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -22,7 +22,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
   const precision = currencyField?.precision ?? 2;
 
   if (readonly) {
-    if (value == null) return <span className="text-sm">-</span>;
+    if (value == null) return <EmptyValue />;
     return (
       <span className="text-sm font-medium tabular-nums">
         {formatCurrency(Number(value), currency)}

package/src/widgets/DateField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -8,7 +8,7 @@ import { FieldWidgetProps } from './types';
  */
 export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
   if (readonly) {
-    return <span className="text-sm">{value ? new Date(value).toLocaleDateString() : '-'}</span>;
+    return value ? <span className="text-sm">{new Date(value).toLocaleDateString()}</span> : <EmptyValue />;
   }
 
   // Filter out non-DOM props

package/src/widgets/DateTimeField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -8,7 +8,7 @@ import { FieldWidgetProps } from './types';
  */
 export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     const date = new Date(value);
     return (
       <span className="text-sm">

package/src/widgets/EmailField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -9,7 +9,7 @@ import { FieldWidgetProps } from './types';
 export function EmailField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
   const config = field || (props as any).schema;
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     return (
       <a 
         href={`mailto:${value}`}

package/src/widgets/FileField.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useCallback } from 'react';
-import { Button } from '@object-ui/components';
+import { Button, EmptyValue } from '@object-ui/components';
 import { Upload, X, File as FileIcon, ImageIcon } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -86,7 +86,7 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
   }, [accept, processFiles]);
 
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     
     const readonlyFiles = Array.isArray(value) ? value : [value];
     return (

package/src/widgets/FormulaField.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -9,18 +10,19 @@ export function FormulaField({ value, field, ...props }: FieldWidgetProps<any>)
   const formulaField = (field || (props as any).schema) as any;
   const returnType = formulaField?.return_type || 'text';
 
-  // Format based on return type
-  let displayValue = '-';
-  if (value != null) {
-    if (returnType === 'number' || returnType === 'currency') {
-      displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
-    } else if (returnType === 'boolean') {
-      displayValue = value ? 'Yes' : 'No';
-    } else if (returnType === 'date') {
-      displayValue = new Date(value).toLocaleDateString();
-    } else {
-      displayValue = String(value);
-    }
+  if (value == null) {
+    return <EmptyValue className={props.className} />;
+  }
+
+  let displayValue: string;
+  if (returnType === 'number' || returnType === 'currency') {
+    displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
+  } else if (returnType === 'boolean') {
+    displayValue = value ? 'Yes' : 'No';
+  } else if (returnType === 'date') {
+    displayValue = new Date(value).toLocaleDateString();
+  } else {
+    displayValue = String(value);
   }
 
   return (

package/src/widgets/GeolocationField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Button, Label } from '@object-ui/components';
+import { Input, Button, Label, EmptyValue } from '@object-ui/components';
 import { MapPin, Crosshair } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -56,7 +56,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
   };
 
   const formatLocation = (loc: GeolocationValue): string => {
-    if (!loc.latitude || !loc.longitude) return '-';
+    if (!loc.latitude || !loc.longitude) return '';
     return `${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}`;
   };
 
@@ -67,10 +67,11 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
   };
 
   if (readonly) {
+    const formatted = formatLocation(location);
     return (
       <div className="flex items-center gap-2">
         <MapPin className="w-4 h-4 text-muted-foreground" />
-        <span className="text-sm">{formatLocation(location)}</span>
+        {formatted ? <span className="text-sm">{formatted}</span> : <EmptyValue />}
         {location.latitude && location.longitude && (
           <Button
             type="button"

package/src/widgets/GridField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldWidgetProps } from './types';
-import { cn } from '@object-ui/components';
+import { cn, EmptyValue } from '@object-ui/components';
 
 /**
  * GridField - Sub-table/grid data display
@@ -12,7 +12,7 @@ export function GridField({ value, field, readonly, ...props }: FieldWidgetProps
   const columns = gridField?.columns || [];
 
   if (!value || !Array.isArray(value)) {
-    return <span className="text-sm text-muted-foreground">-</span>;
+    return <EmptyValue />;
   }
 
   if (readonly) {
@@ -45,7 +45,7 @@ export function GridField({ value, field, readonly, ...props }: FieldWidgetProps
               <tr key={rowIdx} className="hover:bg-muted/50 transition-colors">
                 {columns.map((col: any, colIdx: number) => (
                   <td key={colIdx} className="px-3 py-2 text-foreground">
-                    {row[col.name] != null ? String(row[col.name]) : '-'}
+                    {row[col.name] != null ? String(row[col.name]) : <EmptyValue />}
                   </td>
                 ))}
               </tr>

package/src/widgets/ImageField.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Button } from '@object-ui/components';
+import { Button, EmptyValue } from '@object-ui/components';
 import { Upload, X, Image as ImageIcon } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -14,7 +14,7 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
   const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
 
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     
     const images = Array.isArray(value) ? value : [value];
     return (

package/src/widgets/LocationField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -15,7 +15,7 @@ export function LocationField({ value, onChange, field, readonly, ...props }: Fi
     : '';
 
   if (readonly) {
-    return <span className="text-sm">{displayValue || '-'}</span>;
+    return <span className="text-sm">{displayValue || <EmptyValue />}</span>;
   }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

package/src/widgets/LookupField.tsx

@@ -1,12 +1,10 @@
 import React, { useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
-import { 
-  Button, 
+import { Button, 
   Input,
   Badge,
   Popover,
   PopoverTrigger,
-  PopoverContent,
-} from '@object-ui/components';
+  PopoverContent, EmptyValue } from '@object-ui/components';
 import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types';
@@ -337,7 +335,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
 
   if (readonly) {
     if (!selectedOptions.length) {
-      return <span className="text-sm">-</span>;
+      return <EmptyValue />;
     }
 
     if (multiple) {

package/src/widgets/NumberField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { NumberFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
@@ -9,7 +9,7 @@ import { FieldWidgetProps } from './types';
  */
 export function NumberField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>) {
   if (readonly) {
-    return <span className="text-sm">{value ?? '-'}</span>;
+    return value == null ? <EmptyValue /> : <span className="text-sm">{value}</span>;
   }
 
   const numberField = (field || (props as any).schema) as NumberFieldMetadata;

package/src/widgets/ObjectField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Textarea, cn } from '@object-ui/components';
+import { Textarea, cn, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -42,7 +42,7 @@ export function ObjectField({ value, onChange, field, readonly, ...props }: Fiel
   }, [value, jsonString]);
 
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     return (
       <pre className={cn("text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-auto max-h-40", props.className)}>
         {JSON.stringify(value, null, 2)}

package/src/widgets/PercentField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Slider } from '@object-ui/components';
+import { Input, Slider, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -12,7 +12,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
   const precision = percentField?.precision ?? 2;
 
   if (readonly) {
-    if (value == null) return <span className="text-sm">-</span>;
+    if (value == null) return <EmptyValue />;
     return (
       <span className="text-sm font-medium tabular-nums">
         {(value * 100).toFixed(precision)}%

package/src/widgets/PhoneField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -9,7 +9,7 @@ import { FieldWidgetProps } from './types';
 export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
   const config = field || (props as any).schema;
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     return (
       <a 
         href={`tel:${value}`}

package/src/widgets/QRCodeField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Button } from '@object-ui/components';
+import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -27,7 +27,7 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
   if (readonly) {
     return (
       <div className="flex items-center gap-3">
-        <span className="text-sm flex-1 truncate">{value || '-'}</span>
+        <span className="text-sm flex-1 truncate">{value || <EmptyValue />}</span>
         {value && (
           <Button
             type="button"

package/src/widgets/RichTextField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Textarea } from '@object-ui/components';
+import { Textarea, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -13,7 +13,7 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
       <div 
         className="text-sm prose prose-sm max-w-none"
       >
-        {value || '-'}
+        {value || <EmptyValue />}
       </div>
     );
   }

package/src/widgets/SelectField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { 
-  Select, 
-  SelectContent, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  EmptyValue,
 } from '@object-ui/components';
 import { SelectFieldMetadata } from '@object-ui/types';
 import { useFieldTranslation } from './useFieldTranslation';
@@ -21,7 +22,8 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
 
   if (readonly) {
     const option = options.find((o) => o.value === value);
-    return <span className="text-sm">{option?.label || value || '-'}</span>;
+    const display = option?.label || value;
+    return display ? <span className="text-sm">{display}</span> : <EmptyValue />;
   }
 
   return (

package/src/widgets/SummaryField.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -9,16 +10,17 @@ export function SummaryField({ value, field, ...props }: FieldWidgetProps<any>)
   const summaryField = (field || (props as any).schema) as any;
   const summaryType = summaryField?.summary_type || 'count';
 
-  // Format based on aggregation type
-  let displayValue = '-';
-  if (value != null) {
-    if (summaryType === 'count') {
-      displayValue = String(value);
-    } else if (['sum', 'avg', 'min', 'max'].includes(summaryType)) {
-      displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
-    } else {
-      displayValue = String(value);
-    }
+  if (value == null) {
+    return <EmptyValue className={props.className} />;
+  }
+
+  let displayValue: string;
+  if (summaryType === 'count') {
+    displayValue = String(value);
+  } else if (['sum', 'avg', 'min', 'max'].includes(summaryType)) {
+    displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
+  } else {
+    displayValue = String(value);
   }
 
   return (

package/src/widgets/TextAreaField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Textarea } from '@object-ui/components';
+import { Textarea, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -10,7 +10,7 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
   if (readonly) {
     return (
       <div className="text-sm whitespace-pre-wrap">
-        {value || '-'}
+        {value || <EmptyValue />}
       </div>
     );
   }

package/src/widgets/TextField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Textarea } from '@object-ui/components';
+import { Input, Textarea, EmptyValue } from '@object-ui/components';
 import { TextareaFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
@@ -11,7 +11,7 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
   const fieldData = field || (props as any).schema;
 
   if (readonly) {
-    return <span className="text-sm">{value || '-'}</span>;
+    return <span className="text-sm">{value || <EmptyValue />}</span>;
   }
 
   // Cast for rows property

package/src/widgets/TimeField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -8,7 +8,7 @@ import { FieldWidgetProps } from './types';
  */
 export function TimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
   if (readonly) {
-    return <span className="text-sm">{value || '-'}</span>;
+    return <span className="text-sm">{value || <EmptyValue />}</span>;
   }
 
   // Filter out non-DOM props

package/src/widgets/UrlField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@object-ui/components';
+import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -9,7 +9,7 @@ import { FieldWidgetProps } from './types';
 export function UrlField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
   const config = field || (props as any).schema;
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     
     // Validate URL to prevent javascript: or data: URLs
     const isValidUrl = value.startsWith('http://') || value.startsWith('https://');

package/src/widgets/UserField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, AvatarFallback, Badge } from '@object-ui/components';
+import { Avatar, AvatarFallback, Badge, EmptyValue } from '@object-ui/components';
 import { X } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -12,7 +12,7 @@ export function UserField({ value, onChange, field, readonly, ...props }: FieldW
   const multiple = userField?.multiple || false;
 
   if (readonly) {
-    if (!value) return <span className="text-sm">-</span>;
+    if (!value) return <EmptyValue />;
     
     const users = Array.isArray(value) ? value : [value];
     return (