@object-ui/fields 16.0.0 → 17.1.0

package/src/field-type-alias.ts

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+
+/**
+ * Map field type to form component type
+ * 
+ * @param fieldType - The ObjectQL field type identifier to convert
+ * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
+ * @returns The normalized form field type string used in the form schema
+ * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
+ */
+export function mapFieldTypeToFormType(fieldType: string): string {
+  const typeMap: Record<string, string> = {
+    // Text-based fields
+    text: 'field:text',
+    textarea: 'field:textarea',
+    markdown: 'field:markdown', // Markdown editor (fallback to textarea)
+    html: 'field:html', // Rich text editor (fallback to textarea)
+    richtext: 'field:richtext', // WYSIWYG rich-text editor
+    secret: 'field:password', // encrypted-at-rest value — mask input like a password
+
+    // Numeric fields
+    number: 'field:number',
+    currency: 'field:currency',
+    percent: 'field:percent',
+    slider: 'field:slider',
+    progress: 'field:slider', // bounded 0..100 progress — edit via slider
+    rating: 'field:rating',
+
+    // Date/Time fields
+    date: 'field:date',
+    datetime: 'field:datetime',
+    time: 'field:time',
+
+    // Boolean
+    boolean: 'field:boolean',
+    toggle: 'field:boolean', // toggle is a boolean rendered as a switch
+
+    // Selection fields
+    select: 'field:select',
+    multiselect: 'field:multiselect',
+    radio: 'field:radio',
+    checkboxes: 'field:checkboxes',
+    tags: 'field:tags',
+    lookup: 'field:lookup',
+    master_detail: 'field:master_detail',
+    tree: 'field:lookup', // hierarchical reference — pick the parent via a lookup
+    // `user` is a lookup specialized to sys_user; `owner` mirrors it (record
+    // ownership). Both render via the UserField person-picker (delegates to the
+    // lookup picker). Without these they would fall through to `field:text`.
+    user: 'field:user',
+    owner: 'field:owner',
+
+    // Contact fields
+    email: 'field:email',
+    phone: 'field:phone',
+    url: 'field:url',
+
+    // File / media fields
+    file: 'field:file',
+    image: 'field:image',
+    avatar: 'field:avatar',
+    video: 'field:file', // uploads as a file
+    audio: 'field:file', // uploads as a file
+    signature: 'field:signature',
+
+    // Special / enhanced fields
+    password: 'field:password',
+    location: 'field:location', // Location/map field (fallback to input)
+    geolocation: 'field:geolocation',
+    address: 'field:address',
+    color: 'field:color',
+    code: 'field:code',
+    json: 'field:code', // JSON edited in the code editor
+    qrcode: 'field:qrcode',
+    vector: 'field:vector',
+
+    // Embedded structured values (stored as JSON on the row)
+    object: 'field:object',
+    composite: 'field:object', // embedded object
+    record: 'field:object', // name-keyed map
+    repeater: 'field:grid', // embedded array of rows
+
+    // Auto-generated/computed fields (typically read-only)
+    formula: 'field:formula',
+    summary: 'field:summary',
+    // `@objectstack/spec` spells this `autonumber`; the widget map key is
+    // `auto_number`. Map both spellings so a spec-typed field/param doesn't
+    // fall through to the plain text input.
+    autonumber: 'field:auto_number',
+    auto_number: 'field:auto_number',
+  };
+
+  return typeMap[fieldType] || 'field:text';
+}

package/src/field-type-coverage.test.ts

