@object-ui/fields 17.1.0 → 17.3.0

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

@@ -0,0 +1,142 @@
+/**
+ * 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 let objectui#3222 rename the validation slot to the
+ *     spec's `error` with the compiler, not grep, proving no call site was
+ *     missed;
+ *  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>;
+
+    // `required` stays out on purpose (objectui#3222): the required marker has
+    // exactly one author, the form renderer's `<FormLabel>`, and handing the
+    // flag to widgets invites a second one. Its sibling `error` went the other
+    // way — the spec declares it, so the slot below adopted the spec's name and
+    // the form renderer now produces it.
+    // @ts-expect-error `required` is not part of this contract
+    void props.required;
+    const message: string | undefined = props.error;
+    void message;
+
+    // …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;
+
+    // The second metadata carrier is gone (objectui#3233). `schema` was a
+    // DECLARED key here through #3221 — one concept under two spellings, which
+    // is how ~30 widgets ended up resolving `field || schema`. v17 converged it
+    // at the producers, so reading it is now a compile error rather than a
+    // silent second contract for the next widget author to discover.
+    // @ts-expect-error `schema` was retired from the widget contract in v17
+    void props.schema;
+
+    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: () => {},
+      // The single metadata carrier (objectui#3233) — every host produces this
+      // one key: the form renderer (`renderFieldComponent`), the inline-edit
+      // hosts, and the registry adapter that maps `SchemaRenderer`'s SDUI node
+      // onto it.
+      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

@@ -14,6 +14,7 @@ import { Badge, Avatar, AvatarImage, AvatarFallback, Button, Checkbox, EmptyValu
 import { Check, X, Copy, Phone as PhoneIcon, MapPin } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/react';
 import { SchemaRendererContext as _SchemaRendererContext } from '@object-ui/react';
+import { withFieldCarrier } from './withFieldCarrier';
 
 // Module-level cache so multiple renderers fetching the same lookup ID
 // only trigger one network call. Keyed by `${objectName}:${id}`.
@@ -589,13 +590,42 @@ export function formatDateTime(value: string | Date | number): string {
   });
 }
 
+/**
+ * Single-line cell value with a working ellipsis and a full-text fallback.
+ *
+ * `truncate` on a bare inline `<span>` never clips — an inline box has no
+ * width box for `overflow:hidden` / `text-overflow:ellipsis` to act on, so
+ * the value renders at full content width and the tail is silently cut by
+ * whatever ancestor happens to clip (the detail card edge), with no ellipsis
+ * (objectui#3466; same mechanism as the JSON cell in objectui#2578).
+ * Block-level + `max-w-full` gives the span its parent's width to truncate
+ * against, and as a flex item its `overflow:hidden` zeroes the automatic
+ * min-size so it can shrink below the text width. The `title` keeps the full
+ * text reachable on hover — host rows (detail sections) put their inline-edit
+ * hint in *their* `title`, so the value's full text must live on the value
+ * element itself, where it takes precedence under the cursor.
+ */
+function TruncatedText({
+  text,
+  className,
+}: {
+  text: string;
+  className?: string;
+}): React.ReactElement {
+  return (
+    <span className={cn('block max-w-full truncate', className)} title={text}>
+      {text}
+    </span>
+  );
+}
+
 /**
  * Text field cell renderer
  */
 export function TextCellRenderer({ value }: CellRendererProps): React.ReactElement {
   const safe = coerceToSafeValue(value);
   if (safe == null || safe === '') return <EmptyValue />;
-  return <span className="truncate">{String(safe)}</span>;
+  return <TruncatedText text={String(safe)} />;
 }
 
 /**
@@ -1089,10 +1119,13 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
         || SEMANTIC_COLOR_MAP[String(val).toLowerCase().replace(/[\s-]/g, '_')]
         || hashToColor(String(val).toLowerCase().replace(/[\s-]/g, '_'));
       const dotClass = DOT_COLOR_MAP[colorName] || DOT_COLOR_MAP.gray;
+      // max-w-full bounds the (otherwise content-sized) inline-flex box so the
+      // inner truncate can engage; title keeps the full label on hover
+      // (objectui#3466, same class of bug as the badge branch below).
       return (
-        <span key={key} className="inline-flex items-center gap-1.5 text-sm">
+        <span key={key} className="inline-flex max-w-full items-center gap-1.5 text-sm" title={label}>
           <span className={cn('h-1.5 w-1.5 rounded-full shrink-0', dotClass)} aria-hidden="true" />
-          <span className="truncate">{label}</span>
+          <span className="min-w-0 truncate">{label}</span>
         </span>
       );
     }
@@ -1266,7 +1299,7 @@ export function FileCellRenderer({ value, field }: CellRendererProps): React.Rea
   }
   
   const fileName = value.name || value.original_name || 'File';
-  return <span className="text-sm truncate">{fileName}</span>;
+  return <TruncatedText text={String(fileName)} className="text-sm" />;
 }
 
 /**
@@ -1435,7 +1468,7 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
             String(parsed.externalId ?? parsed.id ?? parsed._id ?? '');
         }
       } catch { /* not JSON — fall through to normal resolution */ }
