@object-ui/fields 13.2.0 → 14.1.0

package/src/widgets/GridField.tsx

@@ -18,6 +18,7 @@ import {
 import { Plus, Trash2, SlidersHorizontal, Maximize2, Copy, GripVertical } from 'lucide-react';
 import { resolveFieldRuleState } from '@object-ui/core';
 import { LookupField } from './LookupField';
+import { FileCell } from './FileField';
 
 /**
  * GridField / LineItemsField — editable child-grid ("line items") widget.
@@ -30,7 +31,7 @@ import { LookupField } from './LookupField';
  *
  * Column config (a subset of `GridColumnDefinition`):
  *   { field, label?, type?, options?, width?, required?, prefix?, step? }
- *   type ∈ 'text' | 'number' | 'currency' | 'date' | 'select'
+ *   type ∈ 'text' | 'number' | 'currency' | 'date' | 'select' | 'lookup' | 'file'
  *
  * Field-level config (from `GridFieldMetadata`):
  *   columns, min_rows, max_rows, allow_add, allow_delete, total_field
@@ -39,7 +40,7 @@ import { LookupField } from './LookupField';
 export interface GridColumn {
   field: string;
   label?: string;
-  type?: 'text' | 'number' | 'currency' | 'date' | 'select' | 'lookup';
+  type?: 'text' | 'number' | 'currency' | 'date' | 'select' | 'lookup' | 'file';
   options?: Array<{ label: string; value: string }>;
   width?: number;
   required?: boolean;
@@ -49,7 +50,11 @@ export interface GridColumn {
   reference?: string;
   displayField?: string;
   idField?: string;
+  /** Multi-value column: multi-record lookup, or multi-file upload cell. */
   multiple?: boolean;
+  /** For `type: 'file'` — accepted MIME types / extensions for the picker
+   *  (e.g. `['image/*', '.pdf']`). Omit to accept anything. */
+  accept?: string[];
   /**
    * Hidden from the grid by default but revealable via the column chooser.
    * Set by `deriveColumns` for fields beyond the default-visible budget — the
@@ -105,6 +110,7 @@ const MIN_WIDTH_BY_TYPE: Record<string, number> = {
   number: 104,
   currency: 116,
   date: 150,
+  file: 168,
 };
 const minWidthFor = (c: GridColumn): number => c.width ?? MIN_WIDTH_BY_TYPE[c.type ?? 'text'] ?? 132;
 
@@ -252,6 +258,13 @@ export function computeRow(columns: GridColumn[], row: Row): Row {
  *  currency/number → formatted, empty → em dash). Lookups render separately. */
 function displayText(c: GridColumn, value: any): string {
   if (value === null || value === undefined || value === '') return '—';
+  if (c.type === 'file') {
+    const files = Array.isArray(value) ? value : [value];
+    if (files.length === 0) return '—';
+    if (files.length > 1) return `${files.length} files`;
+    const f = files[0];
+    return typeof f === 'string' ? f : f?.name || f?.original_name || 'File';
+  }
   if (c.type === 'select' && Array.isArray(c.options)) {
     const opt = c.options.find((o) => String(o.value) === String(value));
     return opt ? opt.label : String(value);
@@ -613,6 +626,8 @@ export function GridField({
                           readonly
                           field={{ reference: c.reference, display_field: c.displayField, id_field: c.idField } as any}
                         />
+                      ) : c.type === 'file' ? (
+                        displayText(c, row[c.field])
                       ) : row[c.field] != null && row[c.field] !== '' ? (
                         String(row[c.field])
                       ) : (
@@ -700,6 +715,21 @@ export function GridField({
         />
       );
     }
+    // File / image column → a real upload control in the cell (objectui#2360),
+    // not a text input: chips for uploaded files + a compact picker button.
+    if (c.type === 'file') {
+      return (
+        <FileCell
+          value={val}
+          onChange={(v: any) => setCellValue(rowIdx, c.field, v)}
+          multiple={c.multiple}
+          accept={Array.isArray(c.accept) && c.accept.length > 0 ? c.accept.join(',') : undefined}
+          disabled={locked}
+          aria-label={c.label || c.field}
+          data-cell={`${rowIdx}-${colIdx}`}
+        />
+      );
+    }
     if (c.type === 'select') {
       return (
         <Select value={val != null ? String(val) : ''} onValueChange={(v) => setCell(rowIdx, c, v)} disabled={locked}>

package/src/widgets/LookupField.tsx

@@ -544,6 +544,16 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     [idField],
   );
 
+  // Level-2 pickers (PeoplePicker / RecordPickerDialog) operate on bare ids —
+  // their seed queries and selected-row matching compare against `idField`
+  // values. Collapse any `$expand`-ed record objects (passed through
+  // uncollapsed by the inline editor, objectui#2572) before handing the value
+  // down, or the seed fetch would query for a bogus object-shaped id.
+  const pickerValue = useMemo(
+    () => (multiple ? (Array.isArray(value) ? value.map(normalizeId) : []) : normalizeId(value)),
+    [multiple, value, normalizeId],
+  );
+
   // Resolve a raw field value into its display option. An expanded-reference
   // object is mapped directly (mirroring the read cell's display-name path) so
   // the inline editor shows the record's name instead of the placeholder; a bare
@@ -914,7 +924,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           subtitleFields={subtitleFields}
           avatarField={avatarField}
           pageSize={lookupPageSize}
-          value={value}
+          value={pickerValue}
           onSelect={onChange}
           onSelectRecords={handlePickerSelectRecords}
           lookupFilters={lookupFilters}
@@ -1135,7 +1145,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           titleFormat={refTitleFormat}
           idField={idField}
           pageSize={lookupPageSize}
-          value={value}
+          value={pickerValue}
           onSelect={onChange}
           onSelectRecords={handlePickerSelectRecords}
           lookupFilters={lookupFilters}

package/src/widgets/NumberField.tsx

@@ -14,8 +14,16 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
 
   const numberField = (field || (props as any).schema) as NumberFieldMetadata;
   // Step follows `scale` (decimal places), not `precision` (total digit count):
-  // a decimal(10, 0) column has 0 decimal places, so the input should step by 1.
+  // a decimal(10, 0) column has 0 decimal places, so the input should step by 1
+  // (`scale: 0` is a valid declaration — hence the typeof check, not truthiness).
+  // An explicit `step` in the metadata wins over the derived one.
   const scale = numberField?.scale;
+  const step =
+    typeof numberField?.step === 'number'
+      ? numberField.step
+      : typeof scale === 'number'
+        ? Math.pow(10, -scale)
+        : 'any';
 
   // Filter out non-DOM props
   const { inputType, ...domProps } = props as any;
@@ -31,7 +39,11 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
       }}
       placeholder={numberField?.placeholder}
       disabled={readonly || domProps.disabled}
-      step={scale ? Math.pow(10, -scale) : 'any'}
+      // Surface the field's declared range so the browser's spinner/keyboard
+      // affordances respect it (server-side validation still owns enforcement).
+      min={typeof numberField?.min === 'number' ? numberField.min : undefined}
+      max={typeof numberField?.max === 'number' ? numberField.max : undefined}
+      step={step}
     />
   );
 }

package/src/widgets/ObjectRefField.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Combobox, EmptyValue, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * ObjectRefField — object-name picker for form fields that store the machine
+ * name of a registered object (e.g. `sys_sharing_rule.object_name`).
+ *
+ * Reached via the field `widget: 'object-ref'` hint (declared on the object
+ * metadata; resolves as `field:object-ref`). Renders a searchable dropdown of
+ * the platform's registered objects instead of a free-text input where the
+ * admin has to remember a machine name.
+ *
+ * Object catalog source, in order of preference:
+ *   1. `dataSource.getObjects()` — the metadata-registry list endpoint
+ *      (`GET /api/v1/meta/object`), which merges code- and DB-defined objects.
+ *   2. Fallback: `dataSource.find('sys_metadata', { type: 'object' })` — the
+ *      same source the Setup app's object grid browses.
+ * The stored value is always the object's `name` string. If the catalog can't
+ * load, the current value is still shown, so the control degrades safely.
+ */
+interface ObjectHeader {
+  name: string;
+  label?: string;
+}
+
+export function ObjectRefField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<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 [objects, setObjects] = React.useState<ObjectHeader[] | null>(null);
+
+  React.useEffect(() => {
+    if (!dataSource) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        let rows: ObjectHeader[] = [];
+        if (typeof dataSource.getObjects === 'function') {
+          rows = (await dataSource.getObjects()) ?? [];
+        } else if (typeof dataSource.find === 'function') {
+          const res = await dataSource.find('sys_metadata', {
+            $filter: { type: 'object' },
+            $top: 1000,
+          });
+          const list: any[] =
+            res?.data ?? res?.records ?? (Array.isArray(res) ? res : []);
+          rows = list
+            .map((r) => ({
+              name: String(r?.name ?? ''),
+              label: r?.label != null ? String(r.label) : undefined,
+            }))
+            .filter((r) => r.name);
+        }
+        if (!cancelled) setObjects(rows);
+      } catch {
+        if (!cancelled) setObjects([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource]);
+
+  const options = React.useMemo(() => {
+    const opts = (objects ?? []).map((o) => ({
+      value: o.name,
+      label: o.label ? `${o.label} (${o.name})` : o.name,
+    }));
+    // Keep the current value selectable even if the catalog didn't include it
+    // (unknown / not-yet-published object), so editing never drops it.
+    if (value && !opts.some((o) => o.value === value)) {
+      opts.unshift({ value, label: value });
+    }
+    return opts.sort((a, b) => a.label.localeCompare(b.label));
+  }, [objects, value]);
+
+  if (readonly) {
+    if (!value) return <EmptyValue />;
+    const label = options.find((o) => o.value === value)?.label ?? value;
+    return <span className={className}>{label}</span>;
+  }
+
+  return (
+    <Combobox
+      options={options}
+      value={value ?? ''}
+      onValueChange={(v) => onChange(v as any)}
+      placeholder={objects === null ? 'Loading objects…' : 'Select an object'}
+      searchPlaceholder="Search objects…"
+      emptyText={objects === null ? 'Loading…' : 'No objects found'}
+      disabled={disabled}
+      className={cn(className)}
+    />
+  );
+}
+
+export default ObjectRefField;

package/src/widgets/PeoplePicker.test.tsx

@@ -179,6 +179,12 @@ describe('PeoplePicker', () => {
     await waitFor(() => expect(screen.getByText('Amy Lin')).toBeTruthy());
     const search = screen.getByTestId('people-picker-search');
     fireEvent.keyDown(search, { key: 'ArrowDown' });
+    // Wait for the cursor to actually land on the first row before committing —
+    // guards against a late background re-render swallowing the keypress (the
+    // old identity-keyed cursor reset made this flaky on slow CI).
+    await waitFor(() =>
+      expect(screen.getAllByTestId('person-row')[0].getAttribute('data-active')).toBe('true'),
+    );
     fireEvent.keyDown(search, { key: 'Enter' });
     expect(onSelect).toHaveBeenCalledWith('u1');
   });

package/src/widgets/PeoplePicker.tsx

@@ -311,10 +311,19 @@ export function PeoplePicker({
 
   // --- keyboard cursor ---
   const [activeIndex, setActiveIndex] = useState(-1);
-  // Reset the cursor when the query changes (results replaced).
+  // Reset the cursor when the query results are actually *replaced* — keyed on
+  // the record-id signature, not the array identity. A background refetch that
+  // returns the same records (StrictMode double-effect, refetch-on-focus)
+  // re-emits a new array; resetting on identity alone yanked the cursor to -1
+  // mid-navigation (flaky ArrowDown→Enter, and a real UX nit).
+  const recordsSignature = useMemo(
+    () => query.records.map(r => String(getPersonId(r, idField))).join(''),
+    [query.records, idField],
+  );
   useEffect(() => {
     setActiveIndex(-1);
-  }, [query.search, query.records]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query.search, recordsSignature]);
   // Keep it in range if the list shrinks.
   useEffect(() => {
     setActiveIndex(i => (i >= navList.length ? navList.length - 1 : i));

package/src/widgets/RecipientPickerField.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Combobox, EmptyValue, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * RecipientPickerField — dependent record picker for a polymorphic recipient
+ * reference (e.g. `sys_sharing_rule.recipient_id`), whose target object is
+ * decided by a sibling `recipient_type` select.
+ *
+ * Reached via the field `widget: 'recipient-picker'` hint (resolves as
+ * `field:recipient-picker`). Reads the live `recipient_type` from
+ * `dependentValues` (the form record), loads candidate records of the mapped
+ * object via `dataSource.find(...)`, and stores the value the sharing evaluator
+ * expects for that type:
+ *
+ *   user                  → sys_user, store `id`
+ *   team                  → sys_team, store `id`
+ *   business_unit         → sys_business_unit, store `id`
+ *   unit_and_subordinates → sys_business_unit, store `id`
+ *   position              → sys_position, store `name` (matched against
+ *                           sys_user_position.position at evaluation time)
+ *
+ * When `recipient_type` changes after mount the stored id is reset (an id valid
+ * for one type is meaningless for another). Unknown types degrade to a plain
+ * text input so nothing breaks.
+ */
+interface RecipientMapping {
+  object: string;
+  /** Which record field to persist into recipient_id. */
+  storeField: 'id' | 'name';
+  /** Candidate display-label fields, in preference order. */
+  labelFields: 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'] },
+};
+
+export function RecipientPickerField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<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 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);
+  React.useEffect(() => {
+    if (prevType.current !== null && prevType.current !== recipientType && value) {
+      onChange('' as any);
+    }
+    prevType.current = recipientType;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recipientType]);
+
+  React.useEffect(() => {
+    setRecords(null);
+    if (!dataSource || !mapping || typeof dataSource.find !== 'function') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        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 {
+        if (!cancelled) setRecords([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, mapping?.object]);
+
+  const labelOf = (r: any): string => {
+    for (const f of mapping?.labelFields ?? ['name']) if (r?.[f]) return String(r[f]);
+    return String(r?.id ?? '');
+  };
+  const valueOf = (r: any): string => String(r?.[mapping?.storeField ?? 'id'] ?? '');
+
+  const options = React.useMemo(() => {
+    const opts = (records ?? [])
+      .map((r) => ({ value: valueOf(r), label: labelOf(r) }))
+      .filter((o) => o.value);
+    if (value && !opts.some((o) => o.value === value)) opts.unshift({ value, label: value });
+    return opts;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [records, value, mapping]);
+
+  if (!recipientType) {
+    return (
+      <p className={cn('text-sm text-muted-foreground', className)}>
+        Select a recipient type first.
+      </p>
+    );
+  }
+
+  if (!mapping) {
+    // Unknown / unsupported recipient type — keep a plain text input so the
+    // field is never un-editable.
+    return (
+      <input
+        className={cn(
+          'w-full rounded border bg-background px-2 py-1 text-sm',
+          className,
+        )}
+        value={value ?? ''}
+        disabled={disabled || readonly}
+        onChange={(e) => onChange(e.target.value as any)}
+      />
+    );
+  }
+
+  if (readonly) {
+    if (!value) return <EmptyValue />;
+    return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
+  }
+
+  return (
+    <Combobox
+      options={options}
+      value={value ?? ''}
+      onValueChange={(v) => onChange(v as any)}
+      placeholder={
+        records === null ? 'Loading…' : `Select a ${recipientType.replace(/_/g, ' ')}`
+      }
+      searchPlaceholder="Search…"
+      emptyText={records === null ? 'Loading…' : 'No matches'}
+      disabled={disabled}
+      className={className}
+    />
+  );
+}
+
+export default RecipientPickerField;

package/src/widgets/SelectField.cascade.test.tsx

@@ -102,14 +102,14 @@ describe('SelectField — role / context gating (#2284)', () => {
     type: 'select',
     options: [
       { label: 'Standard', value: 'standard' },
-      { label: 'Admin only', value: 'admin_only', visibleWhen: "'admin' in current_user.roles" },
+      { label: 'Admin only', value: 'admin_only', visibleWhen: "'admin' in current_user.positions" },
     ],
   } as any;
 
   it('clears an admin-only value for a non-admin (offered set excludes it)', () => {
     const onChange = vi.fn();
     render(
-      <PredicateScopeProvider scope={{ current_user: { roles: ['sales'] } }}>
+      <PredicateScopeProvider scope={{ current_user: { positions: ['sales'] } }}>
         <SelectField
           value={'admin_only'}
           onChange={onChange}
@@ -124,7 +124,7 @@ describe('SelectField — role / context gating (#2284)', () => {
   it('keeps an admin-only value for an admin', () => {
     const onChange = vi.fn();
     render(
-      <PredicateScopeProvider scope={{ current_user: { roles: ['admin'] } }}>
+      <PredicateScopeProvider scope={{ current_user: { positions: ['admin'] } }}>
         <SelectField
           value={'admin_only'}
           onChange={onChange}

package/src/widgets/SelectField.tsx

@@ -24,7 +24,7 @@ import { FieldWidgetProps } from './types';
  * Supports cascading / role-gated options (#2284): each option may carry a
  * `visibleWhen` CEL predicate, evaluated against the live form record +
  * `current_user`, so the offered set narrows as a controlling field changes
- * (`record.country == 'cn'`) or by role (`'admin' in current_user.roles`). A
+ * (`record.country == 'cn'`) or by role (`'admin' in current_user.positions`). A
  * field declares which sibling fields drive its list via `dependsOn`; while any
  * of those is empty the control is gated with a "select the parent first" hint,
  * mirroring the dependent-lookup UX.