@object-ui/fields 17.3.0 → 17.6.0

package/src/widgets/TextField.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Input, Textarea, EmptyValue } from '@object-ui/components';
-import { TextareaFieldMetadata } from '@object-ui/types';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * TextField - Standard single-line or multi-line text input
- * Automatically renders as a textarea when rows are configured in field metadata
- */
-export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
-  const fieldData = field;
-
-  if (readonly) {
-    return <span className="text-sm">{value || <EmptyValue />}</span>;
-  }
-
-  // Cast for rows property
-  const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;
-
-  const domProps = toDomProps(props);
-
-  if (rows && rows > 1) {
-    return (
-      <Textarea
-        {...domProps}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={fieldData?.placeholder}
-        disabled={readonly || domProps.disabled}
-      />
-    );
-  }
-
-  return (
-    <Input
-      {...domProps}
-      type={fieldData?.type === 'password' ? 'password' : 'text'}
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={fieldData?.placeholder}
-      disabled={readonly || domProps.disabled}
-    />
-  );
-}

package/src/widgets/TimeField.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { openNativePicker } from './openNativePicker';
-
-/**
- * TimeField - Time picker input widget
- * Uses native time input for hour and minute selection
- */
-export function TimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
-  if (readonly) {
-    return <span className="text-sm">{value || <EmptyValue />}</span>;
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="time"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      onClick={(e) => {
-        openNativePicker(e.currentTarget);
-        domProps.onClick?.(e);
-      }}
-      disabled={readonly || domProps.disabled}
-    />
-  );
-}

package/src/widgets/UrlField.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * UrlField - URL input with clickable link in readonly mode
- * Validates URLs to only render http/https links for security
- */
-export function UrlField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field;
-  if (readonly) {
-    if (!value) return <EmptyValue />;
-    
-    // Validate URL to prevent javascript: or data: URLs
-    const isValidUrl = value.startsWith('http://') || value.startsWith('https://');
-    if (!isValidUrl) {
-      return <span className="text-sm">{value}</span>;
-    }
-    
-    return (
-      <a 
-        href={value}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
-      >
-        {value}
-      </a>
-    );
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="url"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={config?.placeholder || 'https://example.com'}
-      disabled={readonly || domProps.disabled}
-      aria-invalid={!!error}
-    />
-  );
-}

package/src/widgets/UserField.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { FieldWidgetComponentProps } from './types';
-import { LookupField } from './LookupField';
-
-/**
- * UserField — person picker for the `user` field type.
- *
- * `user` is a lookup specialized to the `sys_user` system object (see framework
- * "lookup → sys_user" specialization). Rather than re-implement candidate search,
- * the searchable picker, the record-picker dialog and id resolution, this widget
- * **delegates to the shared {@link LookupField}** with the reference fixed to
- * `sys_user`. The author writes `Field.user({ multiple })`; we normalise the field
- * metadata so the lookup machinery targets users with a sensible display field.
- *
- * Table-cell display (avatars / initials) is handled separately by
- * `UserCellRenderer`; this is the form/editor widget.
- *
- * By default the user picker is the search-first {@link PeoplePicker}
- * (`picker: 'search'`) with a department·email subtitle, avatar, and banned
- * users excluded from candidates. Authors can override any of these, or opt
- * back to the classic table dialog with `picker: 'default'`.
- */
-
-/** Exclude deactivated (`banned`) users unless the author already filters on it. */
-function withBannedFilter(filters?: any[]): any[] {
-  const base = Array.isArray(filters) ? filters : [];
-  return base.some(f => f?.field === 'banned')
-    ? base
-    : [...base, { field: 'banned', operator: 'ne', value: true }];
-}
-
-export function UserField(props: FieldWidgetComponentProps<any>) {
-  const raw = props.field as any;
-
-  // The objectSchema field metadata may live directly on `field`, or nested at
-  // `field.field` when rendered via the createFieldRenderer wrapper — mirror the
-  // unwrap LookupField itself performs.
-  const metaIsNested = raw?.field && typeof raw.field === 'object'
-    && ('reference' in raw.field || 'reference_to' in raw.field || 'type' in raw.field);
-  const meta = metaIsNested ? raw.field : raw;
-
-  // Ensure the picker always targets sys_user (even if the author omitted an
-  // explicit reference), presents user names by default, and defaults to the
-  // search-first PeoplePicker with sensible person display + candidate hygiene.
-  const normalized = {
-    ...(meta || {}),
-    reference: meta?.reference || meta?.reference_to || 'sys_user',
-    display_field: meta?.display_field || meta?.displayField || meta?.reference_field || 'name',
-    picker: meta?.picker ?? 'search',
-    subtitle: meta?.subtitle ?? ['primary_business_unit_id.name', 'email'],
-    avatar_field: meta?.avatar_field ?? meta?.avatarField ?? 'image',
-    lookup_filters: withBannedFilter(meta?.lookup_filters ?? meta?.lookupFilters),
-  };
-
-  const fieldProp = metaIsNested ? { ...raw, field: normalized } : normalized;
-
-  return <LookupField {...(props as any)} field={fieldProp} />;
-}

