@object-ui/fields 17.5.0 → 17.7.0

package/src/widgets/PercentField.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Input, Slider, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * PercentField - Percentage input with configurable decimal precision
- * Stores values as decimals (0-1) and displays as percentages (0-100%)
- * Includes a slider for interactive control.
- */
-export function PercentField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
-  const percentField = field as any;
-  const precision = percentField?.precision ?? 2;
-
-  // Convention detection. A field declaring `max > 1` (e.g. `max: 100`) stores
-  // WHOLE-NUMBER percents (0–100); otherwise values are FRACTIONS (0–1) shown
-  // as 0–100%. This matches the read-side formatter so the edit widget agrees
-  // with display — and, crucially, keeps the rendered <input> within its `max`
-  // (a whole-number 50 must show "50", not "5000", or HTML5 constraint
-  // validation marks the field `:invalid` and blocks the whole form's submit).
-  const maxAttr = typeof percentField?.max === 'number' ? (percentField.max as number) : undefined;
-  const whole = maxAttr != null && maxAttr > 1;
-  const toDisplay = (v: number) => (whole ? v : v * 100);
-  const fromDisplay = (n: number) => (whole ? n : n / 100);
-  const sliderMax = whole ? maxAttr! : 100;
-
-  if (readonly) {
-    if (value == null) return <EmptyValue />;
-    return (
-      <span className="text-sm font-medium tabular-nums">
-        {toDisplay(value).toFixed(precision)}%
-      </span>
-    );
-  }
-
-  // Convert between stored value and 0–100 display value
-  const displayValue = value != null ? toDisplay(value) : '';
-  const sliderValue = value != null ? toDisplay(value) : 0;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value === '') {
-      onChange(null as any);
-      return;
-    }
-    const parsed = parseFloat(e.target.value);
-    const val = isNaN(parsed) ? null : fromDisplay(parsed);
-    onChange(val as any);
-  };
-
-  const handleSliderChange = (values: number[]) => {
-    if (readonly || props.disabled) return;
-    if (!Array.isArray(values) || values.length === 0) {
-      onChange(null as any);
-      return;
-    }
-    const raw = values[0];
-    const nextValue = typeof raw === 'number' ? fromDisplay(raw) : null;
-    onChange(nextValue as any);
-  };
-
-  // Derive slider step from precision so slider granularity matches the input
-  const sliderStep = Math.pow(10, -precision);
-
-  return (
-    <div className="space-y-2">
-      <div className="relative">
-        <Input
-          {...toDomProps(props)}
-          type="number"
-          value={displayValue}
-          onChange={handleChange}
-          placeholder={percentField?.placeholder || '0'}
-          disabled={readonly || props.disabled}
-          className={`pr-8 ${className || ''}`}
-          step={Math.pow(10, -precision).toFixed(precision)}
-          aria-invalid={!!error}
-        />
-        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
-          %
-        </span>
-      </div>
-      <Slider
-        value={[sliderValue]}
-        onValueChange={handleSliderChange}
-        min={0}
-        max={sliderMax}
-        step={sliderStep}
-        disabled={readonly || props.disabled}
-        className="w-full"
-        aria-label="Percentage"
-        data-testid="percent-slider"
-      />
-    </div>
-  );
-}

package/src/widgets/PersonRow.tsx

