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