@object-ui/fields 16.1.0 → 17.2.0

package/src/__tests__/widget-props-contract.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+
+/**
+ * `FieldWidgetComponentProps` is a CLOSED contract (objectui#3221).
+ *
+ * It used to end in `[key: string]: any`, which made every check over it
+ * vacuous: a type claiming to have every key can never be reported as missing
+ * one (objectstack#4075). Three consequences, one test each below:
+ *
+ *  1. a key the type does not declare is a compile error, not a silent `any`
+ *     — which is what makes the `error` / `errorMessage` divergence
+ *     (objectui#3222) decidable by the compiler at all;
+ *  2. a MISSPELLED prop (`readOnly` for `readonly`) is rejected;
+ *  3. the pass-through keys hosts genuinely forward still type-check, and
+ *     still reach the rendered control at runtime — closing the type must not
+ *     have been paid for by dropping real behaviour.
+ *
+ * (1) and (2) are compile-time: a violation fails `pnpm --filter
+ * @object-ui/fields type-check`, not this run. `@ts-expect-error` inverts
+ * that — the line fails to compile if the error it expects ever STOPS
+ * happening, i.e. if the index signature comes back.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+import { TextField } from '../widgets/TextField';
+import { BooleanField } from '../widgets/BooleanField';
+import type { FieldWidgetComponentProps } from '../widgets/types';
+import type { FieldMetadata } from '@object-ui/types';
+
+type Assert<T extends true> = T;
+type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false;
+type Extends<A, B> = [A] extends [B] ? true : false;
+
+const field = { name: 'title', label: 'Title', type: 'text' } as unknown as FieldMetadata;
+
+describe('FieldWidgetComponentProps is closed (objectui#3221)', () => {
+  it('has no `[key: string]` index signature', () => {
+    // The single assertion the whole change turns on. While the index
+    // signature existed this was `true`, and every check below was vacuous.
+    type _NotOpen = Assert<Equal<Extends<string, keyof FieldWidgetComponentProps>, false>>;
+    expect(true).toBe(true);
+  });
+
+  it('rejects keys it does not declare', () => {
+    const props = {} as FieldWidgetComponentProps<string>;
+
+    // The spec's `FieldWidgetPropsSchema` declares both; this type declares
+    // neither. Reading them used to give `any` and `undefined` forever.
+    // Whether to ADD them is objectui#3222 — deliberately not decided here.
+    // @ts-expect-error `required` is not part of this contract
+    void props.required;
+    // @ts-expect-error `error` is not part of this contract — this type's slot is `errorMessage`
+    void props.error;
+
+    // …and the class of bug the index signature hid best: a typo.
+    // @ts-expect-error the prop is `readonly`, not React's DOM `readOnly`
+    void props.readOnly;
+    // @ts-expect-error the prop is `onChange`
+    void props.onchange;
+
+    expect(true).toBe(true);
+  });
+
+  it('still accepts the pass-through keys hosts actually forward', () => {
+    // Closing the type is only correct if the real call sites still compile.
+    // Each key here has a named producer: the form renderer, the inline-edit
+    // host, or the line-item grid. Deleting one from the type breaks this.
+    const passThrough: FieldWidgetComponentProps<string> = {
+      value: '',
+      onChange: () => {},
+      field,
+      // form renderer (`renderFieldComponent`)
+      schema: field,
+      dataSource: {},
+      dependentValues: { country: 'cn' },
+      dependsOn: ['country'],
+      emptyHint: 'Select country first',
+      name: 'title',
+      // inline-edit hosts / line-item grid
+      compact: true,
+      autoFocus: true,
+      onSelectRecord: () => {},
+      onCreateNew: () => {},
+      // DOM / a11y
+      id: 'title-input',
+      'aria-label': 'Title',
+      'data-testid': 'field-title',
+    };
+    expect(passThrough.compact).toBe(true);
+  });
+});
+
+describe('closing the type kept the pass-through behaviour', () => {
+  it('forwards a11y and data attributes to the rendered input', () => {
+    render(
+      <TextField
+        value="hello"
+        onChange={() => {}}
+        field={field}
+        aria-label="Title"
+        data-testid="title-input"
+      />,
+    );
+    const input = screen.getByTestId('title-input');
+    expect(input).toHaveAttribute('aria-label', 'Title');
+    expect(input).toHaveValue('hello');
+  });
+
+  it('forwards `disabled` — a declared key, not an index-signature accident', () => {
+    render(
+      <BooleanField
+        value={false}
+        onChange={() => {}}
+        field={{ name: 'active', label: 'Active', type: 'boolean' } as unknown as FieldMetadata}
+        disabled
+        data-testid="active-switch"
+      />,
+    );
+    expect(screen.getByTestId('active-switch')).toBeDisabled();
+  });
+});

package/src/complex-widgets.test.tsx

@@ -6,7 +6,7 @@ import { FieldEditWidget } from './FieldEditWidget';
 import { MasterDetailField } from './widgets/MasterDetailField';
 import { GridField } from './widgets/GridField';
 import { FileField } from './widgets/FileField';
-import type { FieldWidgetProps } from './widgets/types';
+import type { FieldWidgetComponentProps } from './widgets/types';
 
 // ------------- Mocks & Setup -------------
 
@@ -15,7 +15,7 @@ const mockField = {
   label: 'Test Field',
 } as any;
 
-const baseProps: FieldWidgetProps<any> = {
+const baseProps: FieldWidgetComponentProps<any> = {
   field: mockField,
   value: undefined,
   onChange: vi.fn(),
@@ -78,7 +78,7 @@ describe('Complex & Relationship Widgets', () => {
             reference_field: 'name',
         } as any;
 
-        const dynamicProps: FieldWidgetProps<any> = {
+        const dynamicProps: FieldWidgetComponentProps<any> = {
             ...baseProps,
             field: dynamicField,
             dataSource: mockDataSource,

package/src/datetime-widgets.test.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { DateField } from './widgets/DateField';
 import { DateTimeField } from './widgets/DateTimeField';
 import { TimeField } from './widgets/TimeField';
-import type { FieldWidgetProps } from './widgets/types';
+import type { FieldWidgetComponentProps } from './widgets/types';
 
 const mockField = {
   name: 'test_field',
@@ -11,7 +11,7 @@ const mockField = {
   type: 'date',
 } as any;
 
-const baseProps: FieldWidgetProps<string> = {
+const baseProps: FieldWidgetComponentProps<string> = {
   field: mockField,
   value: '',
   onChange: vi.fn(),

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';
+}

package/src/index.tsx

@@ -303,6 +303,8 @@ import { PercentField } from './widgets/PercentField';
 import { PasswordField } from './widgets/PasswordField';
 import { FileField } from './widgets/FileField';
 import { ImageField } from './widgets/ImageField';
+import { ImageLightbox } from './widgets/ImageLightbox';
+import { readFileValues } from './widgets/file-value';
 import { LocationField } from './widgets/LocationField';
 import { FormulaField } from './widgets/FormulaField';
 import { SummaryField } from './widgets/SummaryField';
@@ -506,7 +508,7 @@ function formatRelativeDays(diffDays: number, locale?: string): string {
 
 /**
  * Format date as relative time (e.g., "3 days ago", "Today", "Overdue 3d"),
- * localized via `Intl.RelativeTimeFormat` (objectstack-ai/framework#3040).
+ * localized via `Intl.RelativeTimeFormat` (objectstack-ai/objectstack#3040).
  *
  * `dueLike` gates the "Overdue" wording — a past `start_date`/`created_at`
  * isn't overdue, only a past due/deadline-semantic field is. Non-due-like
@@ -1268,50 +1270,88 @@ export function FileCellRenderer({ value, field }: CellRendererProps): React.Rea
 }
 
 /**
- * Image field cell renderer (with thumbnails)
+ * Image field cell renderer (with thumbnails + click-to-zoom).
+ *
+ * An image value may be a plain URL string, an object ({ url | src | href … }),
+ * a bare `sys_file` id, or an array of any of those. Normalising through
+ * `readFileValues` (which resolves a bare id to its stable download URL) means
+ * a string-URL field, a CDN link, and an unexpanded reference all render a
+ * thumbnail instead of a broken `<img src="">` placeholder.
+ *
+ * Clicking a thumbnail opens a full-screen lightbox (single or gallery). The
+ * click is `stopPropagation`-guarded so, inside a grid row, enlarging an image
+ * doesn't also trigger row navigation.
  */
 export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <EmptyValue />;
