@object-ui/fields 13.2.0 → 14.0.0

package/dist/widgets/FilterConditionField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldWidgetProps } from './types';
+export declare function FilterConditionField({ value, onChange, readonly, className, ...props }: FieldWidgetProps<string | object>): React.JSX.Element;
+export default FilterConditionField;

package/dist/widgets/ObjectRefField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldWidgetProps } from './types';
+export declare function ObjectRefField({ value, onChange, readonly, className, ...props }: FieldWidgetProps<string>): React.JSX.Element;
+export default ObjectRefField;

package/dist/widgets/RecipientPickerField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldWidgetProps } from './types';
+export declare function RecipientPickerField({ value, onChange, readonly, className, ...props }: FieldWidgetProps<string>): React.JSX.Element;
+export default RecipientPickerField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "13.2.0",
+  "version": "14.0.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -25,17 +25,17 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^1.22.0",
+    "lucide-react": "^1.24.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
-    "@object-ui/components": "13.2.0",
-    "@object-ui/core": "13.2.0",
-    "@object-ui/i18n": "13.2.0",
-    "@object-ui/providers": "13.2.0",
-    "@object-ui/react": "13.2.0",
-    "@object-ui/types": "13.2.0"
+    "@object-ui/components": "14.0.0",
+    "@object-ui/core": "14.0.0",
+    "@object-ui/i18n": "14.0.0",
+    "@object-ui/providers": "14.0.0",
+    "@object-ui/react": "14.0.0",
+    "@object-ui/types": "14.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -46,7 +46,7 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "typescript": "^6.0.3",
-    "vite": "^8.1.3",
+    "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3"
   },
   "publishConfig": {

package/src/FieldEditWidget.tsx

@@ -106,6 +106,9 @@ export const INLINE_EXCLUDED_FIELD_TYPES = new Set<string>([
   // Containers / non-authorable — a sub-form / sub-grid / embedding vector
   // doesn't belong in a single cell.
   'object', 'grid', 'vector',
+  // Widget-hint-only pickers — authored in the record form (they depend on
+  // sibling fields / a loaded object catalog), not inline in a grid cell.
+  'object-ref', 'filter-condition', 'recipient-picker',
 ]);
 
 /** Field types whose value is chosen in one discrete gesture (no free typing). */

package/src/index.tsx

@@ -2022,6 +2022,16 @@ const fieldWidgetMap: Record<string, () => Promise<{ default: React.ComponentTyp
   'geolocation': () => import('./widgets/GeolocationField').then(m => ({ default: m.GeolocationField })),
   'signature': () => import('./widgets/SignatureField').then(m => ({ default: m.SignatureField })),
   'qrcode': () => import('./widgets/QRCodeField').then(m => ({ default: m.QRCodeField })),
+
+  // Widget-hint-only pickers (reached via a field `widget:` override, never a
+  // bare field `type`). They render a *picker* over machine data an admin would
+  // otherwise have to type — used by sys_sharing_rule (ADR-0056 P2 pattern):
+  //   object-ref       → choose a registered object by name
+  //   filter-condition → visual criteria builder scoped to the chosen object
+  //   recipient-picker → record picker whose target follows a sibling type
+  'object-ref': () => import('./widgets/ObjectRefField').then(m => ({ default: m.ObjectRefField })),
+  'filter-condition': () => import('./widgets/FilterConditionField').then(m => ({ default: m.FilterConditionField })),
+  'recipient-picker': () => import('./widgets/RecipientPickerField').then(m => ({ default: m.RecipientPickerField })),
 };
 
 /**
@@ -2071,6 +2081,11 @@ const FIELD_TYPES_SKIP_FALLBACK = new Set([
   // same "bare-name fallback overwritten" warning at every boot regardless.
   'time',
   'address',
+  // Widget-hint-only pickers — resolved solely via `field:<widget>`, so the
+  // bare-key fallback is never wanted.
+  'object-ref',
+  'filter-condition',
+  'recipient-picker',
 ]);
 
 export function registerField(fieldType: string): void {
@@ -2220,6 +2235,9 @@ export * from './widgets/TextAreaField';
 export * from './widgets/RichTextField';
 export * from './widgets/LookupField';
 export * from './widgets/CapabilityMultiSelectField';
+export * from './widgets/ObjectRefField';
+export * from './widgets/FilterConditionField';
+export * from './widgets/RecipientPickerField';
 export * from './widgets/RecordPickerDialog';
 export * from './widgets/FileField';
 export * from './widgets/ImageField';

package/src/widgets/FilterConditionField.tsx

@@ -0,0 +1,343 @@
+import React from 'react';
+import { FilterBuilder, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * FilterConditionField — visual criteria builder for a stored FilterCondition
+ * (e.g. `sys_sharing_rule.criteria_json`), scoped to the object chosen in a
+ * sibling `object_name` field.
+ *
+ * Reached via the field `widget: 'filter-condition'` hint (resolves as
+ * `field:filter-condition`). Reads the live `object_name` from
+ * `dependentValues`, loads that object's fields via
+ * `dataSource.getObjectSchema(...)`, and renders `<FilterBuilder>` over them —
+ * so an admin builds `type == "customer" AND is_active == true` by picking
+ * fields/operators instead of hand-writing JSON.
+ *
+ * Storage contract: the value round-trips as a **MongoDB-style object filter**
+ * (`{ field: value }`, `{ field: { $gt: n } }`, `{ $or: [...] }`), JSON-encoded
+ * — the exact shape the sharing evaluator spreads into `engine.find(object,
+ * { filter })`. Criteria that can't be represented in the builder (nested
+ * mixes, unknown operators) fall back to a raw-JSON editor so nothing is hidden
+ * or lost; an "Edit as JSON" toggle is always available.
+ */
+
+interface FilterFieldDef {
+  value: string;
+  label: string;
+  type?: string;
+  options?: Array<{ value: string; label: string }>;
+  referenceTo?: string;
+}
+
+interface BuilderCondition {
+  id: string;
+  field: string;
+  operator: string;
+  value: any;
+}
+interface BuilderGroup {
+  id: string;
+  logic: 'and' | 'or';
+  conditions: BuilderCondition[];
+}
+
+const EMPTY_GROUP: BuilderGroup = { id: 'root', logic: 'and', conditions: [] };
+
+/** Field types that are not meaningfully filterable in a simple builder. */
+const NON_FILTERABLE = new Set([
+  'object', 'vector', 'file', 'image', 'avatar', 'signature',
+  'richtext', 'html', 'markdown', 'location', 'grid', 'json', 'code',
+]);
+
+function deriveFilterFields(schema: any): FilterFieldDef[] {
+  const raw = schema?.fields;
+  const entries: Array<[string, any]> = Array.isArray(raw)
+    ? raw.map((f: any) => [f?.name, f])
+    : raw && typeof raw === 'object'
+      ? Object.entries(raw)
+      : [];
+  const out: FilterFieldDef[] = [];
+  for (const [name, f] of entries) {
+    if (!name || !f || f.hidden) continue;
+    const type = f.type as string | undefined;
+    if (type && NON_FILTERABLE.has(type)) continue;
+    out.push({
+      value: name,
+      label: f.label || name,
+      type,
+      options: Array.isArray(f.options)
+        ? f.options.map((o: any) =>
+            typeof o === 'string'
+              ? { value: o, label: o }
+              : { value: String(o?.value), label: String(o?.label ?? o?.value) },
+          )
+        : undefined,
+      referenceTo: f.reference_to || f.reference,
+    });
+  }
+  return out;
+}
+
+function coerceByType(value: any, type?: string): any {
+  if (value == null) return value;
+  if (type === 'boolean' || type === 'toggle') {
+    if (typeof value === 'boolean') return value;
+    if (value === 'true') return true;
+    if (value === 'false') return false;
+    return value;
+  }
+  if (type === 'number' || type === 'currency' || type === 'percent' || type === 'rating' || type === 'slider') {
+    const n = Number(value);
+    return Number.isFinite(n) && value !== '' ? n : value;
+  }
+  return value;
+}
+
+function toArray(value: any): any[] {
+  if (Array.isArray(value)) return value;
+  if (typeof value === 'string') return value.split(',').map((s) => s.trim()).filter(Boolean);
+  return value == null ? [] : [value];
+}
+
+function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const { field, operator, value } = c || ({} as BuilderCondition);
+  if (!field) return null;
+  const t = typeOf(field);
+  const cv = coerceByType(value, t);
+  switch (operator) {
+    case 'equals': return { [field]: cv };
+    case 'notEquals': return { [field]: { $ne: cv } };
+    case 'contains': return { [field]: { $contains: value } };
+    case 'notContains': return { [field]: { $ncontains: value } };
+    case 'isEmpty': return { [field]: { $in: [null, ''] } };
+    case 'isNotEmpty': return { [field]: { $nin: [null, ''] } };
+    case 'greaterThan':
+    case 'after': return { [field]: { $gt: cv } };
+    case 'lessThan':
+    case 'before': return { [field]: { $lt: cv } };
+    case 'greaterOrEqual': return { [field]: { $gte: cv } };
+    case 'lessOrEqual': return { [field]: { $lte: cv } };
+    case 'between': {
+      const [a, b] = Array.isArray(value) ? value : [undefined, undefined];
+      return { [field]: { $gte: coerceByType(a, t), $lte: coerceByType(b, t) } };
+    }
+    case 'in': return { [field]: { $in: toArray(value).map((v) => coerceByType(v, t)) } };
+    case 'notIn': return { [field]: { $nin: toArray(value).map((v) => coerceByType(v, t)) } };
+    default: return { [field]: cv };
+  }
+}
+
+function filterGroupToMongo(group: BuilderGroup, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const frags = (group?.conditions ?? [])
+    .map((c) => condToMongo(c, typeOf))
+    .filter((x): x is Record<string, any> => !!x);
+  if (frags.length === 0) return null; // empty = match all
+  if (group.logic === 'or') return { $or: frags };
+  if (frags.length === 1) return frags[0];
+  const keys = frags.flatMap((f) => Object.keys(f));
+  const noCollision = new Set(keys).size === keys.length;
+  return noCollision ? Object.assign({}, ...frags) : { $and: frags };
+}
+
+function arraysEqual(a: any, b: any[]): boolean {
+  return Array.isArray(a) && a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
+  const id = `c_${idx}_${field}`;
+  if (v === null || typeof v !== 'object' || Array.isArray(v)) {
+    return { id, field, operator: 'equals', value: v };
+  }
+  const opKeys = Object.keys(v);
+  if (opKeys.length === 1) {
+    const op = opKeys[0];
+    const val = v[op];
+    switch (op) {
+      case '$ne': return { id, field, operator: 'notEquals', value: val };
+      case '$contains': return { id, field, operator: 'contains', value: val };
+      case '$ncontains': return { id, field, operator: 'notContains', value: val };
+      case '$gt': return { id, field, operator: 'greaterThan', value: val };
+      case '$lt': return { id, field, operator: 'lessThan', value: val };
+      case '$gte': return { id, field, operator: 'greaterOrEqual', value: val };
+      case '$lte': return { id, field, operator: 'lessOrEqual', value: val };
+      case '$in':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isEmpty', value: '' }
+          : { id, field, operator: 'in', value: val };
+      case '$nin':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isNotEmpty', value: '' }
+          : { id, field, operator: 'notIn', value: val };
+      default: return null;
+    }
+  }
+  if (opKeys.length === 2 && '$gte' in v && '$lte' in v) {
+    return { id, field, operator: 'between', value: [v.$gte, v.$lte] };
+  }
+  return null;
+}
+
+/** Returns a BuilderGroup, or `null` when the criteria can't be represented. */
+function mongoToFilterGroup(mongo: any): BuilderGroup | null {
+  if (mongo == null) return { ...EMPTY_GROUP, conditions: [] };
+  if (typeof mongo !== 'object' || Array.isArray(mongo)) return null;
+  const entries = Object.entries(mongo);
+  if (entries.length === 0) return { ...EMPTY_GROUP, conditions: [] };
+  if (entries.length === 1 && (mongo.$or || mongo.$and)) {
+    const logic: 'and' | 'or' = mongo.$or ? 'or' : 'and';
+    const arr = mongo.$or || mongo.$and;
+    if (!Array.isArray(arr)) return null;
+    const conditions: BuilderCondition[] = [];
+    for (let i = 0; i < arr.length; i++) {
+      const frag = arr[i];
+      if (!frag || typeof frag !== 'object' || Object.keys(frag).length !== 1) return null;
+      const field = Object.keys(frag)[0];
+      if (field.startsWith('$')) return null;
+      const c = kvToCondition(field, frag[field], i);
+      if (!c) return null;
+      conditions.push(c);
+    }
+    return { id: 'root', logic, conditions };
+  }
+  const conditions: BuilderCondition[] = [];
+  let i = 0;
+  for (const [field, v] of entries) {
+    if (field.startsWith('$')) return null; // mixed logical + field → raw
+    const c = kvToCondition(field, v, i++);
+    if (!c) return null;
+    conditions.push(c);
+  }
+  return { id: 'root', logic: 'and', conditions };
+}
+
+function stringifyValue(value: string | object | undefined | null): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+export function FilterConditionField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<string | object>) {
+  const ctx = React.useContext(SchemaRendererContext);
+  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
+  const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
+  const objectName = String(dependentValues.object_name ?? '');
+
+  const [fields, setFields] = React.useState<FilterFieldDef[] | null>(null);
+
+  React.useEffect(() => {
+    setFields(null);
+    if (!dataSource || !objectName || typeof dataSource.getObjectSchema !== 'function') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const schema = await dataSource.getObjectSchema(objectName);
+        if (!cancelled) setFields(deriveFilterFields(schema));
+      } catch {
+        if (!cancelled) setFields([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, objectName]);
+
+  const rawValue = React.useMemo(() => stringifyValue(value), [value]);
+
+  const parsed = React.useMemo(() => {
+    if (!rawValue.trim()) return { mongo: {}, ok: true };
+    try {
+      return { mongo: JSON.parse(rawValue), ok: true };
+    } catch {
+      return { mongo: null, ok: false };
+    }
+  }, [rawValue]);
+
+  const group = React.useMemo(
+    () => (parsed.ok ? mongoToFilterGroup(parsed.mongo) : null),
+    [parsed],
+  );
+
+  // Raw JSON mode: forced when the stored value can't be represented in the
+  // builder; otherwise opt-in via the toggle.
+  const representable = parsed.ok && group !== null;
+  const [rawMode, setRawMode] = React.useState<boolean>(!representable);
+  React.useEffect(() => {
+    if (!representable) setRawMode(true);
+  }, [representable]);
+
+  const typeOf = React.useMemo(() => {
+    const map = new Map((fields ?? []).map((f) => [f.value, f.type]));
+    return (f: string) => map.get(f);
+  }, [fields]);
+
+  const handleBuilderChange = (g: BuilderGroup) => {
+    const mongo = filterGroupToMongo(g, typeOf);
+    onChange((mongo == null ? '' : JSON.stringify(mongo)) as any);
+  };
+
+  if (!objectName) {
+    return (
+      <p className={cn('text-sm text-muted-foreground', className)}>
+        Select an object first.
+      </p>
+    );
+  }
+
+  if (readonly) {
+    if (!rawValue.trim()) {
+      return <span className={cn('text-sm text-muted-foreground', className)}>All records</span>;
+    }
+    return (
+      <pre className={cn('overflow-x-auto rounded bg-muted/40 p-2 text-xs', className)}>
+        {rawValue}
+      </pre>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {rawMode ? (
+        <>
+          <textarea
+            className="min-h-[96px] w-full rounded border bg-background px-2 py-1 font-mono text-xs"
+            value={rawValue}
+            placeholder='{ "type": "customer", "is_active": true }'
+            onChange={(e) => onChange(e.target.value as any)}
+          />
+          {!parsed.ok && (
+            <span className="text-xs text-destructive">Invalid JSON — the rule will match no records until fixed.</span>
+          )}
+        </>
+      ) : (
+        <FilterBuilder
+          fields={fields ?? []}
+          value={(group ?? EMPTY_GROUP) as any}
+          onChange={handleBuilderChange as any}
+        />
+      )}
+      <button
+        type="button"
+        className="self-start text-xs text-muted-foreground underline-offset-2 hover:underline"
+        onClick={() => setRawMode((m) => !m)}
+        disabled={!representable && !rawMode}
+        title={!representable ? 'This criteria can only be edited as JSON' : undefined}
+      >
+        {rawMode ? 'Use visual builder' : 'Edit as JSON'}
+      </button>
+    </div>
+  );
+}
+
+export default FilterConditionField;

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;