@object-ui/fields 6.2.3 → 7.1.0

package/dist/widgets/recentLookups.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Recently-used lookup memory.
+ *
+ * Mainstream record pickers (Salesforce, Dataverse, SAP, ServiceNow) surface
+ * the user's recently-picked records the moment a lookup is focused — before
+ * any typing. We approximate that with a small per-object ring of the last few
+ * selected record ids, kept in localStorage (no backend dependency). When a
+ * recent-items API later exists, this module is the single seam to swap.
+ */
+/** Most-recent-first list of record ids previously chosen for `objectName`. */
+export declare function getRecentLookupIds(objectName: string): Array<string | number>;
+/** Record that `id` was just chosen for `objectName` (moves it to the front). */
+export declare function pushRecentLookupId(objectName: string, id: string | number | null | undefined): void;

package/dist/widgets/recentLookups.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{packages/fields/src/widgets → widgets}/types.d.ts

@@ -1,4 +1,4 @@
-import { FieldMetadata } from '../../../types/src';
+import { FieldMetadata } from '@object-ui/types';
 export type FieldWidgetProps<T = any> = {
     value: T;
     onChange: (val: T) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "6.2.3",
+  "version": "7.1.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -25,26 +25,29 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.21.0",
+    "react-markdown": "^10.1.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
-    "@object-ui/components": "6.2.3",
-    "@object-ui/core": "6.2.3",
-    "@object-ui/i18n": "6.2.3",
-    "@object-ui/providers": "6.2.3",
-    "@object-ui/react": "6.2.3",
-    "@object-ui/types": "6.2.3"
+    "@object-ui/components": "7.1.0",
+    "@object-ui/core": "7.1.0",
+    "@object-ui/i18n": "7.1.0",
+    "@object-ui/providers": "7.1.0",
+    "@object-ui/react": "7.1.0",
+    "@object-ui/types": "7.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.15",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14",
-    "vite-plugin-dts": "^5.0.1"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/__tests__/registry-collision.test.ts

@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+/**
+ * Registry collision guard.
+ *
+ * `@object-ui/components` registers display widgets (`text`, `image`,
+ * `avatar`, `html`, `grid`) under their bare names. `@object-ui/fields`
+ * registers form-input widgets that — by name — collide with those.
+ *
+ * The fix: field registrations for these 5 types pass `skipFallback: true`,
+ * so the bare lookup keeps returning the display widget while the field
+ * input is still reachable via the `field:<type>` namespace.
+ *
+ * Regression contract:
+ *   1. `FIELD_TYPES_SKIP_FALLBACK` must contain every colliding name.
+ *   2. After `registerAllFields()`, bare lookups must NOT resolve to a
+ *      field renderer for any of those names.
+ *   3. The `field:<type>` namespaced lookup must still work, so form
+ *      schemas using `{ type: 'text' }` still find an input renderer
+ *      when explicitly requested.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Importing the fields entry runs `registerAllFields()` at module load.
+// Importing the components entry runs display-widget registration the
+// same way. Both must be loaded before we inspect the registry.
+import '@object-ui/components';
+import { registerAllFields } from '../index';
+
+const COLLIDING_TYPES = ['text', 'html', 'image', 'avatar', 'grid'] as const;
+
+describe('registry collision (fields ↔ components)', () => {
+  beforeAll(() => {
+    // Defensive: in case the auto-register at import time hasn't run yet
+    // under the test runner's module isolation.
+    registerAllFields();
+  });
+
+  it.each(COLLIDING_TYPES)(
+    'bare "%s" lookup is NOT clobbered by the field renderer',
+    (type) => {
+      // The bare lookup must resolve, and it must resolve to a display widget
+      // (or a FallbackComponent / null) — never to the lazy field renderer.
+      // The field renderer is a React.lazy() result; the display widget is a
+      // plain function component. We don't pin to a specific identity, but we
+      // DO pin that whatever the bare lookup returns, the namespaced
+      // `field:<type>` lookup returns something different.
+      const bare = ComponentRegistry.get(type);
+      const namespaced = ComponentRegistry.get(`field:${type}`);
+
+      // Namespaced field renderer must exist for every colliding type —
+      // that's the whole point of keeping the field accessible.
+      expect(
+        namespaced,
+        `field:${type} must be registered so forms can still use it`,
+      ).toBeTruthy();
+
+      // The bare and namespaced renderers must NOT be identical. If they
+      // are, it means the field renderer wrote to the bare fallback and
+      // would render an empty <input> instead of the display widget.
+      expect(
+        bare,
+        `bare "${type}" must not be the same component as field:${type}`,
+      ).not.toBe(namespaced);
+    },
+  );
+
+  it('non-colliding field types DO populate the bare fallback', () => {
+    // Sanity check: a field type with no display-widget collision (e.g.
+    // `email`, `password`, `number`) must still register both at the
+    // namespaced AND bare keys, otherwise we'd silently break forms.
+    for (const type of ['email', 'password', 'number', 'date', 'select']) {
+      expect(
+        ComponentRegistry.get(`field:${type}`),
+        `field:${type} must be registered`,
+      ).toBeTruthy();
+      expect(
+        ComponentRegistry.get(type),
+        `bare "${type}" must also be reachable (no collision)`,
+      ).toBeTruthy();
+    }
+  });
+});

package/src/__tests__/resolveFieldCurrency.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { resolveFieldCurrency } from '../index';
+
+describe('resolveFieldCurrency', () => {
+  it('prefers the field explicit currency over everything', () => {
+    expect(resolveFieldCurrency({ currency: 'JPY', currencyConfig: { defaultCurrency: 'EUR' } }, 'USD')).toBe('JPY');
+  });
+  it('falls back to currencyConfig.defaultCurrency, then legacy defaultCurrency', () => {
+    expect(resolveFieldCurrency({ currencyConfig: { defaultCurrency: 'EUR' } }, 'USD')).toBe('EUR');
+    expect(resolveFieldCurrency({ defaultCurrency: 'GBP' } as any, 'USD')).toBe('GBP');
+  });
+  it('falls back to the tenant default when the field omits its own', () => {
+    expect(resolveFieldCurrency({}, 'CNY')).toBe('CNY');
+    expect(resolveFieldCurrency(null, 'CNY')).toBe('CNY');
+  });
+  it('returns undefined when nothing is known (→ renderer shows a plain number)', () => {
+    expect(resolveFieldCurrency({})).toBeUndefined();
+    expect(resolveFieldCurrency(undefined, undefined)).toBeUndefined();
+  });
+});

package/src/coerce-safe-value.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { coerceToSafeValue } from './index';
+
+describe('coerceToSafeValue — reference / lookup values', () => {
+  it('extracts a label from a JSON-string reference (unresolved external-id ref)', () => {
+    // Regression: a master_detail/lookup value can arrive as a JSON-encoded
+    // string; it must render a label, not raw '{"externalId":"..."}'.
+    expect(coerceToSafeValue('{"externalId":"Website Relaunch"}')).toBe('Website Relaunch');
+  });
+
+  it('extracts a label from a reference object, name > label > externalId > id', () => {
+    expect(coerceToSafeValue({ externalId: 'X' })).toBe('X');
+    expect(coerceToSafeValue({ name: 'N', externalId: 'X' })).toBe('N');
+    expect(coerceToSafeValue({ label: 'L', externalId: 'X' })).toBe('L');
+    expect(coerceToSafeValue({ id: 'id1' })).toBe('id1');
+  });
+
+  it('handles a JSON-string array of references', () => {
+    expect(coerceToSafeValue('[{"name":"A"},{"externalId":"B"}]')).toBe('A, B');
+  });
+
+  it('leaves plain strings and non-JSON-looking strings untouched', () => {
+    expect(coerceToSafeValue('Website Relaunch')).toBe('Website Relaunch');
+    expect(coerceToSafeValue('{not valid json')).toBe('{not valid json');
+    expect(coerceToSafeValue('hello')).toBe('hello');
+  });
+
+  it('passes through primitives and null/undefined', () => {
+    expect(coerceToSafeValue(42)).toBe(42);
+    expect(coerceToSafeValue(true)).toBe(true);
+    expect(coerceToSafeValue(null)).toBe(null);
+    expect(coerceToSafeValue(undefined)).toBe(undefined);
+  });
+});

package/src/complex-widgets.test.tsx

@@ -84,6 +84,7 @@ describe('Complex & Relationship Widgets', () => {
 
         beforeEach(() => {
             vi.clearAllMocks();
+            try { localStorage.clear(); } catch { /* jsdom */ }
         });
 
         it('fetches data from DataSource when dialog opens', async () => {
@@ -312,6 +313,53 @@ describe('Complex & Relationship Widgets', () => {
             expect(onCreateNew).toHaveBeenCalledWith('');
         });
 
+        it('quick-creates via dataSource.create when allow_create is set', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            mockDataSource.create.mockResolvedValue({ id: 'new-1', name: 'Acme' });
+            const onChange = vi.fn();
+            const field = { ...dynamicField, allow_create: true } as any;
+
+            render(<LookupField {...dynamicProps} field={field} 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: 'Acme' } });
+            });
+
+            const createBtn = await screen.findByText('Create new "Acme"');
+            await act(async () => {
+                fireEvent.click(createBtn);
+            });
+
+            await waitFor(() => {
+                expect(mockDataSource.create).toHaveBeenCalledWith('customers', { name: 'Acme' });
+            });
+            await waitFor(() => {
+                expect(onChange).toHaveBeenCalledWith('new-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 });
+            mockDataSource.findOne.mockResolvedValue({ id: 'r1', name: 'Recent Co' });
+
+            render(<LookupField {...dynamicProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByRole('button', { name: /Select/i }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText('Recently used')).toBeInTheDocument();
+                expect(screen.getByText('Recent Co')).toBeInTheDocument();
+            });
+        });
+
         it('navigates options with arrow keys and selects with Enter', async () => {
             const onChange = vi.fn();
             mockDataSource.find.mockResolvedValue({
@@ -522,8 +570,8 @@ describe('Complex & Relationship Widgets', () => {
 
     describe('GridField', () => {
         const columns = [
-            { name: 'name', label: 'Name' },
-            { name: 'age', label: 'Age' }
+            { field: 'name', label: 'Name' },
+            { field: 'age', label: 'Age', type: 'number' }
         ];
         const data = [
             { name: 'Alice', age: 30 },
@@ -534,17 +582,20 @@ describe('Complex & Relationship Widgets', () => {
             field: { ...mockField, columns }
         };
 
-        it('renders row count in readonly', () => {
+        it('renders the rows as text in readonly mode', () => {
             render(<GridField {...gridProps} readonly value={data} />);
-            expect(screen.getByText('2 rows')).toBeInTheDocument();
+            expect(screen.getByText('Alice')).toBeInTheDocument();
+            expect(screen.getByText('Bob')).toBeInTheDocument();
+            expect(screen.getByText('30')).toBeInTheDocument();
         });
 
-        it('renders table with data in edit mode (readonly view)', () => {
+        it('renders an editable table with values in edit mode', () => {
              render(<GridField {...gridProps} value={data} />);
              expect(screen.getByRole('table')).toBeInTheDocument();
              expect(screen.getByText('Name')).toBeInTheDocument();
-             expect(screen.getByText('Alice')).toBeInTheDocument();
-             expect(screen.getByText('30')).toBeInTheDocument();
+             // edit mode renders inputs whose values are the row data
+             expect(screen.getByDisplayValue('Alice')).toBeInTheDocument();
+             expect(screen.getByDisplayValue('30')).toBeInTheDocument();
         });
     });
 

package/src/currency.ts

@@ -0,0 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * Licensed under the MIT license found in the LICENSE file.
+ */
+
+/**
+ * `resolveFieldCurrency` now lives in `@object-ui/i18n` (co-located with
+ * `useLocalization`, which supplies the tenant default). This module re-exports
+ * it so the long-standing `@object-ui/fields` import path keeps working for
+ * every field/cell renderer that already depends on it.
+ */
+export { resolveFieldCurrency } from '@object-ui/i18n';

package/src/field-type-coverage.test.ts

@@ -0,0 +1,65 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * Regression guard for the field-type → renderer registries. These mappings
+ * regressed once already: ~25 specialized field types silently fell back to a
+ * plain text input (form) and the raw text cell renderer (read), because the
+ * mapping tables were incomplete. This test locks them in so a dropped entry
+ * fails CI instead of shipping a broken widget.
+ */
+import { describe, it, expect } from 'vitest';
+import { mapFieldTypeToFormType, getCellRenderer, TextCellRenderer } from './index';
+
+/**
+ * Field types that MUST resolve to a dedicated form widget — never the
+ * `field:text` fallback. (Plain text-ish types like text/textarea are
+ * intentionally excluded.)
+ */
+const FORM_WIDGET_TYPES = [
+  'textarea', 'email', 'url', 'phone', 'password', 'secret',
+  'markdown', 'html', 'richtext',
+  'number', 'currency', 'percent', 'slider', 'progress', 'rating',
+  'date', 'datetime', 'time',
+  'boolean', 'toggle',
+  'select', 'multiselect', 'radio', 'checkboxes', 'tags',
+  'lookup', 'master_detail', 'tree',
+  'file', 'image', 'avatar', 'video', 'audio', 'signature',
+  'location', 'geolocation', 'address', 'color', 'code', 'json', 'qrcode', 'vector',
+  'object', 'composite', 'record', 'repeater',
+  'formula', 'summary', 'auto_number',
+];
+
+/**
+ * Field types that MUST resolve to a dedicated read/cell renderer — never the
+ * generic text cell renderer. (markdown/html/richtext render formatted;
+ * code/qrcode/time legitimately stay textual and are excluded.)
+ */
+const CELL_RENDERER_TYPES = [
+  'email', 'url', 'phone', 'number', 'currency', 'percent', 'progress',
+  'boolean', 'toggle', 'date', 'datetime',
+  'select', 'multiselect', 'radio', 'checkboxes', 'tags',
+  'lookup', 'master_detail', 'tree',
+  'file', 'video', 'audio', 'image', 'avatar', 'signature',
+  'markdown', 'html', 'richtext',
+  'location', 'geolocation', 'address', 'color', 'json',
+  'formula', 'summary', 'user', 'owner',
+];
+
+describe('field-type renderer coverage (regression guard)', () => {
+  it.each(FORM_WIDGET_TYPES)('maps "%s" to a dedicated form widget (not field:text)', (type) => {
+    const widget = mapFieldTypeToFormType(type);
+    expect(widget).toMatch(/^field:/);
+    expect(widget).not.toBe('field:text');
+  });
+
+  it.each(CELL_RENDERER_TYPES)('resolves "%s" to a dedicated cell renderer (not TextCellRenderer)', (type) => {
+    const renderer = getCellRenderer(type);
+    expect(renderer).toBeTypeOf('function');
+    expect(renderer).not.toBe(TextCellRenderer);
+  });
+
+  it('falls back to field:text for unknown types', () => {
+    expect(mapFieldTypeToFormType('something-unknown')).toBe('field:text');
+  });
+});