@@ -27,7 +27,9 @@ const FORM_WIDGET_TYPES = [
   'file', 'image', 'avatar', 'video', 'audio', 'signature',
   'location', 'geolocation', 'address', 'color', 'code', 'json', 'qrcode', 'vector',
   'object', 'composite', 'record', 'repeater',
-  'formula', 'summary', 'auto_number',
+  // `autonumber` is the spec `FieldType` spelling; `auto_number` is the widget
+  // map key. Both must resolve to the AutoNumber widget, not text.
+  'formula', 'summary', 'auto_number', 'autonumber',
 ];
 
 /**

package/src/index.tsx

@@ -277,12 +277,11 @@ function useFieldLabel() {
  * fallback in that case.
  */
 function useFieldTranslate(): ((key: string, params?: Record<string, unknown>) => string) | undefined {
-  try {
-    const { t } = useObjectTranslation();
-    return t as (key: string, params?: Record<string, unknown>) => string;
-  } catch {
-    return undefined;
-  }
+  // useObjectTranslation is provider-safe (optional context read; react-i18next
+  // falls back to the global instance), so it never throws — no try/catch, which
+  // would wrap a hook call and violate rules-of-hooks. Mirrors useFieldLabel.
+  const { t } = useObjectTranslation();
+  return t as (key: string, params?: Record<string, unknown>) => string;
 }
 
 import { TextField } from './widgets/TextField';
@@ -304,6 +303,8 @@ import { PercentField } from './widgets/PercentField';
 import { PasswordField } from './widgets/PasswordField';
 import { FileField } from './widgets/FileField';
 import { ImageField } from './widgets/ImageField';
+import { ImageLightbox } from './widgets/ImageLightbox';
+import { readFileValues } from './widgets/file-value';
 import { LocationField } from './widgets/LocationField';
 import { FormulaField } from './widgets/FormulaField';
 import { SummaryField } from './widgets/SummaryField';