@@ -1,117 +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 React, { useEffect, useRef } from 'react';
-import { Avatar, AvatarFallback, AvatarImage, cn } from '@object-ui/components';
-import { Check } from 'lucide-react';
-import {
-  getPersonName,
-  getPersonInitials,
-  getPersonSubtitle,
-  getPersonAvatarUrl,
-  matchRanges,
-} from './personDisplay';
-
-/**
- * A rich, single-line candidate row for the search-first PeoplePicker:
- * avatar (image with initials fallback) + name + subtitle (department · email).
- * The subtitle is what lets search stand in for an org tree — it disambiguates
- * same-named people inline. The typed query is highlighted in both lines.
- * Selectable/toggleable; a Check marks the selected state, and `active` reflects
- * the keyboard cursor (scrolls itself into view).
- */
-export interface PersonRowProps {
-  record: any;
-  displayField?: string;
-  subtitleFields?: string[];
-  avatarField?: string;
-  selected?: boolean;
-  /** Keyboard cursor is on this row — highlight + scroll into view. */
-  active?: boolean;
-  /** Typed search term; matches are highlighted in name + subtitle. */
-  highlightQuery?: string;
-  onSelect?: (record: any) => void;
-  className?: string;
-}
-
-/** Wrap literal matches of `query` in a subtle highlight. */
-function Highlighted({ text, query }: { text: string; query?: string }): React.ReactElement {
-  const ranges = query ? matchRanges(text, query) : [];
-  if (ranges.length === 0) return <>{text}</>;
-  const out: React.ReactNode[] = [];
-  let cursor = 0;
-  ranges.forEach(([start, end], i) => {
-    if (start > cursor) out.push(text.slice(cursor, start));
-    out.push(
-      <mark key={i} className="rounded-[2px] bg-primary/20 px-px text-inherit">
-        {text.slice(start, end)}
-      </mark>,
-    );
-    cursor = end;
-  });
-  if (cursor < text.length) out.push(text.slice(cursor));
-  return <>{out}</>;
-}
-
-export function PersonRow({
-  record,
-  displayField = 'name',
-  subtitleFields,
-  avatarField = 'image',
-  selected = false,
-  active = false,
-  highlightQuery,
-  onSelect,
-  className,
-}: PersonRowProps) {
-  const name = getPersonName(record, displayField);
-  const subtitle = getPersonSubtitle(record, subtitleFields);
-  const avatarUrl = getPersonAvatarUrl(record, avatarField);
-  const initials = getPersonInitials(name);
-
-  const ref = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    // Optional-call the method too — jsdom doesn't implement scrollIntoView.
-    if (active) ref.current?.scrollIntoView?.({ block: 'nearest' });
-  }, [active]);
-
-  return (
-    <button
-      ref={ref}
-      type="button"
-      tabIndex={-1}
-      onClick={() => onSelect?.(record)}
-      aria-pressed={selected}
-      data-testid="person-row"
-      data-active={active || undefined}
-      className={cn(
-        'flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-left transition-colors',
-        'hover:bg-accent focus-visible:outline-none',
-        selected && 'bg-accent',
-        active && 'bg-accent ring-1 ring-inset ring-ring',
-        className,
-      )}
-    >
-      <Avatar className="size-9 shrink-0">
-        {avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
-        <AvatarFallback className="text-xs">{initials}</AvatarFallback>
-      </Avatar>
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium">
-          {name ? <Highlighted text={name} query={highlightQuery} /> : '—'}
-        </div>
-        {subtitle && (
-          <div className="truncate text-xs text-muted-foreground">
-            <Highlighted text={subtitle} query={highlightQuery} />
-          </div>
-        )}
-      </div>
-      {selected && <Check className="size-4 shrink-0 text-primary" aria-hidden />}
-    </button>
-  );
-}

package/src/widgets/PhoneField.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * PhoneField - Telephone number input with tel link in readonly mode
- * Renders as a clickable tel link when readonly, standard phone input otherwise
- */
-export function PhoneField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field;
-  if (readonly) {
-    if (!value) return <EmptyValue />;
-    return (
-      <a 
-        href={`tel:${value}`}
-        className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
-      >
-        {value}
-      </a>
-    );
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="tel"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={config?.placeholder || '(555) 123-4567'}
-      disabled={readonly || domProps.disabled}
-      aria-invalid={!!error}
-    />
-  );
-}