+  const { t } = useObjectTranslation();
+  const [lightboxIndex, setLightboxIndex] = React.useState<number | null>(null);
+
+  const imgs = React.useMemo(
+    () =>
+      readFileValues(value, 'Image')
+        .filter((v) => v.url)
+        .map((v) => ({ url: v.url as string, name: v.name })),
+    [value],
+  );
 
-  // An image value may be a plain URL string, an object ({ url | src | href }),
-  // or an array of either. Normalize so a string-URL field (common — e.g. a
-  // `cover` seeded with a CDN link) renders a thumbnail instead of a broken
-  // <img src=""> placeholder.
-  const urlOf = (v: any): string =>
-    typeof v === 'string' ? v : (v?.url || v?.src || v?.href || v?.thumbnailUrl || '');
-  const nameOf = (v: any, fallback: string): string =>
-    (v && typeof v === 'object' && (v.name || v.original_name)) || fallback;
+  if (!value || imgs.length === 0) return <EmptyValue />;
 
-  if (Array.isArray(value)) {
-    const imgs = value.map((v) => ({ url: urlOf(v), name: nameOf(v, 'Image') })).filter((i) => i.url);
-    if (imgs.length === 0) return <EmptyValue />;
+  const imageAlt = (idx: number, name?: string) =>
+    name || t('fields.image.imageAlt', { index: idx + 1 });
+  const open = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLightboxIndex(idx);
+  };
+  const multiple = imgs.length > 1;
+
+  const lightbox = lightboxIndex !== null && (
+    <ImageLightbox
+      images={imgs}
+      index={lightboxIndex}
+      open
+      onOpenChange={(o) => !o && setLightboxIndex(null)}
+      onIndexChange={setLightboxIndex}
+    />
+  );
+
+  if (multiple) {
     return (
-      <div className="flex -space-x-2">
-        {imgs.slice(0, 3).map((img, idx) => (
-          <img
-            key={idx}
-            src={img.url}
-            alt={img.name || `Image ${idx + 1}`}
-            className="size-8 rounded-md border-2 border-white object-cover"
-          />
-        ))}
-        {imgs.length > 3 && (
-          <div className="size-8 rounded-md border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">
-            +{imgs.length - 3}
-          </div>
-        )}
-      </div>
+      <>
+        <div className="flex -space-x-2">
+          {imgs.slice(0, 3).map((img, idx) => (
+            <img
+              key={idx}
+              src={img.url}
+              alt={imageAlt(idx, img.name)}
+              onClick={open(idx)}
+              className="size-8 cursor-zoom-in rounded-md border-2 border-background object-cover transition-transform hover:scale-110 hover:z-10"
+            />
+          ))}
+          {imgs.length > 3 && (
+            <button
+              type="button"
+              onClick={open(3)}
+              className="size-8 rounded-md border-2 border-background bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground hover:bg-muted/80"
+            >
+              +{imgs.length - 3}
+            </button>
+          )}
+        </div>
+        {lightbox}
+      </>
     );
   }
 
