@remoteoss/json-schema-form 0.11.14-dev.20250514100552 → 0.12.0-beta.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+#### 0.12.0-beta.0 (2025-06-25)
+
+##### New Features
+
+*  allow select fields to be made from anyOf ([#197](https://github.com/remoteoss/json-schema-form/pull/197)) ([d5da6ae8](https://github.com/remoteoss/json-schema-form/commit/d5da6ae8816a28c8b0011fc699bf351078d6f437))
+
+#### 0.11.15-beta.0 (2025-06-06)
+
+##### Bug Fixes
+
+* **v0:**  Handle computed presentational attributes correctly ([#195](https://github.com/remoteoss/json-schema-form/pull/195)) ([19c7ff5b](https://github.com/remoteoss/json-schema-form/commit/19c7ff5b4c5cc90bd1025a3ad3032076e4e25b65))
+
+#### 0.11.14-beta.0 (2025-05-14)
+
+##### Chores
+
+*  Reminder to publish GitHub release ([#183](https://github.com/remoteoss/json-schema-form/pull/183)) ([adfa8c14](https://github.com/remoteoss/json-schema-form/commit/adfa8c14ca118b1012642f39c8388cf2ba1614c9))
+
 #### 0.11.13-beta.0 (2025-05-05)
 
 ##### Bug Fixes

package/README.md

@@ -5,14 +5,16 @@
 <p align="center">
   <code>json-schema-form</code> is a headless UI form library powered by <a href="https://json-schema.org/">JSON Schemas</a>. 
 <br/>
-  It transforms JSON schemas into Javascript to be consumed by your UI libraries.
+  It transforms JSON schemas into Javascript `fields` to be more easily consumed by your UI libraries.
 </p>
 
 ---
 
 ### Why JSON Schemas for forms?
 
-JSON Schemas are the SSoT (Single Source of Truth) that allows you to share form's _structure_ and _validations_ between frontend and backend, regardless of the language used.
+JSON Schemas are the SSoT (Single Source of Truth) that allows you to share form's data _structure_ and _validations_ between the server (backend) and the client (frontend), regardless of the language used.
+
+You can use it beyond UI Forms, like lists, tables, and any other UI that needs structured JSON data.
 
 ## Installation
 
@@ -25,12 +27,18 @@ npm install @remoteoss/json-schema-form
 yarn install @remoteoss/json-schema-form
 ```
 
-## Documentation
+## Getting Started
+
+Check the 📚 **[JSF website](https://json-schema-form.vercel.app/)** for documentation.
 
-Check the 📚 **[JSF website](https://json-schema-form.vercel.app/)** for documentation and demos.
+### Playground
+
+Check the 🕹️ **[JSF Playground](https://json-schema-form.vercel.app/?path=/docs/playground--docs)** for demos.
 
 ## Contributing
 
 Read [CONTRIBUTING](CONTRIBUTING.md) to get started.
 
+We are working on the [next version v1.0](/next). A rewrite in TypeScript with major bugfixes and missing features. It aims to support the latest JSON Schema dialect 2020-12.
+
 _Backed by [Remote.com](https://remote.com/)_

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514100552
- Generated: Wed, 14 May 2025 10:06:23 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.0-beta.0
+ Generated: Wed, 25 Jun 2025 12:45:39 GMT
 
  MIT License
 
@@ -97,6 +97,75 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
+// src/internals/checkIfConditionMatches.js
+function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
+  if (typeof node.if === "boolean") {
+    return node.if;
+  }
+  if (node.if.anyOf) {
+    return node.if.anyOf.some(
+      (property) => checkIfConditionMatchesProperties({ if: property }, formValues, formFields, logic)
+    );
+  }
+  return Object.keys(node.if.properties ?? {}).every((name) => {
+    const currentProperty = node.if.properties[name];
+    const value = formValues[name];
+    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
+    value === null;
+    const hasIfExplicit = node.if.required?.includes(name);
+    if (hasEmptyValue && !hasIfExplicit) {
+      return true;
+    }
+    if (hasProperty(currentProperty, "const")) {
+      return compareFormValueWithSchemaValue(value, currentProperty.const);
+    }
+    if (currentProperty.contains?.pattern) {
+      const formValue = value || [];
+      if (Array.isArray(formValue)) {
+        const pattern = new RegExp(currentProperty.contains.pattern);
+        return (value || []).some((item) => pattern.test(item));
+      }
+    }
+    if (currentProperty.enum) {
+      return currentProperty.enum.includes(value);
+    }
+    if (currentProperty.properties) {
+      return checkIfConditionMatchesProperties(
+        { if: currentProperty },
+        formValues[name],
+        getField(name, formFields).fields,
+        logic
+      );
+    }
+    const field = getField(name, formFields);
+    return validateFieldSchema(
+      {
+        ...field,
+        ...currentProperty,
+        required: true
+      },
+      value
+    );
+  });
+}
+function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
+  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
+    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
+    if (Object.hasOwn(property, "const") && currentValue === property.const)
+      return true;
+    return false;
+  });
+  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
+    ([name, property]) => {
+      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
+      if (Object.hasOwn(property, "const") && currentValue === property.const)
+        return true;
+      return false;
+    }
+  );
+  return computedValuesMatch && validationsMatch;
+}
+
 // src/internals/helpers.js
 var import_merge = __toESM(require("lodash/fp/merge"));
 var import_get = __toESM(require("lodash/get"));
@@ -356,76 +425,6 @@ function _composeFieldCustomClosure(defaultComposeFn) {
   };
 }
 
-// src/internals/checkIfConditionMatches.js
-function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
-  if (typeof node.if === "boolean") {
-    return node.if;
-  }
-  if (node.if.anyOf) {
-    return node.if.anyOf.some(
-      (property) => checkIfConditionMatchesProperties({ if: property }, formValues, formFields, logic)
-    );
-  }
-  return Object.keys(node.if.properties ?? {}).every((name) => {
-    const currentProperty = node.if.properties[name];
-    const field = getField(name, formFields ?? []);
-    const isFieldsetField = field?.inputType === supportedTypes.FIELDSET;
-    const value = formValues?.[name] ?? (isFieldsetField ? {} : void 0);
-    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
-    value === null;
-    const hasIfExplicit = node.if.required?.includes(name);
-    if (hasEmptyValue && !hasIfExplicit) {
-      return true;
-    }
-    if (hasProperty(currentProperty, "const")) {
-      return compareFormValueWithSchemaValue(value, currentProperty.const);
-    }
-    if (currentProperty.contains?.pattern) {
-      const formValue = value || [];
-      if (Array.isArray(formValue)) {
-        const pattern = new RegExp(currentProperty.contains.pattern);
-        return (value || []).some((item) => pattern.test(item));
-      }
-    }
-    if (currentProperty.enum) {
-      return currentProperty.enum.includes(value);
-    }
-    if (currentProperty.properties) {
-      return checkIfConditionMatchesProperties(
-        { if: currentProperty },
-        formValues[name],
-        getField(name, formFields).fields,
-        logic
-      );
-    }
-    return validateFieldSchema(
-      {
-        ...field,
-        ...currentProperty,
-        required: true
-      },
-      value
-    );
-  });
-}
-function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
-  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
-    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
-    if (Object.hasOwn(property, "const") && currentValue === property.const)
-      return true;
-    return false;
-  });
-  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
-    ([name, property]) => {
-      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
-      if (Object.hasOwn(property, "const") && currentValue === property.const)
-        return true;
-      return false;
-    }
-  );
-  return computedValuesMatch && validationsMatch;
-}
-
 // src/jsonLogic.js
 var import_json_logic_js = __toESM(require("json-logic-js"));
 
@@ -968,9 +967,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -994,16 +1000,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values];
       }
       case "const":
       default: {
@@ -1445,8 +1456,8 @@ function getFieldOptions(node, presentation) {
   if (presentation.options) {
     return presentation.options;
   }
-  if (node.oneOf || presentation.inputType === "radio") {
-    return convertToOptions(node.oneOf || []);
+  if (node.oneOf || node.anyOf || presentation.inputType === "radio") {
+    return convertToOptions(node.oneOf || node.anyOf || []);
   }
   if (node.items?.anyOf) {
     return convertToOptions(node.items.anyOf);

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514100552
- Generated: Wed, 14 May 2025 10:06:23 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.0-beta.0
+ Generated: Wed, 25 Jun 2025 12:45:39 GMT
 
  MIT License
 
@@ -60,6 +60,75 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
+// src/internals/checkIfConditionMatches.js
+function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
+  if (typeof node.if === "boolean") {
+    return node.if;
+  }
+  if (node.if.anyOf) {
+    return node.if.anyOf.some(
+      (property) => checkIfConditionMatchesProperties({ if: property }, formValues, formFields, logic)
+    );
+  }
+  return Object.keys(node.if.properties ?? {}).every((name) => {
+    const currentProperty = node.if.properties[name];
+    const value = formValues[name];
+    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
+    value === null;
+    const hasIfExplicit = node.if.required?.includes(name);
+    if (hasEmptyValue && !hasIfExplicit) {
+      return true;
+    }
+    if (hasProperty(currentProperty, "const")) {
+      return compareFormValueWithSchemaValue(value, currentProperty.const);
+    }
+    if (currentProperty.contains?.pattern) {
+      const formValue = value || [];
+      if (Array.isArray(formValue)) {
+        const pattern = new RegExp(currentProperty.contains.pattern);
+        return (value || []).some((item) => pattern.test(item));
+      }
+    }
+    if (currentProperty.enum) {
+      return currentProperty.enum.includes(value);
+    }
+    if (currentProperty.properties) {
+      return checkIfConditionMatchesProperties(
+        { if: currentProperty },
+        formValues[name],
+        getField(name, formFields).fields,
+        logic
+      );
+    }
+    const field = getField(name, formFields);
+    return validateFieldSchema(
+      {
+        ...field,
+        ...currentProperty,
+        required: true
+      },
+      value
+    );
+  });
+}
+function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
+  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
+    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
+    if (Object.hasOwn(property, "const") && currentValue === property.const)
+      return true;
+    return false;
+  });
+  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
+    ([name, property]) => {
+      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
+      if (Object.hasOwn(property, "const") && currentValue === property.const)
+        return true;
+      return false;
+    }
+  );
+  return computedValuesMatch && validationsMatch;
+}
+
 // src/internals/helpers.js
 import merge from "lodash/fp/merge";
 import get from "lodash/get";
@@ -319,76 +388,6 @@ function _composeFieldCustomClosure(defaultComposeFn) {
   };
 }
 
-// src/internals/checkIfConditionMatches.js
-function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
-  if (typeof node.if === "boolean") {
-    return node.if;
-  }
-  if (node.if.anyOf) {
-    return node.if.anyOf.some(
-      (property) => checkIfConditionMatchesProperties({ if: property }, formValues, formFields, logic)
-    );
-  }
-  return Object.keys(node.if.properties ?? {}).every((name) => {
-    const currentProperty = node.if.properties[name];
-    const field = getField(name, formFields ?? []);
-    const isFieldsetField = field?.inputType === supportedTypes.FIELDSET;
-    const value = formValues?.[name] ?? (isFieldsetField ? {} : void 0);
-    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
-    value === null;
-    const hasIfExplicit = node.if.required?.includes(name);
-    if (hasEmptyValue && !hasIfExplicit) {
-      return true;
-    }
-    if (hasProperty(currentProperty, "const")) {
-      return compareFormValueWithSchemaValue(value, currentProperty.const);
-    }
-    if (currentProperty.contains?.pattern) {
-      const formValue = value || [];
-      if (Array.isArray(formValue)) {
-        const pattern = new RegExp(currentProperty.contains.pattern);
-        return (value || []).some((item) => pattern.test(item));
-      }
-    }
-    if (currentProperty.enum) {
-      return currentProperty.enum.includes(value);
-    }
-    if (currentProperty.properties) {
-      return checkIfConditionMatchesProperties(
-        { if: currentProperty },
-        formValues[name],
-        getField(name, formFields).fields,
-        logic
-      );
-    }
-    return validateFieldSchema(
-      {
-        ...field,
-        ...currentProperty,
-        required: true
-      },
-      value
-    );
-  });
-}
-function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
-  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property]) => {
-    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
-    if (Object.hasOwn(property, "const") && currentValue === property.const)
-      return true;
-    return false;
-  });
-  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
-    ([name, property]) => {
-      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
-      if (Object.hasOwn(property, "const") && currentValue === property.const)
-        return true;
-      return false;
-    }
-  );
-  return computedValuesMatch && validationsMatch;
-}
-
 // src/jsonLogic.js
 import jsonLogic from "json-logic-js";
 
@@ -931,9 +930,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -957,16 +963,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values];
       }
       case "const":
       default: {
@@ -1408,8 +1419,8 @@ function getFieldOptions(node, presentation) {
   if (presentation.options) {
     return presentation.options;
   }
-  if (node.oneOf || presentation.inputType === "radio") {
-    return convertToOptions(node.oneOf || []);
+  if (node.oneOf || node.anyOf || presentation.inputType === "radio") {
+    return convertToOptions(node.oneOf || node.anyOf || []);
   }
   if (node.items?.anyOf) {
     return convertToOptions(node.items.anyOf);

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514100552
- Generated: Wed, 14 May 2025 10:06:23 GMT
+ NPM Package: @remoteoss/json-schema-form@0.12.0-beta.0
+ Generated: Wed, 25 Jun 2025 12:45:39 GMT
 
  MIT License
 
@@ -11577,6 +11577,75 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
+// src/internals/checkIfConditionMatches.js
+function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
+  if (typeof node.if === "boolean") {
+    return node.if;
+  }
+  if (node.if.anyOf) {
+    return node.if.anyOf.some(
+      (property2) => checkIfConditionMatchesProperties({ if: property2 }, formValues, formFields, logic)
+    );
+  }
+  return Object.keys(node.if.properties ?? {}).every((name) => {
+    const currentProperty = node.if.properties[name];
+    const value = formValues[name];
+    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
+    value === null;
+    const hasIfExplicit = node.if.required?.includes(name);
+    if (hasEmptyValue && !hasIfExplicit) {
+      return true;
+    }
+    if (hasProperty(currentProperty, "const")) {
+      return compareFormValueWithSchemaValue(value, currentProperty.const);
+    }
+    if (currentProperty.contains?.pattern) {
+      const formValue = value || [];
+      if (Array.isArray(formValue)) {
+        const pattern = new RegExp(currentProperty.contains.pattern);
+        return (value || []).some((item) => pattern.test(item));
+      }
+    }
+    if (currentProperty.enum) {
+      return currentProperty.enum.includes(value);
+    }
+    if (currentProperty.properties) {
+      return checkIfConditionMatchesProperties(
+        { if: currentProperty },
+        formValues[name],
+        getField(name, formFields).fields,
+        logic
+      );
+    }
+    const field = getField(name, formFields);
+    return validateFieldSchema(
+      {
+        ...field,
+        ...currentProperty,
+        required: true
+      },
+      value
+    );
+  });
+}
+function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
+  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property2]) => {
+    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
+    if (Object.hasOwn(property2, "const") && currentValue === property2.const)
+      return true;
+    return false;
+  });
+  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
+    ([name, property2]) => {
+      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
+      if (Object.hasOwn(property2, "const") && currentValue === property2.const)
+        return true;
+      return false;
+    }
+  );
+  return computedValuesMatch && validationsMatch;
+}
+
 // src/internals/helpers.js
 var import_merge = __toESM(require_merge2());
 var import_get2 = __toESM(require_get());
@@ -11836,76 +11905,6 @@ function _composeFieldCustomClosure(defaultComposeFn) {
   };
 }
 
-// src/internals/checkIfConditionMatches.js
-function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
-  if (typeof node.if === "boolean") {
-    return node.if;
-  }
-  if (node.if.anyOf) {
-    return node.if.anyOf.some(
-      (property2) => checkIfConditionMatchesProperties({ if: property2 }, formValues, formFields, logic)
-    );
-  }
-  return Object.keys(node.if.properties ?? {}).every((name) => {
-    const currentProperty = node.if.properties[name];
-    const field = getField(name, formFields ?? []);
-    const isFieldsetField = field?.inputType === supportedTypes.FIELDSET;
-    const value = formValues?.[name] ?? (isFieldsetField ? {} : void 0);
-    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
-    value === null;
-    const hasIfExplicit = node.if.required?.includes(name);
-    if (hasEmptyValue && !hasIfExplicit) {
-      return true;
-    }
-    if (hasProperty(currentProperty, "const")) {
-      return compareFormValueWithSchemaValue(value, currentProperty.const);
-    }
-    if (currentProperty.contains?.pattern) {
-      const formValue = value || [];
-      if (Array.isArray(formValue)) {
-        const pattern = new RegExp(currentProperty.contains.pattern);
-        return (value || []).some((item) => pattern.test(item));
-      }
-    }
-    if (currentProperty.enum) {
-      return currentProperty.enum.includes(value);
-    }
-    if (currentProperty.properties) {
-      return checkIfConditionMatchesProperties(
-        { if: currentProperty },
-        formValues[name],
-        getField(name, formFields).fields,
-        logic
-      );
-    }
-    return validateFieldSchema(
-      {
-        ...field,
-        ...currentProperty,
-        required: true
-      },
-      value
-    );
-  });
-}
-function checkIfMatchesValidationsAndComputedValues(node, formValues, logic, parentID) {
-  const validationsMatch = Object.entries(node.if.validations ?? {}).every(([name, property2]) => {
-    const currentValue = logic.getScope(parentID).applyValidationRuleInCondition(name, formValues);
-    if (Object.hasOwn(property2, "const") && currentValue === property2.const)
-      return true;
-    return false;
-  });
-  const computedValuesMatch = Object.entries(node.if.computedValues ?? {}).every(
-    ([name, property2]) => {
-      const currentValue = logic.getScope(parentID).applyComputedValueRuleInCondition(name, formValues);
-      if (Object.hasOwn(property2, "const") && currentValue === property2.const)
-        return true;
-      return false;
-    }
-  );
-  return computedValuesMatch && validationsMatch;
-}
-
 // src/jsonLogic.js
 var import_json_logic_js = __toESM(require_logic());
 
@@ -12447,9 +12446,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -12473,16 +12479,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values2 = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values2[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values2[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values2];
       }
       case "const":
       default: {
@@ -12924,8 +12935,8 @@ function getFieldOptions(node, presentation) {
   if (presentation.options) {
     return presentation.options;
   }
-  if (node.oneOf || presentation.inputType === "radio") {
-    return convertToOptions(node.oneOf || []);
+  if (node.oneOf || node.anyOf || presentation.inputType === "radio") {
+    return convertToOptions(node.oneOf || node.anyOf || []);
   }
   if (node.items?.anyOf) {
     return convertToOptions(node.items.anyOf);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.11.14-dev.20250514100552",
+  "version": "0.12.0-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",

package/src/tests/conditions.test.js

@@ -596,74 +596,6 @@ describe('Conditional with anyOf', () => {
   });
 });
 
-describe('Conditional with fieldset', () => {
-  const schema = {
-    additionalProperties: false,
-    type: 'object',
-    properties: {
-      field_a: {
-        type: 'object',
-        properties: {
-          min: { type: 'number' },
-          max: { type: 'number' },
-        },
-      },
-      field_b: { type: 'string' },
-    },
-    allOf: [
-      {
-        if: {
-          properties: {
-            field_a: {
-              properties: {
-                min: {
-                  minimum: 10,
-                },
-              },
-              required: ['min'],
-            },
-          },
-          required: ['field_a'],
-        },
-        then: {
-          required: ['field_b'],
-        },
-        else: {
-          properties: {
-            field_b: false,
-          },
-        },
-      },
-    ],
-  };
-
-  it('handles true case', () => {
-    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-
-    expect(fields[1].isVisible).toBe(false);
-    expect(handleValidation({ field_a: { min: 100 } }).formErrors).toEqual({
-      field_b: 'Required field',
-    });
-    expect(fields[1].isVisible).toBe(true);
-  });
-
-  it('handles false case', () => {
-    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-
-    expect(fields[1].isVisible).toBe(false);
-    expect(handleValidation({ field_a: { min: 1 } }).formErrors).toBeUndefined();
-    expect(fields[1].isVisible).toBe(false);
-  });
-
-  it('handles undefined fieldset case', () => {
-    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-
-    expect(fields[1].isVisible).toBe(false);
-    expect(handleValidation({}).formErrors).toBeUndefined();
-    expect(fields[1].isVisible).toBe(false);
-  });
-});
-
 describe('Conditionals - bugs and code-smells', () => {
   // Why do we have these bugs?
   // To be honest we never realized it much later later.

package/src/tests/createHeadlessForm.test.js

@@ -571,6 +571,44 @@ describe('createHeadlessForm', () => {
         });
       });
 
+      it('support "select" field type from anyOf', () => {
+        const schema = {
+          type: 'object',
+          properties: {
+            browser: {
+              type: 'string',
+              anyOf: [
+                { title: 'Chrome', const: 'chr' },
+                { title: 'Firefox', const: 'ff' },
+                { title: 'Add new option', pattern: '.*' },
+              ],
+              'x-jsf-presentation': {
+                inputType: 'select',
+              },
+            },
+          },
+        };
+
+        const { fields } = createHeadlessForm(schema);
+        const fieldSelect = fields[0];
+        expect(fieldSelect).toMatchObject({
+          options: [
+            {
+              value: 'chr',
+              label: 'Chrome',
+            },
+            {
+              value: 'ff',
+              label: 'Firefox',
+            },
+            {
+              label: 'Add new option',
+              pattern: '.*',
+            },
+          ],
+        });
+      });
+
       it('supports "select" field type with multiple options @deprecated', () => {
         const result = createHeadlessForm(schemaInputTypeSelectMultipleDeprecated);
         expect(result).toMatchObject({

package/src/tests/helpers.custom.js

@@ -205,7 +205,7 @@ export const schemaInputTypeHidden = {
     a_hidden_select_multiple: {
       ...schemaInputTypeCountriesMultiple.properties.nationality,
       title: 'Select multi hidden',
-      default: ['Albania, Algeria'],
+      default: ['Albania', 'Algeria'],
       'x-jsf-presentation': { inputType: 'hidden' },
       type: 'array',
     },

package/src/tests/helpers.js

@@ -448,20 +448,19 @@ export const mockGroupArrayInput = {
       sex: {
         description:
           'We know sex is non-binary but for insurance and payroll purposes, we need to collect this information.',
-        enum: ['female', 'male'],
         'x-jsf-presentation': {
           inputType: 'radio',
-          options: [
-            {
-              label: 'Male',
-              value: 'male',
-            },
-            {
-              label: 'Female',
-              value: 'female',
-            },
-          ],
         },
+        oneOf: [
+          {
+            const: 'male',
+            title: 'Male',
+          },
+          {
+            const: 'female',
+            title: 'Female',
+          },
+        ],
         title: 'Child Sex',
         type: 'string',
       },
@@ -1469,7 +1468,6 @@ export const schemaDynamicValidationConst = {
   required: ['a_fieldset', 'validate_tabs', 'mandatory_group_array'],
   'x-jsf-order': ['validate_tabs', 'a_fieldset', 'mandatory_group_array', 'a_group_array'],
 };
-
 export const schemaDynamicValidationMinimumMaximum = JSONSchemaBuilder()
   .addInput({
     a_number: mockNumberInput,
@@ -1543,6 +1541,7 @@ export const schemaDynamicValidationContains = JSONSchemaBuilder()
       },
       'x-jsf-presentation': {
         inputType: 'select',
+        multiple: true,
         options: [
           {
             label: 'All',

package/src/tests/jsonLogic.fixtures.js

@@ -364,6 +364,55 @@ export const schemaWithComputedAttributesAndErrorMessages = {
   },
 };
 
+export const schemaWithComputedPresentationAttributes = {
+  properties: {
+    amount: {
+      description: 'Total amount to be reimbursed, including taxes.',
+      minimum: 0,
+      title: 'Total amount',
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        'x-jsf-presentation': {
+          currency: 'currency_selected',
+        },
+      },
+      'x-jsf-presentation': {
+        currency: '---',
+        inputType: 'money',
+      },
+    },
+    currency: {
+      default: 'USD',
+      description: 'Currency in which the expense was paid.',
+      oneOf: [
+        {
+          const: 'UGX',
+          title: 'UGX - Ugandan Shilling',
+        },
+        {
+          const: 'USD',
+          title: 'USD - United States Dollar',
+        },
+      ],
+      title: 'Currency',
+      type: 'string',
+      'x-jsf-presentation': {
+        inputType: 'select',
+      },
+    },
+  },
+  type: 'object',
+  'x-jsf-logic': {
+    computedValues: {
+      currency_selected: {
+        rule: {
+          var: 'currency',
+        },
+      },
+    },
+  },
+};
+
 export const schemaWithDeepVarThatDoesNotExist = {
   properties: {
     field_a: {

package/src/tests/jsonLogic.test.js

@@ -35,6 +35,7 @@ import {
   schemaWithValidationThatDoesNotExistOnProperty,
   badSchemaThatWillNotSetAForcedValue,
   schemaWithReduceAccumulator,
+  schemaWithComputedPresentationAttributes,
 } from './jsonLogic.fixtures';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -385,6 +386,17 @@ describe('jsonLogic: cross-values validations', () => {
       expect(fieldB.statement).toEqual({ description: 'Must be bigger than 4 and smaller than 8' });
     });
 
+    it('presentation attributes work', () => {
+      const { fields, handleValidation } = createHeadlessForm(
+        schemaWithComputedPresentationAttributes,
+        { strictInputType: false }
+      );
+      const fieldB = fields.find((i) => i.name === 'amount');
+      expect(handleValidation({ currency: 'UGX' }).formErrors).toEqual(undefined);
+      expect(fieldB.inputType).toEqual('money');
+      expect(fieldB.currency).toEqual('UGX');
+    });
+
     it('Use a inline-rule in a schema for a title attribute', () => {
       const { fields, handleValidation } = createHeadlessForm(
         schemaWithInlineRuleForComputedAttributeWithCopy,