Skip to content

feat: cascading & role-gated select options via option.visibleWhen (#2284)#2289

Merged
os-zhuang merged 1 commit into
mainfrom
claude/cascading-form-input-nt2tvy
Jul 5, 2026
Merged

feat: cascading & role-gated select options via option.visibleWhen (#2284)#2289
os-zhuang merged 1 commit into
mainfrom
claude/cascading-form-input-nt2tvy

Conversation

@os-zhuang

Copy link
Copy Markdown
Contributor

Closes #2284.

What & why

Frontend forms need cascading / dependent selects (country → province → city) and role/context-gated options. Rather than invent a Salesforce-style validFor / controllingField matrix, this reuses the two primitives the codebase already has — so the mechanism is uniform with dependent lookups (#2215) and both humans and AI author it correctly by pattern-matching:

  • SelectOption.visibleWhen — a per-option CEL predicate; the option is offered only when TRUE, evaluated against the live record plus current_user (same engine/env as a field-level visibleWhen).
  • field.dependsOn — declares the sibling field(s) the option list reacts to; while any is empty the control is gated ("Select country first"), and a parent change auto-clears a now-invalid value.

The two purposes — cascade (record fields) and role gating (current_user) — are the same predicate; dependsOn and visibleWhen stay orthogonal (an option can have visibleWhen with no dependsOn).

Changes

  • @object-ui/core — new evaluator helpers resolveVisibleOptions / isOptionGroupGated / resolveDependsOnFields / isValueStillOffered, built on the canonical evalFieldPredicate (@objectstack/formula).
  • @object-ui/components — the form renderer narrows a dependent select's options, gates with a "Select {parent} first" hint, and clears a now-invalid value on parent change (new usePredicateScope() wiring for current_user).
  • @object-ui/fieldsSelectField applies the same resolution via dependentValues + the global predicate scope.
  • @object-ui/types — mirror SelectOption.visibleWhen on SelectOption / SelectOptionMetadata (aligns with @objectstack/spec).
  • Docs / example / skillcontent/docs/fields/select.mdx, a fields-select/cascading-options schema-catalog demo, the schema-expressions skill guide, and the @object-ui/fields README.
  • Changeset — minor across the four packages.

Security

Client-side hiding is UX, not authorization — a visibleWhen only removes the choice from the dropdown; the value is still submittable. For authorization-gated options the server must also reject writes of that value (rule-validator evaluates the picked value's visibleWhen). Documented in the field docs and skill.

Depends on spec

Requires SelectOption.visibleWhen in @objectstack/spec — see companion PR objectstack-ai/framework#[spec] (claude/cascading-select-visiblewhen). The objectui types mirror the spec, as with dependsOn / visibleWhen.

Tests

  • @object-ui/core optionRules.test.ts — cascade filtering, gating, role gating via scope, cascade-clear decision (13).
  • @object-ui/fields SelectField.cascade.test.tsx — gate hint, unlock, cascade clear, role gating (6).
  • @object-ui/components form-cascading-select.test.tsx — inline renderer gate transition end-to-end (1).
  • Existing standard-widgets / form suites pass unchanged. @object-ui/fields closure builds (tsc) clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_019aYFm77ddLp6tzuJjt9hK2


Generated by Claude Code

@vercel

vercel Bot commented Jul 5, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
objectui Ignored Ignored Jul 5, 2026 12:48pm

Request Review

…ia option.visibleWhen (#2284)

Select options now accept a per-option `visibleWhen` CEL predicate, evaluated
against the live record + `current_user` (same engine/env as a field-level
`visibleWhen`). Combined with a field-level `dependsOn`, this drives dependent
selects (country → province → city) and role/context gating — reusing the same
primitives dependent lookups (#2215) already use, no bespoke matrix.

- core: new `resolveVisibleOptions` / `isOptionGroupGated` /
  `resolveDependsOnFields` / `isValueStillOffered` evaluator helpers, built on
  the canonical `evalFieldPredicate`.
- components: the form renderer narrows a dependent select's options, gates the
  control with a "Select {parent} first" hint while a `dependsOn` field is empty,
  and clears a now-invalid value on parent change.
- fields: `SelectField` applies the same resolution via `dependentValues` + the
  global predicate scope.
- types: mirror `SelectOption.visibleWhen` (aligns with @objectstack/spec).
- tests, docs (fields/select.mdx), schema-catalog example, and the
  schema-expressions skill guide.

Client-side hiding is UX only — authorization-gated option values must also be
enforced server-side.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019aYFm77ddLp6tzuJjt9hK2
@os-zhuang
os-zhuang force-pushed the claude/cascading-form-input-nt2tvy branch from 574d01b to 705f7bb Compare July 5, 2026 12:48
@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

Metric Value Budget
Main entry (gzip) 59.5 KB 350 KB
Entry file index-CF_YN3pP.js
Status PASS

📦 Bundle Size Report

Package Size Gzipped
app-shell (index.js) 7.51KB 2.72KB
app-shell (runtime-config.js) 4.72KB 1.69KB
app-shell (types.js) 0.01KB 0.04KB
app-shell (urlParams.js) 4.11KB 1.65KB
auth (AuthContext.js) 0.31KB 0.24KB
auth (AuthGuard.js) 1.17KB 0.53KB
auth (AuthProvider.js) 18.34KB 3.80KB
auth (AuthShell.js) 3.49KB 1.40KB
auth (ForgotPasswordForm.js) 4.79KB 1.88KB
auth (LoginForm.js) 9.55KB 3.36KB
auth (PreviewBanner.js) 0.90KB 0.50KB
auth (RegisterForm.js) 6.63KB 2.15KB
auth (SocialSignInButtons.js) 8.89KB 3.61KB
auth (UserMenu.js) 3.40KB 1.22KB
auth (auth-gate-events.js) 1.29KB 0.66KB
auth (authStyles.js) 5.04KB 1.72KB
auth (createAuthClient.js) 26.07KB 6.30KB
auth (createAuthenticatedFetch.js) 3.93KB 1.55KB
auth (index.js) 1.75KB 0.76KB
auth (types.js) 0.59KB 0.35KB
auth (useAuth.js) 4.29KB 0.82KB
auth (useIsWorkspaceAdmin.js) 1.61KB 0.85KB
collaboration (CommentThread.js) 18.38KB 4.49KB
collaboration (LiveCursors.js) 3.17KB 1.27KB
collaboration (PresenceAvatars.js) 3.65KB 1.42KB
collaboration (PresenceProvider.js) 2.42KB 0.96KB
collaboration (index.js) 1.25KB 0.53KB
collaboration (useCommentSearch.js) 1.98KB 0.88KB
collaboration (useConflictResolution.js) 7.75KB 1.86KB
collaboration (useMentionNotifications.js) 1.81KB 0.68KB
collaboration (usePresence.js) 6.33KB 1.84KB
collaboration (useRealtimeSubscription.js) 7.91KB 2.01KB
components (index.js) 438.93KB 94.50KB
core (index.js) 1.65KB 0.59KB
create-plugin (index.js) 9.28KB 2.98KB
data-objectstack (index.js) 110.51KB 27.26KB
fields (index.js) 185.99KB 45.50KB
i18n (LocalizationContext.js) 1.76KB 0.96KB
i18n (currency.js) 1.22KB 0.64KB
i18n (i18n.js) 4.32KB 1.77KB
i18n (index.js) 2.46KB 0.96KB
i18n (pickLocalized.js) 1.31KB 0.67KB
i18n (provider.js) 5.37KB 1.72KB
i18n (useObjectLabel.js) 21.15KB 4.68KB
i18n (useSafeTranslation.js) 2.68KB 0.98KB
layout (index.js) 38.41KB 10.65KB
mobile (MobileProvider.js) 0.92KB 0.49KB
mobile (ResponsiveContainer.js) 0.94KB 0.38KB
mobile (breakpoints.js) 1.51KB 0.70KB
mobile (createOfflineDataSource.js) 5.61KB 1.74KB
mobile (index.js) 1.50KB 0.62KB
mobile (offlineQueue.js) 3.91KB 1.35KB
mobile (pwa.js) 0.97KB 0.49KB
mobile (serviceWorker.js) 1.48KB 0.62KB
mobile (serviceWorkerSource.js) 3.41KB 1.48KB
mobile (useBreakpoint.js) 1.54KB 0.65KB
mobile (useGesture.js) 4.42KB 1.27KB
mobile (useOfflineSync.js) 1.99KB 0.72KB
mobile (usePullToRefresh.js) 2.53KB 0.85KB
mobile (useResponsive.js) 0.71KB 0.42KB
mobile (useResponsiveConfig.js) 1.36KB 0.63KB
mobile (useSpecGesture.js) 1.77KB 0.77KB
mobile (useTouchTarget.js) 1.01KB 0.54KB
permissions (MePermissionsProvider.js) 5.09KB 1.84KB
permissions (PermissionContext.js) 0.31KB 0.25KB
permissions (PermissionGuard.js) 0.89KB 0.45KB
permissions (PermissionProvider.js) 3.46KB 1.03KB
permissions (evaluator.js) 4.00KB 1.23KB
permissions (index.js) 0.91KB 0.41KB
permissions (store.js) 0.91KB 0.42KB
permissions (useFieldPermissions.js) 1.28KB 0.52KB
permissions (usePermissions.js) 1.50KB 0.70KB
plugin-ai (index.js) 15.71KB 3.79KB
plugin-calendar (index.js) 45.10KB 12.33KB
plugin-charts (index.js) 46.25KB 13.04KB
plugin-chatbot (index.js) 173.06KB 41.28KB
plugin-dashboard (index.js) 108.28KB 26.86KB
plugin-designer (index.js) 213.56KB 42.96KB
plugin-detail (index.js) 203.75KB 49.12KB
plugin-editor (index.js) 2.46KB 1.10KB
plugin-form (index.js) 103.92KB 25.15KB
plugin-gantt (index.js) 136.67KB 33.88KB
plugin-grid (index.js) 171.51KB 45.14KB
plugin-kanban (index.js) 48.15KB 12.94KB
plugin-list (index.js) 97.89KB 23.09KB
plugin-map (index.js) 16.78KB 5.23KB
plugin-markdown (index.js) 13.65KB 4.67KB
plugin-report (index.js) 37.83KB 9.97KB
plugin-timeline (index.js) 25.37KB 7.20KB
plugin-tree (index.js) 8.21KB 2.76KB
plugin-view (index.js) 85.39KB 20.76KB
providers (DataSourceProvider.js) 0.75KB 0.39KB
providers (MetadataProvider.js) 1.37KB 0.59KB
providers (ThemeProvider.js) 1.55KB 0.67KB
providers (UploadProvider.js) 11.71KB 3.53KB
providers (index.js) 0.44KB 0.22KB
providers (types.js) 0.01KB 0.04KB
react-runtime (index.js) 3.19KB 1.38KB
react (LazyPluginLoader.js) 3.77KB 1.33KB
react (SchemaRenderer.js) 18.23KB 5.97KB
react (data-invalidation.js) 5.05KB 2.08KB
react (index.js) 0.79KB 0.43KB
sdui-parser (codegen.js) 4.09KB 1.74KB
sdui-parser (index.js) 2.16KB 0.94KB
sdui-parser (parse.js) 10.04KB 2.82KB
sdui-parser (types.js) 0.29KB 0.24KB
sdui-parser (validate.js) 4.69KB 1.48KB
tenant (TenantContext.js) 0.31KB 0.25KB
tenant (TenantGuard.js) 1.04KB 0.43KB
tenant (TenantProvider.js) 2.76KB 0.98KB
tenant (TenantScopedQuery.js) 0.77KB 0.44KB
tenant (index.js) 0.75KB 0.38KB
tenant (resolver.js) 2.64KB 0.76KB
tenant (useTenant.js) 0.50KB 0.32KB
tenant (useTenantBranding.js) 0.62KB 0.39KB
types (ai.js) 0.20KB 0.17KB
types (api-types.js) 0.20KB 0.18KB
types (app.js) 2.87KB 0.99KB
types (base.js) 0.20KB 0.18KB
types (blocks.js) 0.20KB 0.18KB
types (complex.js) 0.20KB 0.18KB
types (crud.js) 0.20KB 0.18KB
types (data-display.js) 0.20KB 0.18KB
types (data-protocol.js) 0.20KB 0.19KB
types (data.js) 0.20KB 0.18KB
types (designer.js) 0.77KB 0.41KB
types (disclosure.js) 0.20KB 0.18KB
types (feedback.js) 0.20KB 0.18KB
types (field-types.js) 0.20KB 0.18KB
types (form.js) 0.20KB 0.18KB
types (index.js) 1.54KB 0.68KB
types (layout.js) 0.20KB 0.18KB
types (mobile.js) 0.20KB 0.18KB
types (navigation.js) 0.20KB 0.18KB
types (objectql.js) 0.20KB 0.18KB
types (overlay.js) 0.20KB 0.18KB
types (permissions.js) 0.20KB 0.18KB
types (plugin-scope.js) 0.20KB 0.18KB
types (record-components.js) 0.20KB 0.19KB
types (registry.js) 0.20KB 0.18KB
types (reports.js) 0.20KB 0.18KB
types (spec-report.js) 5.26KB 1.96KB
types (tenant.js) 0.20KB 0.18KB
types (theme.js) 0.20KB 0.18KB
types (ui-action.js) 0.75KB 0.46KB
types (views.js) 0.20KB 0.18KB
types (widget.js) 0.20KB 0.18KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@os-zhuang
os-zhuang marked this pull request as ready for review July 5, 2026 13:01
@os-zhuang
os-zhuang merged commit 226fde9 into main Jul 5, 2026
10 checks passed
@os-zhuang
os-zhuang deleted the claude/cascading-form-input-nt2tvy branch July 5, 2026 13:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

表单支持级联/依赖选项:新增 SelectOption.visibleWhen 通用谓词

2 participants