@object-ui/fields 17.5.0 → 17.6.0

package/src/FieldEditWidget.test.ts

@@ -1,133 +0,0 @@
-/**
- * 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 { FieldType } from '@objectstack/spec/data';
-import {
-  FORM_FIELD_TYPES,
-  INLINE_EXCLUDED_FIELD_TYPES,
-  hasFieldEditWidget,
-  isInlineExcludedFieldType,
-  mapFieldTypeToFormType,
-} from './index';
-
-/**
- * A field type the form can render — either a direct widget-map key, or a spec
- * spelling that resolves onto one through the alias table (`secret` →
- * `field:password`, `autonumber` → `field:auto_number`, …).
- *
- * `FORM_FIELD_TYPES` alone is `Object.keys(fieldWidgetMap)`, which does NOT
- * include the alias-only spellings — see the note at index.tsx's
- * `resolveFormWidgetType`. Using it as the definition of "a real type" made the
- * staleness check below reject `secret`, a genuine spec field type the form
- * renders, purely because it arrives via an alias.
- */
-function isRenderableFormType(t: string): boolean {
-  // `text` is the alias table's fallback, so a non-`field:text` result means an
-  // explicit entry exists. `text` itself is a direct widget key, so it is
-  // already covered by the first clause and no real type is missed here.
-  return FORM_FIELD_TYPES.includes(t) || mapFieldTypeToFormType(t) !== 'field:text';
-}
-
-/**
- * Drift-guard: the inline cell editor reuses the form's field widgets, but the
- * two lists were hand-maintained separately and drifted — `lookup` (and other
- * relational types) had a perfectly good form widget yet fell back to a plain
- * text box inline, because nobody wired it up. This pins the contract: every
- * type the FORM can render must have an explicit inline decision — an editor or
- * a documented exclusion — so a new form widget can never again silently become
- * an editable text box (or a missing one) in the grid.
- */
-describe('inline editor ↔ form widget parity', () => {
-  it('every form field type either has an inline editor or is explicitly excluded', () => {
-    const undecided = FORM_FIELD_TYPES.filter(
-      (t) => !hasFieldEditWidget(t) && !INLINE_EXCLUDED_FIELD_TYPES.has(t),
-    );
-    // If this fails: a form widget type has no inline decision. Either add it to
-    // EDIT_WIDGETS (inline-editable) or to INLINE_EXCLUDED_FIELD_TYPES (with a
-    // reason) in FieldEditWidget.tsx.
-    expect(undecided).toEqual([]);
-  });
-
-  it('the exclusion set lists only real form types (no stale entries)', () => {
-    const stale = [...INLINE_EXCLUDED_FIELD_TYPES].filter((t) => !isRenderableFormType(t));
-    expect(stale).toEqual([]);
-  });
-
-  it('credential types are never inline-editable', () => {
-    // The grid's fallback for a type with no inline editor is a PLAIN TEXT input.
-    // Both of these are masked on read, so that input would show the mask as the
-    // value and write it straight back; `secret` also round-trips through an
-    // encrypted store (ADR-0100), so the cell holds an opaque ref, not the value.
-    for (const t of ['password', 'secret']) {
-      expect(hasFieldEditWidget(t), `${t} must not have an inline editor`).toBe(false);
-      expect(INLINE_EXCLUDED_FIELD_TYPES.has(t), `${t} must be explicitly excluded`).toBe(true);
-    }
-  });
-
-  it('relational fields use the standard picker inline (regression: lookup was a text box)', () => {
-    for (const t of ['lookup', 'master_detail', 'user', 'owner']) {
-      expect(hasFieldEditWidget(t)).toBe(true);
-    }
-  });
-
-  it('computed / binary form types are NOT inline-editable (excluded)', () => {
-    for (const t of ['formula', 'summary', 'auto_number', 'file', 'image']) {
-      expect(hasFieldEditWidget(t)).toBe(false);
-      expect(INLINE_EXCLUDED_FIELD_TYPES.has(t)).toBe(true);
-    }
-  });
-
-  it('structured-value types edit inline with their form widget (color/address/location/code/…)', () => {
-    for (const t of ['color', 'address', 'location', 'geolocation', 'code', 'qrcode']) {
-      expect(hasFieldEditWidget(t)).toBe(true);
-      expect(INLINE_EXCLUDED_FIELD_TYPES.has(t)).toBe(false);
-    }
-  });
-});
-
-/**
- * #2942 — the guard above iterates FORM_FIELD_TYPES (the form widget-map
- * keys), so a SPEC field type that reaches the form only through the alias
- * table could sit in neither set and silently fall back to the grid's plain
- * text input: `json`, `composite`, `record`, `repeater`, `tree`, `video`,
- * `audio`, `autonumber` all did. This pins the contract at the spec boundary:
- * every `FieldType` member must resolve (alias-aware) to an inline editor or
- * a documented exclusion.
- */
-describe('inline editor ↔ SPEC FieldType parity (#2942)', () => {
-  const specTypes: string[] = Array.isArray((FieldType as { options?: readonly string[] }).options)
-    ? [...(FieldType as { options: readonly string[] }).options]
-    : [];
-
-  it('reads a non-empty enum from the spec', () => {
-    expect(specTypes, 'could not read FieldType.options from the spec').not.toEqual([]);
-  });
-
-  it('every spec field type resolves to an inline decision (editor or exclusion)', () => {
-    const undecided = specTypes.filter(
-      (t) => !hasFieldEditWidget(t) && !isInlineExcludedFieldType(t),
-    );
-    // If this fails: a spec field type would fall back to a plain text input
-    // inline. Give it a widget (EDIT_WIDGETS / the alias table) or a
-    // documented exclusion (INLINE_EXCLUDED_FIELD_TYPES).
-    expect(undecided).toEqual([]);
-  });
-
-  it('the structured/computed spec spellings are closed corruption paths', () => {
-    // Excluded (alias-aware): editing these through a text box corrupts the value.
-    for (const t of ['composite', 'record', 'repeater', 'video', 'audio', 'autonumber']) {
-      expect(isInlineExcludedFieldType(t), `${t} must be excluded from inline editing`).toBe(true);
-      expect(hasFieldEditWidget(t), `${t} must not resolve to an editor`).toBe(false);
-    }
-    // Editable through their form widgets: json → code editor, tree → lookup picker.
-    for (const t of ['json', 'tree']) {
-      expect(hasFieldEditWidget(t), `${t} must resolve to its form widget`).toBe(true);
-    }
-  });
-});