-  const url = urlOf(value);
-  if (!url) return <EmptyValue />;
   return (
-    <img
-      src={url}
-      alt={nameOf(value, 'Image')}
-      className="size-10 rounded-md object-cover"
-    />
+    <>
+      <img
+        src={imgs[0].url}
+        alt={imageAlt(0, imgs[0].name)}
+        onClick={open(0)}
+        className="size-10 cursor-zoom-in rounded-md object-cover transition-transform hover:scale-105"
+      />
+      {lightbox}
+    </>
   );
 }
 
@@ -1823,98 +1863,10 @@ setCellRendererResolver(getCellRenderer);
 
 
 
-/**
- * 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';
-}
+// `mapFieldTypeToFormType` moved to './field-type-alias' (re-exported below) so
+// FieldEditWidget can resolve spec aliases without importing this barrel.
+export { mapFieldTypeToFormType } from './field-type-alias';
+import { mapFieldTypeToFormType } from './field-type-alias';
 
 /**
  * Formats file size in bytes to human-readable string
@@ -1966,18 +1918,23 @@ export function buildValidationRules(field: any): any {
   // vars); a field-authored `*_message` is a string and passes through as-is,
   // still winning over the localized default. See form.tsx `localizeRule`.
 
-  // Length validation for text fields
-  if (field.min_length) {
+  // Length validation for text fields. The spec-canonical keys are camelCase
+  // (`minLength`/`maxLength`, @objectstack/spec FieldSchema — what the server
+  // record-validator enforces); the snake_case pair is the legacy objectui
+  // spelling, kept as fallback (framework#1878/#1891 naming-drift closeout).
+  const minLength = (field as any).minLength ?? field.min_length;
+  if (minLength) {
     rules.minLength = {
-      value: field.min_length,
+      value: minLength,
       message: typeof field.min_length_message === 'string' ? field.min_length_message : undefined,
       messageKey: 'validation.minLength',
     };
   }
 
-  if (field.max_length) {
+  const maxLength = (field as any).maxLength ?? field.max_length;
+  if (maxLength) {
     rules.maxLength = {
-      value: field.max_length,
+      value: maxLength,
       message: typeof field.max_length_message === 'string' ? field.max_length_message : undefined,
       messageKey: 'validation.maxLength',
     };
@@ -2091,7 +2048,9 @@ function createFieldRenderer(FieldWidget: React.ComponentType<any>) {
       readonly: schema?.readonly || schema?.readOnly,
       help: schema?.help,
       description: schema?.description,
-      defaultValue: schema?.defaultValue || schema?.value,
+      // `??`, not `||` — an authored default of `false` / `0` / `''` is a value,
+      // and `||` silently threw it away (same falsy-as-empty class as cloud#972).
+      defaultValue: schema?.defaultValue ?? schema?.value,
       ...schema,
     };
 
@@ -2438,6 +2397,10 @@ export function registerFields() {
 }
 
 export * from './widgets/types';
+// File field value shapes (ObjectStack ADR-0104 D3 wave 2) — the single
+// arbiter of reference vs expanded vs legacy-blob form, shared by the upload
+// widgets and by action-param serialization.
+export * from './widgets/file-value';
 export * from './FieldEditWidget';
 export * from './widgets/TextField';
 export * from './widgets/NumberField';

package/src/widgets/AddressField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input, Label, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Address data structure
@@ -17,7 +17,7 @@ export interface AddressValue {
  * Address field widget - provides a structured address input
  * Supports street, city, state, zip code, and country
  */
