@asteby/metacore-runtime-react 28.5.0 → 28.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 28.6.0
+
+### Minor Changes
+
+- 21c5268: Soporta `visible_when` a nivel de SECCIÓN en `form_layout` (kernel v0.84.0). Cuando una sección declara un predicado `visible_when` que evalúa falso contra los valores actuales del formulario, la sección se oculta por completo junto con sus campos; en modo wizard (steps) ese paso desaparece de la secuencia de navegación sin romper Anterior/Siguiente ni el submit del último paso. Reutiliza el mismo evaluador (`getVisibleWhen`/`evaluateVisibleWhen`) que ya usan los campos, tolerando snake_case y camelCase. El `visible_when` de cada campo se sigue respetando dentro de una sección visible, y sin `visible_when` de sección el comportamiento es idéntico al actual.
+
 ## 28.5.0
 
 ### Minor Changes

package/dist/dialogs/dynamic-record.js

@@ -598,7 +598,7 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
     // their section. Empty sections drop out for free. Steps mode only drives a
     // wizard in editable modes — view mode always stacks the sections.
     const formLayout = modalMeta?.form_layout ?? modalMeta?.formLayout;
-    const groups = groupFieldsBySection(visibleFields, formLayout);
+    const groups = groupFieldsBySection(visibleFields, formLayout, formValues);
     const isSteps = isEditable && formLayout?.mode === 'steps' && groups.length > 1;
     const clampedStep = Math.min(stepIndex, Math.max(groups.length - 1, 0));
     const isLastStep = clampedStep === groups.length - 1;

package/dist/dynamic-form.js

@@ -53,7 +53,7 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
     // because visibleFields is already visibility-filtered). Without a layout
     // this is a single default group → the render below collapses to the legacy
     // flat grid, byte-for-byte.
-    const groups = useMemo(() => groupFieldsBySection(visibleFields, formLayout), [visibleFields, formLayout]);
+    const groups = useMemo(() => groupFieldsBySection(visibleFields, formLayout, values), [visibleFields, formLayout, values]);
     const isSteps = formLayout?.mode === 'steps' && groups.length > 1;
     // Wizard step cursor (steps mode only). Clamped whenever the group count
     // shrinks (a visible_when flip can empty a trailing step's section).

package/dist/form-layout.d.ts

