@object-ui/fields 17.5.0 → 17.7.0

package/src/widgets/CheckboxesField.tsx

@@ -1,169 +0,0 @@
-import React, { useId, useEffect } from 'react';
-import { Checkbox, Label, EmptyValue, Badge } from '@object-ui/components';
-import 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;
-
-/**
- * CheckboxesField - select zero or more values from a fixed option set, rendered
- * as a list of checkboxes. The stored value is a string[]. Used for the
- * `checkboxes` field type.
- *
- * Options support the same per-option `visibleWhen` cascading + `dependsOn`
- * gating as `MultiSelectField` (ADR-0058 / #2715), resolved through the shared
- * {@link useCascadingOptions} hook: the offered boxes 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 selections no longer offered
- * (parent changed / predicate flipped) are pruned from the array.
- */
-export function CheckboxesField({
-  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 selected: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
-  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: prune selected values the offered set no longer includes
-  // (parent changed / predicate flipped), keeping the ones still valid — the
-  // per-element clear the multi-value case needs (cf. the scalar select/radio).
-  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 (selected.length === 0) return;
-    const stillOffered = selected.filter((v) => options.some((o) => o.value === v));
-    if (stillOffered.length !== selected.length) onChange(stillOffered);
-    // 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 editable one (objectui#3990): both branches below
-  // return before the editable container's `groupDomProps` 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`.
-  const hostGroupProps = toHostGroupProps(props);
-
-  if (readonly) {
-    // The readonly display of a checkbox set is the set of CHECKED labels — a
-    // set of values, so the same `group` answer as the editable list.
-    // `EmptyValue` is that surface with nothing in it; its own `aria-label`
-    // ("No value") is outranked by `aria-labelledby` per accname, and on the
-    // `generic` role that span carries it was never exposed anyway.
-    if (selected.length === 0) return <EmptyValue {...hostGroupProps} />;
-    return (
-      <div {...hostGroupProps} className="flex flex-wrap gap-1">
-        {selected.map((v) => {
-          // 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 === v);
-          return <Badge key={v} variant="outline">{opt?.label || v}</Badge>;
-        })}
-      </div>
-    );
-  }
-
-  // No offered options is unfillable — surface a legible state instead of an
-  // empty checkbox list: the host's `emptyHint` when it computed one, else this
-  // widget's own translated copy. Shared with the select / multiselect / radio
-  // so the four cannot drift again (objectui#3231).
-  if (options.length === 0) {
-    return (
-      <OptionsEmptyState
-        emptyHint={emptyHint}
-        gated={gated}
-        dependsOnFields={dependsOnFields}
-        testId={fieldName ? `checkboxes-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}
-      />
-    );
-  }
-
-  const toggle = (v: string, checked: boolean) => {
-    const next = checked ? [...selected.filter((x) => x !== v), v] : selected.filter((x) => x !== v);
-    onChange(next);
-  };
-
-  // DOM pass-through (objectui#3318): the container carries the form
-  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
-  // wrapper div is not where assistive tech reads the invalid state. That
-  // state goes onto every focusable checkbox below (`checkbox` is an
-  // aria-invalid-supporting role), computed from the published `error` slot
-  // (#3222). The per-item ids below stay authoritative for their labels.
-  // `name` is withheld too: it is only DOM-legal on form controls, and on
-  // this div it is exactly the leak #3291 sweeps for.
-  const {
-    'aria-invalid': _hostAriaInvalid,
-    name: _domName,
-    ...groupDomProps
-  } = toDomProps(props);
-  // When the host associated its visible label with this container by IDREF
-  // (`aria-labelledby`, objectui#3961) the container IS the labelled group, so it
-  // answers with the matching role — without one, the name sits on a generic
-  // `div` and contributes nothing: `label for` pointing here was already inert
-  // (`HTMLLabelElement.control` is null for a div), which is the whole defect.
-  // Absent (standalone: the inline grid editor, a bare SDUI node) nothing is
-  // emitted and the markup is unchanged.
-  const isLabelledGroup = groupDomProps['aria-labelledby'] != null;
-
-  return (
-    <div
-      {...groupDomProps}
-      role={isLabelledGroup ? 'group' : undefined}
-      className={className}
-      data-testid={fieldName ? `checkboxes-${fieldName}` : undefined}
-    >
-      {options.map((opt) => {
-        // Multi-value fields store string arrays — 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 py-0.5">
-            <Checkbox
-              id={id}
-              checked={selected.includes(value)}
-              onCheckedChange={(checked) => toggle(value, !!checked)}
-              disabled={props.disabled}
-              aria-invalid={!!error}
-              data-testid={`checkboxes-option-${value}`}
-            />
-            <Label htmlFor={id} className="font-normal">{opt.label}</Label>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/widgets/CodeField.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Textarea, cn, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * Code field widget - provides a code editor with syntax highlighting
- * Uses a simple textarea with monospace font
- * For advanced code editing, use the @object-ui/plugin-editor component
- */
-export function CodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field;
-  // Get code-specific configuration from field metadata
-  const language = (config as any)?.language ?? 'javascript';
-
-  if (readonly) {
-    return (
-      <pre className={cn("text-sm bg-muted p-2 rounded overflow-x-auto border", props.className)}>
-        <code>{value || <EmptyValue />}</code>
-      </pre>
-    );
-  }
-
-  return (
-    <Textarea
-      // DOM pass-through onto the real focusable control (objectui#3318).
-      {...toDomProps(props)}
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={config?.placeholder || `// Write ${language} code here...`}
-      disabled={readonly || props.disabled}
-      className={cn("font-mono text-sm", props.className)}
-      rows={12}
-      spellCheck={false}
-      // AFTER the spread so this widget's own computation wins: `error` is
-      // the published validation slot (#3222), `!!undefined` → explicit
-      // "false".
-      aria-invalid={!!error}
-    />
-  );
-}

package/src/widgets/ColorField.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * Color field widget - provides a color picker input
- * Supports hex color values (e.g., #ff0000)
- */
-export function ColorField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const colorField = field as any;
-
-  if (readonly) {
-    return (
-      <div className="flex items-center gap-2">
-        <div
-          className="w-6 h-6 rounded border border-input"
-          style={{ backgroundColor: value || '#000000' }}
-        />
-        <span className="text-sm">{value || <EmptyValue />}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        type="color"
-        value={value || '#000000'}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={readonly || props.disabled}
-        className="w-10 h-10 rounded border border-input cursor-pointer"
-        // Both focusable halves of this widget announce the same validation
-        // state (objectui#3318).
-        aria-invalid={!!error}
-      />
-      <Input
-        // DOM pass-through onto the primary text control (objectui#3318): the
-        // whitelist spread carries the form renderer's id / aria-describedby.
-        {...toDomProps(props)}
-        type="text"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={colorField?.placeholder || '#000000'}
-        disabled={readonly || props.disabled}
-        className={props.className}
-        pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
-        // AFTER the spread so this widget's own computation wins (#3222).
-        aria-invalid={!!error}
-      />
-    </div>
-  );
-}

package/src/widgets/CurrencyField.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { useLocalization, useDisplayLocale, formatDisplayNumber } from '@object-ui/i18n';
-import { resolveFieldCurrency, currencyFractionDigits, currencySymbol } from '../currency';
-
-/**
- * Format currency value for display. When `currency` is undefined the value
- * is rendered as a plain number with thousands separators (no symbol),
- * because silently assuming USD is misleading for non-USD businesses.
- *
- * `precision` is a display width the caller resolved — either the field's
- * authored `precision` or, when it declared none, the currency's own ISO 4217
- * minor-unit count (see the derivation at the call site, objectui#4361).
- */
-function formatAmount(
-  value: number,
-  currency: string | undefined,
-  precision: number,
-  locale?: string,
-): string {
-  if (currency) {
-    try {
-      return formatDisplayNumber(value, {
-        locale,
-        currency,
-        minimumFractionDigits: precision,
-        maximumFractionDigits: precision,
-      });
-    } catch {
-      return `${currency} ${value.toFixed(precision)}`;
-    }
-  }
-  try {
-    // No `scale` passed: this is a currency widget whose `precision` is a
-    // display width, so a `precision: 0` amount keeps its separators rather
-    // than being read as an ordinal (objectui#4033).
-    return formatDisplayNumber(value, {
-      locale,
-      minimumFractionDigits: precision,
-      maximumFractionDigits: precision,
-    });
-  } catch {
-    return value.toFixed(precision);
-  }
-}
-
-export function CurrencyField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
-  const currencyField = field as any;
-  // Shared precedence: field currency → currencyConfig → tenant default (ADR-0053).
-  const { currency: tenantCurrency } = useLocalization();
-  const locale = useDisplayLocale();
-  const currency: string | undefined = resolveFieldCurrency(currencyField, tenantCurrency);
-  // An AUTHORED `precision` wins: it is authored metadata, and this repo's
-  // convention is that authored metadata keeps priority. Whether a declared
-  // `precision` that contradicts the currency's ISO 4217 digits (say
-  // `precision: 2` on a JPY field) should be REJECTED at publish time is a
-  // contract question, so it is filed upstream in `@objectstack/spec` rather
-  // than answered here by overriding the author (objectui#4361).
-  //
-  // An ABSENT `precision` derives from the currency instead of defaulting to a
-  // literal 2, which rendered `¥1,234.50` for a currency with no minor unit.
-  // "Absent" is genuinely distinguishable from "authored 2" here — MEASURED,
-  // not assumed: `CurrencyFieldMetadata.precision` is optional in
-  // `@object-ui/types` and `z.ZodOptional<z.ZodNumber>` (no `.default()`) in
-  // `@objectstack/spec`, so a parsed field carries no materialized 2. The only
-  // `.default(2)` on the currency surface is `CurrencyConfigSchema.precision`,
-  // a different key on the `currencyConfig` block that this widget never reads.
-  //
-  // This is the widget's ONE precision, so the derivation also reaches the edit
-  // affordances below. Deliberate: leaving `step`/blur-rounding at 2 would give
-  // a JPY field that displays whole yen while offering a 0.01 spinner step and
-  // rounding typed input to 1234.56 yen.
-  const precision =
-    currencyField?.precision ?? (currency ? currencyFractionDigits(currency) : 2);
-
-  if (readonly) {
-    if (value == null) return <EmptyValue />;
-    return (
-      <span className="text-sm font-medium tabular-nums">
-        {formatAmount(Number(value), currency, precision, locale)}
-      </span>
-    );
-  }
-
-  // Parse and format on blur to ensure valid currency format
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    const val = parseFloat(e.target.value);
-    if (!isNaN(val)) {
-      onChange(parseFloat(val.toFixed(precision)));
-    }
-  };
-
-  // ONE channel for the symbol (objectui#4414). This used to be a hand-written
-  // `currency === 'USD' ? '$' : currency` ternary, with a dead one-entry
-  // `CURRENCY_SYMBOLS` map sitting two lines above it restating the same fact —
-  // a table that looked like the place to add a currency but that nothing read.
-  // Both were hand copies of knowledge `Intl` already carries, and both are
-  // gone: `currencySymbol` reads the `currency` part of the SAME format the
-  // readonly branch above renders amounts with, so the two modes of this widget
-  // can no longer disagree (they did: `JPY` in the adornment, `¥1,235` in the
-  // readonly span). USD at the display-locale default is `$` either way.
-  const symbol = currency ? currencySymbol(currency, locale) : '';
-
-  return (
-    <div className="relative">
-      {symbol && (
-        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
-          {symbol}
-        </span>
-      )}
-      <Input
-        {...toDomProps(props)}
-        type="number"
-        value={value ?? ''}
-        onChange={(e) => {
-          const val = e.target.value === '' ? null : parseFloat(e.target.value);
-          onChange(val as any);
-        }}
-        onBlur={handleBlur}
-        placeholder={currencyField?.placeholder || '0.00'}
-        disabled={readonly || props.disabled}
-        className={`${symbol ? 'pl-8' : ''} ${className || ''}`}
-        // Surface the field's declared range (e.g. `min: 0` on a budget) so the
-        // browser's spinner/keyboard affordances respect it (objectui#2572);
-        // server-side validation still owns enforcement.
-        min={typeof currencyField?.min === 'number' ? currencyField.min : undefined}
-        max={typeof currencyField?.max === 'number' ? currencyField.max : undefined}
-        step={Math.pow(10, -precision).toFixed(precision)}
-        aria-invalid={!!error}
-      />
-    </div>
-  );
-}

package/src/widgets/DateField.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { useDisplayLocale } from '@object-ui/i18n';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { openNativePicker } from './openNativePicker';
-import { toDateInputValue } from './nativeDateValue';
-
-/**
- * DateField - Date picker input widget
- * Uses native date input and displays locale-formatted date in readonly mode
- */
-export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
-  // Before the readonly early return: the hook count must not depend on a prop
-  // (objectui#4468). A bare `toLocaleDateString()` reads the MACHINE's locale,
-  // which is how a Chinese form ended up with an `8/11/2026` value in it.
-  const locale = useDisplayLocale();
-  if (readonly) {
-    return value ? <span className="text-sm">{new Date(value).toLocaleDateString(locale)}</span> : <EmptyValue />;
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="date"
-      // An API that hands back `2026-06-17T00:00:00.000Z` for a `date` field
-      // would leave this control empty too (objectui#3127). The written-back
-      // shape is unchanged: the control's own plain `YYYY-MM-DD`.
-      value={toDateInputValue(value)}
-      onChange={(e) => onChange(e.target.value)}
-      onClick={(e) => {
-        openNativePicker(e.currentTarget);
-        domProps.onClick?.(e);
-      }}
-      disabled={readonly || domProps.disabled}
-    />
-  );
-}

package/src/widgets/DateTimeField.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { useDisplayLocale } from '@object-ui/i18n';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { openNativePicker } from './openNativePicker';
-import { toDateTimeInputValue, fromDateTimeInputValue } from './nativeDateValue';
-
-/**
- * DateTimeField - Combined date and time picker widget
- * Displays both date and time in locale format when readonly
- */
-export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
-  // Before the readonly early return — the hook count must not depend on a
-  // prop. See DateField for why the bare `toLocale*` calls were wrong
-  // (objectui#4468).
-  const locale = useDisplayLocale();
-  if (readonly) {
-    if (!value) return <EmptyValue />;
-    const date = new Date(value);
-    return (
-      <span className="text-sm">
-        {date.toLocaleDateString(locale)} {date.toLocaleTimeString(locale)}
-      </span>
-    );
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="datetime-local"
-      // The record's value is ISO-8601 (`…T14:30:00.000Z`), which this control
-      // rejects outright — it renders empty and the user reads that as a lost
-      // value (objectui#3127). Convert in, and back out on the same basis.
-      value={toDateTimeInputValue(value)}
-      onChange={(e) => onChange(fromDateTimeInputValue(e.target.value))}
-      onClick={(e) => {
-        openNativePicker(e.currentTarget);
-        domProps.onClick?.(e);
-      }}
-      disabled={readonly || domProps.disabled}
-    />
-  );
-}

package/src/widgets/EmailField.tsx

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