fix(components): read SchemaRenderer's evaluated disabled verdict, never the raw key

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

.changeset/7238-disabled-one-carrier.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+---
+
+fix(components): eight widgets now consume `SchemaRenderer`'s evaluated `disabled` verdict instead of re-reading the raw authored key
+
+`disabled` on a schema node is `boolean | string` — the string being a predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, strips the raw key from the props it spreads, and forwards the answer as a real `disabled` prop. `ui:form`, `ui:button`, `ui:input`, `ui:textarea`, `ui:checkbox`, `ui:select`, `ui:combobox` and `ui:collapsible` re-read the raw key beside that verdict, and an expression string is truthy however it evaluates.
+
+Two user-visible defects go away:
+
+- `ui:form` — a form declaring `disabled: "${...}"` greyed out every field, the submit button and the cancel button even when the predicate was FALSE.
+- `ui:button` — `loading: true` did not disable the button when it was rendered through `SchemaRenderer`: the computed state was overwritten by the forwarded verdict arriving through the DOM pass-through spread, so the spinner ran on a live control.
+
+The six DOM pass-throughs kept their behaviour through `SchemaRenderer` and now read the verdict by name rather than depending on spread order.

packages/components/src/__tests__/disabled-verdict-one-carrier.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+/**
+ * One carrier for one question: the widgets read `SchemaRenderer`'s EVALUATED
+ * `disabled` verdict, never the raw authored key beside it (objectui#7238,
+ * AGENTS.md #0.1; the in-tree precedent is `plugin-chatbot`'s renderer,
+ * objectui#6169).
+ *
+ * `disabled` on a `BaseSchema` node is `boolean | string` — the string being a
+ * predicate. `SchemaRenderer` evaluates `disabled` / `disabledOn`, STRIPS the
+ * raw key from the props it spreads, and forwards the verdict as a real
+ * `disabled` prop (`disabled: __disabled || undefined`). A widget that re-reads
+ * `schema.disabled` is reading an expression string, which is truthy however it
+ * evaluates.
+ *
+ * Every case here renders through the REAL `SchemaRenderer` and the real
+ * registry, so the verdict path is the one under test. Each predicate is
+ * exercised in BOTH polarities against the same node, which is what separates
+ * "the widget ignores the verdict" from "the widget is never disabled at all" —
+ * a one-polarity pin would go green on a widget that dropped `disabled`
+ * entirely.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRenderer, SchemaRendererContext } from '@object-ui/react';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** `${data.locked}` resolves against this — the `dataSource` on the context. */
+function renderNode(schema: Record<string, unknown>, locked: boolean) {
+ return render(
+ <SchemaRendererContext.Provider value={{ dataSource: { locked } } as never}>
+ <SchemaRenderer schema={schema as never} />
+ </SchemaRendererContext.Provider>,
+ );
+}
+
+/** A predicate string — the shape that is truthy however it evaluates. */
+const PREDICATE = '${data.locked}';
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (b) `form` — the raw read that dropped the host verdict entirely
+ * ───────────────────────────────────────────────────────────────────────── */
+
+function formSchema() {
+ return {
+ type: 'form',
+ disabled: PREDICATE,
+ submitLabel: 'Save',
+ showCancel: true,
+ cancelLabel: 'Cancel',
+ fields: [{ name: 'notes', label: 'Notes', type: 'input' }],
+ };
+}
+
+describe('`form` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the fields and the action bar interactive', () => {
+ renderNode(formSchema(), false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(false);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(false);
+ });
+
+ it('a TRUE predicate still greys the whole form out', () => {
+ renderNode(formSchema(), true);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+
+ it('a literal `disabled: true` is unchanged — the verdict says the same thing', () => {
+ renderNode({ ...formSchema(), disabled: true }, false);
+
+ expect((screen.getByLabelText(/notes/i) as HTMLInputElement).disabled).toBe(true);
+ expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (c) `ui:button` — `isDisabled` was computed from the raw key, and then
+ * overwritten by the forwarded verdict arriving through the DOM spread. The
+ * `loading` leg of that OR was the casualty: it never reached the element.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const button = () => screen.getByRole('button') as HTMLButtonElement;
+
+describe('`ui:button` consumes the evaluated verdict, not the raw predicate (objectui#7238)', () => {
+ it('a FALSE predicate leaves the button clickable', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, false);
+ expect(button().disabled).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ type: 'button', label: 'Go', disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+
+ it('`loading` disables the button — the leg the raw read used to lose', () => {
+ // `isDisabled` was `schema.disabled || props.disabled || isLoading`, applied
+ // BEFORE the DOM spread that carries the host's `disabled` prop. With no
+ // predicate authored the verdict is `undefined`, and `{...toFormControlDomProps(rest)}`
+ // re-declared `disabled` — key present, value `undefined` (`pickDomProps`
+ // iterates `Object.keys`) — so it overwrote the computed value and the
+ // spinner spun on a live button.
+ renderNode({ type: 'button', label: 'Go', loading: true }, false);
+ expect(button().disabled).toBe(true);
+ expect(document.querySelector('svg.animate-spin')).not.toBeNull();
+ });
+
+ it('`loading` and a TRUE predicate agree', () => {
+ renderNode({ type: 'button', label: 'Go', loading: true, disabled: PREDICATE }, true);
+ expect(button().disabled).toBe(true);
+ });
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * (a) the six DOM pass-throughs. Their runtime was already correct THROUGH the
+ * renderer (the forwarded prop was spread after the raw one), so these are the
+ * regression guard on removing the raw read: they must not move.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+const PASSTHROUGHS: Array<{ type: string; node: Record<string, unknown>; control: () => HTMLElement }> = [
+ {
+ type: 'input',
+ node: { type: 'input', id: 'i1', label: 'Notes' },
+ control: () => document.querySelector('input')!,
+ },
+ {
+ type: 'textarea',
+ node: { type: 'textarea', id: 't1', label: 'Notes' },
+ control: () => document.querySelector('textarea')!,
+ },
+ {
+ type: 'checkbox',
+ node: { type: 'checkbox', id: 'c1', label: 'Agree' },
+ control: () => document.querySelector('[role="checkbox"]')!,
+ },
+ {
+ type: 'select',
+ node: { type: 'select', id: 's1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('[role="combobox"]')!,
+ },
+ {
+ type: 'combobox',
+ node: { type: 'combobox', id: 'cb1', options: [{ label: 'A', value: 'a' }] },
+ control: () => document.querySelector('button')!,
+ },
+];
+
+describe.each(PASSTHROUGHS)('`$type` consumes the evaluated verdict (objectui#7238)', ({ node, control }) => {
+ it('a FALSE predicate leaves the control interactive', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ const el = control();
+ expect(el).toBeTruthy();
+ expect(el.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables the control', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables the control', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(control().hasAttribute('disabled')).toBe(true);
+ });
+});
+
+describe('`collapsible` consumes the evaluated verdict (objectui#7238)', () => {
+ const node = {
+ type: 'collapsible',
+ id: 'col1',
+ trigger: [{ type: 'text', content: 'Toggle' }],
+ content: [{ type: 'text', content: 'Body' }],
+ };
+ // Radix's Collapsible root stamps `data-disabled` from the same prop it
+ // hands the trigger, so this reads the root's own verdict rather than a
+ // nested widget's.
+ const root = () => document.querySelector('[data-state]')!;
+
+ it('a FALSE predicate leaves it enabled', () => {
+ renderNode({ ...node, disabled: PREDICATE }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(false);
+ });
+
+ it('a TRUE predicate disables it', () => {
+ renderNode({ ...node, disabled: PREDICATE }, true);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+
+ it('a literal `disabled: true` disables it', () => {
+ renderNode({ ...node, disabled: true }, false);
+ expect(root().hasAttribute('data-disabled')).toBe(true);
+ });
+});

packages/components/src/__tests__/form-renderers.test.tsx

@@ -7,7 +7,8 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { SchemaRenderer } from '@object-ui/react';
 import {
  renderComponent,
  validateComponentRegistration,
@@ -158,12 +159,18 @@ describe('Form Renderers - Display Issue Detection', () => {
  expect(error).toBeTruthy();
  });
 
+ // Through the REAL renderer, not `renderComponent`. An authored `disabled`
+ // is `boolean | string` and is EVALUATED by `SchemaRenderer`, which strips
+ // the raw key and forwards the verdict as a `disabled` prop; the widget
+ // consumes that prop and no longer re-reads `schema.disabled` beside it
+ // (objectui#7238). `renderComponent` mounts the registration with no host in
+ // front of it, so it can only ever assert the raw read this card removed —
+ // the predicate half of the same key is pinned in
+ // `disabled-verdict-one-carrier.test.tsx`.
  it('should handle disabled state', () => {
- const { container } = renderComponent({
- type: 'input',
- label: 'Field',
- disabled: true,
- });
+ const { container } = render(
+ <SchemaRenderer schema={{ type: 'input', label: 'Field', disabled: true } as never} />,
+ );
 
  const input = container.querySelector('input');
  expect(input?.hasAttribute('disabled')).toBe(true);

packages/components/src/renderers/disclosure/collapsible.tsx

@@ -16,8 +16,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
- ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
- <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
+ ({ schema, className, disabled: hostDisabled, ...props }: { schema: CollapsibleSchema; className?: string; disabled?: boolean; [key: string]: any }) => (
+ <Collapsible defaultOpen={schema.defaultOpen} disabled={hostDisabled} className={className} {...props}>
  <CollapsibleTrigger asChild>
  {renderChildren(schema.trigger)}
  </CollapsibleTrigger>

packages/components/src/renderers/form/button.tsx

@@ -19,7 +19,14 @@ import { resolveIcon } from '../action/resolve-icon';
 // argument — mechanism note on `action:bar` (objectui#4422), pinned by
 // `__tests__/forwardref-props-annotation.guard.test.ts`.
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
- ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }, ref) => {
+ // `disabled` is the host-EVALUATED verdict, taken by name. `SchemaRenderer`
+ // evaluates the node's `disabled` / `disabledOn` (either may be a predicate
+ // STRING), strips the raw key from the props it spreads, and forwards the
+ // verdict as a real `disabled` prop. Consuming it here rather than re-reading
+ // `schema.disabled` keeps one carrier for one question (AGENTS.md #0.1,
+ // objectui#7238; precedent `plugin-chatbot`, objectui#6169) — and taking it
+ // OFF `props` is the load-bearing half, see `isDisabled` below.
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ButtonSchema; disabled?: boolean; [key: string]: any }, ref) => {
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -38,8 +45,16 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema }>(
  // Determine loading state
  const isLoading = schema.loading || props.loading;
 
- // Determine disabled state
- const isDisabled = schema.disabled || props.disabled || isLoading;
+ // Determine disabled state. This used to be
+ // `schema.disabled || props.disabled || isLoading`, and the `loading` leg of
+ // that OR never reached the element: `disabled` also rode `buttonProps` into
+ // `toFormControlDomProps` below, which forwards it BY NAME and keeps the key
+ // even when the value is `undefined` (`pickDomProps` iterates `Object.keys`).
+ // Spread after `disabled={isDisabled}`, it overwrote the computed value with
+ // the host's verdict — so a `loading` button with no authored predicate
+ // rendered its spinner on a live, clickable control. Destructuring `disabled`
+ // out of `props` above removes that second writer; this is now the only one.
+ const isDisabled = hostDisabled || isLoading;
 
  return (
  <Button 

packages/components/src/renderers/form/checkbox.tsx

@@ -13,7 +13,10 @@ import { cn } from '../../lib/utils';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 import React from 'react';
 
-const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+const CheckboxRenderer = ({ schema, className, onChange, value, disabled: hostDisabled, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  // Extract designer-related props
  const { 
  'data-obj-id': dataObjId, 
@@ -41,7 +44,7 @@ const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { sc
  checked={value ?? schema.checked ?? false}
  defaultChecked={value === undefined ? schema.defaultChecked : undefined}
  onCheckedChange={handleCheckedChange}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  required={schema.required}
  name={schema.name}
  {...toFormControlDomProps(checkboxProps)}

packages/components/src/renderers/form/combobox.tsx

@@ -12,7 +12,10 @@ import { Combobox } from '../../custom';
 import { toFormControlDomProps } from '../../lib/form-control-dom-props';
 
 ComponentRegistry.register('combobox', 
- ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+ ({ schema, disabled: hostDisabled, ...props }: { schema: ComboboxSchema; disabled?: boolean; [key: string]: any }) => {
+ // `hostDisabled` is `SchemaRenderer`'s EVALUATED verdict on `disabled` /
+ // `disabledOn`, not the raw authored key — which may be a predicate STRING,
+ // truthy however it evaluates (objectui#7238, precedent objectui#6169).
  const { 
  'data-obj-id': dataObjId, 
  'data-obj-type': dataObjType,
@@ -25,7 +28,7 @@ ComponentRegistry.register('combobox',
  options={schema.options || []}
  placeholder={schema.placeholder}
  value={schema.value}
- disabled={schema.disabled}
+ disabled={hostDisabled}
  className={schema.className} 
  {...toFormControlDomProps(comboboxProps)}
  {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}