@object-ui/fields 17.2.0 → 17.3.0

package/src/widgets/SliderField.tsx

@@ -8,7 +8,7 @@ import { FieldWidgetComponentProps } from './types';
  */
 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 sliderField = field as any;
   const min = sliderField?.min ?? 0;
   const max = sliderField?.max ?? 100;
   const step = sliderField?.step ?? 1;

package/src/widgets/SummaryField.tsx

@@ -7,7 +7,7 @@ import { FieldWidgetComponentProps } from './types';
  * Values are aggregated from related records and cannot be edited
  */
 export function SummaryField({ value, field, ...props }: FieldWidgetComponentProps<any>) {
-  const summaryField = (field || (props as any).schema) as any;
+  const summaryField = field as any;
   const summaryType = summaryField?.summary_type || 'count';
 
   if (value == null) {

package/src/widgets/TagsField.placeholder.no-provider.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+
+/**
+ * The tags widget's placeholder with NO `I18nProvider` mounted
+ * (objectui#3342) — standalone/embedded usage, and every test in the repo
+ * that renders a field widget bare.
+ *
+ * Routing the copy through `useFieldTranslation()` must not turn it into a
+ * raw i18n key when nothing is configured: `createSafeTranslation` probes the
+ * instance and falls back to its English defaults map. This is also where the
+ * Commandment #-1 pin lives: the copy shipped FROM CODE (the no-provider
+ * default) carries no CJK — Chinese exists only in the zh locale pack and can
+ * only arrive through a provider.
+ *
+ * Why a separate FILE rather than another case in
+ * `TagsField.placeholder.test.tsx`: mounting `I18nProvider` calls
+ * `initReactI18next`, which installs that instance as react-i18next's GLOBAL
+ * default. Once any sibling test has done so there is no "no provider" state
+ * left to observe in that module graph. Vitest's per-file isolation is what
+ * makes this file's observation honest (same split as
+ * `OptionsEmptyState.no-provider.test.tsx`).
+ */
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TagsField } from './TagsField';
+
+function renderTags(field: Record<string, unknown>) {
+  return render(
+    <TagsField
+      value={[]}
+      onChange={vi.fn()}
+      field={field as any}
+      {...({ name: 'labels' } as any)}
+    />,
+  );
+}
+
+const input = () => screen.getByRole('textbox');
+
+describe('TagsField placeholder — English fallback survives with no i18n configured', () => {
+  it('renders the English default, not a raw key', () => {
+    renderTags({ name: 'labels', type: 'tags' });
+    expect(input()).toHaveAttribute('placeholder', 'Type and press Enter to add…');
+    expect(input().getAttribute('placeholder')).not.toContain('fields.tags');
+  });
+
+  it('the code-shipped default carries no CJK (Commandment #-1)', () => {
+    renderTags({ name: 'labels', type: 'tags' });
+    // With no provider mounted, whatever renders here came from CODE
+    // (FIELD_DEFAULTS) — the commandment pin: no Chinese in the codebase.
+    // Escaped ranges on purpose: a literal CJK class would itself violate
+    // the commandment this test enforces (same shape as objectui#3321's pin).
+    expect(input().getAttribute('placeholder')).not.toMatch(/[\u3000-\u30ff\u4e00-\u9fff]/);
+  });
+
+  it('the author-declared field.placeholder still wins without a provider', () => {
+    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' });
+    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
+  });
+});

package/src/widgets/TagsField.placeholder.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+/**
+ * The tags widget's input placeholder (objectui#3342).
+ *
+ * It used to be a hardcoded Chinese literal in code — a double violation:
+ * Commandment #-1 (English-only codebase) AND a bypass of the i18n channel the
+ * sibling widgets already use. The pinned resolution chain is:
+ *
+ *   1. `field.placeholder` — the field author's declaration always wins;
+ *   2. `t('fields.tags.placeholder')` — the widget's own copy, from the
+ *      locale packs via `useFieldTranslation()`;
+ *   3. the English default in FIELD_DEFAULTS when no I18nProvider is mounted
+ *      (that leg lives in `TagsField.placeholder.no-provider.test.tsx` — see
+ *      its header for why it must be a separate file).
+ *
+ * Chinese now lives in the zh locale pack only, which is what the zh-locale
+ * case below observes end-to-end.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { I18nProvider } from '@object-ui/i18n';
+import { TagsField } from './TagsField';
+
+function renderTags(
+  field: Record<string, unknown>,
+  { value = [] as string[], language }: { value?: string[]; language?: string } = {},
+) {
+  const element = (
+    <TagsField
+      value={value}
+      onChange={vi.fn()}
+      field={field as any}
+      {...({ name: 'labels' } as any)}
+    />
+  );
+  return render(
+    language ? (
+      <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }}>
+        {element}
+      </I18nProvider>
+    ) : (
+      element
+    ),
+  );
+}
+
+const input = () => screen.getByRole('textbox');
+
+describe('TagsField placeholder — author declaration beats the widget copy (objectui#3342)', () => {
+  it('renders the author-declared field.placeholder', () => {
+    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, { language: 'en' });
+    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
+  });
+
+  it('the author declaration wins even under a non-English locale', () => {
+    // The author's copy is theirs verbatim — a locale switch must not
+    // overwrite an explicit declaration with the widget's own translation.
+    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, { language: 'zh' });
+    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
+    expect(input().getAttribute('placeholder')).not.toContain('输入后回车添加');
+  });
+});
+
+describe('TagsField placeholder — undeclared falls back to the translated key', () => {
+  it('renders the en pack copy under the en locale', () => {
+    renderTags({ name: 'labels', type: 'tags' }, { language: 'en' });
+    expect(input()).toHaveAttribute('placeholder', 'Type and press Enter to add…');
+  });
+
+  it('renders the zh pack copy under the zh locale — Chinese comes from the pack, not code', () => {
+    renderTags({ name: 'labels', type: 'tags' }, { language: 'zh' });
+    expect(input()).toHaveAttribute('placeholder', '输入后回车添加…');
+    // …and never the raw key.
+    expect(input().getAttribute('placeholder')).not.toContain('fields.tags');
+  });
+});
+
+describe('TagsField placeholder — shown only while the tag list is empty', () => {
+  it('is empty once a tag exists (the input is a continuation strip)', () => {
+    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, {
+      value: ['alpha'],
+      language: 'en',
+    });
+    expect(input()).toHaveAttribute('placeholder', '');
+  });
+});

package/src/widgets/TagsField.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import { Badge, Input, EmptyValue, cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { useFieldTranslation } from './useFieldTranslation';
 
 /**
  * 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 }: FieldWidgetComponentProps<string[]>) {
+export function TagsField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<string[]>) {
   const tags: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const [draft, setDraft] = React.useState('');
+  // Unconditional hook call (rules-of-hooks): before the readonly early return.
+  const { t } = useFieldTranslation();
 
   if (readonly) {
     if (tags.length === 0) return <EmptyValue />;
@@ -54,13 +58,30 @@ export function TagsField({ value, onChange, field, readonly, className, ...prop
         </Badge>
       ))}
       <Input
+        // DOM pass-through onto the real focusable control (objectui#3318):
+        // the whitelist spread carries the form renderer's id /
+        // aria-describedby to the input the user actually types in.
+        {...toDomProps(props)}
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         onKeyDown={onKeyDown}
         onBlur={() => addTag(draft)}
         disabled={props.disabled}
-        placeholder={tags.length === 0 ? '输入后回车添加…' : ''}
+        // Placeholder chain (objectui#3342): the author-declared
+        // `field.placeholder` wins; otherwise the widget's own copy arrives
+        // via `useFieldTranslation()` — `fields.tags.placeholder` in the
+        // locale packs, English default from FIELD_DEFAULTS when no
+        // I18nProvider is mounted. This used to be a hardcoded Chinese
+        // literal (Commandment #-1); Chinese now lives in the zh pack only.
+        // Shown only while the list is empty — once a tag exists the input is
+        // a small continuation strip and the hint would be noise.
+        placeholder={tags.length === 0 ? field?.placeholder || t('fields.tags.placeholder') : ''}
         className="h-7 flex-1 border-0 bg-transparent p-0 px-1 shadow-none focus-visible:ring-0 min-w-[8ch]"
+        // AFTER the spread so this widget's own computation wins (the #3222
+        // discipline): `error` is the published validation slot, and
+        // `!!undefined` yields an explicit "false" — a valid field SAYS it is
+        // valid rather than staying mute.
+        aria-invalid={!!error}
       />
     </div>
   );

package/src/widgets/TextAreaField.tsx

@@ -1,30 +1,84 @@
-import React, { useState } from 'react';
-import {
-  Textarea,
-  EmptyValue,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  Button,
-} from '@object-ui/components';
-import { Maximize2, Check, X } from 'lucide-react';
+import React, { useId } from 'react';
+import { Textarea, EmptyValue } from '@object-ui/components';
+import { CharacterCount } from './CharacterCount';
+import { FullscreenFieldEditor } from './FullscreenFieldEditor';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * TextAreaField - Multi-line text input widget
  * Supports configurable row count and preserves whitespace in readonly mode.
  *
- * Mobile UX (round 3): when the host form passes `mobileFullscreen` (or the
- * field schema sets `mobile_fullscreen: true`), an "expand" affordance opens
- * a fullscreen edit dialog — much easier on phones than tapping a 4-row
- * textarea trapped between other fields.
+ * Mobile UX (round 3): when the FIELD METADATA carries `mobile_fullscreen:
+ * true`, an "expand" affordance opens a fullscreen edit dialog — much easier
+ * on phones than tapping a 4-row textarea trapped between other fields.
+ *
+ * That flag has exactly one producer: `ObjectForm` stamps it onto every
+ * long-text field when `ObjectFormSchema.mobile.fullscreenLongText` is set
+ * (`plugin-form/src/ObjectForm.tsx`). It reaches this widget on `field` — the
+ * single metadata carrier since objectui#3233. A `SchemaRenderer`-hosted node
+ * arrives there too: the registry adapter (`withFieldCarrier`) maps the SDUI
+ * `schema` node onto `field` before the widget sees it.
+ *
+ * The affordance, the dialog and the draft/commit semantics live in the shared
+ * `FullscreenFieldEditor` — the same producer stamps the same flag on
+ * rich-text fields, and `RichTextField` renders it from there too
+ * (objectui#3301). Only the EDITOR differs per widget; here it is a
+ * full-height `Textarea`.
+ *
+ * There is deliberately NO widget-prop override. A `mobileFullscreen`
+ * (camelCase) prop was read here and written by nobody in the repo, and the
+ * snake_case `mobile_fullscreen` prop cannot arrive either: the form renderer
+ * strips both `mobile_fullscreen` and `fullscreen` from the props it forwards
+ * to registered widgets (`stripRegisteredFieldProps` in
+ * `components/src/renderers/form/form.tsx`). Reading keys nobody produces
+ * documented a contract that never held and invited the next author to pass a
+ * silently-ignored prop, so the reads are gone (objectui#3232). If a host
+ * override is ever genuinely needed, declare ONE key on
+ * `FieldWidgetComponentProps`, stop stripping it, and have a host pass it.
+ *
+ * ## The character counter (objectui#3408, shared across surfaces in #3417)
+ *
+ * Both editing surfaces below — the inline `<Textarea>` and the fullscreen
+ * dialog's — render the SAME `CharacterCount`, which owns the three-node
+ * GOV.UK shape (decorative digits / accessible description / gated status
+ * region) and the debounce and threshold behind it. Until #3417 the fullscreen
+ * footer had its own hand-written copy that was digits and nothing else, which
+ * is what a second copy of a UI always costs: it drifts, and nothing reports
+ * the drift.
+ *
+ * This widget's remaining job is the part only it can do — mint the two
+ * description ids and name each one in the `aria-describedby` of the control
+ * it describes. The surfaces differ in exactly one behaviour, and it is
+ * declared rather than implied: `announceNearLimit`. Inline announces
+ * (unchanged since #3408); the fullscreen dialog does not.
  */
-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 ?? '');
+
+export function TextAreaField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  // `useId` sits above the `readonly` early return because a hook may not sit
+  // behind a conditional return: the readonly branch renders no counter, so
+  // the ids go unused there, but moving the call down would desync hook order
+  // the moment a field toggles readonly. `maxLength` is derived here for the
+  // same reason the ids are — proximity to the hook, not because the readonly
+  // branch wants it.
+  const textareaField = field as any;
+  // 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;
+
+  /**
+   * Two description ids off one `useId()` — one per editing surface.
+   *
+   * They cannot be a single id. The dialog edits a LOCAL draft (see
+   * `FullscreenFieldEditor`), so the moment the user types in it the two
+   * surfaces are counting different strings; one shared id would point both
+   * textareas at whichever sentence rendered last. Both derive from the widget
+   * instance, so two textareas on one form never collide either.
+   */
+  const instanceId = useId();
+  const descriptionId = `${instanceId}-charcount`;
+  const fullscreenDescriptionId = `${instanceId}-fullscreen-charcount`;
 
   if (readonly) {
     return (
@@ -34,27 +88,29 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
     );
   }
 