-      if (parsedDisplay) return <span className="truncate">{parsedDisplay}</span>;
+      if (parsedDisplay) return <TruncatedText text={parsedDisplay} />;
     }
   }
 
@@ -1446,7 +1479,7 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
     const display =
       resolveLookupRecordName(obj, refSchema, displayField) || String(obj.id || obj._id || '');
     if (display) {
-      return <span className="truncate">{display}</span>;
+      return <TruncatedText text={display} />;
     }
   }
 
@@ -1506,12 +1539,12 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
     const label =
       resolveLookupRecordName(value as Record<string, unknown>, refSchema, displayField) ||
       String((value as any).id || (value as any)._id || '[Object]');
-    return <span className="truncate">{label}</span>;
+    return <TruncatedText text={label} />;
   }
 
   // Primitive value (e.g. raw ID): try options → resolver → opaque-ID placeholder → raw
   const { text, muted } = resolveLabel(value);
-  return <span className={cn('truncate', muted && 'text-muted-foreground')}>{text}</span>;
+  return <TruncatedText text={text} className={muted ? 'text-muted-foreground' : undefined} />;
 }
 
 /**
@@ -1535,7 +1568,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
 
   // Primitive value: just display the ID/username as text
   if (typeof value !== 'object') {
-    return <span className="truncate">{String(value)}</span>;
+    return <TruncatedText text={String(value)} />;
   }
   
   if (Array.isArray(value)) {
@@ -1544,11 +1577,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
         {value.slice(0, 3).map((user, idx) => {
           // Primitive user in array
           if (typeof user !== 'object' || user === null) {
-            return (
-              <span key={idx} className="truncate text-sm">
-                {String(user)}
-              </span>
-            );
+            return <TruncatedText key={idx} text={String(user)} className="text-sm" />;
           }
           const name = user.name || user.username || 'User';
           const initials = name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
@@ -1588,7 +1617,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
           {initials}
         </AvatarFallback>
       </Avatar>
-      <span className="truncate">{name}</span>
+      <TruncatedText text={String(name)} />
     </div>
   );
 }
@@ -1670,13 +1699,10 @@ export function JsonCellRenderer({ value }: CellRendererProps): React.ReactEleme
   } else {
     text = String(value);
   }
-  // inline-block + max-w-full so `truncate` (overflow-hidden/ellipsis/nowrap)
-  // actually clamps to the cell width. On a bare inline <span> truncate never
-  // clips — there is no width box — and its `white-space:nowrap` also defeats
-  // the parent cell's `break-words`, so a long name-keyed map / address JSON
-  // spills into the neighbouring column (objectui#2578). The title keeps the
-  // full value on hover.
-  return <span className="block max-w-full font-mono text-xs text-gray-600 truncate" title={text}>{text}</span>;
+  // The original site of the block-level+max-w-full+title pattern
+  // (objectui#2578) — now shared with every single-line value renderer via
+  // TruncatedText (objectui#3466).
+  return <TruncatedText text={text} className="font-mono text-xs text-gray-600" />;
 }
 
 /**
@@ -2048,7 +2074,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,
     };
 
@@ -2275,9 +2303,12 @@ export function registerField(fieldType: string): void {
   
   // Create lazy component
   const LazyFieldWidget = React.lazy(loader);
-  
-  // Register with field namespace - NO WRAPPER to allow form renderer to control label/layout
-  ComponentRegistry.register(fieldType, LazyFieldWidget, {
+
+  // Register with field namespace. No LAYOUT wrapper — the form renderer owns
+  // label/description/spacing. The only thing wrapped is the metadata carrier:
+  // `withFieldCarrier` maps `SchemaRenderer`'s `schema` node onto `field`
+  // (objectui#3233) and renders nothing of its own.
+  ComponentRegistry.register(fieldType, withFieldCarrier(LazyFieldWidget), {
     namespace: 'field',
     skipFallback: FIELD_TYPES_SKIP_FALLBACK.has(fieldType),
   });
@@ -2351,7 +2382,7 @@ export function registerFields() {
   // field type. Registered WITHOUT createFieldRenderer: it is a fully-controlled
   // widget (value/onChange from RHF), so the wrapper's extra label + local value
   // buffer would only duplicate the form's FormLabel and desync the value.
-  ComponentRegistry.register('capability-multiselect', CapabilityMultiSelectField, { namespace: 'field', skipFallback: true });
+  ComponentRegistry.register('capability-multiselect', withFieldCarrier(CapabilityMultiSelectField), { namespace: 'field', skipFallback: true });
   // master_detail = child-side FK lookup (single value, typically required). See
   // fieldWidgetMap above for rationale.
   ComponentRegistry.register('master_detail', createFieldRenderer(LookupField), { namespace: 'field' });
@@ -2421,6 +2452,11 @@ export * from './widgets/ObjectRefField';
 export * from './widgets/FilterConditionField';
 export * from './widgets/RecipientPickerField';
 export * from './widgets/RecordPickerDialog';
+// Shared picker-column derivation (ADR-0085 highlightFields → displayFields →
+// schema walk) — consumed by LookupField AND by RelatedList's Add-picker so a
+// lookup picker and a related-list Add dialog of the same object agree on
+// columns (#3365).
+export * from './widgets/deriveLookupColumns';
 export * from './widgets/FileField';
 export * from './widgets/ImageField';
 export { ImageCropperDialog } from './widgets/ImageCropperDialog';
@@ -2449,5 +2485,19 @@ export * from './widgets/RadioField';
 export * from './widgets/CheckboxesField';
 export * from './widgets/TagsField';
 
+// The SDUI-node → `field` adapter every registration here goes through
+// (objectui#3233). Exported so a widget registered OUTSIDE this repo can reach
+// the same single-carrier guarantee instead of re-growing a `field || schema`
+// read of its own.
+export { withFieldCarrier } from './withFieldCarrier';
+
+// The whitelist that decides what a widget's `...props` spread may put on a
+// DOM element (objectui#3291) — the runtime executor of the "DOM pass-through"
+// block of `FieldWidgetComponentProps`. Exported for the same reason as
+// `withFieldCarrier` above: a widget authored outside this repo needs to reach
+// it, or it re-grows the bare spread this closed.
+export { toDomProps } from './widgets/toDomProps';
+export type { DomProps } from './widgets/toDomProps';
+
 // Initialize registry
 registerAllFields();

package/src/widgets/AddressField.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Input, Label, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Address data structure
@@ -17,8 +18,20 @@ 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, error, ...props }: FieldWidgetComponentProps<AddressValue>) {
   const address = value || {};
+  // DOM pass-through (objectui#3318): the whitelist spread goes onto the FIRST
+  // sub-input (street) — one carrier for the form renderer's aria-describedby;
+  // the composite's validation state goes onto EVERY focusable sub-input via
+  // `aria-invalid={!!error}` (a form-level failure means the whole address is
+  // missing/invalid, and whichever sub-input the user reaches must announce it).
+  const domProps = toDomProps(props);
+  // Sub-input ids (objectui#3343): `useId()` prefix + sub-field name — the
+  // `groupId` paradigm of RadioField / CheckboxesField. Hardcoded literals
+  // ("street", "city", …) collide as soon as a form renders two address
+  // fields, and every label's htmlFor then resolves to the FIRST match.
+  const groupId = useId();
+  const subId = (name: keyof AddressValue) => `${groupId}-${name}`;
 
   const handleFieldChange = (fieldName: keyof AddressValue, fieldValue: string) => {
     onChange({
@@ -45,66 +58,72 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
   return (
     <div className="space-y-3">
       <div>
-        <Label htmlFor="street" className="text-xs">Street Address</Label>
+        <Label htmlFor={subId('street')} className="text-xs">Street Address</Label>
         <Input
-          id="street"
+          {...domProps}
+          id={subId('street')}
           type="text"
           value={address.street || ''}
           onChange={(e) => handleFieldChange('street', e.target.value)}
           placeholder="123 Main St"
           disabled={readonly || props.disabled}
           className={props.className}
+          aria-invalid={!!error}
         />
       </div>
       
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <Label htmlFor="city" className="text-xs">City</Label>
+          <Label htmlFor={subId('city')} className="text-xs">City</Label>
           <Input
-            id="city"
+            id={subId('city')}
             type="text"
             value={address.city || ''}
             onChange={(e) => handleFieldChange('city', e.target.value)}
             placeholder="San Francisco"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
         
         <div>
-          <Label htmlFor="state" className="text-xs">State / Province</Label>
+          <Label htmlFor={subId('state')} className="text-xs">State / Province</Label>
           <Input
-            id="state"
+            id={subId('state')}
             type="text"
             value={address.state || ''}
             onChange={(e) => handleFieldChange('state', e.target.value)}
             placeholder="CA"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
       </div>
       
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <Label htmlFor="zipCode" className="text-xs">ZIP / Postal Code</Label>
+          <Label htmlFor={subId('zipCode')} className="text-xs">ZIP / Postal Code</Label>
           <Input
-            id="zipCode"
+            id={subId('zipCode')}
             type="text"
             value={address.zipCode || ''}
             onChange={(e) => handleFieldChange('zipCode', e.target.value)}
             placeholder="94102"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
         
         <div>
-          <Label htmlFor="country" className="text-xs">Country</Label>
+          <Label htmlFor={subId('country')} className="text-xs">Country</Label>
           <Input
-            id="country"
+            id={subId('country')}
             type="text"
             value={address.country || ''}
             onChange={(e) => handleFieldChange('country', e.target.value)}
             placeholder="United States"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
       </div>

package/src/widgets/AddressField.uniqueIds.test.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ */
+
+/**
+ * Unique sub-input ids for the composite `address` widget (objectui#3343).
+ *
+ * The widget used to hardcode literal ids ("street", "city", "state",
+ * "zipCode", "country") on its sub-inputs. Two address fields in one form —
+ * e.g. billing + shipping — then produced duplicate DOM ids, and every
+ * `Label htmlFor` resolved to the FIRST match in the document: each sub-label
+ * of the second field clicked/announced the first field's input.
+ *
+ * The fix follows the `groupId` paradigm of RadioField / CheckboxesField:
+ * a `useId()` prefix + the sub-field name. These tests pin it by rendering
+ * TWO instances in one form:
+ *
+ * 1. every `[id]` in the document is globally unique (red again if anyone
+ *    reverts to hardcoded literals — both instances would emit id="street");
+ * 2. each sub-label of the SECOND instance resolves — via the exact
+ *    mechanism browsers use for label activation, `for` → getElementById —
+ *    to an input inside its OWN instance, and focusing it lands there.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AddressField } from './AddressField';
+
+const field = { name: 'address', type: 'address' } as any;
+
+const SUB_LABELS = [
+  'Street Address',
+  'City',
+  'State / Province',
+  'ZIP / Postal Code',
+  'Country',
+];
+
+function renderTwoInOneForm() {
+  return render(
+    <form>
+      <div data-testid="address-a">
+        <AddressField value={{}} onChange={vi.fn()} field={field} />
+      </div>
+      <div data-testid="address-b">
+        <AddressField value={{}} onChange={vi.fn()} field={field} />
+      </div>
+    </form>,
+  );
+}
+
+describe('AddressField — unique sub-input ids (objectui#3343)', () => {
+  it('two address fields in one form produce globally unique DOM ids', () => {
+    const { baseElement } = renderTwoInOneForm();
+    const ids = Array.from(baseElement.querySelectorAll('[id]')).map((el) => el.id);
+    // 5 sub-inputs per instance — both instances must actually render ids.
+    expect(ids.length).toBeGreaterThanOrEqual(10);
+    const duplicates = ids.filter((id, i) => ids.indexOf(id) !== i);
+    expect(duplicates).toEqual([]);
+  });
+
+  it("each sub-label of the SECOND field focuses that field's own input", () => {
+    const { getByTestId } = renderTwoInOneForm();
+    const first = getByTestId('address-a');
+    const second = getByTestId('address-b');
+
+    for (const text of SUB_LABELS) {
+      const label = within(second).getByText(text);
+      const forId = label.getAttribute('for');
+      expect(forId, `label "${text}" must carry htmlFor`).toBeTruthy();
+
+      // Exactly what the browser does on label click / SR announcement:
+      // resolve `for` against the document.
+      const control = document.getElementById(forId!);
+      expect(control, `htmlFor of "${text}" must resolve`).not.toBeNull();
+      expect(control!.tagName).toBe('INPUT');
+      expect(
+        second.contains(control),
+        `"${text}" must resolve into its OWN field, not the first one`,
+      ).toBe(true);
+      expect(first.contains(control)).toBe(false);
+
+      (control as HTMLInputElement).focus();
+      expect(control).toHaveFocus();
+    }
+  });
+});

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} />;
   }