@object-ui/fields 3.1.2 → 3.1.4

package/src/complex-widgets.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { LookupField } from './widgets/LookupField';
 import { MasterDetailField } from './widgets/MasterDetailField';
 import { GridField } from './widgets/GridField';
@@ -60,6 +60,430 @@ describe('Complex & Relationship Widgets', () => {
         });
     });
 
+    describe('LookupField — Dynamic DataSource', () => {
+        const mockDataSource = {
+            find: vi.fn(),
+            findOne: vi.fn(),
+            create: vi.fn(),
+            update: vi.fn(),
+            delete: vi.fn(),
+        };
+
+        const dynamicField = {
+            ...mockField,
+            label: 'Customer',
+            reference_to: 'customers',
+            reference_field: 'name',
+        } as any;
+
+        const dynamicProps: FieldWidgetProps<any> = {
+            ...baseProps,
+            field: dynamicField,
+            dataSource: mockDataSource,
+        };
+
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
+
+        it('fetches data from DataSource when dialog opens', async () => {
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: '1', name: 'Acme Corp' },
+                    { id: '2', name: 'Beta Inc' },
+                ],
+                total: 2,
+            });
+
+            render(<LookupField {...dynamicProps} />);
+
+            // Open dialog
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledWith('customers', {
+                    $top: 50,
+                });
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+                expect(screen.getByText('Beta Inc')).toBeInTheDocument();
+            });
+        });
+
+        it('shows loading state while fetching', async () => {
+            // Make find never resolve during this test
+            mockDataSource.find.mockReturnValue(new Promise(() => {}));
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByRole('status')).toBeInTheDocument();
+                expect(screen.getByText('Loading…')).toBeInTheDocument();
+            });
+        });
+
+        it('shows error state with retry on fetch failure', async () => {
+            mockDataSource.find.mockRejectedValue(new Error('Network error'));
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByRole('alert')).toBeInTheDocument();
+                expect(screen.getByText('Network error')).toBeInTheDocument();
+                expect(screen.getByText('Retry')).toBeInTheDocument();
+            });
+
+            // Click retry
+            mockDataSource.find.mockResolvedValue({
+                data: [{ id: '1', name: 'Acme Corp' }],
+                total: 1,
+            });
+
+            await act(async () => {
+                fireEvent.click(screen.getByText('Retry'));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+            });
+        });
+
+        it('shows "No options found" when DataSource returns empty', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('No options found')).toBeInTheDocument();
+            });
+        });
+
+        it('sends $search param on search input', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            // Wait for initial load
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledTimes(1);
+            });
+
+            // Type in search
+            await act(async () => {
+                fireEvent.change(screen.getByPlaceholderText('Search...'), {
+                    target: { value: 'acme' },
+                });
+            });
+
+            // Wait for debounced search
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledWith('customers', {
+                    $top: 50,
+                    $search: 'acme',
+                });
+            }, { timeout: 500 });
+        });
+
+        it('selects a dynamically loaded option', async () => {
+            const onChange = vi.fn();
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: '1', name: 'Acme Corp' },
+                    { id: '2', name: 'Beta Inc' },
+                ],
+                total: 2,
+            });
+
+            render(<LookupField {...dynamicProps} onChange={onChange} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+            });
+
+            await act(async () => {
+                fireEvent.click(screen.getByText('Acme Corp'));
+            });
+
+            expect(onChange).toHaveBeenCalledWith('1');
+        });
+
+        it('falls back to static options when no DataSource', () => {
+            const staticField = {
+                ...mockField,
+                options: [
+                    { value: 's1', label: 'Static 1' },
+                    { value: 's2', label: 'Static 2' },
+                ],
+            } as any;
+            render(<LookupField {...baseProps} field={staticField} readonly value="s1" />);
+            expect(screen.getByText('Static 1')).toBeInTheDocument();
+        });
+
+        it('shows total count hint when more results available', async () => {
+            mockDataSource.find.mockResolvedValue({
+                data: Array.from({ length: 50 }, (_, i) => ({
+                    id: String(i),
+                    name: `Record ${i}`,
+                })),
+                total: 200,
+            });
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText(/Showing 50 of 200/)).toBeInTheDocument();
+            });
+        });
+
+        it('displays description field for options', async () => {
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: '1', name: 'Acme Corp', industry: 'Technology' },
+                    { id: '2', name: 'Beta Inc', industry: 'Finance' },
+                ],
+                total: 2,
+            });
+
+            const fieldWithDesc = {
+                ...dynamicField,
+                description_field: 'industry',
+            } as any;
+
+            render(<LookupField {...dynamicProps} field={fieldWithDesc} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+                expect(screen.getByText('Technology')).toBeInTheDocument();
+                expect(screen.getByText('Finance')).toBeInTheDocument();
+            });
+        });
+
+        it('shows create-new button when no results and onCreateNew is provided', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            const onCreateNew = vi.fn();
+
+            render(<LookupField {...dynamicProps} onCreateNew={onCreateNew} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('No options found')).toBeInTheDocument();
+                expect(screen.getByText('Create new')).toBeInTheDocument();
+            });
+
+            await act(async () => {
+                fireEvent.click(screen.getByText('Create new'));
+            });
+
+            expect(onCreateNew).toHaveBeenCalledWith('');
+        });
+
+        it('navigates options with arrow keys and selects with Enter', async () => {
+            const onChange = vi.fn();
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: '1', name: 'Alpha' },
+                    { id: '2', name: 'Beta' },
+                    { id: '3', name: 'Gamma' },
+                ],
+                total: 3,
+            });
+
+            render(<LookupField {...dynamicProps} onChange={onChange} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Alpha')).toBeInTheDocument();
+            });
+
+            const searchInput = screen.getByPlaceholderText('Search...');
+
+            // Arrow down twice: -1 → 0 (Alpha) → 1 (Beta)
+            await act(async () => {
+                fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            });
+            await act(async () => {
+                fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            });
+
+            // Press Enter to select
+            await act(async () => {
+                fireEvent.keyDown(searchInput, { key: 'Enter' });
+            });
+
+            expect(onChange).toHaveBeenCalledWith('2');
+        });
+
+        it('resolves reference_to from nested field.field (createFieldRenderer wrapper)', async () => {
+            // Simulates how createFieldRenderer wraps the field: the real metadata
+            // (reference_to, reference_field, etc.) is nested inside field.field.
+            const onChange = vi.fn();
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: 'o1', name: 'Order 001' },
+                    { id: 'o2', name: 'Order 002' },
+                ],
+                total: 2,
+            });
+
+            const wrappedField = {
+                name: 'order',
+                label: 'Order',
+                // In the wrapper, the actual objectSchema metadata is nested
+                field: {
+                    name: 'order',
+                    type: 'lookup',
+                    reference_to: 'orders',
+                    reference_field: 'name',
+                },
+                // dataSource lands at the wrapper level
+                dataSource: mockDataSource,
+            } as any;
+
+            render(
+                <LookupField
+                    value={null}
+                    onChange={onChange}
+                    field={wrappedField}
+                    readonly={false}
+                />
+            );
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledWith('orders', { $top: 50 });
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Order 001')).toBeInTheDocument();
+                expect(screen.getByText('Order 002')).toBeInTheDocument();
+            });
+        });
+
+        it('supports ObjectStack "reference" convention (not just "reference_to")', async () => {
+            // ObjectStack backend uses `reference` instead of `reference_to`
+            const onChange = vi.fn();
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: 'a1', name: 'Acme Corp' },
+                    { id: 'a2', name: 'Beta Inc' },
+                ],
+                total: 2,
+            });
+
+            const wrappedField = {
+                name: 'account',
+                label: 'Account',
+                field: {
+                    name: 'account',
+                    type: 'lookup',
+                    reference: 'account',  // ObjectStack convention
+                },
+                dataSource: mockDataSource,
+            } as any;
+
+            render(
+                <LookupField
+                    value={null}
+                    onChange={onChange}
+                    field={wrappedField}
+                    readonly={false}
+                />
+            );
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledWith('account', { $top: 50 });
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+                expect(screen.getByText('Beta Inc')).toBeInTheDocument();
+            });
+        });
+
+        it('supports flat "reference" field without wrapper nesting', async () => {
+            // When field metadata is flat (no field.field nesting)
+            const onChange = vi.fn();
+            mockDataSource.find.mockResolvedValue({
+                data: [
+                    { id: 'p1', name: 'Product A' },
+                ],
+                total: 1,
+            });
+
+            render(
+                <LookupField
+                    value={null}
+                    onChange={onChange}
+                    field={{
+                        name: 'product',
+                        label: 'Product',
+                        type: 'lookup',
+                        reference: 'products',  // ObjectStack convention, flat field
+                    } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                />
+            );
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(mockDataSource.find).toHaveBeenCalledWith('products', { $top: 50 });
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Product A')).toBeInTheDocument();
+            });
+        });
+    });
+
     describe('MasterDetailField', () => {
         const items = [
             { id: '1', label: 'Item 1' },

package/src/index.tsx

@@ -60,6 +60,39 @@ export interface CellRendererProps {
   onChange?: (value: any) => void;
 }
 
+/**
+ * Coerce a value to a safe primitive for rendering.
+ * Handles MongoDB wrapper types ($numberDecimal, $oid, $date), expanded
+ * reference objects, and arrays so that no raw object is ever passed as
+ * a React child — preventing React error #310.
+ */
+export function coerceToSafeValue(value: unknown): string | number | boolean | null | undefined {
+  if (value == null) return value as null | undefined;
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return value;
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (v != null && typeof v === 'object') {
+        const obj = v as Record<string, unknown>;
+        return String(obj.name || obj.label || obj.id || obj._id || '[Object]');
+      }
+      return String(v);
+    }).join(', ');
+  }
+  if (typeof value === 'object') {
+    const obj = value as Record<string, unknown>;
+    // MongoDB numeric wrapper: { $numberDecimal: "250000" }
+    if ('$numberDecimal' in obj) return Number(obj.$numberDecimal);
+    // MongoDB ObjectId wrapper: { $oid: "abc123" }
+    if ('$oid' in obj) return String(obj.$oid);
+    // MongoDB date wrapper: { $date: "2024-01-01T00:00:00Z" }
+    if ('$date' in obj) return String(obj.$date);
+    // Expanded reference / general object: extract name/label/id
+    return String(obj.name || obj.label || obj.id || obj._id || '[Object]');
+  }
+  return String(value);
+}
+
 /**
  * Format currency value
  */
