@object-ui/fields 11.2.0 → 11.3.0

package/package.json

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

package/src/FieldEditWidget.tsx

@@ -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.
+ */
+
+import React from 'react';
+import type { FieldWidgetProps } 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';
+
+/**
+ * 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<FieldWidgetProps<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,
+};
+
+/** 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',
+]);
+
+/** True when a field type has a dedicated in-place edit widget. */
+export function hasFieldEditWidget(type: string | undefined): boolean {
+  return !!type && type in EDIT_WIDGETS;
+}
+
+/**
+ * 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.
+ */
+export function FieldEditWidget({
+  field,
+  value,
+  onChange,
+  readonly,
+}: FieldWidgetProps<any>): React.ReactElement | null {
+  const Widget = field?.type ? EDIT_WIDGETS[field.type] : undefined;
+  if (!Widget) return null;
+  return <Widget field={field} value={value} onChange={onChange} readonly={readonly} />;
+}

package/src/index.tsx

@@ -2130,6 +2130,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/LookupField.tsx

@@ -12,6 +12,7 @@ import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types'
 import { RecordPickerDialog, lookupFiltersToRecord } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
 import { deriveLookupColumns } from './deriveLookupColumns';
+import { getRecordDisplayName } from '@object-ui/core';
 import { getRecentLookupIds, pushRecentLookupId } from './recentLookups';
 import { getCellRendererResolver } from './_cell-renderer-bridge';
 import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
@@ -69,10 +70,17 @@ function formatRecordTitle(record: any, titleFormat: string): string | null {
 /**
  * Map a raw record to a LookupOption using a display field and an id field.
  *
- * When `titleFormat` is supplied (typically derived from the referenced
- * object's schema), the label is rendered via the template so users see a
- * human-readable name (e.g. `"Acme - John Doe"`) instead of falling all the
- * way through to the raw record id.
+ * Label precedence (ADR-0079):
+ *   1. `titleFormat` template (when supplied, derived from the referenced
+ *      object's schema) — e.g. `"Acme - John Doe"`.
+ *   2. the explicit `displayField` value on the record.
+ *   3. the unified `@object-ui/core#getRecordDisplayName` against the referenced
+ *      object's schema (`objectDef`) — adds `displayNameField` + type-aware
+ *      field derivation, so a lookup to an object whose name lives in e.g.
+ *      `activity_name` resolves a real name instead of the raw id. We stop short
+ *      of the resolver's `Record #<id>` floor here so the chip still falls
+ *      through to the bare id when nothing nameable exists.
+ *   4. the legacy hard-coded name list, then the raw id.
  */
 function recordToOption(
   record: any,
@@ -80,12 +88,27 @@ function recordToOption(
   idField: string,
   descriptionField?: string,
   titleFormat?: string | null,
+  objectDef?: any,
 ): LookupOption {
   const val = record[idField] ?? record.id ?? record._id;
   const templated = titleFormat ? formatRecordTitle(record, titleFormat) : null;
+
+  // Object-level resolver fallback (displayNameField + derivation), excluding
+  // its id floor so we don't shadow the explicit `String(val)` tail.
+  let unified: string | undefined;
+  if (objectDef) {
+    const resolved = getRecordDisplayName(objectDef, record);
+    const id = record?.id ?? record?._id;
+    const isFloor =
+      resolved === 'Untitled' ||
+      (id !== null && id !== undefined && resolved === `Record #${id}`);
+    if (!isFloor) unified = resolved;
+  }
+
   const label =
     templated ??
     record[displayField] ??
+    unified ??
     record.label ??
     record.name ??
     record.full_name ??
@@ -358,7 +381,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
 
         const result = await dataSource.find(referenceTo, params);
         const records: any[] = result?.data ?? result ?? [];
-        const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
+        const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema));
 
         setFetchedOptions(mapped);
         setTotalCount(result?.total ?? records.length);
@@ -455,14 +478,14 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
         for (const id of unresolved) {
           if (typeof (dataSource as any).findOne === 'function') {
             const rec = await (dataSource as any).findOne(referenceTo, id);
-            if (rec) fetched.push(recordToOption(rec, displayField, idField, effectiveDescriptionField, refTitleFormat));
+            if (rec) fetched.push(recordToOption(rec, displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema));
           } else {
             const res = await dataSource.find(referenceTo, {
               $filter: { [idField]: id },
               $top: 1,
             } as QueryParams);
             const rows = res?.data ?? res ?? [];
-            if (rows[0]) fetched.push(recordToOption(rows[0], displayField, idField, effectiveDescriptionField, refTitleFormat));
+            if (rows[0]) fetched.push(recordToOption(rows[0], displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema));
           }
         }
         if (!cancelled && fetched.length) {
@@ -539,7 +562,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   // findOption can resolve display labels after the dialog closes.
   const handlePickerSelectRecords = useCallback(
     (records: any[]) => {
-      const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
+      const mapped = records.map(r => recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema));
       if (referenceTo) mapped.forEach((o) => pushRecentLookupId(referenceTo, o.value));
       setPickerResolvedRecords(mapped);
     },
@@ -561,7 +584,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           if (cached) { recs.push(cached); continue; }
           if (typeof (dataSource as any).findOne === 'function') {
             const r = await (dataSource as any).findOne(referenceTo, id);
-            if (r) recs.push(recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat));
+            if (r) recs.push(recordToOption(r, displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema));
           }
         }
         if (!cancelled) setRecentOptions(recs);
@@ -592,7 +615,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       setError(null);
       try {
         const created = await (dataSource as any).create(referenceTo, { [displayField]: label });
-        const opt = recordToOption(created, displayField, idField, effectiveDescriptionField, refTitleFormat);
+        const opt = recordToOption(created, displayField, idField, effectiveDescriptionField, refTitleFormat, refObjectSchema);
         setPickerResolvedRecords((prev) => [opt, ...prev.filter((o) => o.value !== opt.value)]);
         handleSelect(opt);
       } catch (err) {