@object-ui/fields 17.5.0 → 17.6.0

package/src/widgets/ObjectRefField.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { Combobox, EmptyValue, cn } from '@object-ui/components';
-import { SchemaRendererContext } from '@object-ui/react';
-import type { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { useFieldTranslation } from './useFieldTranslation';
-
-/**
- * ObjectRefField — object-name picker for form fields that store the machine
- * name of a registered object (e.g. `sys_sharing_rule.object_name`).
- *
- * Reached via the field `widget: 'object-ref'` hint (declared on the object
- * metadata; resolves as `field:object-ref`). Renders a searchable dropdown of
- * the platform's registered objects instead of a free-text input where the
- * admin has to remember a machine name.
- *
- * Object catalog source, in order of preference:
- *   1. `dataSource.getObjects()` — the metadata-registry list endpoint
- *      (`GET /api/v1/meta/object`), which merges code- and DB-defined objects.
- *   2. Fallback: `dataSource.find('sys_metadata', { type: 'object' })` — the
- *      same source the Setup app's object grid browses.
- * The stored value is always the object's `name` string. If the catalog can't
- * load, the current value is still shown, so the control degrades safely.
- */
-interface ObjectHeader {
-  name: string;
-  label?: string;
-}
-
-export function ObjectRefField({
-  value,
-  onChange,
-  readonly,
-  className,
-  error,
-  ...props
-}: FieldWidgetComponentProps<string>) {
-  const ctx = React.useContext(SchemaRendererContext);
-  const { t } = useFieldTranslation();
-  const dataSource: any = props.dataSource ?? (ctx as any)?.dataSource ?? null;
-  const disabled = props.disabled;
-
-  const [objects, setObjects] = React.useState<ObjectHeader[] | null>(null);
-
-  React.useEffect(() => {
-    if (!dataSource) return;
-    let cancelled = false;
-    (async () => {
-      try {
-        let rows: ObjectHeader[] = [];
-        if (typeof dataSource.getObjects === 'function') {
-          rows = (await dataSource.getObjects()) ?? [];
-        } else if (typeof dataSource.find === 'function') {
-          const res = await dataSource.find('sys_metadata', {
-            $filter: { type: 'object' },
-            $top: 1000,
-          });
-          const list: any[] =
-            res?.data ?? res?.records ?? (Array.isArray(res) ? res : []);
-          rows = list
-            .map((r) => ({
-              name: String(r?.name ?? ''),
-              label: r?.label != null ? String(r.label) : undefined,
-            }))
-            .filter((r) => r.name);
-        }
-        if (!cancelled) setObjects(rows);
-      } catch {
-        if (!cancelled) setObjects([]);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [dataSource]);
-
-  const options = React.useMemo(() => {
-    const opts = (objects ?? []).map((o) => ({
-      value: o.name,
-      label: o.label ? `${o.label} (${o.name})` : o.name,
-    }));
-    // Keep the current value selectable even if the catalog didn't include it
-    // (unknown / not-yet-published object), so editing never drops it.
-    if (value && !opts.some((o) => o.value === value)) {
-      opts.unshift({ value, label: value });
-    }
-    return opts.sort((a, b) => a.label.localeCompare(b.label));
-  }, [objects, value]);
-
-  if (readonly) {
-    if (!value) return <EmptyValue />;
-    const label = options.find((o) => o.value === value)?.label ?? value;
-    return <span className={className}>{label}</span>;
-  }
-
-  // DOM pass-through onto the combobox trigger — the widget's real focusable
-  // control (objectui#3318). `name` is withheld: the trigger is a button, not
-  // a submission control (same reasoning as #3306's SelectTrigger).
-  const { name: _domName, ...triggerDomProps } = toDomProps(props);
-
-  return (
-    <Combobox
-      {...triggerDomProps}
-      options={options}
-      value={value ?? ''}
-      onValueChange={(v) => onChange(v as any)}
-      placeholder={objects === null ? t('fields.objectRef.loading') : t('fields.objectRef.placeholder')}
-      searchPlaceholder={t('fields.objectRef.search')}
-      emptyText={objects === null ? t('common.loading') : t('fields.objectRef.empty')}
-      disabled={disabled}
-      // Fill the form column like every other input. Combobox's own
-      // `w-[200px]` is a component default that left this control stranded at
-      // a third of the row while `名称` beside it ran full width.
-      className={cn('w-full', className)}
-      // AFTER the spread so this widget's own computation wins (#3222).
-      aria-invalid={!!error}
-    />
-  );
-}
-
-export default ObjectRefField;

package/src/widgets/OptionsEmptyState.no-provider.test.tsx

@@ -1,88 +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.
- */
-
-/**
- * The option widgets' empty/gate copy with NO `I18nProvider` mounted
- * (objectui#3231) — standalone/embedded usage, and every test in the repo that
- * renders a field widget bare.
- *
- * Routing the copy through `useFieldTranslation()` must not turn it into a raw
- * i18n key when nothing is configured: `createSafeTranslation` probes the
- * instance and falls back to its English defaults map. That is the behaviour
- * the removed literals used to provide unconditionally, so it gets its own pin.
- *
- * Why a separate FILE rather than another case in `OptionsEmptyState.test.tsx`:
- * mounting `I18nProvider` calls `initReactI18next`, which installs that
- * instance as react-i18next's GLOBAL default. Once any sibling test has done
- * so there is no "no provider" state left to observe in that module graph, and
- * the assertion would silently read the last locale mounted instead. Vitest's
- * per-file isolation (`isolate: true` on the `dom` project) is what makes this
- * file's observation honest.
- */
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SelectField } from './SelectField';
-import { MultiSelectField } from './MultiSelectField';
-import { RadioField } from './RadioField';
-import { CheckboxesField } from './CheckboxesField';
-
-const WIDGETS = [
-  { label: 'SelectField', Widget: SelectField, type: 'select', testId: 'select-empty-province' },
-  {
-    label: 'MultiSelectField',
-    Widget: MultiSelectField,
-    type: 'multiselect',
-    testId: 'multiselect-empty-province',
-  },
-  { label: 'RadioField', Widget: RadioField, type: 'radio', testId: 'radio-empty-province' },
-  {
-    label: 'CheckboxesField',
-    Widget: CheckboxesField,
-    type: 'checkboxes',
-    testId: 'checkboxes-empty-province',
-  },
-] as const;
-
-const gatedField = (type: string) =>
-  ({
-    name: 'province',
-    type,
-    dependsOn: 'country',
-    options: [{ label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" }],
-  }) as any;
-
-const unconfiguredField = (type: string) => ({ name: 'province', type, options: [] }) as any;
-
-function renderWidget(Widget: React.ComponentType<any>, field: any) {
-  return render(
-    <Widget
-      value={undefined}
-      onChange={vi.fn()}
-      field={field}
-      {...({ name: 'province', dependentValues: {} } as any)}
-    />,
-  );
-}
-
-describe('option widgets — English fallback survives with no i18n configured', () => {
-  it.each(WIDGETS)('$label renders the gate sentence, not a raw key', ({ Widget, type, testId }) => {
-    renderWidget(Widget, gatedField(type));
-    const box = screen.getByTestId(testId);
-    expect(box).toHaveTextContent('Select country first');
-    expect(box.textContent).not.toContain('fields.options');
-  });
-
-  it.each(WIDGETS)('$label renders the empty sentence, not a raw key', ({ Widget, type, testId }) => {
-    renderWidget(Widget, unconfiguredField(type));
-    const box = screen.getByTestId(testId);
-    expect(box).toHaveTextContent('No options available');
-    expect(box.textContent).not.toContain('fields.options');
-  });
-});

package/src/widgets/OptionsEmptyState.test.tsx

@@ -1,169 +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.
- */
-
-/**
- * The empty / dependency-gated state of the fixed-option widgets (objectui#3231).
- *
- * Two invariants, pinned for ALL FOUR widgets — they are what regressed:
- *
- *  1. **declared ⇒ delivered.** `emptyHint` is declared on
- *     `FieldWidgetComponentProps` and computed by the form renderer. Every one
- *     of the four widgets used to destructure it into `_emptyHint` and drop it
- *     on the floor, so the host's hint could never reach a user once the field
- *     went through the `field:` registry (i.e. always, in the real console).
- *  2. **the fallback is translated.** With no host hint the widget renders its
- *     own copy — which used to be a hardcoded English literal
- *     (`'No options available'`, `` `Select ${…} first` ``) even though
- *     `useFieldTranslation()` was already imported in one of the same files.
- *
- * All four are covered deliberately: they were four independent copies of the
- * same block, which is exactly why they drifted together and why one widget's
- * test would have proven nothing about the other three. They now share
- * `OptionsEmptyState`; these tests keep that true from the outside, so the
- * guarantee survives someone re-inlining the block.
- */
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { I18nProvider } from '@object-ui/i18n';
-import { SelectField } from './SelectField';
-import { MultiSelectField } from './MultiSelectField';
-import { RadioField } from './RadioField';
-import { CheckboxesField } from './CheckboxesField';
-
-interface WidgetCase {
-  label: string;
-  Widget: React.ComponentType<any>;
-  type: string;
-  testId: string;
-}
-
-const WIDGETS: WidgetCase[] = [
-  { label: 'SelectField', Widget: SelectField, type: 'select', testId: 'select-empty-province' },
-  {
-    label: 'MultiSelectField',
-    Widget: MultiSelectField,
-    type: 'multiselect',
-    testId: 'multiselect-empty-province',
-  },
-  { label: 'RadioField', Widget: RadioField, type: 'radio', testId: 'radio-empty-province' },
-  {
-    label: 'CheckboxesField',
-    Widget: CheckboxesField,
-    type: 'checkboxes',
-    testId: 'checkboxes-empty-province',
-  },
-];
-
-/** Gated: `country` is empty, so no option is offered yet (#2284). */
-const gatedField = (type: string) =>
-  ({
-    name: 'province',
-    type,
-    dependsOn: 'country',
-    options: [
-      { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
-      { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
-    ],
-  }) as any;
-
-/** Not gated, simply nothing to offer — the other way a list ends up empty. */
-const unconfiguredField = (type: string) => ({ name: 'province', type, options: [] }) as any;
-
-function renderWidget(
-  { Widget }: WidgetCase,
-  field: any,
-  extra: Record<string, unknown> = {},
-  language?: string,
-) {
-  const element = (
-    <Widget
-      value={undefined}
-      onChange={vi.fn()}
-      field={field}
-      {...({ name: 'province', dependentValues: {}, ...extra } as any)}
-    />
-  );
-  return render(
-    language ? (
-      <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }}>
-        {element}
-      </I18nProvider>
-    ) : (
-      element
-    ),
-  );
-}
-
-describe('option widgets — the host-supplied `emptyHint` reaches the user (objectui#3231)', () => {
-  it.each(WIDGETS)(
-    '$label renders the host hint instead of its own gate copy',
-    (widget) => {
-      // What the form renderer actually computes: a sentence built from the
-      // controlling field's human LABEL, which the widget cannot know (its
-      // metadata only carries the name `country`).
-      renderWidget(widget, gatedField(widget.type), {
-        emptyHint: 'Choose the Country field first',
-      });
-
-      const box = screen.getByTestId(widget.testId);
-      expect(box).toHaveTextContent('Choose the Country field first');
-      // …and NOT the widget's own copy, which is what used to render.
-      expect(box.textContent).not.toMatch(/select country first/i);
-    },
-  );
-
-  it.each(WIDGETS)(
-    '$label renders the host hint for an unconfigured (ungated) list too',
-    (widget) => {
-      // `emptyHint` is a declared prop of the widget contract, not a private
-      // channel of one form-renderer branch: supplied ⇒ used, always.
-      renderWidget(widget, unconfiguredField(widget.type), {
-        emptyHint: 'Options come from the price book',
-      });
-
-      expect(screen.getByTestId(widget.testId)).toHaveTextContent(
-        'Options come from the price book',
-      );
-    },
-  );
-
-  it.each(WIDGETS)('$label prefers a host hint over its translated fallback', (widget) => {
-    // Even under a non-English locale the HOST wins — it is the single source.
-    renderWidget(widget, gatedField(widget.type), { emptyHint: 'Pick a Country first' }, 'zh');
-
-    const box = screen.getByTestId(widget.testId);
-    expect(box).toHaveTextContent('Pick a Country first');
-    expect(box.textContent).not.toContain('请先选择');
-  });
-});
-
-describe('option widgets — the fallback copy is translated, never a hardcoded literal', () => {
-  it.each(WIDGETS)('$label translates the gate copy when no host hint is given', (widget) => {
-    renderWidget(widget, gatedField(widget.type), {}, 'zh');
-
-    const box = screen.getByTestId(widget.testId);
-    expect(box).toHaveTextContent('请先选择country');
-    expect(box.textContent).not.toMatch(/select .* first/i);
-  });
-
-  it.each(WIDGETS)('$label translates the empty copy when no host hint is given', (widget) => {
-    renderWidget(widget, unconfiguredField(widget.type), {}, 'zh');
-
-    const box = screen.getByTestId(widget.testId);
-    expect(box).toHaveTextContent('暂无可选项');
-    expect(box.textContent).not.toMatch(/no options available/i);
-  });
-});
-
-// The no-provider fallback lives in `OptionsEmptyState.no-provider.test.tsx`:
-// mounting `I18nProvider` here installs its instance as react-i18next's global
-// default (`initReactI18next`), so after any test above there is no longer a
-// "no provider" state to observe within this module graph.
-

package/src/widgets/OptionsEmptyState.tsx

@@ -1,99 +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 { cn } from '@object-ui/components';
-import { useFieldTranslation } from './useFieldTranslation';
-import type { HostGroupProps } from './toHostGroupProps';
-
-/**
- * The "this option list cannot be filled" state shared by every fixed-option
- * widget (`SelectField` single, `MultiSelectField`, `RadioField`,
- * `CheckboxesField`) — objectui#3231.
- *
- * ## One producer, one consumer
- *
- * `emptyHint` is a declared prop on `FieldWidgetComponentProps`, computed by
- * the form renderer (`form.tsx`, the `#2284` dependency gate) and forwarded to
- * these widgets. **When the host supplies it, it wins**: the host resolves the
- * controlling fields to their human LABELS ("Select Country first"), where a
- * widget on its own only knows the raw metadata names ("Select country first").
- * Absent a host hint — a standalone widget, the inline grid editor, an action
- * param dialog — the widget falls back to its own copy.
- *
- * Each of the four widgets used to inline this box, destructure `emptyHint`
- * into `_emptyHint` and throw it away, then render a hardcoded English literal.
- * Four independent copies is precisely why they drifted together, so the box
- * AND the copy live here only: adding a fifth option widget cannot re-introduce
- * the gap without deliberately re-implementing it.
- *
- * ## Fallback copy is translated
- *
- * The fallback goes through `useFieldTranslation()` (`fields.options.*`,
- * present in all ten locale packs) rather than an English string literal — the
- * gate sentence is the SAME i18n key the form renderer uses, so the two can
- * never say different things in the same locale.
- */
-export interface OptionsEmptyStateProps {
-  /**
-   * Host-computed hint. Wins over the widget's own copy whenever it is a
-   * non-empty string — this is the whole point of the prop.
-   */
-  emptyHint?: string;
-  /** The list is waiting on a `dependsOn` controlling field (vs. unconfigured). */
-  gated: boolean;
-  /** Controlling field names, used by the fallback gate sentence. */
-  dependsOnFields: readonly string[];
-  /** Widget-specific stable locator, e.g. `select-empty-${fieldName}`. */
-  testId?: string;
-  /** Widget-specific sizing (the dropdown is a fixed `h-9`, lists grow). */
-  className?: string;
-  /**
-   * The host label's IDREF plumbing, when this box is the whole rendered surface
-   * of a group-labelled field (objectui#3990) — a `checkboxes` / `radio` /
-   * `multiselect` whose option list came back empty renders NOTHING but this
-   * box, so the visible label named zero elements until it landed here.
-   *
-   * A closed three-key type rather than an open props tail: only `id`,
-   * `aria-labelledby` and the `role` that makes them meaningful may reach this
-   * element, and reopening a spread is what objectui#3291 exists to prevent.
-   * Absent for the single `SelectField` — it is not group-labelled, its label
-   * still uses a plain `for`, and it must keep emitting no such attributes.
-   */
-  hostGroupProps?: HostGroupProps;
-}
-
-export function OptionsEmptyState({
-  emptyHint,
-  gated,
-  dependsOnFields,
-  testId,
-  className,
-  hostGroupProps,
-}: OptionsEmptyStateProps) {
-  const { t } = useFieldTranslation();
-  // The host's hint when it computed one; otherwise this widget's own copy,
-  // translated. Never an English literal — that was the reported defect.
-  const hint =
-    emptyHint ||
-    (gated
-      ? t('fields.options.selectFirst', { fields: dependsOnFields.join(' / ') })
-      : t('fields.options.empty'));
-  return (
-    <div
-      {...hostGroupProps}
-      data-testid={testId}
-      className={cn(
-        'flex w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground',
-        className,
-      )}
-    >
-      {hint}
-    </div>
-  );
-}

package/src/widgets/PasswordField.tsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { Input } from '@object-ui/components';
-import { Button } from '@object-ui/components';
-import { Eye, EyeOff } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * PasswordField - Secure password input with visibility toggle
- * Includes show/hide toggle button and masks value in readonly mode
- */
-export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string>) {
-  const [showPassword, setShowPassword] = useState(false);
-  const config = field;
-
-  if (readonly) {
-    return <span className="text-sm">••••••••</span>;
-  }
-
-  const domProps = toDomProps(props);
-
-  return (
-    <div className="relative">
-      <Input
-        {...domProps}
-        type={showPassword ? 'text' : 'password'}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={config?.placeholder}
-        disabled={readonly || domProps.disabled}
-        className={`pr-10 ${className || ''}`}
-      />
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-        onClick={() => setShowPassword(!showPassword)}
-        tabIndex={-1}
-      >
-        {showPassword ? (
-          <EyeOff className="size-4 text-gray-500" />
-        ) : (
-          <Eye className="size-4 text-gray-500" />
-        )}
-      </Button>
-    </div>
-  );
-}