@object-ui/fields 17.3.0 → 17.6.0

package/src/widgets/CharacterCount.tsx

@@ -1,263 +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, useState } from 'react';
-import { useFieldTranslation } from './useFieldTranslation';
-
-/**
- * The character counter a capped long-text field renders, in the GOV.UK
- * character-count shape — extracted from `TextAreaField` so that widget's TWO
- * editing surfaces (the inline textarea and the fullscreen dialog) render the
- * SAME counting UI instead of two hand-written copies (objectui#3417).
- *
- * ## Why this is shared rather than copied
- *
- * objectui#3408 gave the inline counter three nodes — decorative digits, an
- * accessible description, a gated status region. The fullscreen dialog's
- * counter, passed to `FullscreenFieldEditor` as a `footer`, stayed what it had
- * always been: a bare `{n}/{max}` `span` with no accessible name, no
- * `aria-describedby` association with the dialog's textarea, and nothing
- * `aria-live`. Same field, same cap, same user — and a screen reader in the
- * fullscreen dialog got nothing at all, while browse mode read "5 slash 500".
- *
- * That is the failure mode this package keeps paying for (objectui#3301: the
- * fullscreen flag reached `RichTextField` for as long as the feature existed
- * and that widget never read it). A second hand-written copy of a counting UI
- * is the same failure with an extra step: it drifts, and nothing reports the
- * drift. So the counter has ONE implementation and each surface renders it.
- *
- * ## The three nodes, and why the third is a prop
- *
- * 1. the visible `{n}/{max}` digits, `aria-hidden` — a glance affordance;
- * 2. a visually-hidden DESCRIPTION carrying the translated sentence. The host
- *    owns {@link CharacterCountProps.descriptionId} and MUST name it in the
- *    edited control's `aria-describedby`, which is what makes the sentence
- *    reachable on focus rather than only in browse mode;
- * 3. a visually-hidden `aria-live="polite"` STATUS region, silent until the
- *    value is inside the last 10% / 20 characters of the cap and updated only
- *    after the typist pauses.
- *
- * Node 3 is opt-in per surface ({@link CharacterCountProps.announceNearLimit}),
- * required rather than defaulted, because "should this surface interrupt the
- * user while they type?" is a real decision and neither answer should be
- * reached by leaving a prop off. The fullscreen dialog answers no: it is a
- * modal the user opened deliberately to write at length, the description
- * already tells them the cap on focus, and the dialog's own textarea carries
- * the same native `maxLength` stop as the inline one. The inline surface
- * answers yes, unchanged from objectui#3408.
- */
-
-/**
- * How long the typist must pause before the counter's status region is allowed
- * to change (objectui#3408). The GOV.UK Design System character-count component
- * uses the same shape and the same order of magnitude.
- *
- * The number this replaces was effectively 0: the counter WAS the live region,
- * so every keystroke re-rendered it and every re-render was an announcement.
- * Measured on `origin/main`, zh session, `maxLength: 500`, typing a 52-character
- * sentence one character at a time: 52 keystrokes produced 52 distinct
- * announcements totalling 979 spoken characters — ~19x the text the user was
- * trying to write, each one interrupting the screen reader's echo of what they
- * had just typed.
- */
-const COUNTER_STATUS_DEBOUNCE_MS = 1000;
-
-/** Announce inside the last 10% of the cap … */
-const COUNTER_STATUS_REMAINING_RATIO = 0.1;
-/** … or the last 20 characters — whichever the typist reaches FIRST. */
-const COUNTER_STATUS_MIN_REMAINING = 20;
-
-/**
- * The remaining-character count at or below which the status region speaks.
- *
- * "10% remaining OR 20 characters remaining, whichever comes first" is a
- * disjunction, and because `remaining` only ever counts DOWN as the user types,
- * the branch that fires first is simply the LARGER of the two — hence `max`.
- * A 500-character cap starts warning at 50 remaining; a 100-character cap at 20
- * (10% of it would be 10, which the typist would reach later, not sooner).
- *
- * A cap smaller than {@link COUNTER_STATUS_MIN_REMAINING} is therefore "near
- * the limit" from the first keystroke, which is correct: on a 10-character
- * field every character genuinely is one of the last few. The debounce still
- * bounds it to one announcement per pause.
- */
-function counterStatusThreshold(maxLength: number): number {
-  return Math.max(
-    Math.ceil(maxLength * COUNTER_STATUS_REMAINING_RATIO),
-    COUNTER_STATUS_MIN_REMAINING,
-  );
-}
-
-export interface CharacterCountProps {
-  /**
-   * Length of the text this surface is counting. The inline surface passes the
-   * committed value's length; the fullscreen dialog passes the DRAFT's, which
-   * is the number that is true of what the user is looking at.
-   */
-  length: number;
-  /**
-   * The declared cap. Callers render this component only when the field
-   * declares one, so it is non-optional here — a counter with no cap to count
-   * against has nothing to say and must not be mounted at all (an unconditional
-   * live region in every long-text field is the objectui#3408 defect back
-   * again).
-   */
-  maxLength: number;
-  /**
-   * The description node's `id`, minted by the host from `useId()`.
-   *
-   * The host MUST also name it in the edited control's `aria-describedby` —
-   * this component renders the sentence, only the host knows which element is
-   * being described, and a description nothing references is a node no screen
-   * reader will ever reach. That association is asserted from the OUTSIDE (the
-   * tests resolve `aria-describedby` and concatenate the referenced nodes' text,
-   * exactly as an assistive technology does) rather than trusted here.
-   *
-   * Two surfaces of one widget therefore need two ids: the dialog's draft and
-   * the inline value diverge the moment the user types in the dialog, so one
-   * shared id would point both controls at whichever sentence rendered last.
-   */
-  descriptionId: string;
-  /**
-   * Render node 3, the threshold-gated debounced `aria-live` status region.
-   *
-   * Required on purpose — see the component doc above. `false` removes the
-   * region from the DOM entirely (not merely empties it), which is the only
-   * form of "no live region" a test can tell apart from "a live region that
-   * happens to be silent right now".
-   */
-  announceNearLimit: boolean;
-  /**
-   * Classes for the visible digits. Required because placement is entirely the
-   * surface's business — inline pins them to the textarea's bottom-right
-   * corner, the dialog lays them out as a footer item — and a default borrowed
-   * from either one would position the other wrongly while looking deliberate.
-   */
-  className: string;
-  /**
-   * `data-testid` for the visible digits, namespaced per surface
-   * (`textarea-character-count`, `textarea-fullscreen-character-count`) so a
-   * test that finds digits can say WHICH surface it found them on. Same
-   * convention, same reason, as `FullscreenFieldEditor`'s `testIdPrefix`.
-   */
-  testId: string;
-}
-
-export function CharacterCount({
-  length,
-  maxLength,
-  descriptionId,
-  announceNearLimit,
-  className,
-  testId,
-}: CharacterCountProps) {
-  const { t } = useFieldTranslation();
-
-  /**
-   * The counter sentence as a DESCRIPTION (objectui#3408). Reached through the
-   * edited control's `aria-describedby`, so focusing it says "12 characters,
-   * 500 max" once and then shuts up. Before this the cap was announced only as
-   * a side effect of typing — focus told a screen reader user nothing at all
-   * that a sighted user could read off the corner of the box.
-   */
-  const description = t('fields.textarea.characterCount', { count: length, max: maxLength });
-
-  /**
-   * The near-limit warning, gated. Silent for the whole comfortable middle of
-   * the field — a count nobody is close to is not news — and phrased as what
-   * is LEFT rather than what has been typed, because that is the number the
-   * user is about to act on. Over-long values (a cap lowered after the record
-   * was saved) clamp to 0: the textarea's own `maxLength` blocks further
-   * input, so "0 left" is the true actionable state, and the description above
-   * still carries the honest `503 of 500`.
-   *
-   * Short-circuited by `announceNearLimit` rather than only hidden at render
-   * time, so a surface that renders no status region also schedules no timer —
-   * a debounce firing into a region that does not exist is a state update with
-   * no consumer, and in tests an `act()` warning with no cause.
-   */
-  const pendingStatus =
-    announceNearLimit && maxLength - length <= counterStatusThreshold(maxLength)
-      ? t('fields.textarea.charactersRemaining', { count: Math.max(maxLength - length, 0) })
-      : '';
-
-  /**
-   * The last sentence a PAUSE settled on. Only ever written by the timer —
-   * never cleared synchronously — so this effect adds no cascading render on
-   * the keystrokes it is busy staying quiet through
-   * (`react-hooks/set-state-in-effect`).
-   */
-  const [settledStatus, setSettledStatus] = useState('');
-
-  useEffect(() => {
-    if (!pendingStatus) return;
-    const timer = setTimeout(() => setSettledStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
-    // Every keystroke cancels the previous pending announcement, so a typist
-    // who never pauses is never interrupted. The dependency is the SENTENCE,
-    // not the length: re-typing back to the same count produces the same string
-    // and therefore no DOM change and no second announcement.
-    return () => clearTimeout(timer);
-  }, [pendingStatus]);
-
-  /**
-   * Speak the settled sentence only while it is still TRUE — i.e. while it is
-   * the one the current value would produce. Everything else renders empty,
-   * which costs no speech (emptying a live region announces nothing), and that
-   * is what makes leaving the warning band silent IMMEDIATELY rather than a
-   * second later.
-   *
-   * The obvious alternative, `pendingStatus ? settledStatus : ''`, is wrong in
-   * one specific way: delete back out of the band and type into it again, and
-   * the region re-announces the STALE count from before the excursion a full
-   * second before the timer corrects it. Announcing a wrong number is worse
-   * than announcing a right one twice, which is the bounded, sub-second,
-   * correct-content cost of the comparison below. Pinned by `never
-   * re-announces the STALE count when the user types back into the band`.
-   */
-  const status = settledStatus === pendingStatus ? pendingStatus : '';
-
-  return (
-    <>
-      {/*
-        The VISIBLE counter, and visible ONLY (objectui#3408). It used to be
-        three things at once: the digits a sighted user glances at, the carrier
-        of the translated sentence (objectui#3406), and the live region itself —
-        so the sentence was re-announced on every single keystroke. Split into
-        the three nodes here, this one is decorative: `aria-hidden` keeps a
-        screen reader from reading "5 slash 200" on top of the description that
-        says it properly.
-      */}
-      <div className={className} aria-hidden="true" data-testid={testId}>
-        {length}/{maxLength}
-      </div>
-
-      {/*
-        The DESCRIPTION. Referenced by the edited control's `aria-describedby`,
-        never announced on its own — a screen reader reads it when focus lands
-        on the control and not again. Visually hidden because the digits above
-        already say it to the eye.
-      */}
-      <span id={descriptionId} className="sr-only">
-        {description}
-      </span>
-
-      {/*
-        The STATUS region, on the surfaces that opted in. Rendered
-        unconditionally there and starting EMPTY on purpose: a live region has
-        to be in the DOM before its content changes or the first change is not
-        announced at all. `aria-atomic` so the whole sentence is spoken rather
-        than the digits that differ from last time.
-      */}
-      {announceNearLimit && (
-        <span className="sr-only" aria-live="polite" aria-atomic="true">
-          {status}
-        </span>
-      )}
-    </>
-  );
-}

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

@@ -1,143 +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 `checkboxes` options (#2715 follow-up) — parity with
- * `MultiSelectField` (ADR-0058 / #2284).
- *
- * Exercises the observable widget behaviour: the dependency gate (a "select the
- * parent first" empty-state) and the per-element cascade clear — a selection
- * dropped from the array when the offered set no longer includes it, while
- * still-valid selections are kept. The per-option filtering itself is unit-tested
- * in `@object-ui/core` (`optionRules.test.ts`); here we prove the checkbox list
- * 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 { CheckboxesField } from './CheckboxesField';
-
-const provinceField = {
-  name: 'provinces',
-  type: 'checkboxes',
-  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('CheckboxesField — dependency gating (#2715)', () => {
-  it('gates with a "select parent first" hint while the controlling field is empty', () => {
-    render(
-      <CheckboxesField
-        value={[]}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'provinces', dependentValues: {} } as any)}
-      />,
-    );
-    const gate = screen.getByTestId('checkboxes-empty-provinces');
-    expect(gate).toHaveTextContent(/select country first/i);
-    // Gated → no checkboxes offered.
-    expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
-  });
-
-  it('unlocks the checkboxes once the controlling field is set', () => {
-    render(
-      <CheckboxesField
-        value={[]}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(screen.queryByTestId('checkboxes-empty-provinces')).not.toBeInTheDocument();
-    // Only the `cn` option is offered.
-    expect(screen.getByRole('checkbox', { name: 'Zhejiang' })).toBeInTheDocument();
-    expect(screen.queryByRole('checkbox', { name: 'California' })).not.toBeInTheDocument();
-  });
-});
-
-describe('CheckboxesField — cascade clear (#2715)', () => {
-  it('drops only the selections the parent change no longer offers', () => {
-    const onChange = vi.fn();
-    render(
-      <CheckboxesField
-        value={['zj', 'ca']}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    // 'ca' is a US province — under country=cn it is not offered, so it is
-    // pruned; the still-valid 'zj' is kept.
-    expect(onChange).toHaveBeenCalledWith(['zj']);
-  });
-
-  it('keeps selections that are all still offered', () => {
-    const onChange = vi.fn();
-    render(
-      <CheckboxesField
-        value={['zj']}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('CheckboxesField — role / context gating (#2715)', () => {
-  const tierField = {
-    name: 'tiers',
-    type: 'checkboxes',
-    options: [
-      { label: 'Standard', value: 'standard' },
-      { label: 'Admin only', value: 'admin_only', visibleWhen: "'admin' in current_user.positions" },
-    ],
-  } as any;
-
-  it('prunes an admin-only value for a non-admin (offered set excludes it)', () => {
-    const onChange = vi.fn();
-    render(
-      <PredicateScopeProvider scope={{ current_user: { positions: ['sales'] } }}>
-        <CheckboxesField
-          value={['standard', 'admin_only']}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tiers', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).toHaveBeenCalledWith(['standard']);
-  });
-
-  it('keeps an admin-only value for an admin', () => {
-    const onChange = vi.fn();
-    render(
-      <PredicateScopeProvider scope={{ current_user: { positions: ['admin'] } }}>
-        <CheckboxesField
-          value={['standard', 'admin_only']}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tiers', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/widgets/CheckboxesField.tsx

@@ -1,136 +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 { 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;
-    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]);
-
-  if (readonly) {
-    if (selected.length === 0) return <EmptyValue />;
-    return (
-      <div 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"
-      />
-    );
-  }
-
-  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);
-
-  return (
-    <div
-      {...groupDomProps}
-      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>
-  );
-}