package/src/widgets/UserFieldPicker.test.tsx

@@ -1,78 +0,0 @@
-/**
- * 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.
- */
-
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { UserField } from './UserField';
-
-const USERS = [
-  { id: 'u1', name: 'Amy Lin', email: 'amy@x.io', image: 'http://x/amy.png', primary_business_unit_id: { name: 'Sales' } },
-  { id: 'u2', name: 'Bob Wu', email: 'bob@x.io', primary_business_unit_id: { name: 'Eng' } },
-];
-
-function makeDataSource() {
-  return {
-    find: vi.fn(async (_obj: string, params: any = {}) => {
-      const idIn = params?.$filter?.id?.$in as any[] | undefined;
-      if (idIn) {
-        const s = new Set(idIn.map(String));
-        const data = USERS.filter(u => s.has(String(u.id)));
-        return { data, total: data.length };
-      }
-      const search: string | undefined = params?.$search;
-      const data = search
-        ? USERS.filter(u => u.name.toLowerCase().includes(search.toLowerCase()))
-        : USERS;
-      return { data, total: data.length };
-    }),
-  } as any;
-}
-
-beforeEach(() => {
-  Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1280 });
-  window.matchMedia = ((query: string) => ({
-    matches: window.innerWidth < 768,
-    media: query,
-    onchange: null,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    addListener: () => {},
-    removeListener: () => {},
-    dispatchEvent: () => false,
-  })) as any;
-  try {
-    window.localStorage.clear();
-  } catch {
-    /* ignore */
-  }
-});
-
-describe('UserField — search-first entry (P0)', () => {
-  it('opens the PeoplePicker from the primary trigger (no separate browse-all button)', async () => {
-    const ds = makeDataSource();
-    render(<UserField field={{ type: 'user' } as any} dataSource={ds} value={null} onChange={vi.fn()} />);
-
-    // The redundant "browse all" icon is not rendered for search-first fields.
-    expect(screen.queryByTestId('browse-all-records')).toBeNull();
-
-    // Primary click opens the rich PeoplePicker (its search box appears).
-    fireEvent.click(screen.getByTestId('lookup-trigger'));
-    await waitFor(() => expect(screen.getByTestId('people-picker-search')).toBeTruthy());
-  });
-
-  it('renders the current selection as avatar chips', async () => {
-    const ds = makeDataSource();
-    render(
-      <UserField field={{ type: 'user', multiple: true } as any} dataSource={ds} value={['u1']} onChange={vi.fn()} />,
-    );
-    await waitFor(() => expect(screen.getByTestId('people-field-chip')).toBeTruthy());
-    expect(screen.getByText('Amy Lin')).toBeTruthy();
-    // Initials fallback renders (image does not load in jsdom).
-    expect(screen.getByText('AL')).toBeTruthy();
-  });
-});

package/src/widgets/VectorField.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * VectorField - Vector/embedding data display
- * Shows vector embeddings in a read-only format
- */
-export function VectorField({ value, field, ...props }: FieldWidgetComponentProps<number[]>) {
-  const vectorField = field as any;
-  const dimensions = vectorField?.dimensions || (Array.isArray(value) ? value.length : 0);
-
-  if (!value || !Array.isArray(value)) {
-    return <EmptyValue />;
-  }
-
-  // Show first few values and total dimensions
-  const preview = value.slice(0, 3).map(v => {
-    const num = Number(v);
-    return isNaN(num) ? '0' : num.toFixed(4);
-  }).join(', ');
-
-  return (
-    <div className={`text-sm ${props.className || ''}`}>
-      <span className="font-mono text-gray-700">[{preview}...]</span>
-      <span className="text-gray-500 ml-2">({dimensions}D)</span>
-    </div>
-  );
-}

package/src/widgets/__tests__/FilterConditionField.matchAll.test.ts