@@ -507,7 +508,7 @@ function formatRelativeDays(diffDays: number, locale?: string): string {
 
 /**
  * Format date as relative time (e.g., "3 days ago", "Today", "Overdue 3d"),
- * localized via `Intl.RelativeTimeFormat` (objectstack-ai/framework#3040).
+ * localized via `Intl.RelativeTimeFormat` (objectstack-ai/objectstack#3040).
  *
  * `dueLike` gates the "Overdue" wording — a past `start_date`/`created_at`
  * isn't overdue, only a past due/deadline-semantic field is. Non-due-like
@@ -1269,50 +1270,88 @@ export function FileCellRenderer({ value, field }: CellRendererProps): React.Rea
 }
 
 /**
- * Image field cell renderer (with thumbnails)
+ * Image field cell renderer (with thumbnails + click-to-zoom).
+ *
+ * An image value may be a plain URL string, an object ({ url | src | href … }),
+ * a bare `sys_file` id, or an array of any of those. Normalising through
+ * `readFileValues` (which resolves a bare id to its stable download URL) means
+ * a string-URL field, a CDN link, and an unexpanded reference all render a
+ * thumbnail instead of a broken `<img src="">` placeholder.
+ *
+ * Clicking a thumbnail opens a full-screen lightbox (single or gallery). The
+ * click is `stopPropagation`-guarded so, inside a grid row, enlarging an image
+ * doesn't also trigger row navigation.
  */
 export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <EmptyValue />;
+  const { t } = useObjectTranslation();
+  const [lightboxIndex, setLightboxIndex] = React.useState<number | null>(null);
+
+  const imgs = React.useMemo(
+    () =>
+      readFileValues(value, 'Image')
+        .filter((v) => v.url)
+        .map((v) => ({ url: v.url as string, name: v.name })),
+    [value],
+  );
 
-  // An image value may be a plain URL string, an object ({ url | src | href }),
-  // or an array of either. Normalize so a string-URL field (common — e.g. a
-  // `cover` seeded with a CDN link) renders a thumbnail instead of a broken
-  // <img src=""> placeholder.
-  const urlOf = (v: any): string =>
-    typeof v === 'string' ? v : (v?.url || v?.src || v?.href || v?.thumbnailUrl || '');
-  const nameOf = (v: any, fallback: string): string =>
-    (v && typeof v === 'object' && (v.name || v.original_name)) || fallback;
+  if (!value || imgs.length === 0) return <EmptyValue />;
 
-  if (Array.isArray(value)) {
-    const imgs = value.map((v) => ({ url: urlOf(v), name: nameOf(v, 'Image') })).filter((i) => i.url);
-    if (imgs.length === 0) return <EmptyValue />;
+  const imageAlt = (idx: number, name?: string) =>
+    name || t('fields.image.imageAlt', { index: idx + 1 });
+  const open = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLightboxIndex(idx);
+  };
+  const multiple = imgs.length > 1;
+
+  const lightbox = lightboxIndex !== null && (
+    <ImageLightbox
+      images={imgs}
+      index={lightboxIndex}
+      open
+      onOpenChange={(o) => !o && setLightboxIndex(null)}
+      onIndexChange={setLightboxIndex}
+    />
+  );
+
+  if (multiple) {
     return (
-      <div className="flex -space-x-2">
-        {imgs.slice(0, 3).map((img, idx) => (
-          <img
-            key={idx}
-            src={img.url}
-            alt={img.name || `Image ${idx + 1}`}
-            className="size-8 rounded-md border-2 border-white object-cover"
-          />
-        ))}
-        {imgs.length > 3 && (
-          <div className="size-8 rounded-md border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">
-            +{imgs.length - 3}
-          </div>
-        )}
-      </div>
+      <>
+        <div className="flex -space-x-2">
+          {imgs.slice(0, 3).map((img, idx) => (
+            <img
+              key={idx}
+              src={img.url}
+              alt={imageAlt(idx, img.name)}
+              onClick={open(idx)}
+              className="size-8 cursor-zoom-in rounded-md border-2 border-background object-cover transition-transform hover:scale-110 hover:z-10"
+            />
+          ))}
+          {imgs.length > 3 && (
+            <button
+              type="button"
+              onClick={open(3)}
+              className="size-8 rounded-md border-2 border-background bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground hover:bg-muted/80"
+            >
+              +{imgs.length - 3}
+            </button>
+          )}
+        </div>
+        {lightbox}
+      </>
     );
   }
 
-  const url = urlOf(value);
-  if (!url) return <EmptyValue />;
   return (
-    <img
-      src={url}
-      alt={nameOf(value, 'Image')}
-      className="size-10 rounded-md object-cover"
-    />
+    <>
+      <img
+        src={imgs[0].url}
+        alt={imageAlt(0, imgs[0].name)}
+        onClick={open(0)}
+        className="size-10 cursor-zoom-in rounded-md object-cover transition-transform hover:scale-105"
+      />
+      {lightbox}
+    </>
   );
 }
 
@@ -1824,94 +1863,10 @@ setCellRendererResolver(getCellRenderer);
 
 
 