-export function AddressField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<AddressValue>) {
+export function AddressField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<AddressValue>) {
   const address = value || {};
 
   const handleFieldChange = (fieldName: keyof AddressValue, fieldValue: string) => {

package/src/widgets/AutoNumberField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * AutoNumberField - Read-only auto-generated field
  * Values are automatically generated by the system and cannot be edited
  */
-export function AutoNumberField({ value, field, ...props }: FieldWidgetProps<string | number>) {
+export function AutoNumberField({ value, field, ...props }: FieldWidgetComponentProps<string | number>) {
   if (value == null) {
     return <EmptyValue className={props.className} />;
   }

package/src/widgets/AvatarField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
 import { Upload, X } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Avatar field widget - provides an avatar/profile picture uploader
  * Supports image URLs or file uploads
  */
-export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   const [isHovered, setIsHovered] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   

package/src/widgets/BooleanField.tsx

@@ -1,12 +1,12 @@
 import React, { useId } from 'react';
 import { Switch, Checkbox, Label } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * BooleanField - Toggle input supporting switch and checkbox variants
  * Renders as Switch or Checkbox based on field widget configuration
  */
-export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<boolean>) {
+export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<boolean>) {
   const config = (field || (props as any).schema) as any;
   // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
   const widget = config?.widget;

package/src/widgets/CapabilityMultiSelectField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Badge, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { DataSource, QueryParams } from '@object-ui/types';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -86,12 +86,12 @@ export function CapabilityMultiSelectField({
   readonly,
   className,
   ...props
-}: FieldWidgetProps<string | string[]>) {
+}: FieldWidgetComponentProps<string | string[]>) {
   const { t } = useFieldTranslation();
   const ctx = React.useContext(SchemaRendererContext);
   const dataSource: DataSource | null =
-    (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
-  const disabled = (props as any).disabled as boolean | undefined;
+    (props.dataSource as any) ?? (ctx as any)?.dataSource ?? null;
+  const disabled = props.disabled;
 
   const [caps, setCaps] = React.useState<Capability[] | null>(null);