@object-ui/fields 16.1.0 → 17.1.0

package/dist/widgets/FilterConditionField.d.ts

@@ -1,4 +1,36 @@
 import { default as React } from 'react';
 import { FieldWidgetProps } from './types';
+interface BuilderCondition {
+    id: string;
+    field: string;
+    operator: string;
+    value: any;
+}
+/**
+ * Builder condition → `$`-operator criteria. Exported for tests: this is the
+ * chokepoint where a builder token becomes a spec `FieldOperatorsSchema` key,
+ * and a wrong spelling here is rejected downstream by `convertFiltersToAST`
+ * rather than at authoring time. @internal
+ */
+export declare function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null;
+/**
+ * Criteria → builder condition (the reverse of {@link condToMongo}). Returning
+ * `null` makes the builder refuse to load the rule ("criteria can't be
+ * represented"), so this must keep accepting spellings previously written.
+ * @internal
+ */
+export declare function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null;
+/**
+ * Would this criteria select EVERY record of the object?
+ *
+ * Mirrors the server's `isMatchAllCriteria` (objectstack `plugin-sharing`,
+ * #3896) closely enough to warn before the round-trip: blank, `{}`, `[]`, and
+ * the vacuous combinators. Deliberately conservative in the same direction —
+ * the cost of a false positive is one extra hint, the cost of a false negative
+ * is a save that fails with a toast. The server stays authoritative.
+ *
+ * @internal exported for tests
+ */
+export declare function isMatchAllCriteria(parsed: any): boolean;
 export declare function FilterConditionField({ value, onChange, readonly, className, ...props }: FieldWidgetProps<string | object>): React.JSX.Element;
 export default FilterConditionField;

package/dist/widgets/ImageLightbox.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 * as React from 'react';
+export interface LightboxImage {
+    url: string;
+    name?: string;
+}
+export interface ImageLightboxProps {
+    images: LightboxImage[];
+    /** Index of the image shown when the lightbox opens. */
+    index: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Called when the user navigates to another image (prev/next, arrow keys). */
+    onIndexChange?: (index: number) => void;
+}
+/**
+ * Full-screen image preview with prev/next navigation for a set of images.
+ *
+ * Controlled: the caller owns `open` and the current `index`. Built on the
+ * shared `Dialog`, so backdrop-click and Escape close it for free; this adds
+ * left/right arrow-key navigation and a position counter for the multi-image
+ * case. A single image simply omits the arrows and counter.
+ */
+export declare function ImageLightbox({ images, index, open, onOpenChange, onIndexChange }: ImageLightboxProps): React.JSX.Element | null;

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

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

package/dist/widgets/LookupField.hydration.test.d.ts

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

package/dist/widgets/LookupField.idField.test.d.ts

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

package/dist/widgets/__tests__/FilterConditionField.matchAll.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/__tests__/FilterConditionField.operators.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/file-value.d.ts

