@object-ui/fields 16.1.0 → 17.2.0

package/src/widgets/PercentField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Input, Slider, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * PercentField - Percentage input with configurable decimal precision
  * Stores values as decimals (0-1) and displays as percentages (0-100%)
  * Includes a slider for interactive control.
  */
-export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
+export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetComponentProps<number>) {
   const percentField = (field || (props as any).schema) as any;
   const precision = percentField?.precision ?? 2;
 

package/src/widgets/PhoneField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * PhoneField - Telephone number input with tel link in readonly mode
  * Renders as a clickable tel link when readonly, standard phone input otherwise
  */
-export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
   const config = field || (props as any).schema;
   if (readonly) {
     if (!value) return <EmptyValue />;

package/src/widgets/QRCodeField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * QR Code field widget - generates QR codes from text
  * Uses a simple SVG-based QR code generator
  */
-export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   const [showQR, setShowQR] = React.useState(false);
   const config = field || (props as any).schema;
 

package/src/widgets/RadioField.tsx

@@ -1,7 +1,7 @@
 import React, { useId, useEffect } from 'react';
 import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -30,11 +30,11 @@ export function RadioField({
   emptyHint: _emptyHint,
   dataSource: _dataSource,
   ...props
-}: FieldWidgetProps<string>) {
+}: FieldWidgetComponentProps<string>) {
   const config = (field || schema) as any;
   const rawOptions: Option[] = config?.options || [];
   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>(
@@ -81,14 +81,17 @@ export function RadioField({
     <RadioGroup
       value={value ?? ''}
       onValueChange={onChange}
-      disabled={(props as any).disabled}
+      disabled={props.disabled}
       className={className}
     >
       {options.map((opt) => {
-        const id = `${groupId}-${opt.value}`;
+        // Radix speaks strings — stringify the (possibly numeric,
+        // #3090-widened) authored value at this boundary.
+        const value = String(opt.value);
+        const id = `${groupId}-${value}`;
         return (
-          <div key={opt.value} className="flex items-center space-x-2">
-            <RadioGroupItem value={opt.value} id={id} data-testid={`radio-option-${opt.value}`} />
+          <div key={value} className="flex items-center space-x-2">
+            <RadioGroupItem value={value} id={id} data-testid={`radio-option-${value}`} />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>
           </div>
         );

package/src/widgets/RatingField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<number>) {
   // Get rating-specific configuration from field metadata
   const ratingField = (field || (props as any).schema) as any;
   const max = ratingField?.max ?? 5;

package/src/widgets/RecipientPickerField.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * 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.
+ */
+
+/**
+ * RecipientPickerField — the sharing-rule recipient picker (objectstack#3821).
+ *
+ * Two regressions are pinned here:
+ *  1. the candidate query must use the STRUCTURED `$orderby` form. It used to
+ *     pass the clause string `'name asc'`, which ApiDataSource walked
+ *     character by character into `0 n,1 a,2 m,…`; the server then sorted by
+ *     columns that don't exist and every recipient list came back empty, so
+ *     the control read "No matches" forever and no rule could be saved.
+ *  2. the placeholder must come from a per-type i18n key, not from
+ *     interpolating the enum value into an English sentence.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { RecipientPickerField } from './RecipientPickerField';
+
+const USERS = [
+  { id: 'usr_1', name: 'Ada Auditor' },
+  { id: 'usr_2', name: 'Bob Builder' },
+];
+
+function mockDataSource(rows: any[] = USERS) {
+  return { find: vi.fn().mockResolvedValue({ data: rows }) } as any;
+}
+
+function renderPicker(recipientType: string, dataSource: any, value = '') {
+  return render(
+    <RecipientPickerField
+      value={value}
+      onChange={vi.fn()}
+      field={{ name: 'recipient_id' } as any}
+      dataSource={dataSource}
+      dependentValues={{ recipient_type: recipientType }}
+    />,
+  );
+}
+
+describe('RecipientPickerField — candidate query', () => {
+  it('orders candidates with the structured $orderby form, never a clause string', async () => {
+    const ds = mockDataSource();
+    renderPicker('user', ds);
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    const [object, params] = ds.find.mock.calls[0];
+    expect(object).toBe('sys_user');
+    expect(params.$orderby).toEqual({ name: 'asc' });
+    // A bare string is what regressed; assert the shape explicitly.
+    expect(typeof params.$orderby).not.toBe('string');
+  });
+
+  it('queries the object mapped to each recipient type', async () => {
+    for (const [type, object] of [
+      ['user', 'sys_user'],
+      ['team', 'sys_team'],
+      ['business_unit', 'sys_business_unit'],
+      ['unit_and_subordinates', 'sys_business_unit'],
+      ['position', 'sys_position'],
+    ] as const) {
+      const ds = mockDataSource([]);
+      const { unmount } = renderPicker(type, ds);
+      await waitFor(() => expect(ds.find).toHaveBeenCalled());
+      expect(ds.find.mock.calls[0][0]).toBe(object);
+      unmount();
+    }
+  });
+
+  it('shows the loaded records as options once the list is opened', async () => {
+    const ds = mockDataSource();
+    renderPicker('user', ds);
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByRole('combobox'));
+    expect(await screen.findByText('Ada Auditor')).toBeInTheDocument();
+    expect(screen.getByText('Bob Builder')).toBeInTheDocument();
+  });
+});
+
+describe('RecipientPickerField — keeping the stored recipient', () => {
+  function renderControlled(initialType: string, value: string, onChange: any) {
+    const ds = mockDataSource();
+    const view = render(
+      <RecipientPickerField
+        value={value}
+        onChange={onChange}
+        field={{ name: 'recipient_id' } as any}
+        dataSource={ds}
+        dependentValues={{ recipient_type: initialType }}
+      />,
+    );
+    const rerenderWith = (type: string) =>
+      view.rerender(
+        <RecipientPickerField
+          value={value}
+          onChange={onChange}
+          field={{ name: 'recipient_id' } as any}
+          dataSource={ds}
+          dependentValues={{ recipient_type: type }}
+        />,
+      );
+    return { ...view, rerenderWith };
+  }
+
+  it('keeps the saved recipient when the type arrives late (edit form hydrating)', async () => {
+    // The edit dialog mounts the widget before the record lands, so
+    // recipient_type is '' on the first render and 'user' on the next. That is
+    // hydration, not the admin changing the type — clearing there wiped the
+    // saved recipient and the blank got persisted on save.
+    const onChange = vi.fn();
+    const { rerenderWith } = renderControlled('', 'usr_1', onChange);
+    rerenderWith('user');
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+
+  it('clears the recipient when the admin actually switches type', async () => {
+    const onChange = vi.fn();
+    const { rerenderWith } = renderControlled('user', 'usr_1', onChange);
+    rerenderWith('team');
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(''));
+  });
+
+  it('does not clear when the type is unset back to empty', async () => {
+    const onChange = vi.fn();
+    const { rerenderWith } = renderControlled('user', 'usr_1', onChange);
+    rerenderWith('');
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+});
+
+describe('RecipientPickerField — localizable copy', () => {
+  it('takes the placeholder from a per-type key rather than the raw enum value', async () => {
+    // With no I18nProvider the widget falls back to the English defaults, so
+    // the assertion is on the *wording*: 'Select a business unit' can only come
+    // from the keyed string — interpolating the enum produced
+    // 'Select a business unit' only by accident and 'Select a unit and
+    // subordinates' for the next type over.
+    const ds = mockDataSource([]);
+    renderPicker('unit_and_subordinates', ds);
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(await screen.findByText('Select a business unit')).toBeInTheDocument();
+    expect(screen.queryByText(/unit and subordinates/i)).not.toBeInTheDocument();
+  });
+
+  it('prompts for a recipient type before one is chosen', () => {
+    renderPicker('', mockDataSource([]));
+    expect(screen.getByText('Select a recipient type first.')).toBeInTheDocument();
+  });
+});

package/src/widgets/RecipientPickerField.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
-import type { FieldWidgetProps } from './types';
+import type { FieldWidgetComponentProps } from './types';
+import { useFieldTranslation } from './useFieldTranslation';
 
 /**
  * RecipientPickerField — dependent record picker for a polymorphic recipient
@@ -31,14 +32,20 @@ interface RecipientMapping {
   storeField: 'id' | 'name';
   /** Candidate display-label fields, in preference order. */
   labelFields: string[];
+  /**
+   * i18n key for the "choose one" placeholder. Keyed per type rather than
+   * interpolating the enum value into an English sentence — "Select a
+   * business unit" and "选择业务单元" share no structure (objectstack#3821).
+   */
+  placeholderKey: string;
 }
 
 const TYPE_TO_OBJECT: Record<string, RecipientMapping> = {
-  user: { object: 'sys_user', storeField: 'id', labelFields: ['name', 'full_name', 'email'] },
-  team: { object: 'sys_team', storeField: 'id', labelFields: ['name', 'label'] },
-  business_unit: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'] },
-  unit_and_subordinates: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'] },
-  position: { object: 'sys_position', storeField: 'name', labelFields: ['label', 'name'] },
+  user: { object: 'sys_user', storeField: 'id', labelFields: ['name', 'full_name', 'email'], placeholderKey: 'fields.recipient.selectUser' },
+  team: { object: 'sys_team', storeField: 'id', labelFields: ['name', 'label'], placeholderKey: 'fields.recipient.selectTeam' },
+  business_unit: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'], placeholderKey: 'fields.recipient.selectBusinessUnit' },
+  unit_and_subordinates: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'], placeholderKey: 'fields.recipient.selectUnitAndSubordinates' },
+  position: { object: 'sys_position', storeField: 'name', labelFields: ['label', 'name'], placeholderKey: 'fields.recipient.selectPosition' },
 };
 
 export function RecipientPickerField({
@@ -47,22 +54,29 @@ export function RecipientPickerField({
   readonly,
   className,
   ...props
-}: FieldWidgetProps<string>) {
+}: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
-  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
-  const disabled = (props as any).disabled as boolean | undefined;
+  const { t } = useFieldTranslation();
+  const dataSource: any = props.dataSource ?? (ctx as any)?.dataSource ?? null;
+  const disabled = props.disabled;
   const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
   const recipientType = String(dependentValues.recipient_type ?? '');
   const mapping = TYPE_TO_OBJECT[recipientType];
 
   const [records, setRecords] = React.useState<any[] | null>(null);
 
-  // Reset the stored recipient when the type changes AFTER mount (an id for a
-  // user is not a valid team/business-unit id). The ref starts null so the
-  // initial render of an existing rule never clears its value.
-  const prevType = React.useRef<string | null>(null);
+  // Reset the stored recipient when the admin PICKS a different type (an id for
+  // a user is not a valid team/business-unit id).
+  //
+  // "Different type" means one non-empty type replacing another. The empty
+  // string is not a type — it is the edit form before the record has hydrated,
+  // and treating `'' → 'user'` as a change wiped the saved recipient the moment
+  // an existing rule was opened for editing (objectstack#3821): the picker went
+  // blank, and saving persisted the blank. Only a non-empty predecessor can
+  // invalidate the stored id.
+  const prevType = React.useRef<string>('');
   React.useEffect(() => {
-    if (prevType.current !== null && prevType.current !== recipientType && value) {
+    if (prevType.current && recipientType && prevType.current !== recipientType && value) {
       onChange('' as any);
     }
     prevType.current = recipientType;
@@ -75,7 +89,11 @@ export function RecipientPickerField({
     let cancelled = false;
     (async () => {
       try {
-        const res = await dataSource.find(mapping.object, { $top: 500, $orderby: 'name asc' });
+        // Object form, not the 'name asc' clause string: the clause string is
+        // supported again (objectstack#3821 fixed ApiDataSource walking it
+        // character by character), but the structured form can't regress that
+        // way for any data source.
+        const res = await dataSource.find(mapping.object, { $top: 500, $orderby: { name: 'asc' } });
         const list: any[] = res?.data ?? res?.records ?? (Array.isArray(res) ? res : []);
         if (!cancelled) setRecords(Array.isArray(list) ? list : []);
       } catch {
@@ -105,7 +123,7 @@ export function RecipientPickerField({
   if (!recipientType) {
     return (
       <p className={cn('text-sm text-muted-foreground', className)}>
-        Select a recipient type first.
+        {t('fields.recipient.selectTypeFirst')}
       </p>
     );
   }
@@ -137,12 +155,14 @@ export function RecipientPickerField({
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
       placeholder={
-        records === null ? 'Loading…' : `Select a ${recipientType.replace(/_/g, ' ')}`
+        records === null
+          ? t('fields.recipient.loading')
+          : t(mapping.placeholderKey ?? 'fields.recipient.select')
       }
-      searchPlaceholder="Search…"
-      emptyText={records === null ? 'Loading…' : 'No matches'}
+      searchPlaceholder={t('fields.recipient.search')}
+      emptyText={records === null ? t('fields.recipient.loading') : t('fields.recipient.empty')}
       disabled={disabled}
-      className={className}
+      className={cn('w-full', className)}
     />
   );
 }

package/src/widgets/RichTextField.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Textarea, EmptyValue } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Rich text field with markdown/HTML support
  * For now, this is a simple textarea. A full implementation would use
  * a rich text editor like TipTap, Lexical, or Slate.
  */
-export function RichTextField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+export function RichTextField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
   const { t } = useObjectTranslation();
   if (readonly) {
     return (

package/src/widgets/SelectField.tsx

@@ -10,7 +10,7 @@ import {
 import { isValueStillOffered } from '@object-ui/core';
 import { SelectFieldMetadata } from '@object-ui/types';
 import { useFieldTranslation } from './useFieldTranslation';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { MultiSelectField } from './MultiSelectField';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -29,12 +29,12 @@ import { useCascadingOptions } from './useCascadingOptions';
  * the shared {@link useCascadingOptions} hook (#2715), so single and multi stay
  * in lockstep.
  */
-export function SelectField(props: FieldWidgetProps<any>) {
+export function SelectField(props: FieldWidgetComponentProps<any>) {
   const config = (props.field || (props as any).schema) as SelectFieldMetadata | undefined;
   if ((config as any)?.multiple) {
     return <MultiSelectField {...props} />;
   }
-  return <SingleSelectField {...(props as FieldWidgetProps<string>)} />;
+  return <SingleSelectField {...(props as FieldWidgetComponentProps<string>)} />;
 }
 
 /**
@@ -59,7 +59,7 @@ function SingleSelectField({
   emptyHint: _emptyHint,
   dataSource: _dataSource,
   ...props
-}: FieldWidgetProps<string>) {
+}: FieldWidgetComponentProps<string>) {
   const config = (field || schema) as SelectFieldMetadata;
   const rawOptions = config?.options || [];
   const { t } = useFieldTranslation();
@@ -67,7 +67,7 @@ function SingleSelectField({
   // driven by synthetic DOM events, so e2e must target the trigger/options by a
   // deterministic testid keyed on the field name. `props.name` is the
   // react-hook-form field name spread in by the form renderer (FormField).
-  const fieldName = (props as any).name || (config as any)?.name || props.id || '';
+  const fieldName = props.name || (config as any)?.name || props.id || '';
 
   const dependsOn = (config as any)?.dependsOn ?? dependsOnProp;
   const { options, gated, dependsOnFields } = useCascadingOptions(

package/src/widgets/SignatureField.tsx

@@ -1,13 +1,13 @@
 import React, { useRef, useEffect } from 'react';
 import { Button } from '@object-ui/components';
 import { Eraser } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Signature field widget - provides a signature pad for capturing signatures
  * Outputs signature as a base64 PNG image
  */
-export function SignatureField({ value, onChange, readonly }: FieldWidgetProps<string>) {
+export function SignatureField({ value, onChange, readonly }: FieldWidgetComponentProps<string>) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrawing, setIsDrawing] = React.useState(false);
   const [isEmpty, setIsEmpty] = React.useState(!value);

package/src/widgets/SliderField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Slider } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * Slider field widget - provides a range slider input
  * Supports numeric values with configurable min, max, and step
  */
-export function SliderField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>) {
+export function SliderField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<number>) {
   // Get slider-specific configuration from field metadata
   const sliderField = (field || (props as any).schema) as any;
   const min = sliderField?.min ?? 0;

package/src/widgets/SummaryField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * SummaryField - Read-only aggregation field
  * Values are aggregated from related records and cannot be edited
  */
-export function SummaryField({ value, field, ...props }: FieldWidgetProps<any>) {
+export function SummaryField({ value, field, ...props }: FieldWidgetComponentProps<any>) {
   const summaryField = (field || (props as any).schema) as any;
   const summaryType = summaryField?.summary_type || 'count';
 

package/src/widgets/TagsField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Badge, Input, EmptyValue, cn } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * TagsField - free-form list of string tags. Type a value and press Enter (or
  * comma) to add it; click a tag's × to remove it. The stored value is a
  * string[]. Used for the `tags` field type.
  */
-export function TagsField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string[]>) {
+export function TagsField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string[]>) {
   const tags: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const [draft, setDraft] = React.useState('');
 
@@ -58,7 +58,7 @@ export function TagsField({ value, onChange, field, readonly, className, ...prop
         onChange={(e) => setDraft(e.target.value)}
         onKeyDown={onKeyDown}
         onBlur={() => addTag(draft)}
-        disabled={(props as any).disabled}
+        disabled={props.disabled}
         placeholder={tags.length === 0 ? '输入后回车添加…' : ''}
         className="h-7 flex-1 border-0 bg-transparent p-0 px-1 shadow-none focus-visible:ring-0 min-w-[8ch]"
       />

package/src/widgets/TextAreaField.tsx

@@ -10,7 +10,7 @@ import {
   Button,
 } from '@object-ui/components';
 import { Maximize2, Check, X } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * TextAreaField - Multi-line text input widget
@@ -21,7 +21,7 @@ import { FieldWidgetProps } from './types';
  * a fullscreen edit dialog — much easier on phones than tapping a 4-row
  * textarea trapped between other fields.
  */
-export function TextAreaField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+export function TextAreaField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
   // Hooks must run before any early return (readonly) to keep hook order stable.
   const [fullscreenOpen, setFullscreenOpen] = useState(false);
   const [draft, setDraft] = useState(value ?? '');
@@ -36,7 +36,10 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
 
   const textareaField = (field || (props as any).schema) as any;
   const rows = textareaField?.rows || 4;
-  const maxLength = textareaField?.max_length;
+  // Spec FieldSchema declares camelCase `maxLength`; `max_length` is the legacy
+  // objectui spelling. Dual-read (framework#1878 §3 recheck) — without this a
+  // spec-authored maxLength gave neither the textarea cap nor the counter.
+  const maxLength = textareaField?.maxLength ?? textareaField?.max_length;
   // Mobile fullscreen flag may arrive on the field metadata, on the form-field
   // schema (when called via the form renderer where `field` is the ObjectQL
   // metadata sub-object), or as an explicit widget prop.

package/src/widgets/TextField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Input, Textarea, EmptyValue } from '@object-ui/components';
 import { TextareaFieldMetadata } from '@object-ui/types';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * TextField - Standard single-line or multi-line text input
  * Automatically renders as a textarea when rows are configured in field metadata
  */
-export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   const fieldData = field || (props as any).schema;
 
   if (readonly) {

package/src/widgets/TimeField.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { openNativePicker } from './openNativePicker';
 
 /**
  * TimeField - Time picker input widget
  * Uses native time input for hour and minute selection
  */
-export function TimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function TimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   if (readonly) {
     return <span className="text-sm">{value || <EmptyValue />}</span>;
   }

package/src/widgets/UrlField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * UrlField - URL input with clickable link in readonly mode
  * Validates URLs to only render http/https links for security
  */
-export function UrlField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+export function UrlField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
   const config = field || (props as any).schema;
   if (readonly) {
     if (!value) return <EmptyValue />;

package/src/widgets/UserField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { LookupField } from './LookupField';
 
 /**
@@ -29,7 +29,7 @@ function withBannedFilter(filters?: any[]): any[] {
     : [...base, { field: 'banned', operator: 'ne', value: true }];
 }
 
-export function UserField(props: FieldWidgetProps<any>) {
+export function UserField(props: FieldWidgetComponentProps<any>) {
   const raw = (props.field || (props as any).schema) as any;
 
   // The objectSchema field metadata may live directly on `field`, or nested at

package/src/widgets/VectorField.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 
 /**
  * VectorField - Vector/embedding data display
  * Shows vector embeddings in a read-only format
  */
-export function VectorField({ value, field, ...props }: FieldWidgetProps<number[]>) {
+export function VectorField({ value, field, ...props }: FieldWidgetComponentProps<number[]>) {
   const vectorField = (field || (props as any).schema) as any;
   const dimensions = vectorField?.dimensions || (Array.isArray(value) ? value.length : 0);