@@ -192,7 +225,8 @@ export function formatDateTime(value: string | Date): string {
  * Text field cell renderer
  */
 export function TextCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  return <span className="truncate">{(value != null && value !== '') ? String(value) : '-'}</span>;
+  const safe = coerceToSafeValue(value);
+  return <span className="truncate">{(safe != null && safe !== '') ? String(safe) : '-'}</span>;
 }
 
 /**
@@ -201,11 +235,13 @@ export function TextCellRenderer({ value }: CellRendererProps): React.ReactEleme
 export function NumberCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) return <span className="text-muted-foreground">-</span>;
   
+  const safe = coerceToSafeValue(value);
   const numField = field as any;
   const precision = numField.precision ?? 0;
-  const formatted = typeof value === 'number'
-    ? new Intl.NumberFormat('en-US', { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(value)
-    : value;
+  const num = Number(safe);
+  const formatted = !isNaN(num)
+    ? new Intl.NumberFormat('en-US', { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(num)
+    : String(safe);
   
   return <span className="tabular-nums">{formatted}</span>;
 }
@@ -216,9 +252,11 @@ export function NumberCellRenderer({ value, field }: CellRendererProps): React.R
 export function CurrencyCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) return <span className="text-muted-foreground">-</span>;
   
+  const safe = coerceToSafeValue(value);
   const currencyField = field as any;
   const currency = currencyField.currency || 'USD';
-  const formatted = formatCurrency(Number(value), currency);
+  const num = Number(safe);
+  const formatted = !isNaN(num) ? formatCurrency(num, currency) : String(safe);
   
   return <span className="tabular-nums font-medium whitespace-nowrap">{formatted}</span>;
 }
@@ -232,9 +270,13 @@ const WHOLE_PERCENT_FIELD_PATTERN = /progress|completion/;
 export function PercentCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) return <span className="text-muted-foreground">-</span>;
   
+  const safe = coerceToSafeValue(value);
   const percentField = field as any;
   const precision = percentField.precision ?? 0;
-  const numValue = Number(value);
+  const numValue = Number(safe);
+  if (isNaN(numValue)) {
+    return <span className="tabular-nums whitespace-nowrap">{String(safe)}</span>;
+  }
   // Use field name to disambiguate 0-1 fraction vs 0-100 whole number:
   // Fields like "progress" or "completion" store values as 0-100, not 0-1
   const isWholePercentField = WHOLE_PERCENT_FIELD_PATTERN.test(field?.name?.toLowerCase() || '');
@@ -319,17 +361,18 @@ export function BooleanCellRenderer({ value, field }: CellRendererProps): React.
  */
 export function DateCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (!value) return <span className="text-muted-foreground">-</span>;
