@object-ui/fields 17.3.0 → 17.6.0

package/src/standard-widgets.test.tsx

@@ -1,357 +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 { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { CurrencyField } from './widgets/CurrencyField';
-import { NumberField } from './widgets/NumberField';
-import { TextField } from './widgets/TextField';
-import { SelectField } from './widgets/SelectField';
-import { BooleanField } from './widgets/BooleanField';
-import { DateField } from './widgets/DateField';
-import { EmailField } from './widgets/EmailField';
-import { UrlField } from './widgets/UrlField';
-import { PhoneField } from './widgets/PhoneField';
-import { TextAreaField } from './widgets/TextAreaField';
-
-const mockOnChange = vi.fn();
-
-describe('Standard Field Widgets', () => {
-  describe('CurrencyField', () => {
-    const fieldMock = { type: 'currency', currency: 'USD', precision: 2 };
-
-    it('should render value with currency symbol in input mode', () => {
-      render(
-        <CurrencyField
-          value={123.45}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      const input = screen.getByRole('spinbutton'); // input type="number"
-      expect(input).toHaveValue(123.45);
-      expect(screen.getByText('$')).toBeInTheDocument();
-    });
-
-    it('should format currency in readonly mode', () => {
-      const { container } = render(
-        <CurrencyField
-          value={1234.56}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-          readonly={true}
-        />
-      );
-      // Expected output format might depend on locale, matching generic USD format
-      expect(container.textContent).toMatch(/\$1,234.56/);
-    });
-
-    it('should handle EUR currency', () => {
-      render(
-        <CurrencyField
-          value={100}
-          onChange={mockOnChange}
-          field={{ ...fieldMock, currency: 'EUR' } as any}
-        />
-      );
-      expect(screen.getByText('EUR')).toBeInTheDocument();
-    });
-  });
-
-  describe('NumberField', () => {
-    const fieldMock = { type: 'number', precision: 2 };
-
-    it('should render numeric input', () => {
-      render(
-        <NumberField
-          value={42}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      const input = screen.getByRole('spinbutton');
-      expect(input).toHaveValue(42);
-    });
-
-    it('should call onChange with number', () => {
-      render(
-        <NumberField
-          value={1}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      const input = screen.getByRole('spinbutton');
-      fireEvent.change(input, { target: { value: '10' } });
-      expect(mockOnChange).toHaveBeenCalledWith(10);
-    });
-
-    it('should display value in readonly mode', () => {
-      const { container } = render(
-        <NumberField
-          value={99.9}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-          readonly={true}
-        />
-      );
-      expect(container.textContent).toBe('99.9');
-    });
-
-    it('should surface metadata min/max on the input (objectui#2572)', () => {
-      render(
-        <NumberField
-          value={5}
-          onChange={mockOnChange}
-          field={{ type: 'number', min: 0, max: 100 } as any}
-        />
-      );
-      const input = screen.getByRole('spinbutton');
-      expect(input).toHaveAttribute('min', '0');
-      expect(input).toHaveAttribute('max', '100');
-    });
-
-    it('should step by 1 for scale: 0 (whole numbers), not "any"', () => {
-      render(
-        <NumberField
-          value={5}
-          onChange={mockOnChange}
-          field={{ type: 'number', scale: 0 } as any}
-        />
-      );
-      expect(screen.getByRole('spinbutton')).toHaveAttribute('step', '1');
-    });
-
-    it('should honor an explicit metadata step over the scale-derived one', () => {
-      render(
-        <NumberField
-          value={5}
-          onChange={mockOnChange}
-          field={{ type: 'number', scale: 2, step: 5 } as any}
-        />
-      );
-      expect(screen.getByRole('spinbutton')).toHaveAttribute('step', '5');
-    });
-  });
-
-  describe('TextField', () => {
-    const fieldMock = { type: 'text' };
-
-    it('should render text input', () => {
-      render(
-        <TextField
-          value="Hello"
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('Hello');
-    });
-
-    it('should render as password when type is password', () => {
-        render(
-          <TextField
-            value="secret"
-            onChange={mockOnChange}
-            field={{ type: 'password' } as any}
-          />
-        );
-        // getByRole('textbox') doesn't work for password type usually
-        const input = screen.getByDisplayValue('secret'); 
-        expect(input).toHaveAttribute('type', 'password');
-      });
-
-    it('should display value in readonly mode', () => {
-      const { container } = render(
-        <TextField
-          value="ReadOnly"
-          onChange={mockOnChange}
-          field={fieldMock as any}
-          readonly={true}
-        />
-      );
-      expect(container.textContent).toBe('ReadOnly');
-    });
-  });
-
-  describe('SelectField', () => {
-    const fieldMock = { 
-        type: 'select', 
-        options: [
-            { label: 'Option A', value: 'a' },
-            { label: 'Option B', value: 'b' }
-        ] 
-    };
-
-    it('should render select trigger (Combobox/Select)', () => {
-      render(
-        <SelectField
-          value={''}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-    });
-
-    it('should display label in readonly mode', () => {
-      const { container } = render(
-        <SelectField
-          value="a"
-          onChange={mockOnChange}
-          field={fieldMock as any}
-          readonly={true}
-        />
-      );
-      expect(container.textContent).toBe('Option A');
-    });
-
-    // A `select` declared `multiple` is a multi-value picker (spec allows
-    // `multiple` on select). SelectField delegates to the chip picker so the
-    // form, inline editor, and ActionParamDialog all get multi-select from the
-    // one `select` widget — no single-select fallback, no per-surface drift.
-    it('renders the multi-value chip picker when field.multiple is set', () => {
-      render(
-        <SelectField
-          value={['a']}
-          onChange={mockOnChange}
-          field={{ ...fieldMock, multiple: true } as any}
-        />
-      );
-      // Chip picker uses toggle buttons (aria-pressed), not a Radix combobox.
-      expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
-      const optionA = screen.getByRole('button', { name: 'Option A' });
-      expect(optionA).toHaveAttribute('aria-pressed', 'true');
-      expect(screen.getByRole('button', { name: 'Option B' })).toHaveAttribute('aria-pressed', 'false');
-    });
-
-    it('multi-select toggles values as an array', () => {
-      render(
-        <SelectField
-          value={['a']}
-          onChange={mockOnChange}
-          field={{ ...fieldMock, multiple: true } as any}
-        />
-      );
-      fireEvent.click(screen.getByRole('button', { name: 'Option B' }));
-      expect(mockOnChange).toHaveBeenCalledWith(['a', 'b']);
-    });
-
-    it('multi-select renders selected values as badges in readonly mode', () => {
-      const { container } = render(
-        <SelectField
-          value={['a', 'b']}
-          onChange={mockOnChange}
-          field={{ ...fieldMock, multiple: true } as any}
-          readonly={true}
-        />
-      );
-      expect(container.textContent).toContain('Option A');
-      expect(container.textContent).toContain('Option B');
-    });
-  });
-
-  describe('BooleanField', () => {
-    const fieldMock = { type: 'boolean' };
-
-    it('should render checkbox/switch', () => {
-      render(
-        <BooleanField
-          value={true}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      // Ensure we can find the switch role (Shadcn switch uses role="switch")
-      expect(screen.getByRole('switch')).toBeChecked();
-    });
-
-    it('should toggle value', () => {
-      render(
-        <BooleanField
-          value={false}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-        />
-      );
-      const toggle = screen.getByRole('switch');
-      fireEvent.click(toggle);
-      expect(mockOnChange).toHaveBeenCalledWith(true);
-    });
-
-    it('should display Yes/No in readonly mode', () => {
-       const { container } = render(
-        <BooleanField
-          value={true}
-          onChange={mockOnChange}
-          field={fieldMock as any}
-          readonly={true}
-        />
-      );
-      expect(container.textContent).toBe('Yes');
-    });
-  });
-
-  describe('EmailField', () => {
-    it('should render email input', () => {
-      render(
-        <EmailField
-          value="test@example.com"
-          onChange={mockOnChange}
-          field={{ type: 'email' } as any}
-        />
-      );
-      const input = screen.getByDisplayValue('test@example.com');
-      expect(input).toHaveAttribute('type', 'email');
-    });
-
-    it('should render as link in readonly mode', () => {
-      render(
-        <EmailField
-          value="test@example.com"
-          onChange={mockOnChange}
-          field={{ type: 'email' } as any}
-          readonly={true}
-        />
-      );
-      const link = screen.getByRole('link');
-      expect(link).toHaveAttribute('href', 'mailto:test@example.com');
-      expect(link).toHaveTextContent('test@example.com');
-    });
-  });
-
-  describe('UrlField', () => {
-    it('should render url input', () => {
-      render(
-        <UrlField
-          value="https://example.com"
-          onChange={mockOnChange}
-          field={{ type: 'url' } as any}
-        />
-      );
-      const input = screen.getByDisplayValue('https://example.com');
-      expect(input).toHaveAttribute('type', 'url');
-    });
-
-    it('should render clickable link in readonly mode', () => {
-      render(
-        <UrlField
-          value="https://example.com"
-          onChange={mockOnChange}
-          field={{ type: 'url' } as any}
-          readonly={true}
-        />
-      );
-      const link = screen.getByRole('link');
-      expect(link).toHaveAttribute('href', 'https://example.com');
-    });
-  });
-});

package/src/widgets/AddressField.tsx

@@ -1,132 +0,0 @@
-import React, { useId } from 'react';
-import { Input, Label, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * Address data structure
- */
-export interface AddressValue {
-  street?: string;
-  city?: string;
-  state?: string;
-  zipCode?: string;
-  country?: string;
-}
-
-/**
- * Address field widget - provides a structured address input
- * Supports street, city, state, zip code, and country
- */
-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({
-      ...address,
-      [fieldName]: fieldValue,
-    });
-  };
-
-  const formatAddress = (addr: AddressValue): string => {
-    const parts = [
-      addr.street,
-      addr.city,
-      [addr.state, addr.zipCode].filter(Boolean).join(' '),
-      addr.country,
-    ].filter(Boolean);
-    return parts.join(', ');
-  };
-
-  if (readonly) {
-    const formatted = formatAddress(address);
-    return formatted ? <span className="text-sm">{formatted}</span> : <EmptyValue />;
-  }
-
-  return (
-    <div className="space-y-3">
-      <div>
-        <Label htmlFor={subId('street')} className="text-xs">Street Address</Label>
-        <Input
-          {...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={subId('city')} className="text-xs">City</Label>
-          <Input
-            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={subId('state')} className="text-xs">State / Province</Label>
-          <Input
-            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={subId('zipCode')} className="text-xs">ZIP / Postal Code</Label>
-          <Input
-            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={subId('country')} className="text-xs">Country</Label>
-          <Input
-            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>
-    </div>
-  );
-}

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

@@ -1,92 +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.
- */
-
-/**
- * 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,18 +0,0 @@
-import React from 'react';
-import { EmptyValue } from '@object-ui/components';
-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 }: FieldWidgetComponentProps<string | number>) {
-  if (value == null) {
-    return <EmptyValue className={props.className} />;
-  }
-  return (
-    <span className={`text-sm font-mono text-gray-700 ${props.className || ''}`}>
-      {String(value)}
-    </span>
-  );
-}