@object-ui/fields 17.2.0 → 17.3.0

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" />;
 }
 
 /**
@@ -2277,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),
   });
@@ -2353,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' });
@@ -2423,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';
@@ -2451,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 { 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 }: FieldWidgetComponentProps<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/AvatarField.tsx

@@ -2,16 +2,17 @@ import React from 'react';
 import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
 import { Upload, X } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Avatar field widget - provides an avatar/profile picture uploader
  * Supports image URLs or file uploads
  */
-export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function AvatarField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [isHovered, setIsHovered] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   
-  const avatarField = (field || (props as any).schema) as any;
+  const avatarField = field as any;
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -92,11 +93,17 @@ export function AvatarField({ value, onChange, field, readonly, ...props }: Fiel
           className="hidden"
         />
         <Button
+          // DOM pass-through onto the widget's real focusable control — the
+          // upload button is the keyboard path to the hidden file input
+          // (objectui#3318).
+          {...toDomProps(props)}
           type="button"
           variant="outline"
           size="sm"
           onClick={() => fileInputRef.current?.click()}
           disabled={readonly || props.disabled}
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           <Upload className="w-4 h-4 mr-2" />
           {value ? 'Change' : 'Upload'} Avatar

package/src/widgets/BooleanField.tsx

@@ -1,13 +1,14 @@
 import React, { useId } from 'react';
 import { Switch, Checkbox, Label } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * 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 }: FieldWidgetComponentProps<boolean>) {
-  const config = (field || (props as any).schema) as any;
+  const config = field as any;
   // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
   const widget = config?.widget;
   // Generate unique ID using React's useId hook - must be before early returns (rules of hooks)
@@ -19,8 +20,7 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
     return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   if (widget === 'checkbox') {
      return (