@@ -0,0 +1,112 @@
+/**
+ * File field value shapes (ObjectStack ADR-0104 D3 wave 2).
+ *
+ * A `file`/`image`/`avatar`/`video`/`audio` field value reaches the UI in one
+ * of three forms, and every widget that renders one has to cope with all
+ * three — so the rules live here once rather than being re-derived per widget.
+ *
+ *  1. **Reference** — a bare `sys_file` id string. The form the backend stores
+ *     once file-as-reference is adopted.
+ *  2. **Expanded** — `{ id, name, size, mimeType, url }`, what the read path
+ *     returns after resolving a stored reference. Note `mimeType`: this comes
+ *     from the platform's spec-owned `FileValueSchema` and is **camelCase**.
+ *  3. **Legacy inline blob** — `{ file_id?, name, original_name, size,
+ *     mime_type, url }`, the pre-reference shape this package used to build
+ *     itself, with **snake_case** `mime_type`.
+ *
+ * That casing split is the whole reason this module exists: a widget reading
+ * only `mime_type` silently stops recognising images the moment the backend
+ * starts returning the expanded form, and the failure looks like "thumbnails
+ * disappeared" rather than anything pointing at a value shape.
+ *
+ * ## Submitting
+ *
+ * When the upload adapter surfaced a `fileId`, the widget submits the **bare
+ * id** — the reference form. When it did not (the object-URL fallback adapter,
+ * an older backend), it submits the legacy blob unchanged. So the same build
+ * works against a backend that has adopted references and one that has not.
+ * Action params already POST a bare fileId; this brings record field values
+ * onto the same contract.
+ */
+/** A file value normalised for rendering, whatever form it arrived in. */
+export interface FileValueView {
+    /** `sys_file` id, when the value carries one. */
+    id?: string;
+    /** Best available display name. Never empty. */
+    name: string;
+    /** Resolvable URL, when the value carries one. A bare reference does not. */
+    url?: string;
+    size?: number;
+    mimeType?: string;
+    /** The value as it arrived, so callers can pass it through untouched. */
+    raw: unknown;
+}
+/**
+ * A minted file id: uuid/nanoid-shaped, and crucially not a URL — a URL always
+ * carries `:`, `/` or `.`, so it can never match. Mirrors the platform's
+ * `isFileIdToken`, which is the arbiter on the server side of the same question.
+ */
+export declare function isFileIdToken(value: unknown): value is string;
+/**
+ * The `sys_file` id a value refers to, or `undefined`.
+ *
+ * `file_id ?? id` matches the rule `serializeParamValues` already applies to
+ * action params — one extraction rule for both surfaces.
+ */
+export declare function fileIdOf(value: unknown): string | undefined;
+/**
+ * The stable download endpoint a bare `sys_file` id resolves to.
+ *
+ * `createObjectStackUploadAdapter` stores exactly this URL (`${basePath}/files/
+ * :id`, default base `/api/v1/storage`) as a completed upload's value, and the
+ * endpoint 302-redirects to a freshly-signed short-lived URL on every request —
+ * so it can be used directly as an `<img src>`. Building it here means a value
+ * still in its bare-reference form (the backend read path didn't expand it —
+ * seen on the edit-form data path, objectui image thumbnails rendering broken)
+ * resolves to a real URL instead of an empty `src`.
+ */
+export declare const FILE_STORAGE_BASE_PATH = "/api/v1/storage";
+/** The stable download URL for a `sys_file` id. */
+export declare function fileUrlFromId(id: string): string;
+/**
+ * Normalise one file value for display.
+ *
+ * @param fallbackName shown when the value carries no usable name — pass a
+ *   translated string so the widget stays localised.
+ */
+export declare function readFileValue(value: unknown, fallbackName?: string): FileValueView;
+/** Normalise a field value (single or `multiple`) to an array of views. */
+export declare function readFileValues(value: unknown, fallbackName?: string): FileValueView[];
+/** Does this value look like an image, by MIME type? */
+export declare function isImageValue(view: FileValueView): boolean;
+/** The subset of an upload result these helpers read. */
+export interface UploadResultLike {
+    url: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    meta?: Record<string, unknown>;
+}
+/**
+ * What to store in the field for a completed upload.
+ *
+ * Returns the bare `sys_file` id when the adapter surfaced one — the reference
+ * form — and the legacy inline blob when it did not, so a deployment whose
+ * upload adapter or backend predates file-as-reference keeps working unchanged.
+ */
+export declare function fileValueForSubmit(result: UploadResultLike, originalName?: string): string | Record<string, unknown>;
+/**
+ * The display view of a just-completed upload.
+ *
+ * Submitting a bare id means the field value no longer carries the name, size
+ * or URL needed to render it, and the enriched form only comes back on the next
+ * read. Widgets keep these views keyed by id so an upload appears immediately
+ * instead of showing a bare token until a refetch.
+ */
+export declare function uploadResultView(result: UploadResultLike, originalName?: string): FileValueView;
+/**
+ * Merge locally-known upload views over a field value's own views, matched by
+ * id. A value that is still a bare reference picks up the name/URL captured at
+ * upload time; anything already enriched by the backend is left alone.
+ */
+export declare function withRecentUploads(views: FileValueView[], recent: Record<string, FileValueView>): FileValueView[];

package/dist/widgets/file-value.test.d.ts

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

package/dist/widgets/useFieldTranslation.d.ts

@@ -1,5 +1,7 @@
 export declare const useFieldTranslation: () => {
     t: (key: string, options?: Record<string, unknown>) => string;
+    language: string;
 } | {
     t: import('i18next').TFunction<string, undefined>;
+    language: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "16.1.0",
+  "version": "17.1.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -30,21 +30,22 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
-    "@object-ui/components": "16.1.0",
-    "@object-ui/core": "16.1.0",
-    "@object-ui/i18n": "16.1.0",
-    "@object-ui/providers": "16.1.0",
-    "@object-ui/react": "16.1.0",
-    "@object-ui/types": "16.1.0"
+    "@object-ui/components": "17.1.0",
+    "@object-ui/core": "17.1.0",
+    "@object-ui/i18n": "17.1.0",
+    "@object-ui/providers": "17.1.0",
+    "@object-ui/react": "17.1.0",
+    "@object-ui/types": "17.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@objectstack/spec": "^17.0.0-rc.0",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react": "^6.0.4",
     "typescript": "^6.0.3",
     "vite": "^8.1.5",
     "vite-plugin-dts": "^5.0.3"

package/src/FieldEditWidget.test.ts

@@ -7,12 +7,33 @@
  */
 
 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
@@ -34,11 +55,21 @@ describe('inline editor ↔ form widget parity', () => {
   });
 
   it('the exclusion set lists only real form types (no stale entries)', () => {
-    const known = new Set(FORM_FIELD_TYPES);
-    const stale = [...INLINE_EXCLUDED_FIELD_TYPES].filter((t) => !known.has(t));
+    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);
@@ -59,3 +90,44 @@ describe('inline editor ↔ form widget parity', () => {
     }
   });
 });
