@remoteoss/json-schema-form 0.7.1-dev.20231026204916 → 0.7.2-dev.20231106093837

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231026204916
- Generated: Thu, 26 Oct 2023 20:49:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.2-dev.20231106093837
+ Generated: Mon, 06 Nov 2023 09:38:54 GMT
 
  MIT License
 
@@ -11779,38 +11779,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => StringSchema().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString2) => {
+    if (isString2) {
+      return StringSchema().nullable();
     }
-    if (options?.some((option) => option.value === null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).test(
-    /* 
-      Custom test determines if the value either:
-       - Matches a specific option by value
-       - Matches a pattern
-      If the option is undefined do not test, to allow for optional fields. 
-     */
-    "matchesOptionOrPattern",
-    ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
-    (value) => {
-      if (value === void 0) {
-        return true;
-      }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+    return StringSchema().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      if (options?.includes(null)) {
+        return value;
       }
-      return false;
-    }
-  ),
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = StringSchema().nullable().transform((value) => {
       if (value === "") {
@@ -11868,21 +11852,19 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => ({
-    value: option.value,
-    pattern: option.pattern ? new RegExp(option.pattern) : null
-  }));
+  const allValues = field.options?.map((option) => option.value);
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
+  return isOptionalWithNull ? [...allValues, null] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString2 = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString2);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
@@ -12373,6 +12355,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;
 }
@@ -12465,19 +12474,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,
@@ -12485,23 +12496,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, rootFieldAttrs);
+    removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {
-    const newFieldValues = field.calculateCustomValidationProperties(
+    const newAttributes = field.calculateCustomValidationProperties(
       fieldIsRequired,
       node,
       formValues
     );
-    updateValues(newFieldValues);
+    updateAttributes(newAttributes);
   }
 }
 function processNode({
@@ -12843,17 +12855,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.1-dev.20231026204916",
+  "version": "0.7.2-dev.20231106093837",
   "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',
+        },
+      ],
+    });
+  });
+});