Merge branch 'main' into rmt-1768-jsf-performance-ui-lags-when-a-field-contains-large-select

Author: ollyd

v0/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 0.12.2-beta.0 (2025-10-23)
+
+##### New Features
+
+* **v0:**  Support nested fieldset conditionals ([#156](https://github.com/remoteoss/json-schema-form/pull/156)) ([877e82e1](https://github.com/remoteoss/json-schema-form/commit/877e82e148d1ff6964ba634108f8ca821c040565))
+
 #### 0.12.1-beta.0 (2025-10-09)
 
 ##### Bug Fixes

v0/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.12.1-beta.0",
+  "version": "0.12.2-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <[email protected]> (https://remote.com/)",
   "license": "MIT",
@@ -43,7 +43,7 @@
   },
   "lint-staged": {
     "*.{js,jsx}": [
-      "npm run format"
+      "npm run format --prefix ./v0"
     ]
   },
   "dependencies": {

v0/package.json

@@ -6,7 +6,7 @@ const esbuild = require('esbuild');
 
 const pkg = require('../package.json');
 
-const licenseContent = fs.readFileSync(path.join(__dirname, '../LICENSE'), 'utf8');
+const licenseContent = fs.readFileSync(path.join(__dirname, '../../LICENSE'), 'utf8');
 const packageJson = require(path.resolve(__dirname, '../package.json'));
 const pkgVersion = packageJson.version;
 

v0/scripts/build.js

@@ -28,17 +28,23 @@ function isFieldRequired(node, field) {
 /**
  * Loops recursively through fieldset fields and returns an copy version of them
  * where the required property is updated.
+ * Since rebuildFieldset is called within a closure, we pass the current fields as parameter
+ * to restore the computed isVisible property.
  *
  * @param {Array} fields - list of fields of a fieldset
  * @param {Object} property - property that relates with the list of fields
  * @returns {Object}
  */
-function rebuildFieldset(fields, property) {
+function rebuildFieldset(fields, currentFields, property) {
   if (property?.properties) {
-    return fields.map((field) => {
+    return fields.map((field, index) => {
       const propertyConditionals = property.properties[field.name];
+      const isVisible = currentFields[index].isVisible;
       if (!propertyConditionals) {
-        return field;
+        return {
+          ...field,
+          isVisible,
+        };
       }
 
       const newFieldParams = extractParametersFromNode(propertyConditionals);
@@ -47,19 +53,22 @@ function rebuildFieldset(fields, property) {
         return {
           ...field,
           ...newFieldParams,
-          fields: rebuildFieldset(field.fields, propertyConditionals),
+          isVisible,
+          fields: rebuildFieldset(field.fields, currentFields[index].fields, propertyConditionals),
         };
       }
       return {
         ...field,
         ...newFieldParams,
+        isVisible,
         required: isFieldRequired(property, field),
       };
     });
   }
 
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     ...field,
+    isVisible: currentFields[index].isVisible,
     required: isFieldRequired(property, field),
   }));
 }
@@ -92,7 +101,7 @@ export function calculateConditionalProperties({ fieldParams, customProperties,
    *
    * @returns {calculateConditionalPropertiesReturn}
    */
-  return ({ isRequired, conditionBranch, formValues }) => {
+  return ({ isRequired, conditionBranch, formValues, currentField }) => {
     // Check if the current field is conditionally declared in the schema
     // console.log('::calc (closure original)', fieldParams.description);
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
@@ -110,7 +119,11 @@ export function calculateConditionalProperties({ fieldParams, customProperties,
       let fieldSetFields;
 
       if (fieldParams.inputType === supportedTypes.FIELDSET) {
-        fieldSetFields = rebuildFieldset(fieldParams.fields, conditionalProperty);
+        fieldSetFields = rebuildFieldset(
+          fieldParams.fields,
+          currentField.fields,
+          conditionalProperty
+        );
         newFieldParams.fields = fieldSetFields;
       }
 

v0/src/calculateConditionalProperties.js

@@ -7,7 +7,7 @@ import set from 'lodash/set';
 import { lazy } from 'yup';
 
 import { checkIfConditionMatchesProperties } from './internals/checkIfConditionMatches';
-import { supportedTypes, getInputType } from './internals/fields';
+import { supportedTypes } from './internals/fields';
 import { pickXKey } from './internals/helpers';
 import { processJSONLogicNode } from './jsonLogic';
 import { hasProperty } from './utils';
@@ -161,7 +161,7 @@ function getPrefillSubFieldValues(field, defaultValues, parentFieldKeyPath) {
       initialValue[field.name] = subFieldValues;
     }
   } else {
-    // getDefaultValues and getPrefillSubFieldValues have a circluar dependency, resulting in one having to be used before defined.
+    // getDefaultValues and getPrefillSubFieldValues have a circular dependency, resulting in one having to be used before defined.
     // As function declarations are hoisted this should not be a problem.
     // eslint-disable-next-line no-use-before-define
 
@@ -295,6 +295,7 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       isRequired: fieldIsRequired,
       conditionBranch: node,
       formValues,
+      currentField: field,
     });
     updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
@@ -336,9 +337,22 @@ export function processNode({
   const requiredFields = new Set(accRequired);
 
   // Go through the node properties definition and update each field accordingly
-  Object.keys(node.properties ?? []).forEach((fieldName) => {
+  Object.entries(node.properties ?? []).forEach(([fieldName, nestedNode]) => {
     const field = getField(fieldName, formFields);
     updateField(field, requiredFields, node, formValues, logic, { parentID });
+
+    // If we're processing a fieldset field node
+    // update the nested fields going through the node recursively.
+    const isFieldset = field?.inputType === supportedTypes.FIELDSET;
+    if (isFieldset) {
+      processNode({
+        node: nestedNode,
+        formValues: formValues[fieldName] || {},
+        formFields: field.fields,
+        parentID,
+        logic,
+      });
+    }
   });
 
   // Update required fields based on the `required` property and mutate node if needed
@@ -351,7 +365,7 @@ export function processNode({
 
   if (node.if !== undefined) {
     const matchesCondition = checkIfConditionMatchesProperties(node, formValues, formFields, logic);
-    // BUG HERE (unreleated) - what if it matches but doesn't has a then,
+    // BUG HERE (unrelated) - what if it matches but doesn't has a then,
     // it should do nothing, but instead it jumps to node.else when it shouldn't.
     if (matchesCondition && node.then) {
       const { required: branchRequired } = processNode({
@@ -408,22 +422,6 @@ export function processNode({
       });
   }
 
-  if (node.properties) {
-    Object.entries(node.properties).forEach(([name, nestedNode]) => {
-      const inputType = getInputType(nestedNode);
-      if (inputType === supportedTypes.FIELDSET) {
-        // It's a fieldset, which might contain scoped conditions
-        processNode({
-          node: nestedNode,
-          formValues: formValues[name] || {},
-          formFields: getField(name, formFields).fields,
-          parentID: name,
-          logic,
-        });
-      }
-    });
-  }
-
   if (node['x-jsf-logic']) {
     const { required: requiredFromLogic } = processJSONLogicNode({
       node: node['x-jsf-logic'],
@@ -451,14 +449,14 @@ export function processNode({
 function clearValuesIfNotVisible(fields, formValues) {
   fields.forEach(({ isVisible = true, name, inputType, fields: nestedFields }) => {
     if (!isVisible) {
-      // TODO I (Sandrina) think this doesn't work. I didn't find any test covering this scenario. Revisit later.
       formValues[name] = null;
     }
     if (inputType === supportedTypes.FIELDSET && nestedFields && formValues[name]) {
       clearValuesIfNotVisible(nestedFields, formValues[name]);
     }
   });
 }
+
 /**
  * Updates form fields properties based on the current form state and the JSON schema rules
  *
@@ -500,7 +498,7 @@ function getFieldOptions(node, presentation) {
     }));
   }
 
-  /** @deprecated - takes precendence in case a JSON Schema still has deprecated options */
+  /** @deprecated - takes precedence in case a JSON Schema still has deprecated options */
   if (presentation.options) {
     return presentation.options;
   }