+  const safe = coerceToSafeValue(value);
   const dateField = field as any;
   const style = dateField.format || 'relative';
-  const formatted = formatDate(value, style);
+  const formatted = formatDate(safe as string | Date, style);
   
   // Determine if date is overdue (in the past)
-  const date = typeof value === 'string' ? new Date(value) : value;
+  const date = typeof safe === 'string' ? new Date(safe) : safe;
   const isValidDate = date instanceof Date && !isNaN(date.getTime());
   const startOfToday = new Date();
   startOfToday.setHours(0, 0, 0, 0);
   const isOverdue = isValidDate && date < startOfToday;
-  const isoString = isValidDate ? date.toISOString() : String(value);
+  const isoString = isValidDate ? date.toISOString() : String(safe);
   
   return (
     <span
@@ -346,8 +389,9 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
  */
 export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span className="text-muted-foreground">-</span>;
-  const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return <span className="text-muted-foreground">-</span>;
+  const safe = coerceToSafeValue(value);
+  const date = typeof safe === 'string' ? new Date(safe) : safe;
+  if (!(date instanceof Date) || isNaN(date.getTime())) return <span className="text-muted-foreground">-</span>;
 
   const datePart = date.toLocaleDateString(undefined, {
     month: 'numeric',
@@ -478,12 +522,13 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
 export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
   
+  const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
 
   const handleCopy = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    navigator.clipboard.writeText(String(value)).then(() => {
+    navigator.clipboard.writeText(safe).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }).catch(() => { /* clipboard not available */ });
@@ -497,10 +542,10 @@ export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElem
         asChild
       >
         <a
-          href={`mailto:${value}`}
+          href={`mailto:${safe}`}
           onClick={(e) => e.stopPropagation()}
         >
-          {value}
+          {safe}
         </a>
       </Button>
       <button
@@ -525,6 +570,7 @@ export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElem
 export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
   
+  const safe = String(coerceToSafeValue(value) ?? '');
   return (
     <Button
       variant="link"
@@ -532,12 +578,12 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
       asChild
     >
       <a
-        href={value}
+        href={safe}
         target="_blank"
         rel="noopener noreferrer"
         onClick={(e) => e.stopPropagation()}
       >
-        {value}
+        {safe}
       </a>
     </Button>
   );
@@ -549,12 +595,13 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
 export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
   
+  const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
 
   const handleCopy = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    navigator.clipboard.writeText(String(value)).then(() => {
+    navigator.clipboard.writeText(safe).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }).catch(() => { /* clipboard not available */ });
@@ -563,12 +610,12 @@ export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElem
   return (
     <span className="inline-flex items-center gap-1 group/phone">
       <a
-        href={`tel:${value}`}
+        href={`tel:${safe}`}
         className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
         onClick={(e) => e.stopPropagation()}
       >
         <PhoneIcon className="h-3 w-3" />
-        {value}
+        {safe}
       </a>
       <button
         type="button"
@@ -667,7 +714,7 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
         {value.map((item, idx) => {
           let label: string;
           if (item != null && typeof item === 'object') {
-            label = item.name || item.label || item._id || String(item);
+            label = item.name || item.label || item.id || item._id || String(item);
           } else {
             label = resolveLabel(item);
           }
@@ -685,7 +732,7 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
   }
   
   if (typeof value === 'object' && value !== null) {
-    const label = value.name || value.label || value._id || '[Object]';
+    const label = value.name || value.label || value.id || value._id || '[Object]';
     return <span className="truncate">{label}</span>;
   }
   
@@ -697,9 +744,10 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
  * Formula field cell renderer (read-only)
  */
 export function FormulaCellRenderer({ value }: CellRendererProps): React.ReactElement {
+  const safe = coerceToSafeValue(value);
   return (
     <span className="text-gray-700 font-mono text-sm">
-      {value != null ? String(value) : '-'}
+      {safe != null ? String(safe) : '-'}
     </span>
   );
 }
@@ -840,6 +888,11 @@ registerFieldRenderer('status', SelectCellRenderer);
 registerFieldRenderer('user', UserCellRenderer);
 registerFieldRenderer('owner', UserCellRenderer);
 
+// Register getCellRenderer in the bridge so RecordPickerDialog can access it
+// via LookupField without circular imports.
+import { setCellRendererResolver } from './widgets/_cell-renderer-bridge';
+setCellRendererResolver(getCellRenderer);
+
 
 
 /**
@@ -1279,6 +1332,7 @@ export * from './widgets/PasswordField';
 export * from './widgets/TextAreaField';
 export * from './widgets/RichTextField';
 export * from './widgets/LookupField';
+export * from './widgets/RecordPickerDialog';
 export * from './widgets/FileField';
 export * from './widgets/ImageField';
 export * from './widgets/LocationField';