-  const textareaField = (field || (props as any).schema) as any;
   const rows = textareaField?.rows || 4;
-  // 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.
-  const showFullscreenButton = Boolean(
-    (props as any).mobileFullscreen ??
-    textareaField?.mobile_fullscreen ??
-    (props as any).mobile_fullscreen ??
-    (props as any).schema?.mobile_fullscreen,
-  );
+  // Mobile fullscreen opt-in travels on the field metadata and nowhere else.
+  // That metadata has exactly one carrier (`field`, objectui#3233), so this is
+  // a single read — a misspelled flag has no read path to quietly catch it.
+  const showFullscreenButton = Boolean(textareaField?.mobile_fullscreen);
 
-  const openFullscreen = () => { setDraft(value ?? ''); setFullscreenOpen(true); };
-  const cancelFullscreen = () => setFullscreenOpen(false);
-  const commitFullscreen = () => { onChange(draft); setFullscreenOpen(false); };
+  const domProps = toDomProps(props);
+  // Resolved once and given to BOTH editing surfaces (objectui#3402). It used
+  // to reach the inline `<Textarea>` alone, so a disabled field greyed out
+  // correctly while its expand button stayed live and the dialog wrote the edit
+  // straight back through `onCommit`. `disabled` also carries the form's
+  // `isSubmitting`, so that hole was open for the duration of every submit.
+  const disabled = Boolean(domProps.disabled);
 
