@object-ui/fields 17.1.0 → 17.2.0

package/dist/widgets/types.d.ts

@@ -1,7 +1,53 @@
-import { FieldMetadata } from '@object-ui/types';
-export type FieldWidgetProps<T = any> = {
+import { AriaAttributes, FocusEventHandler, MouseEventHandler } from 'react';
+import { DependsOnInput, FieldMetadata } from '@object-ui/types';
+/**
+ * Props every field widget in this package receives at RUNTIME.
+ *
+ * Named `FieldWidgetComponentProps`, not `FieldWidgetProps` (objectui#3161,
+ * objectstack#4115 ledger batch 7), adopting the name `@object-ui/app-shell`
+ * settled on for the same split in objectui#3169: `@objectstack/spec/ui` owns
+ * `FieldWidgetProps` for the DECLARED widget-plugin contract — a zod object
+ * (`FieldWidgetPropsSchema`) a plugin manifest is validated against, with
+ * `field` narrowed to `{ name?, label?, type: <the FieldType enum> }` and
+ * `readonly` / `required` carrying `.default()`s. This is the React interface
+ * the widgets in this directory actually implement, against
+ * `@object-ui/types`'s much richer `FieldMetadata`.
+ *
+ * The two are NOT interchangeable, and the divergence is not cosmetic: the
+ * spec's contract names the error slot `error`, this one names it
+ * `errorMessage`, so a widget written to the spec's declared props renders no
+ * validation message here. That divergence is tracked in objectui#3222 and is
+ * deliberately NOT resolved here — but it is now *visible*: reading
+ * `props.error` or `props.required` off this type is a compile error rather
+ * than a silent `any`.
+ *
+ * ## Why there is no `[key: string]: any` (objectui#3221)
+ *
+ * This type used to end in an index signature, "load-bearing" for the widgets'
+ * `...props` spreads. It was also why every drift above was invisible: **a type
+ * that claims to have every key can never be reported as missing one** (the
+ * objectstack#4075 mechanism). `props.required` and `props.error` were legal
+ * reads typed `any` and always `undefined` at runtime; a misspelled prop
+ * (`readOnly` for `readonly`, `onchange` for `onChange`) compiled; and any
+ * structural/parity comparison against the type was useless *in principle*,
+ * which is why the batch-7 symbol guard was the only detector that could see
+ * the collision at all.
+ *
+ * It is replaced by the CLOSED set below: the controlled-input contract, the
+ * host plumbing the form renderer genuinely forwards, and a DOM pass-through
+ * allowance. `data-*` is an open family by design (it is open in HTML too) and
+ * is expressed as a template-literal index signature, which — unlike
+ * `[key: string]` — leaves `keyof` finite, so an undeclared prop still fails.
+ *
+ * Adding a key here is a contract change: say who produces it and who reads it.
+ */
+export type FieldWidgetComponentProps<T = any> = {
     value: T;
     onChange: (val: T) => void;
+    /**
+     * The field's metadata. Deliberately the looser `@object-ui/types` shape
+     * rather than the spec's, to avoid a circular dependency for now.
+     */
     field: FieldMetadata;
     readonly?: boolean;
     disabled?: boolean;
@@ -13,5 +59,75 @@ export type FieldWidgetProps<T = any> = {
      * widgets ignore it.
      */
     onUploadingChange?: (uploading: boolean) => void;
-    [key: string]: any;
+    /**
+     * The raw authored node the widget was rendered from. Two hosts supply it:
+     * `SchemaRenderer` (`<Component schema={schema} {...schema} />`) and the
+     * form renderer's `renderFieldComponent` (`schema={props.field || ...}`),
+     * which is why ~25 widgets read `field || schema` for their config.
+     *
+     * This is a second carrier for what `field` already means, i.e. a de-facto
+     * second contract (AGENTS.md #0.1) — declared here so it is at least
+     * visible; converging the two is tracked separately.
+     */
+    schema?: FieldMetadata | Record<string, unknown>;
+    /**
+     * DataSource for widgets that query records (lookup / user / object-ref /
+     * recipient-picker / grid). Injected by the form renderer for the field
+     * types that need it, and passed directly by inline-edit hosts. Option
+     * widgets destructure it purely to keep it off their DOM spread.
+     *
+     * Left structural (`unknown`): `@object-ui/fields` must not depend on a
+     * concrete adapter — every consumer narrows it itself.
+     */
+    dataSource?: unknown;
+    /**
+     * Live sibling-field values driving cascading / role-gated options and
+     * dependent lookups (ADR-0058, #2215/#2284). The form renderer passes the
+     * in-progress record; widgets fall back to `SchemaRendererContext`.
+     */
+    dependentValues?: Record<string, unknown>;
+    /**
+     * Controlling field(s) that gate this field's option list. Normally declared
+     * on the field metadata; accepted as a prop so a host can drive the gate for
+     * a field it synthesised. Field metadata wins when both are present.
+     */
+    dependsOn?: DependsOnInput;
+    /**
+     * Hint shown when a dependency-gated option list is still waiting on its
+     * controlling field. Forwarded by the form renderer; the option widgets in
+     * this package currently discard it and render their own message instead.
+     */
+    emptyHint?: string;
+    /**
+     * Render as a single-line, borderless control for a grid cell (the inline
+     * editor and the line-item grid set it) instead of the full form layout.
+     */
+    compact?: boolean;
+    /**
+     * Receive the FULL selected record rather than just its id, so a host can
+     * auto-fill sibling fields from it (a line-item grid copying a product's
+     * price). When provided, the host owns the resulting value change.
+     */
+    onSelectRecord?: (record: Record<string, any>) => void;
+    /**
+     * Offer a "create new" affordance in a record picker, carrying whatever the
+     * user had typed. Also declarable on the field metadata.
+     */
+    onCreateNew?: (searchQuery: string) => void;
+    id?: string;
+    /** react-hook-form's field name, spread in by the form renderer. */
+    name?: string;
+    autoFocus?: boolean;
+    tabIndex?: number;
+    onBlur?: FocusEventHandler<HTMLElement>;
+    onFocus?: FocusEventHandler<HTMLElement>;
+    onClick?: MouseEventHandler<HTMLElement>;
+} & AriaAttributes & {
+    /**
+     * Arbitrary `data-*` attributes (test ids, analytics hooks). Open by design,
+     * but a template-literal key — `keyof` stays finite, so this does NOT
+     * reintroduce the index signature objectui#3221 removed: `props.required`
+     * is still an error, `props['data-testid']` is still fine.
+     */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -24,25 +24,25 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@objectstack/spec": "^17.0.0-rc.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.25.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.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"
+    "@object-ui/components": "17.2.0",
+    "@object-ui/core": "17.2.0",
+    "@object-ui/i18n": "17.2.0",
+    "@object-ui/providers": "17.2.0",
+    "@object-ui/react": "17.2.0",
+    "@object-ui/types": "17.2.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.4",

package/src/FieldEditWidget.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { FieldWidgetProps } from './widgets/types';
+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
@@ -54,7 +54,7 @@ import { mapFieldTypeToFormType } from './field-type-alias';
  * 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>>> = {
+const EDIT_WIDGETS: Record<string, React.ComponentType<FieldWidgetComponentProps<any>>> = {
   text: TextField,
   textarea: TextAreaField,
   number: NumberField,
@@ -180,10 +180,12 @@ export function FieldEditWidget({
   value,
   onChange,
   readonly,
-}: FieldWidgetProps<any>): React.ReactElement | null {
+}: 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} {...(compactProps as any)} />;
+  return <Widget field={field} value={value} onChange={onChange} readonly={readonly} {...compactProps} />;
 }

package/src/__tests__/spec-symbol-batch7.test.ts

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ */
+
+/**
+ * `@object-ui/fields` ↔ `@objectstack/spec` symbol-collision guards
+ * (objectui#3161, objectstack#4115 ledger batch 7).
+ *
+ * Two symbols, two different verdicts:
+ *
+ *  - `isFileIdToken` was a character-for-character copy of the spec's function
+ *    under the spec's own name. It is a re-export now, and the gate below is
+ *    REFERENCE IDENTITY — not behaviour. A faithful copy passes every behaviour
+ *    test ever written for it (objectui#3003, re-proved on
+ *    `isAggregatedViewContainer` in objectui#3169), so `toBe` is the only
+ *    assertion that can tell a re-export from a fork.
+ *
+ *  - `FieldWidgetProps` is now `FieldWidgetComponentProps`. The spec owns that
+ *    name for the DECLARED widget-plugin props contract; this package's is the
+ *    React interface its widgets implement. The pins record the divergence that
+ *    made re-exporting impossible — and, since objectui#3221 closed the type,
+ *    that the divergence is now *visible* rather than swallowed by a
+ *    `[key: string]: any` index signature.
+ *
+ * The other direction — "the spec must not start owning the NEW names" — is not
+ * asserted here because `scripts/check-spec-symbol-derivation.mjs` already
+ * answers it on every CI run, for every name in the package rather than the
+ * handful a test would remember to list.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { isFileIdToken as specIsFileIdToken } from '@objectstack/spec/data';
+import type { FieldWidgetProps as SpecFieldWidgetProps } from '@objectstack/spec/ui';
+
+import { isFileIdToken, fileIdOf } from '../widgets/file-value';
+import type { FieldWidgetComponentProps } from '../widgets/types';
+
+describe('isFileIdToken IS the spec function', () => {
+  it('is the same function object, not an equivalent one', () => {
+    // The whole point. Every value/behaviour assertion below this line would
+    // also pass against a re-forked copy; this one would not.
+    expect(isFileIdToken).toBe(specIsFileIdToken);
+  });
+
+  it('is the arbiter the rest of the module routes through', () => {
+    // `fileIdOf` must keep agreeing with the shared predicate, so a future
+    // "small local tweak" to the id shape cannot be reintroduced one caller at
+    // a time.
+    for (const value of ['abc123', 'AbC-_9', 'x'.repeat(64)]) {
+      expect(specIsFileIdToken(value)).toBe(true);
+      expect(fileIdOf(value)).toBe(value);
+    }
+    for (const value of ['https://example.com/f.png', '/api/v1/storage/files/1', 'a.b', 'x'.repeat(65)]) {
+      expect(specIsFileIdToken(value)).toBe(false);
+      expect(fileIdOf(value)).toBeUndefined();
+    }
+  });
+});
+
+/* -------------------------------------------------------------------------- */
+/* Compile-time pins. A violation is a `tsc` error, not a runtime failure.     */
+/* This package's tsconfig.json includes its tests, so `type-check` compiles   */
+/* them (scripts/check-type-check-coverage.mjs keeps that true).              */
+/* -------------------------------------------------------------------------- */
+
+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;
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type HasKey<T, K extends string> = K extends keyof T ? true : false;
+
+describe('FieldWidgetComponentProps is the RENDERED layer of the spec contract', () => {
+  it('is pinned at compile time', () => {
+    // The import above is itself half the tripwire: the day the spec stops
+    // exporting `FieldWidgetProps`, this file stops compiling and the rename's
+    // reason is up for re-triage (the plain name could come back).
+    type _SpecIsReal = Assert<Equal<IsAny<SpecFieldWidgetProps>, false>>;
+
+    // The divergence that makes a re-export impossible AND is a live defect
+    // worth naming: the declared contract calls the validation-message slot
+    // `error`; every widget in this package reads `errorMessage`. A widget
+    // written against the spec's declared props renders no message here, and
+    // nothing reports it. Recorded, not fixed, by the rename — objectui#3222.
+    type _SpecNamesItError = Assert<HasKey<SpecFieldWidgetProps, 'error'>>;
+    type _LocalNamesItErrorMessage = Assert<HasKey<FieldWidgetComponentProps, 'errorMessage'>>;
+
+    // …and the reason nobody noticed used to sit right here: three pins
+    // asserting that `[key: string]: any` was still present, and that
+    // `props.required` / `props.error` therefore read as `any`. objectui#3221
+    // removed that index signature, so those pins have gone red on purpose and
+    // are gone with it. What replaces them is the inverse claim — the type is
+    // now CLOSED, so the two keys the spec declares and this one does not can
+    // finally be reported as missing. That is what makes objectui#3222 (the
+    // `error` / `errorMessage` divergence) decidable by the compiler instead of
+    // by a symbol guard.
+    type _NoStringIndexSignature = Assert<Equal<Extends<string, keyof FieldWidgetComponentProps>, false>>;
+    type _RequiredIsAbsent = Assert<Equal<HasKey<FieldWidgetComponentProps, 'required'>, false>>;
+    type _ErrorIsAbsent = Assert<Equal<HasKey<FieldWidgetComponentProps, 'error'>, false>>;
+
+    // `data-*` stays open (it is open in HTML too), but as a template-literal
+    // key — the distinction that keeps `keyof` finite above. A pin, because
+    // widening it back to `[key: string]` would silently restore the defect
+    // while every assertion here still read as "closed".
+    type _DataAttributesStayOpen = Assert<Extends<'data-testid', keyof FieldWidgetComponentProps>>;
+
+    expect(true).toBe(true);
+  });
+});

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/index.tsx

@@ -2048,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,
     };
 

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);
 

package/src/widgets/CheckboxesField.tsx

@@ -1,7 +1,7 @@
 import React, { useId, useEffect } from 'react';
 import { Checkbox, Label, EmptyValue, Badge } from '@object-ui/components';
 import type { OptionLike } from '@object-ui/core';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -30,12 +30,12 @@ export function CheckboxesField({
   emptyHint: _emptyHint,
   dataSource: _dataSource,
   ...props
-}: FieldWidgetProps<string[]>) {
+}: FieldWidgetComponentProps<string[]>) {
   const config = (field || schema) as any;
   const rawOptions: Option[] = config?.options || [];
   const selected: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const groupId = useId();
-  const fieldName = (props as any).name || config?.name || (props as any).id || '';
+  const fieldName = props.name || config?.name || props.id || '';
 
   const dependsOn = config?.dependsOn ?? dependsOnProp;
   const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
@@ -107,7 +107,7 @@ export function CheckboxesField({
               id={id}
               checked={selected.includes(value)}
               onCheckedChange={(checked) => toggle(value, !!checked)}
-              disabled={(props as any).disabled}
+              disabled={props.disabled}
               data-testid={`checkboxes-option-${value}`}
             />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>

package/src/widgets/CodeField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Textarea, cn, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Code field widget - provides a code editor with syntax highlighting
  * Uses a simple textarea with monospace font
  * For advanced code editing, use the @object-ui/plugin-editor component
  */
-export function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   const config = field || (props as any).schema;
   // Get code-specific configuration from field metadata
   const language = (config as any)?.language ?? 'javascript';