@object-ui/fields 11.5.0 → 13.2.0

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.
+  }
+}