@object-ui/fields 11.4.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.4.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.4.0",
-    "@object-ui/core": "11.4.0",
-    "@object-ui/i18n": "11.4.0",
-    "@object-ui/providers": "11.4.0",
-    "@object-ui/react": "11.4.0",
-    "@object-ui/types": "11.4.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/__tests__/DateCellRenderer.test.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DateCellRenderer, formatRelativeDate } from '../index';
+
+function daysAgo(n: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString();
+}
+
+describe('formatRelativeDate', () => {
+  it('renders "Overdue Nd" only when dueLike is set', () => {
+    expect(formatRelativeDate(daysAgo(3), { dueLike: true })).toBe('Overdue 3d');
+  });
+
+  it('renders neutral "Nd ago" for a past date that is not due-like', () => {
+    expect(formatRelativeDate(daysAgo(3))).toBe('3d ago');
+    expect(formatRelativeDate(daysAgo(3), { dueLike: false })).toBe('3d ago');
+  });
+});
+
+describe('DateCellRenderer', () => {
+  it('does not label a past start_date as "Overdue" (regression: field-role-agnostic formatter)', () => {
+    render(<DateCellRenderer value={daysAgo(6)} field={{ type: 'date', name: 'start_date' } as any} />);
+    expect(screen.getByText('6d ago')).toBeInTheDocument();
+    expect(screen.queryByText(/Overdue/)).not.toBeInTheDocument();
+  });
+
+  it('labels a past due_date as "Overdue Nd" and colors it red', () => {
+    render(<DateCellRenderer value={daysAgo(6)} field={{ type: 'date', name: 'due_date' } as any} />);
+    const el = screen.getByText('Overdue 6d');
+    expect(el).toBeInTheDocument();
+    expect(el.className).toMatch(/text-red-600/);
+  });
+
+  it('respects an explicit dueLike:true override regardless of field name', () => {
+    render(<DateCellRenderer value={daysAgo(2)} field={{ type: 'date', name: 'end_date', dueLike: true } as any} />);
+    expect(screen.getByText('Overdue 2d')).toBeInTheDocument();
+  });
+});

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 {
@@ -362,8 +362,12 @@ export function humanizeLabel(value: string): string {
 
 /**
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
+ *
+ * `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
+ * past dates render as "Nd ago" instead.
  */
-export function formatRelativeDate(value: string | Date | number): string {
+export function formatRelativeDate(value: string | Date | number, options?: { dueLike?: boolean }): string {
   if (value === null || value === undefined || value === '') return '—';
   const date = value instanceof Date ? value : new Date(value as any);
   if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
@@ -379,7 +383,7 @@ export function formatRelativeDate(value: string | Date | number): string {
   if (diffDays === -1) return 'Yesterday';
   if (diffDays < -1) {
     const absDays = Math.abs(diffDays);
-    if (absDays <= 7) return `Overdue ${absDays}d`;
+    if (absDays <= 7) return options?.dueLike ? `Overdue ${absDays}d` : `${absDays}d ago`;
     return formatDate(date);
   }
   if (diffDays > 1 && diffDays <= 7) return `In ${diffDays} days`;
@@ -389,7 +393,7 @@ export function formatRelativeDate(value: string | Date | number): string {
 /**
  * Format date value
  */
-export function formatDate(value: string | Date | number, style?: string): string {
+export function formatDate(value: string | Date | number, style?: string, options?: { dueLike?: boolean }): string {
   if (value === null || value === undefined || value === '') return '—';
   const date = value instanceof Date ? value : new Date(value as any);
   if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
@@ -403,7 +407,7 @@ export function formatDate(value: string | Date | number, style?: string): strin
   }
 
   if (style === 'relative') {
-    return formatRelativeDate(date);
+    return formatRelativeDate(date, options);
   }
   
   // Default format: locale-aware human-readable. Drop the year when it
@@ -597,19 +601,20 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
   const safe = coerceToSafeValue(value);
   const dateField = field as any;
   const style = dateField.format || 'relative';
-  const formatted = formatDate(safe as string | Date, style);
 
-  // Determine if date is overdue (in the past) — but only color it red when the
-  // field is *semantically* a due/deadline. A plain "start_date" or "created_at"
-  // in the past should not render in red.
-  const date = safe != null ? new Date(safe as string | number) : null;
-  const isValidDate = date !== null && !isNaN(date.getTime());
-  const startOfToday = new Date();
-  startOfToday.setHours(0, 0, 0, 0);
+  // A date is only *semantically* a due/deadline when the field says so — a
+  // plain "start_date" or "created_at" in the past is neither overdue text
+  // nor red, even though it renders in the same relative-time style.
   const fieldName = String(dateField?.name || dateField?.accessorKey || dateField?.key || '').toLowerCase();
   const dueLike =
     dateField?.dueLike === true ||
     /(^|_)(due|deadline|expires?|expiry|expiration|expected_close|target_close|sla|return_by|renewal|next_action)(_|$)/.test(fieldName);
+  const formatted = formatDate(safe as string | Date, style, { dueLike });
+
+  const date = safe != null ? new Date(safe as string | number) : null;
+  const isValidDate = date !== null && !isNaN(date.getTime());
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
   const isOverdue = dueLike && isValidDate && date! < startOfToday;
   const isoString = isValidDate ? date!.toISOString() : String(safe);
 
@@ -1445,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>;
 }
 
 /**
@@ -1755,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',
     };
   }
 
@@ -1781,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',
     };
   }
 
@@ -1796,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',
     };
   }
 
@@ -1804,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',
     };
   }
 
@@ -1812,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',
     };
   }
 
@@ -2037,6 +2064,12 @@ const FIELD_TYPES_SKIP_FALLBACK = new Set([
   'slider',
   // Display renderer owned by `plugin-markdown:markdown`.
   'markdown',
+  // No other package owns the bare `time`/`address` key, but `registerField`
+  // wraps each call in a fresh `React.lazy(...)`, so re-registration (HMR,
+  // re-import) fails the registry's identity check every time and logs the
+  // same "bare-name fallback overwritten" warning at every boot regardless.
+  'time',
+  'address',
 ]);
 
 export function registerField(fieldType: string): void {
@@ -2093,7 +2126,10 @@ export function registerFields() {
   ComponentRegistry.register('select', createFieldRenderer(SelectField), { namespace: 'field', skipFallback: true });
   ComponentRegistry.register('date', createFieldRenderer(DateField), { namespace: 'field' });
   ComponentRegistry.register('datetime', createFieldRenderer(DateTimeField), { namespace: 'field' });
-  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field' });
+  // Namespaced-only: no other renderer legitimately owns the bare 'time' key,
+  // but the fallback still triggered noisy "bare-name overwritten" warnings on
+  // every re-registration (e.g. hot reload / re-init in a shared registry).
+  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field', skipFallback: true });
   
   // Contact fields - wrapped for documentation compatibility
   // `email` collides with the `ui:email` input variant; namespaced-only so the
@@ -2151,7 +2187,8 @@ export function registerFields() {
   ComponentRegistry.register('code', createFieldRenderer(CodeField), { namespace: 'field' });
   // `avatar` collides with the display avatar widget; namespaced-only.
   ComponentRegistry.register('avatar', createFieldRenderer(AvatarField), { namespace: 'field', skipFallback: true });
-  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field' });
+  // Namespaced-only — see the 'time' registration above for rationale.
+  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field', skipFallback: true });
   ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField), { namespace: 'field' });
   ComponentRegistry.register('signature', createFieldRenderer(SignatureField), { namespace: 'field' });
   ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField), { namespace: 'field' });

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}
     />
   );