@@ -1,66 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Empty-criteria guard for the sharing-rule criteria builder
- * (objectstack#3896).
- *
- * This widget used to tell an admin that an empty criteria meant "All
- * records" — the most dangerous thing it could say, because it was describing
- * a bug as a feature. A sharing rule with no predicate was stored as
- * `criteria_json: null` and then evaluated as `find(object, { filter: {} })`,
- * i.e. every record of the object granted to the recipient. `SharingRuleSchema`
- * had always forbidden that shape ("never seeded as a permissive match-all",
- * ADR-0049); the REST and data-API entries just never checked.
- *
- * The server now refuses to save such a rule and shares nothing for one
- * already stored. These tests pin the client-side mirror of that predicate, so
- * the widget warns while the admin is still looking at the empty builder
- * rather than after a rejected save.
- */
-import { describe, it, expect } from 'vitest';
-import { isMatchAllCriteria } from '../FilterConditionField';
-
-describe('isMatchAllCriteria — shapes that would share every record', () => {
-  it('flags the empty and vacuous shapes', () => {
-    for (const shape of [
-      undefined,
-      null,
-      {},           // what a blank builder / blank textarea parses to
-      [],
-      true,
-      42,
-      { $and: [] },
-      { $or: [] },
-      { $and: [{}] },
-      { $or: [{ stage: 'won' }, {}] }, // one unconstrained branch opens the OR
-    ]) {
-      expect(isMatchAllCriteria(shape), `${JSON.stringify(shape) ?? String(shape)}`).toBe(true);
-    }
-  });
-
-  it('passes anything that actually narrows the result set', () => {
-    for (const shape of [
-      { stage: 'won' },
-      { amount: { $gte: 100000 } },
-      [{ stage: 'won' }],
-      { $and: [{ stage: 'won' }] },
-      { $or: [{ a: 1 }, { b: 2 }] },
-      { health: 'red', budget: { $gt: 1 } },
-    ]) {
-      expect(isMatchAllCriteria(shape), JSON.stringify(shape)).toBe(false);
-    }
-  });
-
-  it('agrees with the server on the reported case: a rule saved with no criteria', () => {
-    // The builder emits '' for an empty group, which the widget parses to {}.
-    expect(isMatchAllCriteria({})).toBe(true);
-    // …and one real condition is enough to clear the gate.
-    expect(isMatchAllCriteria({ health: 'red' })).toBe(false);
-  });
-});

package/src/widgets/__tests__/FilterConditionField.operators.test.ts

@@ -1,142 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Operator spelling guard for the sharing-rule criteria builder (#2901).
- *
- * `condToMongo` emitted `$ncontains` — a token that appears nowhere in
- * `@objectstack/spec` and that objectui's own `convertFiltersToAST` throws on,
- * naming the correct spelling (`$notContains`) in its error message. So every
- * "does not contain" rule authored here validated in the UI and was then
- * rejected downstream. Nothing caught it because the builder's operator list is
- * hand-written and never compared against the spec vocabulary.
- *
- * These tests pin the emitted spellings against `FieldOperatorsSchema`'s keys
- * and pin the round-trip, including the pre-fix spelling that stored criteria
- * still carry.
- */
-import { describe, it, expect } from 'vitest';
-import { FieldOperatorsSchema } from '@objectstack/spec/data';
-import { condToMongo, kvToCondition } from '../FilterConditionField';
-
-/**
- * The `$`-prefixed operator keys of the spec's `FieldOperatorsSchema` —
- * DERIVED from the schema (#2942), so a 16th operator landing in the spec
- * fails the reachability test below instead of drifting unnoticed.
- */
-const SPEC_OPERATORS = new Set(
-  Object.keys((FieldOperatorsSchema as unknown as { shape?: Record<string, unknown> }).shape ?? {}),
-);
-
-const noTypes = () => undefined;
-
-/** Pull the operator keys out of a `{ field: { $op: v } }` fragment. */
-function operatorsOf(frag: Record<string, any> | null): string[] {
-  if (!frag) return [];
-  return Object.values(frag).flatMap((v) =>
-    v !== null && typeof v === 'object' && !Array.isArray(v) ? Object.keys(v) : [],
-  );
-}
-
-describe('condToMongo emits only spec operator spellings', () => {
-  const builderOperators = [
-    'equals', 'notEquals', 'contains', 'notContains', 'isEmpty', 'isNotEmpty',
-    'greaterThan', 'lessThan', 'greaterOrEqual', 'lessOrEqual', 'in', 'notIn',
-    'before', 'after',
-    'startsWith', 'endsWith', 'isNull', 'isNotNull', 'exists', 'notExists',
-  ];
-
-  it.each(builderOperators)('%s emits a spec-defined operator', (operator) => {
-    const frag = condToMongo(
-      { id: 'c1', field: 'name', operator, value: operator === 'in' || operator === 'notIn' ? ['a'] : 'a' } as any,
-      noTypes,
-    );
-    const unknown = operatorsOf(frag).filter((op) => !SPEC_OPERATORS.has(op));
-    expect(unknown, `${operator} emits an operator @objectstack/spec does not define`).toEqual([]);
-  });
-
-  it('notContains emits $notContains, not the pre-fix $ncontains', () => {
-    const frag = condToMongo({ id: 'c1', field: 'name', operator: 'notContains', value: 'x' } as any, noTypes);
-    expect(frag).toEqual({ name: { $notContains: 'x' } });
-  });
-
-  it('between emits a range the spec defines', () => {
-    const frag = condToMongo({ id: 'c1', field: 'age', operator: 'between', value: [1, 5] } as any, noTypes);
-    expect(operatorsOf(frag).every((op) => SPEC_OPERATORS.has(op))).toBe(true);
-  });
-});
-
-describe('every spec field operator is reachable from the builder (#2942)', () => {
-  it('reads a non-empty operator vocabulary from the spec', () => {
-    expect([...SPEC_OPERATORS].length, 'could not read FieldOperatorsSchema.shape').toBeGreaterThan(0);
-  });
-
-  it('some builder operator emits every spec $-token', () => {
-    const builderOperators = [
-      'equals', 'notEquals', 'contains', 'notContains', 'isEmpty', 'isNotEmpty',
-      'greaterThan', 'lessThan', 'greaterOrEqual', 'lessOrEqual', 'in', 'notIn',
-      'before', 'after', 'between',
-      'startsWith', 'endsWith', 'isNull', 'isNotNull', 'exists', 'notExists',
-    ];
-    const emitted = new Set<string>();
-    for (const operator of builderOperators) {
-      const value = operator === 'in' || operator === 'notIn' ? ['a'] : operator === 'between' ? [1, 5] : 'a';
-      const frag = condToMongo({ id: 'c1', field: 'f', operator, value } as any, noTypes);
-      for (const op of operatorsOf(frag)) emitted.add(op);
-    }
-    // `$eq` is the spec's IMPLICIT equality form — `equals` deliberately
-    // emits the bare `{ field: value }` shape, never an explicit `$eq`.
-    // `$between` stays covered by the `$gte`+`$lte` pair `between` emits
-    // (kvToCondition reads that pair back as `between`).
-    const unreachable = [...SPEC_OPERATORS].filter(
-      (op) => op !== '$eq' && op !== '$between' && !emitted.has(op),
-    );
-    expect(
-      unreachable,
-      'FieldOperatorsSchema accepts these but no builder operator can author them',
-    ).toEqual([]);
-  });
-});
-
-describe('kvToCondition round-trips what condToMongo writes', () => {
-  const cases: Array<[string, unknown]> = [
-    ['notEquals', 'a'],
-    ['contains', 'a'],
-    ['notContains', 'a'],
-    ['greaterThan', 1],
-    ['lessThan', 1],
-    ['greaterOrEqual', 1],
-    ['lessOrEqual', 1],
-    ['startsWith', 'a'],
-    ['endsWith', 'a'],
-    ['isNull', ''],
-    ['isNotNull', ''],
-    ['exists', ''],
-    ['notExists', ''],
-  ];
-
-  it.each(cases)('%s survives the round trip', (operator, value) => {
-    const frag = condToMongo({ id: 'c1', field: 'f', operator, value } as any, noTypes)!;
-    const [[field, v]] = Object.entries(frag);
-    expect(kvToCondition(field, v, 0)).toMatchObject({ field: 'f', operator });
-  });
-
-  it('still reads the pre-fix $ncontains so stored criteria keep loading', () => {
-    // Dropping this would make rules saved before the fix fail to load entirely
-    // ("criteria can't be represented") rather than migrate.
-    expect(kvToCondition('name', { $ncontains: 'x' }, 0)).toMatchObject({
-      field: 'name',
-      operator: 'notContains',
-      value: 'x',
-    });
-  });
-
-  it('rejects an operator it cannot represent rather than guessing', () => {
-    expect(kvToCondition('name', { $nope: 'x' }, 0)).toBeNull();
-  });
-});