package/src/FieldEditWidget.tsx

@@ -1,207 +0,0 @@
-/**
- * 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 React from 'react';
-import type { FieldWidgetComponentProps } from './widgets/types';
-
-// The SAME dedicated widgets the form renders — reused for in-place editing
-// (e.g. the data grid's inline cell editor) so a select edits as a dropdown, a
-// boolean as a checkbox, a date as a date picker, etc. — never a bare text box.
-import { TextField } from './widgets/TextField';
-import { TextAreaField } from './widgets/TextAreaField';
-import { NumberField } from './widgets/NumberField';
-import { CurrencyField } from './widgets/CurrencyField';
-import { PercentField } from './widgets/PercentField';
-import { SliderField } from './widgets/SliderField';
-import { RatingField } from './widgets/RatingField';
-import { BooleanField } from './widgets/BooleanField';
-import { SelectField } from './widgets/SelectField';
-import { MultiSelectField } from './widgets/MultiSelectField';
-import { RadioField } from './widgets/RadioField';
-import { CheckboxesField } from './widgets/CheckboxesField';
-import { TagsField } from './widgets/TagsField';
-import { DateField } from './widgets/DateField';
-import { DateTimeField } from './widgets/DateTimeField';
-import { TimeField } from './widgets/TimeField';
-import { EmailField } from './widgets/EmailField';
-import { PhoneField } from './widgets/PhoneField';
-import { UrlField } from './widgets/UrlField';
-// Relational pickers — the SAME standard widgets the form uses. They read the
-// related-object dataSource from SchemaRendererContext (which the grid already
-// provides), so they drop straight into an inline cell.
-import { LookupField } from './widgets/LookupField';
-import { UserField } from './widgets/UserField';
-// Structured-value editors — lightweight (no map/code-editor deps), same
-// widgets the form uses. Drop into a cell like the rest.
-import { ColorField } from './widgets/ColorField';
-import { AddressField } from './widgets/AddressField';
-import { LocationField } from './widgets/LocationField';
-import { GeolocationField } from './widgets/GeolocationField';
-import { CodeField } from './widgets/CodeField';
-import { QRCodeField } from './widgets/QRCodeField';
-// The FORM's spec-alias table (`json` → `field:code`, `tree` → `field:lookup`,
-// …) — inline resolution reuses it so spec spellings get the form's decision.
-import { mapFieldTypeToFormType } from './field-type-alias';
-
-/**
- * Field types that edit in place with a dedicated widget. Keyed by the raw
- * field `type` (the widget map mirrors the form's `mapFieldTypeToFormType`).
- * Rich/heavy types (file, image, lookup, richtext, …) are intentionally absent
- * so callers fall back to their own simpler editor.
- */
-const EDIT_WIDGETS: Record<string, React.ComponentType<FieldWidgetComponentProps<any>>> = {
-  text: TextField,
-  textarea: TextAreaField,
-  number: NumberField,
-  currency: CurrencyField,
-  percent: PercentField,
-  slider: SliderField,
-  progress: SliderField,
-  rating: RatingField,
-  boolean: BooleanField,
-  toggle: BooleanField,
-  select: SelectField,
-  status: SelectField,
-  multiselect: MultiSelectField,
-  radio: RadioField,
-  checkboxes: CheckboxesField,
-  tags: TagsField,
-  date: DateField,
-  datetime: DateTimeField,
-  time: TimeField,
-  email: EmailField,
-  phone: PhoneField,
-  url: UrlField,
-  // Relational — the record/user pickers, same as the form (the form maps
-  // master_detail to the single-value LookupField too, see fieldWidgetMap).
-  lookup: LookupField,
-  master_detail: LookupField,
-  user: UserField,
-  owner: UserField,
-  // Structured-value editors — same widgets the form uses.
-  color: ColorField,
-  address: AddressField,
-  location: LocationField,
-  geolocation: GeolocationField,
-  code: CodeField,
-  qrcode: QRCodeField,
-};
-
-/**
- * Form field types that are deliberately NOT given an inline editor — every
- * other form widget type must be in {@link EDIT_WIDGETS}. This pairing is
- * enforced by a test against the form's widget map (`FORM_FIELD_TYPES`) so the
- * two can't silently drift again (which is how `lookup` was missed). To add a
- * type to inline editing, move it from here into EDIT_WIDGETS.
- */
-export const INLINE_EXCLUDED_FIELD_TYPES = new Set<string>([
-  // Computed / read-only — the grid keeps these non-editable (no value to author).
-  'formula', 'summary', 'auto_number',
-  // Binary / attachment — edited from the record form, shown read-only in the grid.
-  'file', 'image', 'avatar', 'signature',
-  // Heavy / full editors — better in the record form than a cell.
-  'markdown', 'html', 'richtext',
-  // Credentials — never inline-editable. Both are masked on read, so the cell has
-  // no real value to seed an editor with, and the grid's fallback is a PLAIN TEXT
-  // input: it would render the mask as if it were the value and write it straight
-  // back. `secret` additionally round-trips through an encrypted store (ADR-0100,
-  // data/field.zod.ts) — the cell holds an opaque ref, not the secret.
-  'password', 'secret',
-  // Containers / non-authorable — a sub-form / sub-grid / embedding vector
-  // doesn't belong in a single cell.
-  'object', 'grid', 'vector',
-  // Widget-hint-only pickers — authored in the record form (they depend on
-  // sibling fields / a loaded object catalog), not inline in a grid cell.
-  'object-ref', 'filter-condition', 'recipient-picker',
-]);
-
-/** Field types whose value is chosen in one discrete gesture (no free typing). */
-export const DISCRETE_EDIT_TYPES = new Set<string>([
-  'boolean', 'toggle', 'select', 'status', 'radio', 'rating',
-]);
-
-/**
- * Resolve a field type to its inline-editing key: the raw type when the
- * widget/exclusion tables name it directly, otherwise its form-alias target
- * (`mapFieldTypeToFormType`, `field:` prefix stripped).
- *
- * The tables are keyed by the FORM's spellings, but spec field types reach
- * this layer in the SPEC's spellings — `json`, `tree`, `composite`, `record`,
- * `repeater`, `video`, `audio`, `autonumber` are aliases in the form map and
- * were keys in NEITHER table here, so the grid silently fell back to a plain
- * text input for all of them: typing over structured JSON or a hierarchy ref
- * is a value-corruption path (#2942). Resolving through the same alias table
- * the form uses gives each spec type the form's own decision: `json` → the
- * code editor, `tree` → the lookup picker, and the container/computed/binary
- * families → their documented exclusions.
- */
-function resolveInlineEditType(type: string): string {
-  if (type in EDIT_WIDGETS || INLINE_EXCLUDED_FIELD_TYPES.has(type)) return type;
-  return mapFieldTypeToFormType(type).replace(/^field:/, '');
-}
-
-/** True when a field type has a dedicated in-place edit widget. */
-export function hasFieldEditWidget(type: string | undefined): boolean {
-  return !!type && resolveInlineEditType(type) in EDIT_WIDGETS;
-}
-
-/**
- * True when a field type is deliberately NOT inline-editable (alias-aware:
- * `composite` resolves to the excluded `object`, `video` to `file`, …).
- * Grid hosts must treat these as read-only cells — falling back to a plain
- * text editor is exactly the corruption path the exclusion exists to close.
- */
-export function isInlineExcludedFieldType(type: string | undefined): boolean {
-  return !!type && INLINE_EXCLUDED_FIELD_TYPES.has(resolveInlineEditType(type));
-}
-
-/**
- * Relational picker widgets (lookup / master_detail / user / owner) render best
- * in a grid cell as a single-line, borderless trigger — so the selected
- * record's NAME shows inside the trigger instead of a chip stacked above a
- * separate "Select…" button (which double-stacks and wastes the row height).
- * This mirrors how the line-item grid (`GridField`) renders its lookup cells.
- */
-const COMPACT_EDIT_TYPES = new Set<string>(['lookup', 'master_detail', 'user', 'owner']);
-
-/**
- * Render the dedicated edit widget for a field's type — the SAME control the
- * form uses — as a controlled `{ value, onChange, field }` input. Returns
- * `null` for types without a registered widget so the caller can fall back to
- * a plain editor.
- *
- * `autoFocus` is forwarded because an inline-edit host enters edit mode ON a
- * field and expects the caret to land there (objectui#4220 — the detail page's
- * delegation): each widget's own `toDomProps` whitelist already carries it onto
- * the real focusable control, so nothing here needs to know which element that
- * is. A host that passes nothing is unaffected.
- */
-export function FieldEditWidget({
-  field,
-  value,
-  onChange,
-  readonly,
-  autoFocus,
-}: FieldWidgetComponentProps<any>): React.ReactElement | null {
-  const resolved = field?.type ? resolveInlineEditType(field.type) : undefined;
-  const Widget = resolved ? EDIT_WIDGETS[resolved] : undefined;
-  if (!Widget) return null;
-  // `compact` is a declared widget prop (objectui#3221 closed this type), so
-  // the spread no longer needs an `any` escape hatch to get past it.
-  const compactProps = resolved && COMPACT_EDIT_TYPES.has(resolved) ? { compact: true } : {};
-  return (
-    <Widget
-      field={field}
-      value={value}
-      onChange={onChange}
-      readonly={readonly}
-      autoFocus={autoFocus}
-      {...compactProps}
-    />
-  );
-}