-/**
- * Map field type to form component type
- * 
- * @param fieldType - The ObjectQL field type identifier to convert
- * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
- * @returns The normalized form field type string used in the form schema
- * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
- */
-export function mapFieldTypeToFormType(fieldType: string): string {
-  const typeMap: Record<string, string> = {
-    // Text-based fields
-    text: 'field:text',
-    textarea: 'field:textarea',
-    markdown: 'field:markdown', // Markdown editor (fallback to textarea)
-    html: 'field:html', // Rich text editor (fallback to textarea)
-    richtext: 'field:richtext', // WYSIWYG rich-text editor
-    secret: 'field:password', // encrypted-at-rest value — mask input like a password
-
-    // Numeric fields
-    number: 'field:number',
-    currency: 'field:currency',
-    percent: 'field:percent',
-    slider: 'field:slider',
-    progress: 'field:slider', // bounded 0..100 progress — edit via slider
-    rating: 'field:rating',
-
-    // Date/Time fields
-    date: 'field:date',
-    datetime: 'field:datetime',
-    time: 'field:time',
-
-    // Boolean
-    boolean: 'field:boolean',
-    toggle: 'field:boolean', // toggle is a boolean rendered as a switch
-
-    // Selection fields
-    select: 'field:select',
-    multiselect: 'field:multiselect',
-    radio: 'field:radio',
-    checkboxes: 'field:checkboxes',
-    tags: 'field:tags',
-    lookup: 'field:lookup',
-    master_detail: 'field:master_detail',
-    tree: 'field:lookup', // hierarchical reference — pick the parent via a lookup
-    // `user` is a lookup specialized to sys_user; `owner` mirrors it (record
-    // ownership). Both render via the UserField person-picker (delegates to the
-    // lookup picker). Without these they would fall through to `field:text`.
-    user: 'field:user',
-    owner: 'field:owner',
-
-    // Contact fields
-    email: 'field:email',
-    phone: 'field:phone',
-    url: 'field:url',
-
-    // File / media fields
-    file: 'field:file',
-    image: 'field:image',
-    avatar: 'field:avatar',
-    video: 'field:file', // uploads as a file
-    audio: 'field:file', // uploads as a file
-    signature: 'field:signature',
-
-    // Special / enhanced fields
-    password: 'field:password',
-    location: 'field:location', // Location/map field (fallback to input)
-    geolocation: 'field:geolocation',
-    address: 'field:address',
-    color: 'field:color',
-    code: 'field:code',
-    json: 'field:code', // JSON edited in the code editor
-    qrcode: 'field:qrcode',
-    vector: 'field:vector',
-
-    // Embedded structured values (stored as JSON on the row)
-    object: 'field:object',
-    composite: 'field:object', // embedded object
-    record: 'field:object', // name-keyed map
-    repeater: 'field:grid', // embedded array of rows
-
-    // Auto-generated/computed fields (typically read-only)
-    formula: 'field:formula',
-    summary: 'field:summary',
-    auto_number: 'field:auto_number',
-  };
-
-  return typeMap[fieldType] || 'field:text';
-}
+// `mapFieldTypeToFormType` moved to './field-type-alias' (re-exported below) so
+// FieldEditWidget can resolve spec aliases without importing this barrel.
+export { mapFieldTypeToFormType } from './field-type-alias';
+import { mapFieldTypeToFormType } from './field-type-alias';
 
 /**
  * Formats file size in bytes to human-readable string
@@ -1963,18 +1918,23 @@ export function buildValidationRules(field: any): any {
   // vars); a field-authored `*_message` is a string and passes through as-is,
   // still winning over the localized default. See form.tsx `localizeRule`.
 
-  // Length validation for text fields
-  if (field.min_length) {
+  // Length validation for text fields. The spec-canonical keys are camelCase
+  // (`minLength`/`maxLength`, @objectstack/spec FieldSchema — what the server
+  // record-validator enforces); the snake_case pair is the legacy objectui
+  // spelling, kept as fallback (framework#1878/#1891 naming-drift closeout).
+  const minLength = (field as any).minLength ?? field.min_length;
+  if (minLength) {
     rules.minLength = {
-      value: field.min_length,
+      value: minLength,
       message: typeof field.min_length_message === 'string' ? field.min_length_message : undefined,
       messageKey: 'validation.minLength',
     };
   }
 
-  if (field.max_length) {
+  const maxLength = (field as any).maxLength ?? field.max_length;
+  if (maxLength) {
     rules.maxLength = {
-      value: field.max_length,
+      value: maxLength,
       message: typeof field.max_length_message === 'string' ? field.max_length_message : undefined,
       messageKey: 'validation.maxLength',
     };
@@ -2222,6 +2182,44 @@ const fieldWidgetMap: Record<string, () => Promise<{ default: React.ComponentTyp
  */
 export const FORM_FIELD_TYPES: readonly string[] = Object.freeze(Object.keys(fieldWidgetMap));
 
