@remoteoss/json-schema-form 0.7.2-beta.0 → 0.7.3-beta.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 0.7.3-beta.0 (2023-11-07)
+
+##### Bug Fixes
+
+*  Remove conditional attributes after the condition is unmatched ([#57](https://github.com/remoteoss/json-schema-form/pull/57)) ([8bac7145](https://github.com/remoteoss/json-schema-form/commit/8bac7145dfdd4136c0613044389666a614eb12f7))
+
 #### 0.7.2-beta.0 (2023-11-06)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
- Generated: Mon, 06 Nov 2023 19:11:58 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.3-beta.0
+ Generated: Tue, 07 Nov 2023 09:29:14 GMT
 
  MIT License
 
@@ -1061,6 +1061,33 @@ function processJSONLogicNode({
 }
 
 // src/helpers.js
+var dynamicInternalJsfAttrs = [
+  "isVisible",
+  // Driven from conditionals state
+  "fields",
+  // driven from group-array
+  "getComputedAttributes",
+  // From json-logic
+  "computedAttributes",
+  // From json-logic
+  "calculateConditionalProperties",
+  // driven from conditionals
+  "calculateCustomValidationProperties",
+  // To be deprecated in favor of json-logic
+  "scopedJsonSchema"
+  // The respective JSON Schema
+];
+var dynamicInternalJsfAttrsObj = Object.fromEntries(
+  dynamicInternalJsfAttrs.map((k) => [k, true])
+);
+function removeConditionalStaleAttributes(field, conditionalAttrs, rootAttrs) {
+  Object.keys(field).forEach((key) => {
+    if (conditionalAttrs[key] === void 0 && rootAttrs[key] === void 0 && // Don't remove attrs that were declared in the root field.
+    dynamicInternalJsfAttrsObj[key] === void 0) {
+      field[key] = void 0;
+    }
+  });
+}
 function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
@@ -1153,19 +1180,21 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   if (fieldIsRequired) {
     field.isVisible = true;
   }
-  const updateValues = (fieldValues) => Object.entries(fieldValues).forEach(([key, value]) => {
-    field[key] = typeof value === "function" ? value() : value;
-    if (key === "value") {
-      const readOnlyPropertyWasUpdated = typeof fieldValues.readOnly !== "undefined";
-      const isReadonlyByDefault = field.readOnly;
-      const isReadonly = readOnlyPropertyWasUpdated ? fieldValues.readOnly : isReadonlyByDefault;
-      if (!isReadonly && (value === null || field.inputType === "checkbox")) {
-        field.value = void 0;
+  const updateAttributes = (fieldAttrs) => {
+    Object.entries(fieldAttrs).forEach(([key, value]) => {
+      field[key] = typeof value === "function" ? value() : value;
+      if (key === "value") {
+        const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
+        const isReadonlyByDefault = field.readOnly;
+        const isReadonly = readOnlyPropertyWasUpdated ? fieldAttrs.readOnly : isReadonlyByDefault;
+        if (!isReadonly && (value === null || field.inputType === "checkbox")) {
+          field.value = void 0;
+        }
       }
-    }
-  });
+    });
+  };
   if (field.getComputedAttributes) {
-    const computedFieldValues = field.getComputedAttributes({
+    const newAttributes = field.getComputedAttributes({
       field,
       isRequired: fieldIsRequired,
       node,
@@ -1173,23 +1202,24 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       config,
       logic
     });
-    updateValues(computedFieldValues);
+    updateAttributes(newAttributes);
   }
   if (field.calculateConditionalProperties) {
-    const newFieldValues = field.calculateConditionalProperties({
+    const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
       formValues
     });
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
+    removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {
-    const newFieldValues = field.calculateCustomValidationProperties(
+    const newAttributes = field.calculateCustomValidationProperties(
       fieldIsRequired,
       node,
       formValues
     );
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
   }
 }
 function processNode({
@@ -1531,17 +1561,23 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
           logic
         )
       };
-      return (0, import_omit2.default)((0, import_merge2.default)(base, presentation, newFieldParams), ["inputType"]);
+      return {
+        rootFieldAttrs: fieldParams,
+        newAttributes: (0, import_omit2.default)((0, import_merge2.default)(base, presentation, newFieldParams), ["inputType"])
+      };
     }
     const isVisible = isRequired;
     return {
-      isVisible,
-      required: isRequired,
-      schema: buildYupSchema({
-        ...fieldParams,
-        ...extractParametersFromNode(conditionBranch),
-        required: isRequired
-      })
+      rootFieldAttrs: fieldParams,
+      newAttributes: {
+        isVisible,
+        required: isRequired,
+        schema: buildYupSchema({
+          ...fieldParams,
+          ...extractParametersFromNode(conditionBranch),
+          required: isRequired
+        })
+      }
     };
   };
 }

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
- Generated: Mon, 06 Nov 2023 19:11:58 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.3-beta.0
+ Generated: Tue, 07 Nov 2023 09:29:14 GMT
 
  MIT License
 
@@ -1025,6 +1025,33 @@ function processJSONLogicNode({
 }
 
 // src/helpers.js
+var dynamicInternalJsfAttrs = [
+  "isVisible",
+  // Driven from conditionals state
+  "fields",
+  // driven from group-array
+  "getComputedAttributes",
+  // From json-logic
+  "computedAttributes",
+  // From json-logic
+  "calculateConditionalProperties",
+  // driven from conditionals
+  "calculateCustomValidationProperties",
+  // To be deprecated in favor of json-logic
+  "scopedJsonSchema"
+  // The respective JSON Schema
+];
+var dynamicInternalJsfAttrsObj = Object.fromEntries(
+  dynamicInternalJsfAttrs.map((k) => [k, true])
+);
+function removeConditionalStaleAttributes(field, conditionalAttrs, rootAttrs) {
+  Object.keys(field).forEach((key) => {
+    if (conditionalAttrs[key] === void 0 && rootAttrs[key] === void 0 && // Don't remove attrs that were declared in the root field.
+    dynamicInternalJsfAttrsObj[key] === void 0) {
+      field[key] = void 0;
+    }
+  });
+}
 function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
@@ -1117,19 +1144,21 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   if (fieldIsRequired) {
     field.isVisible = true;
   }
-  const updateValues = (fieldValues) => Object.entries(fieldValues).forEach(([key, value]) => {
-    field[key] = typeof value === "function" ? value() : value;
-    if (key === "value") {
-      const readOnlyPropertyWasUpdated = typeof fieldValues.readOnly !== "undefined";
-      const isReadonlyByDefault = field.readOnly;
-      const isReadonly = readOnlyPropertyWasUpdated ? fieldValues.readOnly : isReadonlyByDefault;
-      if (!isReadonly && (value === null || field.inputType === "checkbox")) {
-        field.value = void 0;
+  const updateAttributes = (fieldAttrs) => {
+    Object.entries(fieldAttrs).forEach(([key, value]) => {
+      field[key] = typeof value === "function" ? value() : value;
+      if (key === "value") {
+        const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
+        const isReadonlyByDefault = field.readOnly;
+        const isReadonly = readOnlyPropertyWasUpdated ? fieldAttrs.readOnly : isReadonlyByDefault;
+        if (!isReadonly && (value === null || field.inputType === "checkbox")) {
+          field.value = void 0;
+        }
       }
-    }
-  });
+    });
+  };
   if (field.getComputedAttributes) {
-    const computedFieldValues = field.getComputedAttributes({
+    const newAttributes = field.getComputedAttributes({
       field,
       isRequired: fieldIsRequired,
       node,
@@ -1137,23 +1166,24 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       config,
       logic
     });
-    updateValues(computedFieldValues);
+    updateAttributes(newAttributes);
   }
   if (field.calculateConditionalProperties) {
-    const newFieldValues = field.calculateConditionalProperties({
+    const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
       formValues
     });
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
+    removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {
-    const newFieldValues = field.calculateCustomValidationProperties(
+    const newAttributes = field.calculateCustomValidationProperties(
       fieldIsRequired,
       node,
       formValues
     );
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
   }
 }
 function processNode({
@@ -1495,17 +1525,23 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
           logic
         )
       };
-      return omit2(merge2(base, presentation, newFieldParams), ["inputType"]);
+      return {
+        rootFieldAttrs: fieldParams,
+        newAttributes: omit2(merge2(base, presentation, newFieldParams), ["inputType"])
+      };
     }
     const isVisible = isRequired;
     return {
-      isVisible,
-      required: isRequired,
-      schema: buildYupSchema({
-        ...fieldParams,
-        ...extractParametersFromNode(conditionBranch),
-        required: isRequired
-      })
+      rootFieldAttrs: fieldParams,
+      newAttributes: {
+        isVisible,
+        required: isRequired,
+        schema: buildYupSchema({
+          ...fieldParams,
+          ...extractParametersFromNode(conditionBranch),
+          required: isRequired
+        })
+      }
     };
   };
 }

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
- Generated: Mon, 06 Nov 2023 19:11:58 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.3-beta.0
+ Generated: Tue, 07 Nov 2023 09:29:14 GMT
 
  MIT License
 
@@ -12379,6 +12379,33 @@ function processJSONLogicNode({
 }
 
 // src/helpers.js
+var dynamicInternalJsfAttrs = [
+  "isVisible",
+  // Driven from conditionals state
+  "fields",
+  // driven from group-array
+  "getComputedAttributes",
+  // From json-logic
+  "computedAttributes",
+  // From json-logic
+  "calculateConditionalProperties",
+  // driven from conditionals
+  "calculateCustomValidationProperties",
+  // To be deprecated in favor of json-logic
+  "scopedJsonSchema"
+  // The respective JSON Schema
+];
+var dynamicInternalJsfAttrsObj = Object.fromEntries(
+  dynamicInternalJsfAttrs.map((k) => [k, true])
+);
+function removeConditionalStaleAttributes(field, conditionalAttrs, rootAttrs) {
+  Object.keys(field).forEach((key) => {
+    if (conditionalAttrs[key] === void 0 && rootAttrs[key] === void 0 && // Don't remove attrs that were declared in the root field.
+    dynamicInternalJsfAttrsObj[key] === void 0) {
+      field[key] = void 0;
+    }
+  });
+}
 function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
@@ -12471,19 +12498,21 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   if (fieldIsRequired) {
     field.isVisible = true;
   }
-  const updateValues = (fieldValues) => Object.entries(fieldValues).forEach(([key, value]) => {
-    field[key] = typeof value === "function" ? value() : value;
-    if (key === "value") {
-      const readOnlyPropertyWasUpdated = typeof fieldValues.readOnly !== "undefined";
-      const isReadonlyByDefault = field.readOnly;
-      const isReadonly = readOnlyPropertyWasUpdated ? fieldValues.readOnly : isReadonlyByDefault;
-      if (!isReadonly && (value === null || field.inputType === "checkbox")) {
-        field.value = void 0;
+  const updateAttributes = (fieldAttrs) => {
+    Object.entries(fieldAttrs).forEach(([key, value]) => {
+      field[key] = typeof value === "function" ? value() : value;
+      if (key === "value") {
+        const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
+        const isReadonlyByDefault = field.readOnly;
+        const isReadonly = readOnlyPropertyWasUpdated ? fieldAttrs.readOnly : isReadonlyByDefault;
+        if (!isReadonly && (value === null || field.inputType === "checkbox")) {
+          field.value = void 0;
+        }
       }
-    }
-  });
+    });
+  };
   if (field.getComputedAttributes) {
-    const computedFieldValues = field.getComputedAttributes({
+    const newAttributes = field.getComputedAttributes({
       field,
       isRequired: fieldIsRequired,
       node,
@@ -12491,23 +12520,24 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       config,
       logic
     });
-    updateValues(computedFieldValues);
+    updateAttributes(newAttributes);
   }
   if (field.calculateConditionalProperties) {
-    const newFieldValues = field.calculateConditionalProperties({
+    const { rootFieldAttrs, newAttributes } = field.calculateConditionalProperties({
       isRequired: fieldIsRequired,
       conditionBranch: node,
       formValues
     });
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
+    removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {
-    const newFieldValues = field.calculateCustomValidationProperties(
+    const newAttributes = field.calculateCustomValidationProperties(
       fieldIsRequired,
       node,
       formValues
     );
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
   }
 }
 function processNode({
@@ -12849,17 +12879,23 @@ function calculateConditionalProperties({ fieldParams, customProperties, logic,
           logic
         )
       };
-      return (0, import_omit2.default)((0, import_merge2.default)(base, presentation, newFieldParams), ["inputType"]);
+      return {
+        rootFieldAttrs: fieldParams,
+        newAttributes: (0, import_omit2.default)((0, import_merge2.default)(base, presentation, newFieldParams), ["inputType"])
+      };
     }
     const isVisible = isRequired;
     return {
-      isVisible,
-      required: isRequired,
-      schema: buildYupSchema({
-        ...fieldParams,
-        ...extractParametersFromNode(conditionBranch),
-        required: isRequired
-      })
+      rootFieldAttrs: fieldParams,
+      newAttributes: {
+        isVisible,
+        required: isRequired,
+        schema: buildYupSchema({
+          ...fieldParams,
+          ...extractParametersFromNode(conditionBranch),
+          required: isRequired
+        })
+      }
     };
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.7.2-beta.0",
+  "version": "0.7.3-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

@@ -27,12 +27,7 @@ it('Should allow check of a nested property in a conditional', () => {
           additionalProperties: false,
           properties: {
             child: {
-              oneOf: [
-                {
-                  const: 'yes',
-                },
-                { const: 'no' },
-              ],
+              oneOf: [{ const: 'yes' }, { const: 'no' }],
               type: 'string',
             },
           },
@@ -56,3 +51,311 @@ it('Should allow check of a nested property in a conditional', () => {
     undefined
   );
 });
+
+describe('Conditional attributes updated', () => {
+  it('Update basic case with const, default, maximum', () => {
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          hours: { type: 'number' },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                hours: {
+                  const: 8,
+                  default: 8,
+                },
+              },
+            },
+            else: {
+              properties: {
+                hours: {
+                  maximum: 4,
+                },
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // Given "Yes" it applies "const" and "default"
+    expect(handleValidation({ is_full_time: 'yes', hours: 4 }).formErrors).toEqual({
+      hours: 'The only accepted value is 8.',
+    });
+    expect(fields[1]).toMatchObject({ const: 8, default: 8 });
+    expect(fields[1].maximum).toBeUndefined();
+
+    // Changing to "No", applies the "maximum" and cleans "const" and "default"
+    expect(handleValidation({ is_full_time: 'no', hours: 4 }).formErrors).toBeUndefined();
+    expect(fields[1]).toMatchObject({ maximum: 4 });
+    expect(fields[1].const).toBeUndefined();
+    expect(fields[1].default).toBeUndefined();
+
+    // Changing back to "Yes", it removes "maximum", and applies "const" and "default"
+    expect(handleValidation({}).formErrors).toBeUndefined();
+    expect(handleValidation({ is_full_time: 'yes', hours: 8 }).formErrors).toBeUndefined();
+    expect(fields[1].maximum).toBeUndefined();
+    expect(fields[1]).toMatchObject({ const: 8, default: 8 });
+  });
+
+  it('Update a new attribute (eg description)', () => {
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          hours: {
+            type: 'number',
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                hours: {
+                  description: 'We recommend 8 hours.',
+                },
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // By default the attribute is not set.
+    expect(fields[1].description).toBeUndefined();
+
+    // Given "Yes" it applies the conditional attribute
+    expect(handleValidation({ is_full_time: 'yes' }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('We recommend 8 hours.');
+
+    // Changing to "No", removes the description
+    expect(handleValidation({ is_full_time: 'no' }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBeUndefined();
+
+    // Changing back to "Yes", it sets the attribute again
+    expect(handleValidation({ is_full_time: 'yes' }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('We recommend 8 hours.');
+  });
+
+  it('Update an existing attribute (eg description)', () => {
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          hours: {
+            type: 'number',
+            description: 'Any value works.',
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                hours: {
+                  description: 'We recommend 8 hours.',
+                },
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // By default the attribute is set the base value.
+    expect(fields[1].description).toBe('Any value works.');
+
+    // Given "Yes" it applies the conditional attribute
+    expect(handleValidation({ is_full_time: 'yes', hours: 4 }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('We recommend 8 hours.');
+
+    // Changing to "No", it applies the base value again.
+    expect(handleValidation({ is_full_time: 'no', hours: 4 }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('Any value works.');
+
+    // Changing back to "Yes", it sets the attribute again
+    expect(handleValidation({ is_full_time: 'yes', hours: 8 }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('We recommend 8 hours.');
+  });
+
+  it('Update a nested attribute', () => {
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          hours: {
+            type: 'number',
+            presentation: {
+              inputType: 'number',
+              anything: 'info',
+            },
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                hours: {
+                  presentation: {
+                    anything: 'danger',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // By default the attribute is set the base value.
+    expect(fields[1].anything).toBe('info');
+
+    // Given "Yes" it applies the conditional attribute
+    expect(handleValidation({ is_full_time: 'yes' }).formErrors).toBeUndefined();
+    expect(fields[1].anything).toBe('danger');
+
+    // Changing to "No", it applies the base value again.
+    expect(handleValidation({ is_full_time: 'no' }).formErrors).toBeUndefined();
+    expect(fields[1].anything).toBe('info');
+
+    // Changing back to "Yes", it sets the attribute again
+    expect(handleValidation({ is_full_time: 'yes' }).formErrors).toBeUndefined();
+    expect(fields[1].anything).toBe('danger');
+  });
+
+  it('Keeps existing attributes in matches that dont change the attr', () => {
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          hours: {
+            type: 'number',
+            description: 'Any value works.',
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              required: ['hours'],
+            },
+            else: {
+              properties: {
+                hours: false,
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // By default the attribute is set the base value, even though the field is invisible.
+    expect(fields[1].description).toBe('Any value works.');
+    expect(fields[1].isVisible).toBe(false);
+
+    // Given "Yes" it keeps the base value
+    expect(handleValidation({ is_full_time: 'yes' }).formErrors).toEqual({
+      hours: 'Required field',
+    });
+    expect(fields[1].description).toBe('Any value works.');
+    expect(fields[1].isVisible).toBe(true);
+
+    // Changing to "No" it keeps the base value
+    expect(handleValidation({ is_full_time: 'no' }).formErrors).toBeUndefined();
+    expect(fields[1].description).toBe('Any value works.');
+    expect(fields[1].isVisible).toBe(false);
+  });
+
+  it('Keeps internal attributes (fieldAttrsFromJsf)', () => {
+    // This is necessary while we keep supporting "type", even if deprecated
+    // otherwise our Remote app will break because it didn't migrate
+    // from "type" to "inputType" yet.
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          salary_period: {
+            type: 'string',
+            title: 'Salary period',
+            oneOf: [
+              { title: 'Weekly', const: 'weekly' },
+              { title: 'Monthly', const: 'monthly' },
+            ],
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                salary_period: {
+                  description: 'We recommend montlhy.',
+                },
+              },
+            },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+
+    // Given "Yes" it keeps the "type"
+    handleValidation({ is_full_time: 'yes' });
+
+    // All the following attrs are never removed
+    // during conditionals because they are core.
+    expect(fields[1]).toMatchObject({
+      name: 'salary_period',
+      label: 'Salary period',
+      required: false,
+      type: 'radio',
+      inputType: 'radio',
+      jsonType: 'string',
+      computedAttributes: {},
+      calculateConditionalProperties: expect.any(Function),
+      schema: expect.any(Object),
+      scopedJsonSchema: expect.any(Object),
+      isVisible: true,
+      options: [
+        {
+          label: 'Weekly',
+          value: 'weekly',
+        },
+        {
+          label: 'Monthly',
+          value: 'monthly',
+        },
+      ],
+    });
+  });
+});

package/src/tests/createHeadlessForm.test.js

@@ -446,7 +446,7 @@ describe('createHeadlessForm', () => {
           [fieldName]: 'The option "blah-blah" is not valid.',
         });
 
-        // Given undefined, it says it's a  required field.
+        // Given undefined, it says it's a required field.
         expect(validateForm({})).toEqual({
           [fieldName]: 'Required field',
         });
@@ -856,6 +856,7 @@ describe('createHeadlessForm', () => {
           has_car: 'yes',
         })
       ).toBeUndefined();
+
       expect(validateForm({})).toEqual({
         has_siblings: 'Required field',
       });
@@ -1419,6 +1420,50 @@ describe('createHeadlessForm', () => {
           ],
         });
       });
+
+      it('can be a conditional field', () => {
+        const { fields, handleValidation } = createHeadlessForm({
+          properties: {
+            yes_or_no: {
+              title: 'Show the dependents or not?',
+              oneOf: [{ const: 'yes' }, { const: 'no' }],
+              'x-jsf-presentation': { inputType: 'radio' },
+            },
+            dependent_details: mockGroupArrayInput,
+          },
+          allOf: [
+            {
+              if: {
+                properties: {
+                  yes_or_no: { const: 'yes' },
+                },
+                required: ['yes_or_no'],
+              },
+              then: {
+                required: ['dependent_details'],
+              },
+              else: {
+                properties: {
+                  dependent_details: false,
+                },
+              },
+            },
+          ],
+        });
+
+        // By default is hidden but the fields are accessible
+        expect(getField(fields, 'dependent_details').isVisible).toBe(false);
+        expect(getField(fields, 'dependent_details').fields).toEqual(expect.any(Function));
+
+        // When the condition matches...
+        const { formErrors } = handleValidation({ yes_or_no: 'yes' });
+        expect(formErrors).toEqual({
+          dependent_details: 'Required field',
+        });
+        // it gets visible with its inner fields.
+        expect(getField(fields, 'dependent_details').isVisible).toBe(true);
+        expect(getField(fields, 'dependent_details').fields).toEqual(expect.any(Function));
+      });
     });
 
     it('supports "radio" field type with its "card" and "card-expandable" variants', () => {
@@ -1808,11 +1853,8 @@ describe('createHeadlessForm', () => {
           expect(foodField.options).toHaveLength(4);
           // ...Food description was back to the original
           expect(foodField.description).toBeUndefined();
-
-          // @BUG RMT-58 PTO description should disappear, but it didn't.
-          expect(getField(fields, 'pto').description).toBe(
-            'Above 30 hours, the PTO needs to be at least 20 days.'
-          );
+          // ...PTO Description is removed too.
+          expect(getField(fields, 'pto').description).toBeUndefined();
 
           // Given again "low perks", the form valid.
           expect(

package/src/tests/jsonLogic.fixtures.js

@@ -250,7 +250,7 @@ export const schemaWithComputedAttributeThatDoesntExist = {
     field_a: {
       type: 'number',
       'x-jsf-logic-computedAttrs': {
-        default: 'iDontExist',
+        minimum: 'iDontExist',
       },
     },
   },