@object-ui/fields 11.5.0 → 13.1.0

package/dist/widgets/SelectField.d.ts

@@ -1,7 +1,14 @@
 import { default as React } from 'react';
 import { FieldWidgetProps } from './types';
 /**
- * SelectField - Dropdown selection widget with configurable options
- * Renders options from field metadata with support for placeholder and readonly display
+ * SelectField - Dropdown selection widget 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.roles`). 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.
  */
-export declare function SelectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): React.JSX.Element;
+export declare function SelectField({ value, onChange, field, readonly, schema, dependentValues, dependsOn: dependsOnProp, emptyHint: _emptyHint, dataSource: _dataSource, ...props }: FieldWidgetProps<string>): React.JSX.Element;

package/dist/widgets/openNativePicker.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Open the browser's native picker (date / datetime-local / time) for an input.
+ *
+ * Native date/time inputs only open their picker when the user clicks the small
+ * calendar/clock icon. Calling `showPicker()` on click makes the whole field
+ * behave like other widgets — clicking anywhere in the box opens the picker.
+ *
+ * `showPicker()` can throw (unsupported browser, not user-activated, or the input
+ * is disabled/hidden), so failures are swallowed and the native fallback stands.
+ */
+export declare function openNativePicker(input: HTMLInputElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "11.5.0",
+  "version": "13.1.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -30,12 +30,12 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
-    "@object-ui/components": "11.5.0",
-    "@object-ui/core": "11.5.0",
-    "@object-ui/i18n": "11.5.0",
-    "@object-ui/providers": "11.5.0",
-    "@object-ui/react": "11.5.0",
-    "@object-ui/types": "11.5.0"
+    "@object-ui/components": "13.1.0",
+    "@object-ui/core": "13.1.0",
+    "@object-ui/i18n": "13.1.0",
+    "@object-ui/providers": "13.1.0",
+    "@object-ui/react": "13.1.0",
+    "@object-ui/types": "13.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -46,7 +46,7 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.3",
     "vite-plugin-dts": "^5.0.3"
   },
   "publishConfig": {

package/src/index.tsx

@@ -27,7 +27,7 @@ const lookupNameCache: Map<string, LookupCacheEntry> = new Map();
  * Pick the most reasonable display name from an arbitrary record object.
  * Tries common name-like keys in priority order, then falls back to undefined.
  */
-function pickRecordDisplayName(
+export function pickRecordDisplayName(
   record: Record<string, unknown> | null | undefined,
   preferredField?: string,
 ): string | undefined {
@@ -1450,7 +1450,13 @@ export function JsonCellRenderer({ value }: CellRendererProps): React.ReactEleme
   } else {
     text = String(value);
   }
-  return <span className="font-mono text-xs text-gray-600 truncate" title={text}>{text}</span>;
+  // inline-block + max-w-full so `truncate` (overflow-hidden/ellipsis/nowrap)
+  // actually clamps to the cell width. On a bare inline <span> truncate never
+  // clips — there is no width box — and its `white-space:nowrap` also defeats
+  // the parent cell's `break-words`, so a long name-keyed map / address JSON
+  // spills into the neighbouring column (objectui#2578). The title keeps the
+  // full value on hover.
+  return <span className="block max-w-full font-mono text-xs text-gray-600 truncate" title={text}>{text}</span>;
 }
 
 /**
@@ -1760,25 +1766,36 @@ export function formatFileSize(bytes: number): string {
 export function buildValidationRules(field: any): any {
   const rules: any = {};
 
-  // Required validation
+  // Required validation. Emit a bare `true` for the auto-generated case rather
+  // than baking an English message here: the form renderer localizes it via
+  // `t('validation.required', { field })`. A field-authored `required_message`
+  // still wins and is passed through verbatim.
   if (field.required) {
-    rules.required = typeof field.required_message === 'string' 
-      ? field.required_message 
-      : `${field.label || field.name} is required`;
+    rules.required = typeof field.required_message === 'string'
+      ? field.required_message
+      : true;
   }
 
+  // Standard validation messages are localized by the form renderer, which has
+  // an i18n `t` in scope. We therefore emit `message: undefined` for the
+  // auto-generated case and tag each rule with a `messageKey` (+ any interp
+  // 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) {
     rules.minLength = {
       value: field.min_length,
-      message: field.min_length_message || `Minimum length is ${field.min_length} characters`,
+      message: typeof field.min_length_message === 'string' ? field.min_length_message : undefined,
+      messageKey: 'validation.minLength',
     };
   }
 
   if (field.max_length) {
     rules.maxLength = {
       value: field.max_length,
-      message: field.max_length_message || `Maximum length is ${field.max_length} characters`,
+      message: typeof field.max_length_message === 'string' ? field.max_length_message : undefined,
+      messageKey: 'validation.maxLength',
     };
   }
 
@@ -1786,14 +1803,16 @@ export function buildValidationRules(field: any): any {
   if (field.min !== undefined) {
     rules.min = {
       value: field.min,
-      message: field.min_message || `Minimum value is ${field.min}`,
+      message: typeof field.min_message === 'string' ? field.min_message : undefined,
+      messageKey: 'validation.min',
     };
   }
 
   if (field.max !== undefined) {
     rules.max = {
       value: field.max,
-      message: field.max_message || `Maximum value is ${field.max}`,
+      message: typeof field.max_message === 'string' ? field.max_message : undefined,
+      messageKey: 'validation.max',
     };
   }
 
@@ -1801,7 +1820,8 @@ export function buildValidationRules(field: any): any {
   if (field.pattern) {
     rules.pattern = {
       value: typeof field.pattern === 'string' ? new RegExp(field.pattern) : field.pattern,
-      message: field.pattern_message || 'Invalid format',
+      message: typeof field.pattern_message === 'string' ? field.pattern_message : undefined,
+      messageKey: 'validation.pattern',
     };
   }
 
@@ -1809,7 +1829,8 @@ export function buildValidationRules(field: any): any {
   if (field.type === 'email') {
     rules.pattern = {
       value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-      message: 'Please enter a valid email address',
+      message: undefined,
+      messageKey: 'validation.email',
     };
   }
 
@@ -1817,7 +1838,8 @@ export function buildValidationRules(field: any): any {
   if (field.type === 'url') {
     rules.pattern = {
       value: /^https?:\/\/.+/,
-      message: 'Please enter a valid URL',
+      message: undefined,
+      messageKey: 'validation.url',
     };
   }
 

package/src/widgets/DateField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
+import { openNativePicker } from './openNativePicker';
 
 /**
  * DateField - Date picker input widget
@@ -20,6 +21,10 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => {
+        openNativePicker(e.currentTarget);
+        domProps.onClick?.(e);
+      }}
       disabled={readonly || domProps.disabled}
     />
   );

package/src/widgets/DateTimeField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
+import { openNativePicker } from './openNativePicker';
 
 /**
  * DateTimeField - Combined date and time picker widget
@@ -26,6 +27,10 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
       type="datetime-local"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => {
+        openNativePicker(e.currentTarget);
+        domProps.onClick?.(e);
+      }}
       disabled={readonly || domProps.disabled}
     />
   );

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

@@ -0,0 +1,138 @@
+/**
+ * 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.roles" },
+    ],
+  } 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: { roles: ['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: { roles: ['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,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import {
   Select,
   SelectContent,
@@ -7,17 +7,42 @@ import {
   SelectValue,
   EmptyValue,
 } from '@object-ui/components';
+import {
+  resolveVisibleOptions,
+  isOptionGroupGated,
+  resolveDependsOnFields,
+  isValueStillOffered,
+} from '@object-ui/core';
+import { SchemaRendererContext, usePredicateScope } from '@object-ui/react';
 import { SelectFieldMetadata } from '@object-ui/types';
 import { useFieldTranslation } from './useFieldTranslation';
 import { FieldWidgetProps } from './types';
 
 /**
- * SelectField - Dropdown selection widget with configurable options
- * Renders options from field metadata with support for placeholder and readonly display
+ * SelectField - Dropdown selection widget 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.roles`). 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.
  */
-export function SelectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
-  const config = (field || (props as any).schema) as SelectFieldMetadata;
-  const options = config?.options || [];
+export function SelectField({
+  value,
+  onChange,
+  field,
+  readonly,
+  schema,
+  dependentValues,
+  dependsOn: dependsOnProp,
+  emptyHint: _emptyHint,
+  dataSource: _dataSource,
+  ...props
+}: FieldWidgetProps<string>) {
+  const config = (field || schema) 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
@@ -25,32 +50,67 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
   // react-hook-form field name spread in by the form renderer (FormField).
   const fieldName = (props as any).name || (config as any)?.name || props.id || '';
 
+  // Live form values for cascading options — injected by the form renderer as
+  // `dependentValues` (same channel dependent lookups use), falling back to the
+  // record on SchemaRendererContext. `current_user` etc. come from the global
+  // predicate scope so role/context predicates resolve too.
+  const ctx = useContext(SchemaRendererContext) as any;
+  const record = useMemo<Record<string, unknown>>(() => {
+    return (dependentValues ?? ctx?.formValues ?? ctx?.data ?? {}) as Record<string, unknown>;
+  }, [dependentValues, ctx?.formValues, ctx?.data]);
+  const predicateScope = usePredicateScope();
+
+  const dependsOn = (config as any)?.dependsOn ?? dependsOnProp;
+  const dependsOnFields = useMemo(() => resolveDependsOnFields(dependsOn), [dependsOn]);
+  const gated = useMemo(
+    () => dependsOnFields.length > 0 && isOptionGroupGated(dependsOn, record),
+    [dependsOnFields, dependsOn, record],
+  );
+
+  // Effective (offered) options after per-option `visibleWhen` filtering. Empty
+  // while gated so we never present an unfiltered set before the parent is set.
+  const options = useMemo(
+    () => (gated ? [] : resolveVisibleOptions(rawOptions, record, predicateScope)),
+    [gated, rawOptions, record, predicateScope],
+  );
+
+  // 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;
+    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 = options.find((o) => o.value === value);
+    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 (the field metadata has
-  // no `options`). Surface a legible empty state instead, without needing to
-  // open the popover. Mirrors the inline form renderer's behaviour
-  // (see plugin form `renderFieldComponent`'s `case 'select'`).
+  // reads as "broken widget" and hides the real cause. Surface a legible state:
+  // a dependency-gated list prompts for its controlling field; an unconfigured
+  // list says so. Mirrors the inline form renderer's behaviour.
   if (options.length === 0) {
+    const hint = gated
+      ? `Select ${dependsOnFields.join(' / ')} first`
+      : 'No options available';
     return (
       <div
         data-testid={fieldName ? `select-empty-${fieldName}` : undefined}
         className="flex h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
       >
-        No options available
+        {hint}
       </div>
     );
   }
 
   return (
-    <Select 
+    <Select
       {...props}
-      value={value} 
+      value={value}
       onValueChange={onChange}
       disabled={readonly || props.disabled}
     >

package/src/widgets/TimeField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
+import { openNativePicker } from './openNativePicker';
 
 /**
  * TimeField - Time picker input widget
@@ -20,6 +21,10 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
       type="time"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => {
+        openNativePicker(e.currentTarget);
+        domProps.onClick?.(e);
+      }}
       disabled={readonly || domProps.disabled}
     />
   );

package/src/widgets/openNativePicker.ts

@@ -0,0 +1,18 @@
+/**
+ * Open the browser's native picker (date / datetime-local / time) for an input.
+ *
+ * Native date/time inputs only open their picker when the user clicks the small
+ * calendar/clock icon. Calling `showPicker()` on click makes the whole field
+ * behave like other widgets — clicking anywhere in the box opens the picker.
+ *
+ * `showPicker()` can throw (unsupported browser, not user-activated, or the input
+ * is disabled/hidden), so failures are swallowed and the native fallback stands.
+ */
+export function openNativePicker(input: HTMLInputElement): void {
+  if (input.disabled || input.readOnly) return;
+  try {
+    (input as HTMLInputElement & { showPicker?: () => void }).showPicker?.();
+  } catch {
+    // Ignore — browsers throw when the picker can't be shown; the icon still works.
+  }
+}