@object-ui/fields 3.1.1 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -23,11 +23,11 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^0.576.0",
+    "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.1.1",
-    "@object-ui/core": "3.1.1",
-    "@object-ui/types": "3.1.1"
+    "@object-ui/components": "3.1.3",
+    "@object-ui/core": "3.1.3",
+    "@object-ui/types": "3.1.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/__tests__/cell-renderers.test.tsx

@@ -788,7 +788,7 @@ describe('LookupCellRenderer', () => {
   it('should render object name when value is an object', () => {
     render(
       <LookupCellRenderer
-        value={{ name: 'Acme Corp', _id: '123' }}
+        value={{ name: 'Acme Corp', id: '123' }}
         field={{ name: 'account', type: 'lookup' } as any}
       />
     );
@@ -798,17 +798,17 @@ describe('LookupCellRenderer', () => {
   it('should render object label when name is missing', () => {
     render(
       <LookupCellRenderer
-        value={{ label: 'Widget Co', _id: '456' }}
+        value={{ label: 'Widget Co', id: '456' }}
         field={{ name: 'account', type: 'lookup' } as any}
       />
     );
     expect(screen.getByText('Widget Co')).toBeInTheDocument();
   });
 
-  it('should render object _id as fallback', () => {
+  it('should render object id as fallback', () => {
     render(
       <LookupCellRenderer
-        value={{ _id: '789' }}
+        value={{ id: '789' }}
         field={{ name: 'account', type: 'lookup' } as any}
       />
     );
@@ -1041,3 +1041,132 @@ describe('PercentCellRenderer progress-type fields', () => {
     expect(bar).toHaveAttribute('aria-valuenow', '50');
   });
 });
+
+// =========================================================================
+// Object value safety (coerceToSafeValue) — prevents React error #310
+// =========================================================================
+import {
+  NumberCellRenderer,
+  CurrencyCellRenderer,
+  FormulaCellRenderer,
+  coerceToSafeValue,
+} from '../index';
+
+describe('coerceToSafeValue', () => {
+  it('should pass through primitives unchanged', () => {
+    expect(coerceToSafeValue('hello')).toBe('hello');
+    expect(coerceToSafeValue(42)).toBe(42);
+    expect(coerceToSafeValue(true)).toBe(true);
+    expect(coerceToSafeValue(null)).toBe(null);
+    expect(coerceToSafeValue(undefined)).toBe(undefined);
+  });
+
+  it('should extract number from MongoDB $numberDecimal', () => {
+    expect(coerceToSafeValue({ $numberDecimal: '250000' })).toBe(250000);
+  });
+
+  it('should extract string from MongoDB $oid', () => {
+    expect(coerceToSafeValue({ $oid: 'abc123' })).toBe('abc123');
+  });
+
+  it('should extract string from MongoDB $date', () => {
+    expect(coerceToSafeValue({ $date: '2024-01-01T00:00:00Z' })).toBe('2024-01-01T00:00:00Z');
+  });
+
+  it('should extract name from expanded reference object', () => {
+    expect(coerceToSafeValue({ id: 'x', name: 'Acme Corp' })).toBe('Acme Corp');
+  });
+
+  it('should extract label when name is not present', () => {
+    expect(coerceToSafeValue({ id: 'x', label: 'Active' })).toBe('Active');
+  });
+
+  it('should fall back to id when no name/label', () => {
+    expect(coerceToSafeValue({ id: 'abc123' })).toBe('abc123');
+  });
+
+  it('should handle arrays of primitives', () => {
+    expect(coerceToSafeValue(['a', 'b', 'c'])).toBe('a, b, c');
+  });
+
+  it('should handle arrays of objects', () => {
+    expect(coerceToSafeValue([{ name: 'Alice' }, { name: 'Bob' }])).toBe('Alice, Bob');
+  });
+
+  it('should convert Date to ISO string', () => {
+    const d = new Date('2024-06-15T12:00:00Z');
+    expect(coerceToSafeValue(d)).toBe('2024-06-15T12:00:00.000Z');
+  });
+});
+
+describe('NumberCellRenderer object safety', () => {
+  it('should handle MongoDB $numberDecimal without crashing', () => {
+    const { container } = render(
+      <NumberCellRenderer
+        value={{ $numberDecimal: '250000' }}
+        field={{ name: 'amount', type: 'number' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    expect(screen.getByText('250,000')).toBeInTheDocument();
+  });
+
+  it('should handle expanded reference object without crashing', () => {
+    const { container } = render(
+      <NumberCellRenderer
+        value={{ id: 'abc', name: 'Not a number' }}
+        field={{ name: 'amount', type: 'number' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // Should render the extracted name string, not crash
+    expect(screen.getByText('Not a number')).toBeInTheDocument();
+  });
+});
+
+describe('CurrencyCellRenderer object safety', () => {
+  it('should handle MongoDB $numberDecimal', () => {
+    const { container } = render(
+      <CurrencyCellRenderer
+        value={{ $numberDecimal: '5000' }}
+        field={{ name: 'price', type: 'currency', currency: 'USD' } as any}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    expect(screen.getByText(/5,000/)).toBeInTheDocument();
+  });
+});
+
+describe('TextCellRenderer object safety', () => {
+  it('should extract name from object instead of [object Object]', () => {
+    render(
+      <TextCellRenderer
+        value={{ id: 'abc', name: 'Acme Corp' }}
+        field={{ name: 'company', type: 'text' } as any}
+      />
+    );
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+
+  it('should handle arrays of objects', () => {
+    render(
+      <TextCellRenderer
+        value={[{ name: 'Alice' }, { name: 'Bob' }]}
+        field={{ name: 'contacts', type: 'text' } as any}
+      />
+    );
+    expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
+  });
+});
+
+describe('FormulaCellRenderer object safety', () => {
+  it('should extract value from MongoDB $numberDecimal', () => {
+    render(
+      <FormulaCellRenderer
+        value={{ $numberDecimal: '42.5' }}
+        field={{ name: 'calc', type: 'formula' } as any}
+      />
+    );
+    expect(screen.getByText('42.5')).toBeInTheDocument();
+  });
+});

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' },