@object-ui/fields 11.2.0 → 11.4.0

package/src/__tests__/NumberCellRenderer.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NumberCellRenderer } from '../index';
+
+const renderNumber = (value: unknown, field: Record<string, unknown> = {}) =>
+  render(<NumberCellRenderer value={value as any} field={{ type: 'number', ...field } as any} />);
+
+describe('NumberCellRenderer', () => {
+  it('does not pad trailing zeros using `precision` (total digits, not decimal places)', () => {
+    // Regression: a decimal(10, 0) column exposes precision: 10, which used to
+    // render `1` as "1.0000000000".
+    renderNumber(1, { precision: 10 });
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('renders an integer without decimals when no scale is declared', () => {
+    renderNumber(16);
+    expect(screen.getByText('16')).toBeInTheDocument();
+  });
+
+  it('preserves the value\'s natural decimals when no scale is declared', () => {
+    renderNumber(16.5);
+    expect(screen.getByText('16.5')).toBeInTheDocument();
+  });
+
+  it('pads to a fixed number of decimals when `scale` is declared', () => {
+    renderNumber(16, { scale: 2 });
+    expect(screen.getByText('16.00')).toBeInTheDocument();
+  });
+
+  it('honours a scale of 3 with zero padding', () => {
+    renderNumber(3.14, { scale: 3 });
+    expect(screen.getByText('3.140')).toBeInTheDocument();
+  });
+
+  it('rounds to the declared scale', () => {
+    renderNumber(3.14159, { scale: 2 });
+    expect(screen.getByText('3.14')).toBeInTheDocument();
+  });
+
+  it('treats scale: 0 as an integer display', () => {
+    renderNumber(2, { scale: 0 });
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('renders an empty indicator for nullish values', () => {
+    const { container } = renderNumber(null);
+    expect(container.textContent).not.toContain('0');
+  });
+});

package/src/__tests__/lookupCellReferenceKey.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * Regression: LookupCellRenderer must resolve a bare foreign-key id to a
+ * display name when the field metadata carries the ObjectStack `reference`
+ * key (as produced by `Field.lookup('...')` in @objectstack/spec) — not only
+ * the objectui `reference_to` alias.
+ *
+ * Real-world symptom (framework app-showcase): inline-edit a lookup cell, pick
+ * a record, click another row → the cell showed a muted "—" forever because
+ * the just-picked opaque id could not be resolved. Every other reader in the
+ * codebase (LookupField, UserField, DetailSection, RelatedList, …) already
+ * accepts `reference_to || reference`; this read cell used to read only
+ * `reference_to`.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+import { LookupCellRenderer } from '../index';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+// A ULID-style id: `isLikelyOpaqueId` returns true for it, so the OLD code
+// (which failed to resolve) would fall back to the muted "—" placeholder.
+const OPAQUE_ID = '01ARZ3NDEKTSV4RRFFQ69G5FAV';
+
+function makeDataSource() {
+  const findOne = vi.fn(async (object: string, id: string) => {
+    if (object === 'showcase_account' && id === OPAQUE_ID) {
+      return { id, name: 'Globex' };
+    }
+    return null;
+  });
+  return { findOne, find: vi.fn() } as any;
+}
+
+describe('LookupCellRenderer — reference key resolution', () => {
+  it('resolves an opaque id to a name via the `reference` key (not just reference_to)', async () => {
+    const ds = makeDataSource();
+    render(
+      <SchemaRendererProvider dataSource={ds}>
+        <LookupCellRenderer
+          value={OPAQUE_ID}
+          // ObjectStack convention: the lookup target lives under `reference`.
+          field={{ type: 'lookup', reference: 'showcase_account' } as any}
+        />
+      </SchemaRendererProvider>,
+    );
+
+    // The related record's display name must appear…
+    await waitFor(() => {
+      expect(screen.getByText('Globex')).toBeInTheDocument();
+    });
+    // …and the muted placeholder must NOT be what the user sees.
+    expect(screen.queryByText('—')).not.toBeInTheDocument();
+    expect(ds.findOne).toHaveBeenCalledWith('showcase_account', OPAQUE_ID);
+  });
+});

package/src/complex-widgets.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { LookupField } from './widgets/LookupField';
+import { ActionProvider } from '@object-ui/react';
+import { FieldEditWidget } from './FieldEditWidget';
 import { MasterDetailField } from './widgets/MasterDetailField';
 import { GridField } from './widgets/GridField';
 import { FileField } from './widgets/FileField';
@@ -343,6 +345,85 @@ describe('Complex & Relationship Widgets', () => {
             });
         });
 
+        it('defaults inline-create ON for a user-facing relation (no allow_create needed)', async () => {
+            // dynamicField.reference_to === 'customers' (user-facing) with NO
+            // allow_create flag → the capability is ON by default (standard).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            mockDataSource.create.mockResolvedValue({ id: 'new-2', name: 'Zeta' });
+            const onChange = vi.fn();
+
+            render(<LookupField {...dynamicProps} onChange={onChange} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Zeta' } }); });
+
+            expect(await screen.findByText('Create new "Zeta"')).toBeInTheDocument();
+            // No ActionProvider in scope → the create falls back to a direct
+            // dataSource.create (the modal-open path is exercised in the E2E).
+            await act(async () => { fireEvent.click(screen.getByText('Create new "Zeta"')); });
+            await waitFor(() => { expect(mockDataSource.create).toHaveBeenCalledWith('customers', { name: 'Zeta' }); });
+        });
+
+        it('does NOT default inline-create for a system / user-directory reference', async () => {
+            // A picker into the platform user directory must not offer "+ create"
+            // (those rows are org members, not inline-created from a field).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            const field = { ...dynamicField, reference_to: 'sys_user' } as any;
+
+            render(<LookupField {...dynamicProps} field={field} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Somebody' } }); });
+
+            await waitFor(() => { expect(screen.getByText('No options found')).toBeInTheDocument(); });
+            expect(screen.queryByText(/Create new/)).not.toBeInTheDocument();
+        });
+
+        it('honors an explicit allow_create:false opt-out on a user-facing relation', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            const field = { ...dynamicField, allow_create: false } as any;
+
+            render(<LookupField {...dynamicProps} field={field} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Nope' } }); });
+
+            await waitFor(() => { expect(screen.getByText('No options found')).toBeInTheDocument(); });
+            expect(screen.queryByText(/Create new/)).not.toBeInTheDocument();
+        });
+
+        it('under an ActionProvider, "+ create" opens the referenced object\'s create form (not a one-field create) and selects the result', async () => {
+            // The standard behaviour (founder ask): rather than blindly creating a
+            // record from the typed text, open the referenced object's OWN create
+            // form so the user fills every required field, then select what they
+            // made. Routed through the ActionProvider modal handler — the console
+            // wires one globally (ConsoleShell.GlobalCreateModalProvider).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            mockDataSource.create.mockClear();
+            const onChange = vi.fn();
+            // Stand-in for the console's global create-modal host: resolves with
+            // the record the user created in the opened form.
+            const onModal = vi.fn(async (_schema: any) => ({ success: true, reload: true, data: { id: 'bk-1', name: 'Deep Sea Mechanics' } }));
+
+            render(
+                <ActionProvider onModal={onModal}>
+                    <LookupField {...dynamicProps} onChange={onChange} />
+                </ActionProvider>
+            );
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Deep Sea Mechanics' } }); });
+            await act(async () => { fireEvent.click(await screen.findByText('Create new "Deep Sea Mechanics"')); });
+
+            // It opened the referenced object's CREATE FORM (modal), addressed by
+            // object name + create mode — NOT a silent one-field dataSource.create.
+            await waitFor(() => { expect(onModal).toHaveBeenCalled(); });
+            expect(onModal.mock.calls[0][0]).toMatchObject({ objectName: 'customers', mode: 'create' });
+            expect(mockDataSource.create).not.toHaveBeenCalled();
+            // The record the user created in the form is selected back into the field.
+            await waitFor(() => { expect(onChange).toHaveBeenCalledWith('bk-1'); });
+        });
+
         it('shows a recently-used section on empty focus', async () => {
             localStorage.setItem('objectui:lookup:recent:customers', JSON.stringify(['r1']));
             mockDataSource.find.mockResolvedValue({ data: [{ id: 'a', name: 'Acme Corp' }], total: 1 });
@@ -532,6 +613,166 @@ describe('Complex & Relationship Widgets', () => {
         });
     });
 
+    describe('LookupField — expanded-reference ($expand) value resolution (#2125)', () => {
+        // The data grid requests `$expand` for visible reference columns, so a
+        // lookup cell's value arrives as the related record OBJECT ({ id, name }),
+        // not a bare id. The inline editor must resolve that to the record's name —
+        // like the read cell (LookupCellRenderer) — instead of the "Select…"
+        // placeholder. Regression test for #2125.
+        const mockDataSource = {
+            find: vi.fn(),
+            findOne: vi.fn(),
+            create: vi.fn(),
+            update: vi.fn(),
+            delete: vi.fn(),
+        };
+
+        beforeEach(() => {
+            vi.clearAllMocks();
+            try { localStorage.clear(); } catch { /* jsdom */ }
+        });
+
+        it('resolves an expanded-object value into the record name (compact trigger) without a bogus fetch', () => {
+            render(
+                <LookupField
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+
+            // The name resolves directly from the expanded object — shown in the
+            // compact trigger, never the placeholder.
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+
+            // Must never fetch by passing the whole object as an id.
+            expect(mockDataSource.findOne).not.toHaveBeenCalled();
+            expect(mockDataSource.find).not.toHaveBeenCalled();
+        });
+
+        it('resolves an expanded-object value in full (badge) mode', () => {
+            render(
+                <LookupField
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                />
+            );
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+        });
+
+        it('still hydrates a bare-id value via findOne (existing path preserved)', async () => {
+            mockDataSource.findOne.mockResolvedValue({ id: 'a1', name: 'Acme Corp' });
+            render(
+                <LookupField
+                    value="a1"
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+            await waitFor(() => {
+                expect(mockDataSource.findOne).toHaveBeenCalledWith('showcase_account', 'a1');
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+            });
+        });
+
+        it('FieldEditWidget renders a lookup cell compact and resolves the expanded object', () => {
+            // Proves FieldEditWidget forwards `compact` to the relational widget, so
+            // the grid cell shows the record name in the trigger (single line).
+            render(
+                <FieldEditWidget
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+        });
+    });
+
+    describe('LookupField — inline value-shape alignment with the read cell', () => {
+        // Rounds out #2125: user/owner inline editing, JSON-encoded external-id
+        // reference values, and String()-tolerant id matching — so the inline
+        // editor resolves every value shape the read cell (LookupCellRenderer)
+        // does, instead of falling back to the "Select…" placeholder.
+        const mockDataSource = {
+            find: vi.fn(),
+            findOne: vi.fn(),
+            create: vi.fn(),
+            update: vi.fn(),
+            delete: vi.fn(),
+        };
+
+        beforeEach(() => {
+            vi.clearAllMocks();
+            try { localStorage.clear(); } catch { /* jsdom */ }
+        });
+
+        it('user field resolves an expanded-object value inline (via UserField → LookupField)', () => {
+            render(
+                <FieldEditWidget
+                    field={{ name: 'assignee', type: 'user' } as any}
+                    value={{ id: 'u1', name: 'Ada Lovelace' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
+        });
+
+        it('owner field resolves an expanded-object value inline', () => {
+            render(
+                <FieldEditWidget
+                    field={{ name: 'owner', type: 'owner' } as any}
+                    value={{ id: 'u2', name: 'Grace Hopper' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Grace Hopper')).toBeInTheDocument();
+        });
+
+        it('resolves a JSON-encoded external-id reference string without a bogus fetch', () => {
+            render(
+                <LookupField
+                    value={'{"externalId":"Website Relaunch"}'}
+                    onChange={vi.fn()}
+                    field={{ name: 'project', type: 'lookup', reference: 'projects' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+            // The external id is used as the display label (mirrors the read cell).
+            expect(screen.getByText('Website Relaunch')).toBeInTheDocument();
+            // Never fetch by passing the raw JSON string as an id.
+            expect(mockDataSource.findOne).not.toHaveBeenCalled();
+            expect(mockDataSource.find).not.toHaveBeenCalled();
+        });
+
+        it('resolves a numeric cell value against a string-keyed option (tolerant match)', () => {
+            render(
+                <LookupField
+                    value={1}
+                    onChange={vi.fn()}
+                    field={{ name: 'category', type: 'lookup', options: [{ value: '1', label: 'One' }, { value: '2', label: 'Two' }] } as any}
+                    readonly={false}
+                    compact
+                />
+            );
+            // Strict === misses (number 1 vs string '1'); the loose fallback resolves it.
+            expect(screen.getByText('One')).toBeInTheDocument();
+        });
+    });
+
     describe('MasterDetailField', () => {
         const items = [
             { id: '1', label: 'Item 1' },

package/src/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry, percentDisplayValue } from '@object-ui/core';
 import { useLocalization } from '@object-ui/i18n';
-import { Badge, Avatar, AvatarFallback, Button, Checkbox, EmptyValue, cn } from '@object-ui/components';
+import { Badge, Avatar, AvatarImage, AvatarFallback, Button, Checkbox, EmptyValue, cn } from '@object-ui/components';
 import { Check, X, Copy, Phone as PhoneIcon, MapPin } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/react';
 import { SchemaRendererContext as _SchemaRendererContext } from '@object-ui/react';
@@ -453,10 +453,21 @@ export function NumberCellRenderer({ value, field }: CellRendererProps): React.R
   
   const safe = coerceToSafeValue(value);
   const numField = field as any;
-  const precision = numField.precision ?? 0;
+  // Decimal places come from `scale` (the `s` in a `decimal(p, s)` column),
+  // NOT `precision` — `precision` is the TOTAL digit count (`p`), and reading
+  // it here padded every value out to that width (e.g. `1` from a
+  // decimal(10, 0) column rendered as "1.0000000000"). When `scale` is
+  // declared we pad to it so a fixed display is honoured (e.g. an amount with
+  // scale 2 → "16.00", a field with scale 3 → "3.140"); when it is absent we
+  // keep the minimum at 0 so trailing zeros are trimmed and only cap the
+  // maximum (20 = Intl max) to preserve the value's natural precision.
+  const scale = typeof numField.scale === 'number' ? numField.scale : undefined;
   const num = Number(safe);
   const formatted = !isNaN(num)
-    ? new Intl.NumberFormat('en-US', { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(num)
+    ? new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: scale ?? 0,
+        maximumFractionDigits: scale ?? 20,
+      }).format(num)
     : String(safe);
   
   return <span className="tabular-nums">{formatted}</span>;
@@ -1152,7 +1163,14 @@ export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElem
  *    Falls back to a muted placeholder while pending and on failure.
  */
 export function LookupCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  const referenceTo = (field as { reference_to?: string }).reference_to;
+  // ObjectStack object metadata uses `reference` for the lookup target while the
+  // objectui types call it `reference_to`. Every other reader (LookupField,
+  // UserField, DetailSection, RelatedList, …) accepts both; this read cell must
+  // too, or a picked/opaque id never resolves to a name and the cell shows the
+  // muted "—" placeholder forever (e.g. after inline-editing a lookup).
+  const referenceTo =
+    (field as { reference_to?: string }).reference_to ||
+    (field as { reference?: string }).reference;
 
   // Pick the FIRST primitive id we see (for arrays, only the first one is auto-resolved
   // to keep the cell cheap; multi-value lookups should generally be expanded server-side).
@@ -1316,6 +1334,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
               className="size-8 border-2 border-white"
               title={name}
             >
+              {user.image && <AvatarImage src={user.image} alt={name} />}
               <AvatarFallback className="bg-blue-500 text-white text-xs">
                 {initials}
               </AvatarFallback>
@@ -1339,6 +1358,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
   return (
     <div className="flex items-center gap-2">
       <Avatar className="size-8">
+        {value.image && <AvatarImage src={value.image} alt={name} />}
         <AvatarFallback className="bg-blue-500 text-white text-xs">
           {initials}
         </AvatarFallback>
@@ -1976,6 +1996,14 @@ const fieldWidgetMap: Record<string, () => Promise<{ default: React.ComponentTyp
   'qrcode': () => import('./widgets/QRCodeField').then(m => ({ default: m.QRCodeField })),
 };
 
+/**
+ * Every field type the form can render (the canonical list of supported types).
+ * Exported so inline editing can be checked against it — a form type must
+ * either have an inline editor or be explicitly excluded, see
+ * `INLINE_EXCLUDED_FIELD_TYPES` and its drift-guard test.
+ */
+export const FORM_FIELD_TYPES: readonly string[] = Object.freeze(Object.keys(fieldWidgetMap));
+
 /**
  * Register a specific field type lazily
  * @param fieldType - The field type to register (e.g., 'text', 'number')
@@ -2130,6 +2158,7 @@ export function registerFields() {
 }
 
 export * from './widgets/types';
+export * from './FieldEditWidget';
 export * from './widgets/TextField';
 export * from './widgets/NumberField';
 export * from './widgets/BooleanField';

package/src/widgets/GridField.test.tsx

@@ -185,6 +185,20 @@ describe('GridField / LineItemsField — editable line items', () => {
     expect(onChange).toHaveBeenCalledWith([{ description: 'B', amount: 2 }]);
   });
 
+  it('row action buttons are always visible in grid mode (not hover-revealed)', () => {
+    render(
+      <GridField
+        value={[{ description: 'A', amount: 1 }]}
+        onChange={() => {}}
+        field={field}
+      />,
+    );
+    // Grid-mode rows previously gated these behind opacity-0/group-hover, so they
+    // were invisible until hover and unreachable on touch — they must always show.
+    expect(screen.getByLabelText('Remove row').className).not.toContain('opacity-0');
+    expect(screen.getByTestId('line-items-duplicate-0').className).not.toContain('opacity-0');
+  });
+
   it('readonly mode shows values and a summed total footer', () => {
     render(
       <GridField

package/src/widgets/GridField.tsx

@@ -857,10 +857,11 @@ export function GridField({
                               type="button"
                               variant="ghost"
                               size="icon"
-                              className={cn(
-                                'h-8 w-8 text-muted-foreground hover:text-foreground',
-                                !isList && 'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100',
-                              )}
+                              // Always visible (not hover-revealed): row actions must be
+                              // discoverable and reachable on touch/coarse-pointer devices,
+                              // which have no hover. The action column width is reserved
+                              // regardless, so this adds no layout shift.
+                              className="h-8 w-8 text-muted-foreground hover:text-foreground"
                               aria-label="Duplicate row"
                               title="Duplicate line"
                               data-testid={`line-items-duplicate-${rowIdx}`}
@@ -875,10 +876,8 @@ export function GridField({
                               type="button"
                               variant="ghost"
                               size="icon"
-                              className={cn(
-                                'h-8 w-8 text-muted-foreground hover:text-destructive',
-                                !isList && 'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100',
-                              )}
+                              // Always visible — see the duplicate button above.
+                              className="h-8 w-8 text-muted-foreground hover:text-destructive"
                               aria-label="Remove row"
                               data-testid={`line-items-remove-${rowIdx}`}
                               onClick={() => removeRow(rowIdx)}