@object-ui/fields 17.5.0 → 17.6.0

package/src/widgets/RichTextField.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { cn, Textarea, EmptyValue } from '@object-ui/components';
-import { useObjectTranslation } from '@object-ui/react';
-import { FullscreenFieldEditor } from './FullscreenFieldEditor';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * The rich-text editing surface, rendered by `RichTextField` in BOTH positions:
- * inline in the form, and inside the fullscreen dialog.
- *
- * Sharing it is the point of objectui#3301's acceptance criterion "the dialog
- * holds the real editor". Had the dialog inlined a bare `<Textarea>` instead,
- * the two surfaces would already disagree (no format indicator) and would keep
- * disagreeing every time this widget gains an affordance — whatever the editor
- * grows into (a toolbar, a TipTap/Lexical instance, a preview toggle), both
- * positions get it at once because there is only one of them.
- *
- * `fullHeight` is the only difference between the two renderings: inline the
- * textarea is `rows`-sized, in the dialog it fills the available height.
- */
-function RichTextEditorSurface({
-  value,
-  onChange,
-  formatLabel,
-  hint,
-  placeholder,
-  rows,
-  disabled,
-  error,
-  className,
-  fullHeight,
-  autoFocus,
-  textareaTestId,
-  overlay,
-}: {
-  value: string;
-  onChange: (next: string) => void;
-  formatLabel: string;
-  hint: string;
-  placeholder?: string;
-  rows?: number;
-  disabled?: boolean;
-  error?: string;
-  className?: string;
-  fullHeight?: boolean;
-  autoFocus?: boolean;
-  textareaTestId?: string;
-  /** Absolutely-positioned children over the textarea (the expand affordance). */
-  overlay?: React.ReactNode;
-}) {
-  return (
-    <div className={cn('space-y-2', fullHeight && 'flex flex-col h-full')}>
-      <div className="flex items-center justify-between text-xs text-gray-500">
-        <span>{formatLabel}</span>
-        <span className="italic">{hint}</span>
-      </div>
-      <div className={cn('relative', fullHeight && 'flex-1 min-h-0')}>
-        <Textarea
-          value={value || ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          disabled={disabled}
-          autoFocus={autoFocus}
-          rows={fullHeight ? undefined : rows}
-          // `text-base` in the dialog for the same reason `TextAreaField` uses
-          // it there: sub-16px inputs make iOS Safari zoom on focus, which is
-          // exactly wrong for a surface the user opened to get more room.
-          className={cn(
-            'font-mono',
-            fullHeight ? 'text-base h-full min-h-full resize-none' : 'text-sm',
-            className,
-          )}
-          aria-invalid={!!error}
-          data-testid={textareaTestId}
-        />
-        {overlay}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Rich text field with markdown/HTML support
- * For now, this is a simple textarea. A full implementation would use
- * a rich text editor like TipTap, Lexical, or Slate.
- *
- * Reached by forms as `field:markdown` and `field:html`; both resolve here.
- *
- * ## Fullscreen editing (objectui#3301)
- *
- * `ObjectForm` stamps `mobile_fullscreen` onto the metadata of every long-text
- * field — textarea AND rich-text — when `ObjectFormSchema.mobile
- * .fullscreenLongText` is set, and `ObjectFormSchema.mobile`'s own JSDoc has
- * always promised "textarea/rich-text get an expand button". This widget never
- * read the flag, so for `field:markdown` / `field:html` that promise did
- * nothing at all: the producer stamped, and no consumer existed.
- *
- * The flag is read off `field` and nowhere else — the single metadata carrier
- * since objectui#3233 — matching `TextAreaField` read for read, so a
- * misspelled flag stays inert in both widgets rather than being caught by a
- * tolerant fallback in one of them. The affordance and dialog themselves come
- * from the shared `FullscreenFieldEditor`, so one form-level setting keeps
- * producing one behaviour across both widgets.
- */
-export function RichTextField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const { t } = useObjectTranslation();
-  if (readonly) {
-    return (
-      <div
-        className="text-sm prose prose-sm max-w-none"
-      >
-        {value || <EmptyValue />}
-      </div>
-    );
-  }
-
-  const richField = field as any;
-  const rows = richField?.rows || 8;
-  const format = richField?.format || 'markdown'; // 'markdown' or 'html'
-  // Same single read as `TextAreaField`: the field metadata is the only
-  // carrier, and this widget is the second consumer the flag always had.
-  const showFullscreenButton = Boolean(richField?.mobile_fullscreen);
-  // Resolved once and given to BOTH renderings of the editor (objectui#3402) —
-  // exactly like `formatLabel` / `hint` / `placeholder` below, and for the same
-  // reason. Landing it on the inline surface alone left a disabled rich-text
-  // field greyed out next to a live expand button whose dialog committed any
-  // edit through `onCommit`. `disabled` also carries the form's `isSubmitting`.
-  const disabled = Boolean(props.disabled);
-
-  // Resolved once and handed to BOTH renderings of the editor, so the dialog
-  // cannot drift into showing different copy than the inline surface.
-  const formatLabel = t('fields.richText.format', { format, defaultValue: `Format: ${format}` });
-  const hint = t('fields.richText.basicEditorHint', { defaultValue: 'Rich text editor (basic)' });
-  const placeholder =
-    richField?.placeholder ||
-    t('fields.richText.placeholder', { defaultValue: 'Enter text…' });
-
-  return (
-    <RichTextEditorSurface
-      value={value}
-      onChange={onChange}
-      formatLabel={formatLabel}
-      hint={hint}
-      placeholder={placeholder}
-      rows={rows}
-      disabled={readonly || disabled}
-      error={error}
-      className={props.className}
-      overlay={
-        showFullscreenButton && (
-          <FullscreenFieldEditor
-            value={value ?? ''}
-            onCommit={onChange}
-            label={richField?.label}
-            testIdPrefix="richtext"
-            disabled={disabled}
-          >
-            {(draft, setDraft, editorDisabled) => (
-              <RichTextEditorSurface
-                value={draft}
-                onChange={setDraft}
-                formatLabel={formatLabel}
-                hint={hint}
-                placeholder={placeholder}
-                disabled={editorDisabled}
-                autoFocus
-                fullHeight
-                textareaTestId="richtext-fullscreen-input"
-              />
-            )}
-          </FullscreenFieldEditor>
-        )
-      }
-    />
-  );
-}

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

@@ -1,138 +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 `select` options (#2284).
- *
- * Exercises the observable, non-Radix behaviour of {@link SelectField}: the
- * dependency gate (a "select the parent first" empty-state) and the 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 widget wires `dependentValues` +
- * predicate scope into that resolver.
- */
-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 { SelectField } from './SelectField';
-
-const provinceField = {
-  name: 'province',
-  type: 'select',
-  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('SelectField — dependency gating (#2284)', () => {
-  it('gates with a "select parent first" hint while the controlling field is empty', () => {
-    render(
-      <SelectField
-        value={undefined}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: {} } as any)}
-      />,
-    );
-    const gate = screen.getByTestId('select-empty-province');
-    expect(gate).toHaveTextContent(/select country first/i);
-    // Gated → no live combobox is offered.
-    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
-  });
-
-  it('unlocks the combobox once the controlling field is set', () => {
-    render(
-      <SelectField
-        value={undefined}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(screen.queryByTestId('select-empty-province')).not.toBeInTheDocument();
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-});
-
-describe('SelectField — cascade clear (#2284)', () => {
-  it('clears a value the parent change no longer offers', () => {
-    const onChange = vi.fn();
-    render(
-      <SelectField
-        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(
-      <SelectField
-        value={'zj'}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('SelectField — role / context gating (#2284)', () => {
-  const tierField = {
-    name: 'tier',
-    type: 'select',
-    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'] } }}>
-        <SelectField
-          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'] } }}>
-        <SelectField
-          value={'admin_only'}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tier', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/widgets/SelectField.tsx

@@ -1,193 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  EmptyValue,
-} from '@object-ui/components';
-import { isValueStillOffered } from '@object-ui/core';
-import { SelectFieldMetadata } from '@object-ui/types';
-import { useFieldTranslation } from './useFieldTranslation';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { MultiSelectField } from './MultiSelectField';
-import { OptionsEmptyState } from './OptionsEmptyState';
-import { useCascadingOptions } from './useCascadingOptions';
-
-/**
- * SelectField - dropdown selection widget.
- *
- * A field declared `multiple: true` selects zero-or-more values (spec:
- * `multiple` is valid on `select`), so it renders the multi-value chip picker
- * — the same widget the `multiselect` type uses. Single-value selects keep the
- * cascading dropdown below.
- *
- * The FORM no longer arrives here with `multiple` (objectui#3986):
- * `mapFieldTypeToFormType` now resolves a `select` + `multiple: true` field to
- * `field:multiselect`, so the object-form path renders `MultiSelectField`
- * directly under its own registry id — which is what carries the
- * `labelling: 'group'` declaration the host label needs. Deciding the widget at
- * the type-resolution layer is what keeps the declaration and the render from
- * disagreeing; a delegation invisible to the resolver could not.
- *
- * The branch below stays because it is NOT dead — measured entrances that reach
- * it with `multiple` set, none of which consult that resolver:
- *
- *  - **the inline grid editor** — `FieldEditWidget` looks `select` up in its own
- *    `EDIT_WIDGETS` table, which SHORT-CIRCUITS before the alias map is
- *    consulted, and forwards the whole metadata object as `field`;
- *  - **`ActionParamDialog`** — `paramToField` resolves through
- *    `resolveFormWidgetType`, which likewise returns `select` from
- *    `fieldWidgetMap` before reaching the alias map, and carries
- *    `multiple: param.multiple` on the field it builds;
- *  - **hand-written SDUI** — a `{ type: 'field:select' }` node whose metadata
- *    declares `multiple`, which addresses this widget by name.
- *
- * All three then inherit multi-select from here identically, with no drift.
- *
- * Both branches resolve per-option `visibleWhen` cascading / role-gating through
- * the shared {@link useCascadingOptions} hook (#2715), so single and multi stay
- * in lockstep.
- */
-export function SelectField(props: FieldWidgetComponentProps<any>) {
-  const config = props.field as SelectFieldMetadata | undefined;
-  if ((config as any)?.multiple) {
-    // NOT `toDomProps` — this is a widget-to-widget delegation, not a DOM
-    // spread. `MultiSelectField` implements the same contract and needs the
-    // whole of it (`value`, `onChange`, `field`, `dataSource`, …); narrowing
-    // here to the DOM whitelist would hand it an empty widget.
-    return <MultiSelectField {...props} />;
-  }
-  return <SingleSelectField {...(props as FieldWidgetComponentProps<string>)} />;
-}
-
-/**
- * SingleSelectField - single-value dropdown with configurable options.
- *
- * Supports cascading / role-gated options (#2284): each option may carry a
- * `visibleWhen` CEL predicate, evaluated against the live form record +
- * `current_user`, so the offered set narrows as a controlling field changes
- * (`record.country == 'cn'`) or by role (`'admin' in current_user.positions`). A
- * field declares which sibling fields drive its list via `dependsOn`; while any
- * of those is empty the control is gated with a "select the parent first" hint,
- * mirroring the dependent-lookup UX.
- */
-function SingleSelectField({
-  value,
-  onChange,
-  field,
-  readonly,
-  error,
-  dependentValues,
-  dependsOn: dependsOnProp,
-  emptyHint,
-  dataSource: _dataSource,
-  ...props
-}: FieldWidgetComponentProps<string>) {
-  const config = field as SelectFieldMetadata;
-  const rawOptions = config?.options || [];
-  const { t } = useFieldTranslation();
-  // Stable hook for automation/e2e — react-hook-form + Radix Select cannot be
-  // driven by synthetic DOM events, so e2e must target the trigger/options by a
-  // deterministic testid keyed on the field name. `props.name` is the
-  // react-hook-form field name spread in by the form renderer (FormField).
-  const fieldName = props.name || (config as any)?.name || props.id || '';
-
-  const dependsOn = (config as any)?.dependsOn ?? dependsOnProp;
-  const { options, gated, dependsOnFields } = useCascadingOptions(
-    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). Kept
-    // identical across the four option widgets: an authored list is what the
-    // cascade prunes, and all four render the same `OptionsEmptyState` when
-    // there is none.
-    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]);
-
-  if (readonly) {
-    const option = rawOptions.find((o) => o.value === value);
-    const display = option?.label || value;
-    return display ? <span className="text-sm">{display}</span> : <EmptyValue />;
-  }
-
-  // A select with no options is unfillable — a silently-empty Radix dropdown
-  // reads as "broken widget" and hides the real cause. Surface a legible state:
-  // the host's `emptyHint` when it computed one (it knows the controlling
-  // fields' LABELS), else this widget's own translated copy. Shared with the
-  // other option widgets so the four cannot drift again (objectui#3231).
-  if (options.length === 0) {
-    return (
-      <OptionsEmptyState
-        emptyHint={emptyHint}
-        gated={gated}
-        dependsOnFields={dependsOnFields}
-        testId={fieldName ? `select-empty-${fieldName}` : undefined}
-        className="h-9"
-      />
-    );
-  }
-
-  // Radix `Select.Root` renders no DOM element of its own — anything it does
-  // not recognise (every `aria-*` / `data-*` a host hands this widget) is
-  // silently DROPPED, never reaching a real element. That is how a required
-  // select failed validation with the red message on screen while assistive
-  // tech was told nothing (objectui#3306): the form renderer's `aria-invalid`
-  // / `aria-describedby` / `aria-required` landed on Root and vanished. The
-  // DOM pass-through therefore goes to `SelectTrigger` — the focusable
-  // `<button role="combobox">` a user and their screen reader actually
-  // interact with — with two deliberate exceptions kept on Root:
-  //
-  // - `name`: the ONE whitelist key Root genuinely consumes — it forwards it
-  //   to the hidden native `<select>` that takes part in form submission.
-  //   On the trigger it would sit uselessly on a non-submitter `<button>`.
-  // - `disabled`: Root is the single authority (it disables trigger, item
-  //   interaction and the hidden select together); forwarding the raw prop to
-  //   the trigger as well would give the state a second, OR-merged author.
-  const { name: domName, disabled: _domDisabled, ...triggerDomProps } = toDomProps(props);
-
-  return (
-    <Select
-      name={domName}
-      value={value}
-      onValueChange={onChange}
-      disabled={readonly || props.disabled}
-    >
-      <SelectTrigger
-        {...triggerDomProps}
-        data-testid={fieldName ? `select-trigger-${fieldName}` : undefined}
-        // AFTER the spread so this widget's own computation wins, the #3222
-        // discipline: `error` is the published validation slot
-        // (`FieldWidgetPropsSchema`), and `!!undefined` must yield an explicit
-        // `"false"` — a valid field SAYS it is valid rather than staying mute.
-        aria-invalid={!!error}
-      >
-        <SelectValue placeholder={config?.placeholder || t('common.selectOption')} />
-      </SelectTrigger>
-      <SelectContent position="popper">
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value} data-testid={`select-option-${option.value}`}>
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}

package/src/widgets/SelectionTray.tsx

@@ -1,110 +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 from 'react';
-import { Avatar, AvatarFallback, AvatarImage, cn } from '@object-ui/components';
-import { X } from 'lucide-react';
-import {
-  getPersonName,
-  getPersonInitials,
-  getPersonAvatarUrl,
-  getPersonId,
-} from './personDisplay';
-
-/**
- * "Selected" transfer-box area (穿梭框式已选区): live echo of the current
- * multi-selection as removable avatar chips. Reusable kernel — the future
- * org-tree tier composes the same tray beside its right-hand list. Purely
- * presentational: it takes the resolved records + an onRemove callback, and
- * accepts already-translated `label`/`emptyText` so it stays i18n-agnostic.
- */
-export interface SelectionTrayProps {
-  /** Full record objects for the current selection. */
-  records: any[];
-  /** Remove a selected record by its id. */
-  onRemove: (id: any) => void;
-  displayField?: string;
-  avatarField?: string;
-  idField?: string;
-  /** Header label, e.g. "Selected (3)" — omit to hide the header. */
-  label?: string;
-  /** When provided, a "Clear all" action shows in the header while non-empty. */
-  onClear?: () => void;
-  /** Localized "Clear all" text (i18n-agnostic — caller passes it). */
-  clearLabel?: string;
-  /** Shown when the selection is empty. */
-  emptyText?: string;
-  className?: string;
-}
-
-export function SelectionTray({
-  records,
-  onRemove,
-  displayField = 'name',
-  avatarField = 'image',
-  idField = 'id',
-  label,
-  onClear,
-  clearLabel,
-  emptyText,
-  className,
-}: SelectionTrayProps) {
-  const showHeader = !!label || (!!onClear && records.length > 0);
-  return (
-    <div className={cn('flex flex-col gap-1.5', className)} data-testid="selection-tray">
-      {showHeader && (
-        <div className="flex items-center justify-between">
-          {label && <div className="text-xs font-medium text-muted-foreground">{label}</div>}
-          {onClear && records.length > 0 && (
-            <button
-              type="button"
-              onClick={onClear}
-              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
-              data-testid="selection-clear"
-            >
-              {clearLabel ?? 'Clear all'}
-            </button>
-          )}
-        </div>
-      )}
-      {records.length === 0 ? (
-        <div className="text-xs text-muted-foreground">{emptyText ?? ''}</div>
-      ) : (
-        <div className="flex flex-wrap gap-1.5">
-          {records.map(record => {
-            const id = getPersonId(record, idField);
-            const name = getPersonName(record, displayField);
-            const avatarUrl = getPersonAvatarUrl(record, avatarField);
-            const initials = getPersonInitials(name);
-            return (
-              <span
-                key={String(id)}
-                data-testid="selection-chip"
-                className="inline-flex items-center gap-1.5 rounded-full border bg-background py-0.5 pl-0.5 pr-1.5 text-sm"
-              >
-                <Avatar className="size-6 shrink-0">
-                  {avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
-                  <AvatarFallback className="text-[10px]">{initials}</AvatarFallback>
-                </Avatar>
-                <span className="max-w-[10rem] truncate">{name || '—'}</span>
-                <button
-                  type="button"
-                  onClick={() => onRemove(id)}
-                  aria-label={`Remove ${name}`}
-                  className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                >
-                  <X className="size-3.5" aria-hidden />
-                </button>
-              </span>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}