package/src/widgets/QRCodeField.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { Input, Button, EmptyValue } from '@object-ui/components';
-import { QrCode, Copy } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * QR Code field widget - generates QR codes from text
- * Uses a simple SVG-based QR code generator
- */
-export function QRCodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const [showQR, setShowQR] = React.useState(false);
-  const config = field;
-
-  // Simple QR code generation using an external library would be ideal
-  // For now, we'll use a service API approach or placeholder
-  const getQRCodeUrl = (text: string): string => {
-    // Using a simple QR code API service (you might want to replace this with a library)
-    return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(text)}`;
-  };
-
-  const copyToClipboard = () => {
-    if (value) {
-      navigator.clipboard.writeText(value);
-    }
-  };
-
-  if (readonly) {
-    return (
-      <div className="flex items-center gap-3">
-        <span className="text-sm flex-1 truncate">{value || <EmptyValue />}</span>
-        {value && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => setShowQR(!showQR)}
-          >
-            <QrCode className="w-4 h-4 mr-2" />
-            {showQR ? 'Hide' : 'Show'} QR
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <Input
-          // DOM pass-through onto the real focusable control (objectui#3318).
-          {...toDomProps(props)}
-          type="text"
-          value={value || ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={config?.placeholder || 'Enter text for QR code'}
-          disabled={readonly || props.disabled}
-          className={props.className}
-          // AFTER the spread so this widget's own computation wins: `error`
-          // is the published validation slot (#3222), `!!undefined` →
-          // explicit "false".
-          aria-invalid={!!error}
-        />
-        {value && (
-          <>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={copyToClipboard}
-            >
-              <Copy className="w-4 h-4" />
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setShowQR(!showQR)}
-            >
-              <QrCode className="w-4 h-4" />
-            </Button>
-          </>
-        )}
-      </div>
-
-      {showQR && value && (
-        <div className="border rounded p-4 bg-white flex justify-center">
-          <img
-            src={getQRCodeUrl(value)}
-            alt="QR Code"
-            className="w-48 h-48"
-          />
-        </div>
-      )}
-
-      {value && (
-        <p className="text-xs text-muted-foreground">
-          QR code contains: {value.length} characters
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,141 +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.
- */
-
-/**
- * Cascading / role-gated `radio` options (#2715) — parity with the single
- * `SelectField` (ADR-0058 / #2284).
- *
- * Exercises the observable widget behaviour: the dependency gate (a "select the
- * parent first" empty-state) and the scalar cascade clear (a value dropped when
- * the offered set no longer includes it). The per-option filtering itself is
- * unit-tested in `@object-ui/core` (`optionRules.test.ts`); here we prove the
- * radio group wires `dependentValues` + predicate scope into that resolver via
- * the shared `useCascadingOptions` hook.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { PredicateScopeProvider } from '@object-ui/react';
-import { RadioField } from './RadioField';
-
-const provinceField = {
-  name: 'province',
-  type: 'radio',
-  dependsOn: 'country',
-  options: [
-    { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
-    { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
-  ],
-} as any;
-
-beforeEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('RadioField — dependency gating (#2715)', () => {
-  it('gates with a "select parent first" hint while the controlling field is empty', () => {
-    render(
-      <RadioField
-        value={undefined}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: {} } as any)}
-      />,
-    );
-    const gate = screen.getByTestId('radio-empty-province');
-    expect(gate).toHaveTextContent(/select country first/i);
-    // Gated → no radios offered.
-    expect(screen.queryAllByRole('radio')).toHaveLength(0);
-  });
-
-  it('unlocks the radios once the controlling field is set', () => {
-    render(
-      <RadioField
-        value={undefined}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(screen.queryByTestId('radio-empty-province')).not.toBeInTheDocument();
-    // Only the `cn` option is offered.
-    expect(screen.getByRole('radio', { name: 'Zhejiang' })).toBeInTheDocument();
-    expect(screen.queryByRole('radio', { name: 'California' })).not.toBeInTheDocument();
-  });
-});
-
-describe('RadioField — cascade clear (#2715)', () => {
-  it('clears a value the parent change no longer offers', () => {
-    const onChange = vi.fn();
-    render(
-      <RadioField
-        value={'ca'}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    // 'ca' is a US province — under country=cn it is not offered, so it is dropped.
-    expect(onChange).toHaveBeenCalledWith(undefined);
-  });
-
-  it('keeps a value that is still offered', () => {
-    const onChange = vi.fn();
-    render(
-      <RadioField
-        value={'zj'}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('RadioField — role / context gating (#2715)', () => {
-  const tierField = {
-    name: 'tier',
-    type: 'radio',
-    options: [
-      { label: 'Standard', value: 'standard' },
-      { 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: { positions: ['sales'] } }}>
-        <RadioField
-          value={'admin_only'}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tier', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).toHaveBeenCalledWith(undefined);
-  });
-
-  it('keeps an admin-only value for an admin', () => {
-    const onChange = vi.fn();
-    render(
-      <PredicateScopeProvider scope={{ current_user: { positions: ['admin'] } }}>
-        <RadioField
-          value={'admin_only'}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tier', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/widgets/RadioField.tsx

@@ -1,143 +0,0 @@
-import React, { useId, useEffect } from 'react';
-import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
-import { isValueStillOffered, type OptionLike } from '@object-ui/core';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { toHostGroupProps } from './toHostGroupProps';
-import { OptionsEmptyState } from './OptionsEmptyState';
-import { useCascadingOptions } from './useCascadingOptions';
-
-type Option = OptionLike;
-
-/**
- * RadioField - choose exactly one value from a fixed option set, rendered as a
- * radio group. The stored value is the selected option value (string). Used for
- * the `radio` field type.
- *
- * Like the single `SelectField`, options support per-option `visibleWhen`
- * cascading + `dependsOn` gating (ADR-0058 / #2715), resolved through the shared
- * {@link useCascadingOptions} hook: the offered radios narrow against the live
- * form record + `current_user`, the control is gated behind a "select the parent
- * first" hint while a dependency is empty, and a value no longer offered (parent
- * changed / predicate flipped) is cleared.
- */
-export function RadioField({
-  value,
-  onChange,
-  field,
-  readonly,
-  className,
-  dependentValues,
-  dependsOn: dependsOnProp,
-  emptyHint,
-  dataSource: _dataSource,
-  error,
-  ...props
-}: FieldWidgetComponentProps<string>) {
-  const config = field as any;
-  const rawOptions: Option[] = config?.options || [];
-  const groupId = useId();
-  const fieldName = props.name || config?.name || props.id || '';
-
-  const dependsOn = config?.dependsOn ?? dependsOnProp;
-  const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
-    rawOptions,
-    dependsOn,
-    dependentValues,
-  );
-
-  // Cascade clear: once the offered set no longer includes the current value
-  // (parent changed / predicate flipped), drop it so no stale pair persists.
-  useEffect(() => {
-    if (readonly) return;
-    // Never configured → nothing to prune against; see `MultiSelectField`'s
-    // copy of this guard for the measured failure (objectui#4220).
-    if (rawOptions.length === 0) return;
-    // Gated → the authored list is withheld until the `dependsOn` parent is
-    // chosen, so the empty offered set is missing information, not a verdict on
-    // the stored value; clearing here fired on mount (objectui#4247). Same
-    // reasoning, at length, in `MultiSelectField`.
-    if (gated) return;
-    if (value === undefined || value === null || (value as unknown) === '') return;
-    if (!isValueStillOffered(value, options)) onChange?.(undefined as unknown as string);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, gated]);
-
-  // The host's group label has to be consumed on EVERY surface this widget can
-  // render, not only the `RadioGroup` (objectui#3990): both branches below return
-  // before that spread, which is how a field-level `readonly: true` and a
-  // zero-option list ended up with a published label id and no consumer at all.
-  // See `toHostGroupProps` — note the role it emits is `group`, not the
-  // `radiogroup` the editable branch keeps: there is not one radio left in
-  // either of these surfaces.
-  const hostGroupProps = toHostGroupProps(props);
-
-  if (readonly) {
-    // `EmptyValue`'s own `aria-label` ("No value") is outranked by
-    // `aria-labelledby` per accname, and on the `generic` role that placeholder
-    // span carries it was never exposed as a name anyway.
-    if (value == null || value === '') return <EmptyValue {...hostGroupProps} />;
-    // Label from the raw set so a stored value hidden by `visibleWhen` still
-    // renders its label rather than a bare id.
-    const opt = rawOptions.find((o) => o.value === value);
-    return <span {...hostGroupProps} className="text-sm">{opt?.label || String(value)}</span>;
-  }
-
-  // No offered options is unfillable — surface a legible state instead of an
-  // empty radio group: the host's `emptyHint` when it computed one, else this
-  // widget's own translated copy. Shared with the select / multiselect /
-  // checkboxes so the four cannot drift again (objectui#3231).
-  if (options.length === 0) {
-    return (
-      <OptionsEmptyState
-        emptyHint={emptyHint}
-        gated={gated}
-        dependsOnFields={dependsOnFields}
-        testId={fieldName ? `radio-empty-${fieldName}` : undefined}
-        className="min-h-9"
-        // This box IS the field in this state, so it is what the host label
-        // names (objectui#3990).
-        hostGroupProps={hostGroupProps}
-      />
-    );
-  }
-
-  return (
-    // DOM pass-through onto the radiogroup (objectui#3318). It also carries the
-    // host's group label: when the form renderer associates its `<FormLabel>` by
-    // IDREF (`aria-labelledby`, objectui#3961) that key rides in this same
-    // whitelist spread — `toDomProps` forwards the whole `aria-` family — so this
-    // widget needs no branch of its own. `radiogroup` is already a member of the
-    // group role family, so nothing here overrides it with `role="group"`: it is
-    // the more specific role AND the correct carrier of `aria-invalid` below.
-    //
-    // Unlike Radix
-    // `Select.Root` (#3306) this Root IS a real DOM element — a
-    // `<div role="radiogroup">` — and `radiogroup` is exactly the role
-    // WAI-ARIA designates to carry `aria-invalid` for a set of radios
-    // (`radio` itself does not support it): the group's state is announced
-    // when focus lands on any radio inside it.
-    <RadioGroup
-      {...toDomProps(props)}
-      value={value ?? ''}
-      onValueChange={onChange}
-      disabled={props.disabled}
-      className={className}
-      // AFTER the spread so this widget's own computation wins (#3222).
-      aria-invalid={!!error}
-    >
-      {options.map((opt) => {
-        // Radix speaks strings — stringify the (possibly numeric,
-        // #3090-widened) authored value at this boundary.
-        const value = String(opt.value);
-        const id = `${groupId}-${value}`;
-        return (
-          <div key={value} className="flex items-center space-x-2">
-            <RadioGroupItem value={value} id={id} data-testid={`radio-option-${value}`} />
-            <Label htmlFor={id} className="font-normal">{opt.label}</Label>
-          </div>
-        );
-      })}
-    </RadioGroup>
-  );
-}