+
+/**
+ * #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

@@ -44,6 +44,9 @@ 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
@@ -102,7 +105,13 @@ export const INLINE_EXCLUDED_FIELD_TYPES = new Set<string>([
   // 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', 'password',
+  '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',
@@ -116,9 +125,39 @@ 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 && type in EDIT_WIDGETS;
+  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));
 }
 
 /**
@@ -142,8 +181,9 @@ export function FieldEditWidget({
   onChange,
   readonly,
 }: FieldWidgetProps<any>): React.ReactElement | null {
-  const Widget = field?.type ? EDIT_WIDGETS[field.type] : undefined;
+  const resolved = field?.type ? resolveInlineEditType(field.type) : undefined;
+  const Widget = resolved ? EDIT_WIDGETS[resolved] : undefined;
   if (!Widget) return null;
-  const compactProps = field?.type && COMPACT_EDIT_TYPES.has(field.type) ? { compact: true } : {};
+  const compactProps = resolved && COMPACT_EDIT_TYPES.has(resolved) ? { compact: true } : {};
   return <Widget field={field} value={value} onChange={onChange} readonly={readonly} {...(compactProps as any)} />;
 }

package/src/field-type-alias.ts

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+
+/**
+ * Map field type to form component type
+ * 
+ * @param fieldType - The ObjectQL field type identifier to convert
+ * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
+ * @returns The normalized form field type string used in the form schema
+ * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
+ */
+export function mapFieldTypeToFormType(fieldType: string): string {
+  const typeMap: Record<string, string> = {
+    // Text-based fields
+    text: 'field:text',
+    textarea: 'field:textarea',
+    markdown: 'field:markdown', // Markdown editor (fallback to textarea)
+    html: 'field:html', // Rich text editor (fallback to textarea)
+    richtext: 'field:richtext', // WYSIWYG rich-text editor
+    secret: 'field:password', // encrypted-at-rest value — mask input like a password
+
+    // Numeric fields
+    number: 'field:number',
+    currency: 'field:currency',
+    percent: 'field:percent',
+    slider: 'field:slider',
+    progress: 'field:slider', // bounded 0..100 progress — edit via slider
+    rating: 'field:rating',
+
+    // Date/Time fields
+    date: 'field:date',
+    datetime: 'field:datetime',
+    time: 'field:time',
+
+    // Boolean
+    boolean: 'field:boolean',
+    toggle: 'field:boolean', // toggle is a boolean rendered as a switch
+
+    // Selection fields
+    select: 'field:select',
+    multiselect: 'field:multiselect',
+    radio: 'field:radio',
+    checkboxes: 'field:checkboxes',
+    tags: 'field:tags',
+    lookup: 'field:lookup',
+    master_detail: 'field:master_detail',
+    tree: 'field:lookup', // hierarchical reference — pick the parent via a lookup
+    // `user` is a lookup specialized to sys_user; `owner` mirrors it (record
+    // ownership). Both render via the UserField person-picker (delegates to the
+    // lookup picker). Without these they would fall through to `field:text`.
+    user: 'field:user',
+    owner: 'field:owner',
+
+    // Contact fields
+    email: 'field:email',
+    phone: 'field:phone',
+    url: 'field:url',
+
+    // File / media fields
+    file: 'field:file',
+    image: 'field:image',
+    avatar: 'field:avatar',
+    video: 'field:file', // uploads as a file
+    audio: 'field:file', // uploads as a file
+    signature: 'field:signature',
+
+    // Special / enhanced fields
+    password: 'field:password',
+    location: 'field:location', // Location/map field (fallback to input)
+    geolocation: 'field:geolocation',
+    address: 'field:address',
+    color: 'field:color',
+    code: 'field:code',
+    json: 'field:code', // JSON edited in the code editor
+    qrcode: 'field:qrcode',
+    vector: 'field:vector',
+
+    // Embedded structured values (stored as JSON on the row)
+    object: 'field:object',
+    composite: 'field:object', // embedded object
+    record: 'field:object', // name-keyed map
+    repeater: 'field:grid', // embedded array of rows
+
+    // Auto-generated/computed fields (typically read-only)
+    formula: 'field:formula',
+    summary: 'field:summary',
+    // `@objectstack/spec` spells this `autonumber`; the widget map key is
+    // `auto_number`. Map both spellings so a spec-typed field/param doesn't
+    // fall through to the plain text input.
+    autonumber: 'field:auto_number',
+    auto_number: 'field:auto_number',
+  };
+
+  return typeMap[fieldType] || 'field:text';
+}