-  const { inputType, mobileFullscreen, ...domProps } = props as any;
+  // APPENDED, never assigned (objectui#3408). `<FormControl>` is a Radix Slot
+  // and already hands the control an `aria-describedby` naming the field's
+  // description and error message; it arrives here through `toDomProps`'
+  // `aria-*` pass-through. Overwriting it would trade "no cap announced" for
+  // "no error announced" — a strictly worse bug, and a silent one.
+  const describedBy =
+    [domProps['aria-describedby'], maxLength ? descriptionId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
 
   return (
     <div className="relative">
@@ -63,72 +119,94 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={textareaField?.placeholder}
-        disabled={readonly || domProps.disabled}
+        disabled={readonly || disabled}
         rows={rows}
         maxLength={maxLength}
-        aria-invalid={!!errorMessage}
+        aria-invalid={!!error}
+        // After the spread so the composed value wins over the raw host one.
+        aria-describedby={describedBy}
         className={domProps.className}
       />
-      {showFullscreenButton && (
-        <button
-          type="button"
-          onClick={openFullscreen}
-          className="absolute top-1.5 right-1.5 inline-flex items-center justify-center size-7 rounded-md bg-background/80 text-muted-foreground hover:text-foreground hover:bg-background border shadow-sm transition-colors"
-          aria-label={`Edit ${textareaField?.label ?? 'text'} fullscreen`}
-          data-testid="textarea-fullscreen-toggle"
-        >
-          <Maximize2 className="size-3.5" />
-        </button>
-      )}
       {maxLength && (
-        <div
+        /*
+          The INLINE surface's counter. `announceNearLimit` because this is the
+          surface the user types into with the rest of the form around them —
+          the near-limit warning is the one thing worth interrupting for, and
+          it is threshold-gated and debounced so it interrupts about five times
+          over a run that fills a 500-character cap rather than 52.
+        */
+        <CharacterCount
+          length={(value || '').length}
+          maxLength={maxLength}
+          descriptionId={descriptionId}
+          announceNearLimit
           className="absolute bottom-2 right-2 text-xs text-gray-400"
-          aria-live="polite"
-          aria-label={`Character count: ${(value || '').length} of ${maxLength}`}
-        >
-          {(value || '').length}/{maxLength}
-        </div>
+          testId="textarea-character-count"
+        />
       )}
 
       {showFullscreenButton && (
-        <Dialog open={fullscreenOpen} onOpenChange={setFullscreenOpen}>
-          <DialogContent
-            className="sm:max-w-3xl h-[100dvh] sm:h-[80vh] max-h-[100dvh] sm:max-h-[80vh] flex flex-col p-0 gap-0"
-            data-testid="textarea-fullscreen-dialog"
-          >
-            <DialogHeader className="p-4 border-b">
-              <DialogTitle className="text-base">
-                {textareaField?.label ?? 'Edit text'}
-              </DialogTitle>
-            </DialogHeader>
-            <div className="flex-1 min-h-0 p-4">
-              <Textarea
-                autoFocus
-                value={draft}
-                onChange={(e) => setDraft(e.target.value)}
+        <FullscreenFieldEditor
+          value={value ?? ''}
+          onCommit={onChange}
+          label={textareaField?.label}
+          testIdPrefix="textarea"
+          disabled={disabled}
+          /*
+            The FULLSCREEN surface's counter (objectui#3417). This slot used to
+            render a bare `{n}/{max}` span: no accessible name, no association
+            with the dialog's textarea, nothing `aria-live`. A screen reader
+            heard "5 slash 500" if browse mode happened to sweep it and not one
+            word while the input had focus — the same field, the same cap, and
+            the inline surface three nodes richer since objectui#3408.
+
+            `announceNearLimit={false}` is the ruling on #3417, and it is a
+            choice about this SURFACE rather than a saving on effort: a
+            fullscreen modal is opened deliberately to write at length, the
+            description below already delivers the cap on focus, and the
+            dialog's textarea carries the same native `maxLength` stop. Adding
+            a second live region inside a modal would also put two of them in
+            one document, since the inline one stays mounted behind the overlay.
+          */
+          footer={(draft) =>
+            maxLength ? (
+              <CharacterCount
+                length={draft.length}
                 maxLength={maxLength}
-                placeholder={textareaField?.placeholder}
-                className="h-full min-h-full resize-none text-base"
-                data-testid="textarea-fullscreen-input"
+                descriptionId={fullscreenDescriptionId}
+                announceNearLimit={false}
+                className="text-xs text-muted-foreground self-center"
+                testId="textarea-fullscreen-character-count"
               />
-            </div>
-            <DialogFooter className="p-3 border-t flex-row justify-between sm:justify-end gap-2">
-              {maxLength && (
-                <span className="text-xs text-muted-foreground self-center">
-                  {draft.length}/{maxLength}
-                </span>
-              )}
-              <div className="flex gap-2 ml-auto">
-                <Button type="button" variant="ghost" onClick={cancelFullscreen}>
-                  <X className="size-4 mr-1" /> Cancel
-                </Button>
-                <Button type="button" onClick={commitFullscreen} data-testid="textarea-fullscreen-save">
-                  <Check className="size-4 mr-1" /> Done
-                </Button>
-              </div>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+            ) : null
+          }
+        >
+          {(draft, setDraft, editorDisabled) => (
+            <Textarea
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              disabled={editorDisabled}
+              maxLength={maxLength}
+              placeholder={textareaField?.placeholder}
+              /*
+                Assigned, not appended — and that is a statement about THIS
+                element, not a relaxation of the rule above. The inline control
+                composes because `<FormControl>` hands it an `aria-describedby`
+                through `domProps`; this one is constructed here from scratch,
+                `domProps` never reaches it, and the ids the host would have
+                supplied name nodes OUTSIDE the dialog, which Radix `aria-hidden`s
+                while the modal is open. There is nothing to preserve. Should
+                this editor ever be given host-supplied ids, compose them the
+                way `describedBy` above does rather than adding a second
+                assignment.
+              */
+              aria-describedby={maxLength ? fullscreenDescriptionId : undefined}
+              className="h-full min-h-full resize-none text-base"
+              data-testid="textarea-fullscreen-input"
+            />
+          )}
+        </FullscreenFieldEditor>
       )}
     </div>
   );

package/src/widgets/TextField.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { Input, Textarea, EmptyValue } from '@object-ui/components';
 import { TextareaFieldMetadata } from '@object-ui/types';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * 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 }: FieldWidgetComponentProps<string>) {
-  const fieldData = field || (props as any).schema;
+  const fieldData = field;
 
   if (readonly) {
     return <span className="text-sm">{value || <EmptyValue />}</span>;
@@ -17,8 +18,7 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
   // Cast for rows property
   const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   if (rows && rows > 1) {
     return (

package/src/widgets/TimeField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
 
 /**
@@ -12,8 +13,7 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
     return <span className="text-sm">{value || <EmptyValue />}</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input

package/src/widgets/UrlField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * 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 }: FieldWidgetComponentProps<string>) {
-  const config = field || (props as any).schema;
+export function UrlField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   if (readonly) {
     if (!value) return <EmptyValue />;
     
@@ -29,8 +30,7 @@ export function UrlField({ value, onChange, field, readonly, errorMessage, ...pr
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
@@ -40,7 +40,7 @@ export function UrlField({ value, onChange, field, readonly, errorMessage, ...pr
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'https://example.com'}
       disabled={readonly || domProps.disabled}
-      aria-invalid={!!errorMessage}
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/UserField.tsx

@@ -30,7 +30,7 @@ function withBannedFilter(filters?: any[]): any[] {
 }
 
 export function UserField(props: FieldWidgetComponentProps<any>) {
-  const raw = (props.field || (props as any).schema) as any;
+  const raw = props.field as any;
 
   // The objectSchema field metadata may live directly on `field`, or nested at
   // `field.field` when rendered via the createFieldRenderer wrapper — mirror the

package/src/widgets/VectorField.tsx

@@ -7,7 +7,7 @@ import { FieldWidgetComponentProps } from './types';
  * Shows vector embeddings in a read-only format
  */
 export function VectorField({ value, field, ...props }: FieldWidgetComponentProps<number[]>) {
-  const vectorField = (field || (props as any).schema) as any;
+  const vectorField = field as any;
   const dimensions = vectorField?.dimensions || (Array.isArray(value) ? value.length : 0);
 
   if (!value || !Array.isArray(value)) {