+/**
+ * Resolve an arbitrary field-type spelling to the widget key the form uses.
+ * A key already present in the widget map resolves to itself; spec aliases
+ * (`toggle`, `json`, `repeater`, `secret`, …) resolve through
+ * {@link mapFieldTypeToFormType}; anything unknown falls back to `text` —
+ * the same fallback the form renderer applies.
+ *
+ * Consumers that render field widgets outside the form (e.g. the app-shell
+ * `ActionParamDialog`) use this + {@link getLazyFieldWidget} so their type
+ * support can never drift behind the form surface (ADR-0059).
+ */
+export function resolveFormWidgetType(fieldType: string): string {
+  if (fieldWidgetMap[fieldType]) return fieldType;
+  const mapped = mapFieldTypeToFormType(fieldType).replace(/^field:/, '');
+  return fieldWidgetMap[mapped] ? mapped : 'text';
+}
+
+/** Cache so each widget type creates one lazy component (and one chunk request). */
+const lazyFieldWidgets = new Map<string, React.ComponentType<any>>();
+
+/**
+ * Lazily-loaded form field widget for a field type. Shares the exact loaders
+ * of {@link fieldWidgetMap} (the same components `registerField` registers for
+ * forms), wrapped in `React.lazy` and cached per type — so a consumer can
+ * render any form-supported field type without eagerly bundling every widget.
+ * Render inside a `<Suspense>` boundary. Unknown types resolve to the `text`
+ * widget via {@link resolveFormWidgetType}.
+ */
+export function getLazyFieldWidget(fieldType: string): React.ComponentType<any> {
+  const key = resolveFormWidgetType(fieldType);
+  let Widget = lazyFieldWidgets.get(key);
+  if (!Widget) {
+    Widget = React.lazy(fieldWidgetMap[key]);
+    lazyFieldWidgets.set(key, Widget);
+  }
+  return Widget;
+}
+
 /**
  * Register a specific field type lazily
  * @param fieldType - The field type to register (e.g., 'text', 'number')
@@ -2397,6 +2395,10 @@ export function registerFields() {
 }
 
 export * from './widgets/types';
+// File field value shapes (ObjectStack ADR-0104 D3 wave 2) — the single
+// arbiter of reference vs expanded vs legacy-blob form, shared by the upload
+// widgets and by action-param serialization.
+export * from './widgets/file-value';
 export * from './FieldEditWidget';
 export * from './widgets/TextField';
 export * from './widgets/NumberField';

package/src/standard-widgets.test.tsx

@@ -213,6 +213,50 @@ describe('Standard Field Widgets', () => {
       );
       expect(container.textContent).toBe('Option A');
     });
+
+    // A `select` declared `multiple` is a multi-value picker (spec allows
+    // `multiple` on select). SelectField delegates to the chip picker so the
+    // form, inline editor, and ActionParamDialog all get multi-select from the
+    // one `select` widget — no single-select fallback, no per-surface drift.
+    it('renders the multi-value chip picker when field.multiple is set', () => {
+      render(
+        <SelectField
+          value={['a']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+        />
+      );
+      // Chip picker uses toggle buttons (aria-pressed), not a Radix combobox.
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+      const optionA = screen.getByRole('button', { name: 'Option A' });
+      expect(optionA).toHaveAttribute('aria-pressed', 'true');
+      expect(screen.getByRole('button', { name: 'Option B' })).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('multi-select toggles values as an array', () => {
+      render(
+        <SelectField
+          value={['a']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+        />
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Option B' }));
+      expect(mockOnChange).toHaveBeenCalledWith(['a', 'b']);
+    });
+
+    it('multi-select renders selected values as badges in readonly mode', () => {
+      const { container } = render(
+        <SelectField
+          value={['a', 'b']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('Option A');
+      expect(container.textContent).toContain('Option B');
+    });
   });
 
   describe('BooleanField', () => {

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

@@ -0,0 +1,143 @@
+/**
+ * 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();
+  });
+});