@@ -1,3 +1,4 @@
+import type { VisibleWhen } from './types';
 /** One declared section of a model form. `title`/`description` arrive already
  * localized from the kernel and are rendered verbatim. */
 export interface FormSection {
@@ -6,6 +7,12 @@ export interface FormSection {
     description?: string;
     /** Sections mode only: render this section collapsed on first paint. */
     collapsed?: boolean;
+    /** Section-level visibility gate (kernel v0.84.0). When present and its
+     * predicate evaluates false against the live form values, the whole section
+     * is omitted (and in steps mode its wizard step drops from the sequence).
+     * Tolerates the camelCase alias, same as fields. */
+    visible_when?: VisibleWhen;
+    visibleWhen?: VisibleWhen;
 }
 /** Model-level layout directive. `mode` defaults to `"sections"`. */
 export interface FormLayout {
@@ -47,8 +54,15 @@ export declare function getFieldSection(field: {
  *    section whose only members are hidden by `visible_when` never renders an
  *    empty shell (and never yields an empty wizard step). Because the caller
  *    passes the already visibility-filtered list, this falls out for free.
+ *  - A section declaring its OWN `visible_when` is dropped whole (before its
+ *    fields are even collected) whenever the predicate evaluates false against
+ *    `values`, reusing the SAME evaluator the fields use. In steps mode the
+ *    caller derives the wizard sequence from these groups, so a hidden section
+ *    simply never becomes a step. Section-less / unknown-section fields are
+ *    never gated by any section predicate. Without a section `visible_when`
+ *    (or without `values`), behaviour is byte-for-byte the legacy path.
  */
 export declare function groupFieldsBySection<F extends {
     section?: string;
-}>(fields: F[], layout: FormLayout | undefined): FieldGroup<F>[];
+}>(fields: F[], layout: FormLayout | undefined, values?: Record<string, any> | null): FieldGroup<F>[];
 //# sourceMappingURL=form-layout.d.ts.map

package/dist/form-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.d.ts","sourceRoot":"","sources":["../src/form-layout.ts"],"names":[],"mappings":"AAgBA;0DAC0D;AAC1D,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,qEAAqE;AACrE,MAAM,WAAW,UAAU;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAC3B;AAED;oDACoD;AACpD,MAAM,WAAW,UAAU,CAAC,CAAC;IACzB,0DAA0D;IAC1D,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kFAAkF;IAClF,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,CAAC,EAAE,CAAA;CACd;AAED,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,gBAAgB,CAAA;AAEhD,yEAAyE;AACzE,wBAAgB,eAAe,CAC3B,KAAK,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,GACjE,MAAM,GAAG,SAAS,CAIpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAC/D,MAAM,EAAE,CAAC,EAAE,EACX,MAAM,EAAE,UAAU,GAAG,SAAS,GAC/B,UAAU,CAAC,CAAC,CAAC,EAAE,CAsCjB"}
+{"version":3,"file":"form-layout.d.ts","sourceRoot":"","sources":["../src/form-layout.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C;0DAC0D;AAC1D,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;wDAGoD;IACpD,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;CAC5B;AAED,qEAAqE;AACrE,MAAM,WAAW,UAAU;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAC3B;AAED;oDACoD;AACpD,MAAM,WAAW,UAAU,CAAC,CAAC;IACzB,0DAA0D;IAC1D,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kFAAkF;IAClF,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,CAAC,EAAE,CAAA;CACd;AAED,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,gBAAgB,CAAA;AAEhD,yEAAyE;AACzE,wBAAgB,eAAe,CAC3B,KAAK,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,GACjE,MAAM,GAAG,SAAS,CAIpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAC/D,MAAM,EAAE,CAAC,EAAE,EACX,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GACpC,UAAU,CAAC,CAAC,CAAC,EAAE,CAoDjB"}

package/dist/form-layout.js

@@ -13,6 +13,7 @@
 // (`dynamic-form.tsx`, `dialogs/dynamic-record.tsx`) share one tested
 // implementation and the modal-render machinery never has to be booted under
 // happy-dom just to assert the grouping (same approach as PR #673).
+import { evaluateVisibleWhen, getVisibleWhen } from './dynamic-form-schema';
 /** The synthetic key of the orphan group (fields with no / unknown `section`). */
 export const DEFAULT_SECTION_KEY = '__default__';
 /** Reads a field's `section` reference, tolerating a camelCase alias. */
@@ -38,12 +39,27 @@ export function getFieldSection(field) {
  *    section whose only members are hidden by `visible_when` never renders an
  *    empty shell (and never yields an empty wizard step). Because the caller
  *    passes the already visibility-filtered list, this falls out for free.
+ *  - A section declaring its OWN `visible_when` is dropped whole (before its
+ *    fields are even collected) whenever the predicate evaluates false against
+ *    `values`, reusing the SAME evaluator the fields use. In steps mode the
+ *    caller derives the wizard sequence from these groups, so a hidden section
+ *    simply never becomes a step. Section-less / unknown-section fields are
+ *    never gated by any section predicate. Without a section `visible_when`
+ *    (or without `values`), behaviour is byte-for-byte the legacy path.
  */
-export function groupFieldsBySection(fields, layout) {
+export function groupFieldsBySection(fields, layout, values) {
     if (!layout?.sections?.length) {
         return [{ key: DEFAULT_SECTION_KEY, isDefault: true, fields }];
     }
-    const known = new Set(layout.sections.map((s) => s.key));
+    // Sections whose own `visible_when` predicate evaluates false are hidden
+    // WHOLESALE: the section never emits a group/step AND its member fields are
+    // dropped (they must not leak into the default group). Reuses the same
+    // field-level evaluator — no duplicated logic. A `declared` set keeps a
+    // field targeting a hidden section from being treated as "unknown section"
+    // and orphaned.
+    const declared = new Set(layout.sections.map((s) => s.key));
+    const visibleSections = layout.sections.filter((s) => evaluateVisibleWhen(getVisibleWhen(s), values));
+    const known = new Set(visibleSections.map((s) => s.key));
     const bySection = new Map();
     const orphans = [];
     for (const f of fields) {
@@ -55,6 +71,10 @@ export function groupFieldsBySection(fields, layout) {
             else
                 bySection.set(sec, [f]);
         }
+        else if (sec && declared.has(sec)) {
+            // Belongs to a declared-but-hidden section → drop the field.
+            continue;
+        }
         else {
             orphans.push(f);
         }
@@ -64,7 +84,7 @@ export function groupFieldsBySection(fields, layout) {
     if (orphans.length) {
         groups.push({ key: DEFAULT_SECTION_KEY, isDefault: true, fields: orphans });
     }
-    for (const s of layout.sections) {
+    for (const s of visibleSections) {
         const secFields = bySection.get(s.key);
         if (!secFields || secFields.length === 0)
             continue; // hide empty section

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "28.5.0",
+  "version": "28.6.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/form-layout.test.ts

@@ -111,3 +111,91 @@ describe('groupFieldsBySection — steps', () => {
         expect(groups.map(g => g.key)).toEqual(['who', 'pay'])
     })
 })
+
+describe('groupFieldsBySection — section-level visible_when (kernel v0.84.0)', () => {
+    // A discriminator field `kind` gates the `company` section: only visible for
+    // business customers. Tolerate both snake_case and camelCase authoring.
+    const gatedLayout: FormLayout = {
+        mode: 'sections',
+        sections: [
+            { key: 'general', title: 'General' },
+            {
+                key: 'company',
+                title: 'Empresa',
+                visible_when: { field: 'kind', equals: 'business' },
+            },
+        ],
+    }
+
+    const fields: F[] = [
+        { key: 'name', section: 'general' },
+        { key: 'tax_id', section: 'company' },
+    ]
+
+    it('hides the section AND its fields when the predicate is false', () => {
+        const groups = groupFieldsBySection(fields, gatedLayout, { kind: 'person' })
+        // `company` never appears, and `tax_id` is not leaked into any group.
+        expect(groups.map(g => g.key)).toEqual(['general'])
+        const allFields = groups.flatMap(g => g.fields.map(f => f.key))
+        expect(allFields).toEqual(['name'])
+    })
+
+    it('shows the section when the predicate is satisfied', () => {
+        const groups = groupFieldsBySection(fields, gatedLayout, { kind: 'business' })
+        expect(groups.map(g => g.key)).toEqual(['general', 'company'])
+        expect(groups[1].fields.map(f => f.key)).toEqual(['tax_id'])
+    })
+
+    it('tolerates the camelCase visibleWhen alias', () => {
+        const camelLayout: FormLayout = {
+            mode: 'sections',
+            sections: [
+                { key: 'general', title: 'General' },
+                { key: 'company', visibleWhen: { field: 'kind', in: ['business'] } },
+            ],
+        }
+        expect(groupFieldsBySection(fields, camelLayout, { kind: 'person' }).map(g => g.key)).toEqual([
+            'general',
+        ])
+        expect(groupFieldsBySection(fields, camelLayout, { kind: 'business' }).map(g => g.key)).toEqual([
+            'general',
+            'company',
+        ])
+    })
+
+    it('without values (or without a section predicate) behaves exactly like before', () => {
+        // No values passed → a predicated section reads its gate field as '' and
+        // stays hidden (equals miss), while an ungated layout is untouched.
+        const plain = groupFieldsBySection(fields, {
+            mode: 'sections',
+            sections: [{ key: 'general' }, { key: 'company' }],
+        })
+        expect(plain.map(g => g.key)).toEqual(['general', 'company'])
+    })
+
+    it('drops a wizard step whose section is gated off, preserving navigable order', () => {
+        const stepsGated: FormLayout = {
+            mode: 'steps',
+            sections: [
+                { key: 'who', title: 'Cliente' },
+                {
+                    key: 'company',
+                    title: 'Empresa',
+                    visible_when: { field: 'kind', equals: 'business' },
+                },
+                { key: 'pay', title: 'Pago' },
+            ],
+        }
+        const stepFields: F[] = [
+            { key: 'customer_id', section: 'who' },
+            { key: 'tax_id', section: 'company' },
+            { key: 'amount', section: 'pay' },
+        ]
+        // person → company step removed: wizard is who → pay, submit still on last.
+        const hidden = groupFieldsBySection(stepFields, stepsGated, { kind: 'person' })
+        expect(hidden.map(g => g.key)).toEqual(['who', 'pay'])
+        // business → all three steps in order.
+        const shown = groupFieldsBySection(stepFields, stepsGated, { kind: 'business' })
+        expect(shown.map(g => g.key)).toEqual(['who', 'company', 'pay'])
+    })
+})

package/src/dialogs/dynamic-record.tsx

@@ -884,7 +884,7 @@ export function DynamicRecordDialog({
     // their section. Empty sections drop out for free. Steps mode only drives a
     // wizard in editable modes — view mode always stacks the sections.
     const formLayout = modalMeta?.form_layout ?? modalMeta?.formLayout
-    const groups = groupFieldsBySection(visibleFields, formLayout)
+    const groups = groupFieldsBySection(visibleFields, formLayout, formValues)
     const isSteps = isEditable && formLayout?.mode === 'steps' && groups.length > 1
     const clampedStep = Math.min(stepIndex, Math.max(groups.length - 1, 0))
     const isLastStep = clampedStep === groups.length - 1

package/src/dynamic-form.tsx

@@ -113,8 +113,8 @@ export function DynamicForm({
     // this is a single default group → the render below collapses to the legacy
     // flat grid, byte-for-byte.
     const groups = useMemo(
-        () => groupFieldsBySection(visibleFields, formLayout),
-        [visibleFields, formLayout],
+        () => groupFieldsBySection(visibleFields, formLayout, values),
+        [visibleFields, formLayout, values],
     )
     const isSteps = formLayout?.mode === 'steps' && groups.length > 1
 

package/src/form-layout.ts

@@ -14,6 +14,9 @@
 // implementation and the modal-render machinery never has to be booted under
 // happy-dom just to assert the grouping (same approach as PR #673).
 
+import type { VisibleWhen } from './types'
+import { evaluateVisibleWhen, getVisibleWhen } from './dynamic-form-schema'
+
 /** One declared section of a model form. `title`/`description` arrive already
  * localized from the kernel and are rendered verbatim. */
 export interface FormSection {
@@ -22,6 +25,12 @@ export interface FormSection {
     description?: string
     /** Sections mode only: render this section collapsed on first paint. */
     collapsed?: boolean
+    /** Section-level visibility gate (kernel v0.84.0). When present and its
+     * predicate evaluates false against the live form values, the whole section
+     * is omitted (and in steps mode its wizard step drops from the sequence).
+     * Tolerates the camelCase alias, same as fields. */
+    visible_when?: VisibleWhen
+    visibleWhen?: VisibleWhen
 }
 
 /** Model-level layout directive. `mode` defaults to `"sections"`. */
@@ -71,16 +80,35 @@ export function getFieldSection(
  *    section whose only members are hidden by `visible_when` never renders an
  *    empty shell (and never yields an empty wizard step). Because the caller
  *    passes the already visibility-filtered list, this falls out for free.
+ *  - A section declaring its OWN `visible_when` is dropped whole (before its
+ *    fields are even collected) whenever the predicate evaluates false against
+ *    `values`, reusing the SAME evaluator the fields use. In steps mode the
+ *    caller derives the wizard sequence from these groups, so a hidden section
+ *    simply never becomes a step. Section-less / unknown-section fields are
+ *    never gated by any section predicate. Without a section `visible_when`
+ *    (or without `values`), behaviour is byte-for-byte the legacy path.
  */
 export function groupFieldsBySection<F extends { section?: string }>(
     fields: F[],
     layout: FormLayout | undefined,
+    values?: Record<string, any> | null,
 ): FieldGroup<F>[] {
     if (!layout?.sections?.length) {
         return [{ key: DEFAULT_SECTION_KEY, isDefault: true, fields }]
     }
 
-    const known = new Set(layout.sections.map((s) => s.key))
+    // Sections whose own `visible_when` predicate evaluates false are hidden
+    // WHOLESALE: the section never emits a group/step AND its member fields are
+    // dropped (they must not leak into the default group). Reuses the same
+    // field-level evaluator — no duplicated logic. A `declared` set keeps a
+    // field targeting a hidden section from being treated as "unknown section"
+    // and orphaned.
+    const declared = new Set(layout.sections.map((s) => s.key))
+    const visibleSections = layout.sections.filter((s) =>
+        evaluateVisibleWhen(getVisibleWhen(s), values),
+    )
+
+    const known = new Set(visibleSections.map((s) => s.key))
     const bySection = new Map<string, F[]>()
     const orphans: F[] = []
 
@@ -90,6 +118,9 @@ export function groupFieldsBySection<F extends { section?: string }>(
             const arr = bySection.get(sec)
             if (arr) arr.push(f)
             else bySection.set(sec, [f])
+        } else if (sec && declared.has(sec)) {
+            // Belongs to a declared-but-hidden section → drop the field.
+            continue
         } else {
             orphans.push(f)
         }
@@ -100,7 +131,7 @@ export function groupFieldsBySection<F extends { section?: string }>(
     if (orphans.length) {
         groups.push({ key: DEFAULT_SECTION_KEY, isDefault: true, fields: orphans })
     }
-    for (const s of layout.sections) {
+    for (const s of visibleSections) {
         const secFields = bySection.get(s.key)
         if (!secFields || secFields.length === 0) continue // hide empty section
         groups.push({