package/src/__tests__/AddressCellRenderer.test.tsx

@@ -1,166 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * objectui#4037 (migrated from objectstack#5019): a `Field.address` value read
- * as stringified JSON on the record detail page — `{"street":"中策路 1 号",…}` —
- * because the DISPLAY registry mapped `address` to `JsonCellRenderer`, while
- * `location` next to it in the same field group had a real formatter. The
- * create/edit dialog rendered the same field correctly, so the gap was
- * display-side only.
- *
- * Every case below resolves its renderer through `getCellRenderer` — the
- * display resolver the detail page itself calls — rather than importing
- * `AddressCellRenderer` directly, so these tests fail on the JSON signature if
- * the registry entry ever regresses, not merely if the formatter changes.
- */
-
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { getCellRenderer, resolveCellRendererType } from '../index';
-
-/** Resolve + render exactly the way `DetailSection` builds a read-mode value. */
-function renderThroughDisplayRegistry(type: string, value: unknown) {
-  const Renderer = getCellRenderer(resolveCellRendererType({ type }) || type);
-  return render(<Renderer value={value as any} field={{ type } as any} />);
-}
-
-/** The stringified-object signature this issue is about. */
-function expectNoJsonSignature(text: string | null) {
-  expect(text).not.toMatch(/[{}]/);
-  expect(text).not.toMatch(/"(street|city|state|postalCode|country)"/);
-  expect(text).not.toMatch(/undefined/);
-}
-
-/** The record from the issue's evidence table. */
-const ISSUE_ADDRESS = {
-  street: '中策路 1 号',
-  city: '杭州',
-  state: '浙江',
-  postalCode: '310000',
-  country: '中国',
-};
-
-describe('address display renderer (objectui#4037)', () => {
-  it('renders a populated address as a formatted line, not stringified JSON', () => {
-    const { container } = renderThroughDisplayRegistry('address', ISSUE_ADDRESS);
-    expectNoJsonSignature(container.textContent);
-    expect(
-      screen.getByText('中策路 1 号, 杭州, 浙江 310000, 中国'),
-    ).toBeInTheDocument();
-  });
-
-  it('resolves `address` through the display registry the way it resolves `location`', () => {
-    // The issue's decisive comparison: one address field beside one location
-    // field, same record, same page. Both must be formatted; neither may fall
-    // through to object stringification.
-    const address = renderThroughDisplayRegistry('address', ISSUE_ADDRESS);
-    const location = renderThroughDisplayRegistry('location', { lat: 30.2741, lng: 120.1551 });
-    expectNoJsonSignature(address.container.textContent);
-    expectNoJsonSignature(location.container.textContent);
-    expect(location.container.textContent).toContain('30.2741');
-  });
-
-  it('carries the full value: every authored sub-field appears', () => {
-    const { container } = renderThroughDisplayRegistry('address', ISSUE_ADDRESS);
-    for (const part of Object.values(ISSUE_ADDRESS)) {
-      expect(container.textContent).toContain(part);
-    }
-  });
-});
-
-describe('address display renderer — partial values render gracefully', () => {
-  it('drops missing parts instead of leaving dangling separators', () => {
-    const { container } = renderThroughDisplayRegistry('address', {
-      street: '中策路 1 号',
-      city: '杭州',
-    });
-    expect(screen.getByText('中策路 1 号, 杭州')).toBeInTheDocument();
-    expectNoJsonSignature(container.textContent);
-    expect(container.textContent).not.toMatch(/,\s*$/);
-    expect(container.textContent).not.toMatch(/,\s*,/);
-  });
-
-  it('renders a street-only address as just the street', () => {
-    renderThroughDisplayRegistry('address', { street: '中策路 1 号' });
-    expect(screen.getByText('中策路 1 号')).toBeInTheDocument();
-  });
-
-  it('keeps state and postal code in one group, either alone', () => {
-    const stateOnly = renderThroughDisplayRegistry('address', { city: 'SF', state: 'CA' });
-    expect(stateOnly.container.textContent).toBe('SF, CA');
-    const postalOnly = renderThroughDisplayRegistry('address', { city: 'SF', postalCode: '94102' });
-    expect(postalOnly.container.textContent).toBe('SF, 94102');
-    const both = renderThroughDisplayRegistry('address', {
-      city: 'SF',
-      state: 'CA',
-      postalCode: '94102',
-    });
-    expect(both.container.textContent).toBe('SF, CA 94102');
-  });
-
-  it('ignores whitespace-only parts rather than spacing over them', () => {
-    const { container } = renderThroughDisplayRegistry('address', {
-      street: '  ',
-      city: '杭州',
-      country: '',
-    });
-    expect(container.textContent).toBe('杭州');
-  });
-
-  it('reads a legacy `zipCode` postal code (objectstack#5143 data)', () => {
-    // Records written by builds up to 17.0.0-rc.1 stored the postal code under
-    // `zipCode`. The input widget reads it; the detail page must not drop it.
-    const { container } = renderThroughDisplayRegistry('address', {
-      city: 'San Francisco',
-      state: 'CA',
-      zipCode: '94102',
-    });
-    expect(container.textContent).toBe('San Francisco, CA 94102');
-  });
-});
-
-describe('address display renderer — nothing is silently swallowed', () => {
-  it('shows the empty placeholder for a null value and for `{}`', () => {
-    const nullValue = renderThroughDisplayRegistry('address', null);
-    expect(nullValue.container.querySelector('[data-slot="empty-value"]')).not.toBeNull();
-    const emptyObject = renderThroughDisplayRegistry('address', {});
-    expect(emptyObject.container.querySelector('[data-slot="empty-value"]')).not.toBeNull();
-  });
-
-  it('keeps an unrecognized shape visible as JSON rather than blanking it', () => {
-    // Strictly better than today, never worse: a value the formatter cannot
-    // read retains the current compact-JSON rendering instead of disappearing.
-    const { container } = renderThroughDisplayRegistry('address', { unexpected: 'data' });
-    expect(container.textContent).toContain('unexpected');
-  });
-
-  it('passes a plain string address straight through', () => {
-    renderThroughDisplayRegistry('address', '中策路 1 号, 杭州');
-    expect(screen.getByText('中策路 1 号, 杭州')).toBeInTheDocument();
-  });
-});
-
-describe('address display renderer — controls (unchanged surfaces)', () => {
-  it('leaves `location` and `geolocation` formatting untouched', () => {
-    const location = renderThroughDisplayRegistry('location', { lat: 30.2741, lng: 120.1551 });
-    expect(location.container.textContent).toBe('30.2741, 120.1551');
-    const geo = renderThroughDisplayRegistry('geolocation', { latitude: 30.2741, longitude: 120.1551 });
-    expect(geo.container.textContent).toBe('30.2741, 120.1551');
-  });
-
-  it('leaves genuinely structural types stringifying as JSON', () => {
-    // `address` moved out of the JSON bucket; `json` / `object` stay in it.
-    for (const type of ['json', 'object', 'composite', 'record']) {
-      const { container } = renderThroughDisplayRegistry(type, { a: 1 });
-      expect(container.textContent).toBe('{"a":1}');
-    }
-  });
-});