@remoteoss/json-schema-form 0.11.11-beta.0 → 0.11.11-dev.20250220174843

package/CHANGELOG.md

@@ -1,9 +1,3 @@
-#### 0.11.11-beta.0 (2025-02-20)
-
-##### Bug Fixes
-
-* **conditionals:**  Add support to `oneOf` ([#136](https://github.com/remoteoss/json-schema-form/pull/136)) ([966cec59](https://github.com/remoteoss/json-schema-form/commit/966cec595ed2a1ff35f9d15e22acaea16cdd5113))
-
 #### 0.11.10-beta.0 (2025-01-22)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-beta.0
- Generated: Thu, 20 Feb 2025 18:25:18 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220174843
+ Generated: Thu, 20 Feb 2025 17:48:57 GMT
 
  MIT License
 
@@ -101,11 +101,6 @@ 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];
@@ -1169,7 +1164,11 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  return fields.find(({ name }) => name === fieldName);
+  if (Array.isArray(fields)) {
+    return fields.find(({ name }) => name === fieldName);
+  } else {
+    return fields[fieldName];
+  }
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -1383,6 +1382,25 @@ function processNode({
           logic
         });
       }
+      if (inputType === supportedTypes.GROUP_ARRAY) {
+        const values = formValues[name];
+        if (Array.isArray(values)) {
+          const newFields = [];
+          const field = getField(name, formFields);
+          values.forEach((value) => {
+            const fields = field.fields();
+            processNode({
+              node: nestedNode.items,
+              formValues: value,
+              formFields: fields,
+              parentID: name,
+              logic
+            });
+            newFields.push(fields);
+          });
+          field.dynamicFields = newFields;
+        }
+      }
     });
   }
   if (node["x-jsf-logic"]) {
@@ -1754,6 +1772,16 @@ function buildFieldParameters(name, fieldProperties, required = [], config = {},
       logic
     );
   }
+  if (inputType === supportedTypes.GROUP_ARRAY) {
+    fields = () => getFieldsFromJSONSchema(
+      fieldProperties.items,
+      {
+        customProperties: (0, import_get3.default)(config, `customProperties.${name}.customProperties`, {}),
+        parentID: name
+      },
+      logic
+    );
+  }
   const result = {
     name,
     inputType,
@@ -1847,12 +1875,10 @@ function getFieldsFromJSONSchema(scopedJsonSchema, config, logic) {
     if (fieldParams.inputType === "group-array") {
       const groupArrayItems = convertJSONSchemaPropertiesToFieldParameters(fieldParams.items);
       const groupArrayFields = groupArrayItems.map((groupArrayItem) => {
-        groupArrayItem.nameKey = groupArrayItem.name;
         const customProperties = null;
         const composeFn = getComposeFunctionForField(groupArrayItem, !!customProperties);
         return composeFn(groupArrayItem);
       });
-      fieldParams.nameKey = fieldParams.name;
       fieldParams.nthFieldGroup = {
         name: fieldParams.name,
         label: fieldParams.label,

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-beta.0
- Generated: Thu, 20 Feb 2025 18:25:18 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220174843
+ Generated: Thu, 20 Feb 2025 17:48:57 GMT
 
  MIT License
 
@@ -64,11 +64,6 @@ 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];
@@ -1132,7 +1127,11 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  return fields.find(({ name }) => name === fieldName);
+  if (Array.isArray(fields)) {
+    return fields.find(({ name }) => name === fieldName);
+  } else {
+    return fields[fieldName];
+  }
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -1346,6 +1345,25 @@ function processNode({
           logic
         });
       }
+      if (inputType === supportedTypes.GROUP_ARRAY) {
+        const values = formValues[name];
+        if (Array.isArray(values)) {
+          const newFields = [];
+          const field = getField(name, formFields);
+          values.forEach((value) => {
+            const fields = field.fields();
+            processNode({
+              node: nestedNode.items,
+              formValues: value,
+              formFields: fields,
+              parentID: name,
+              logic
+            });
+            newFields.push(fields);
+          });
+          field.dynamicFields = newFields;
+        }
+      }
     });
   }
   if (node["x-jsf-logic"]) {
@@ -1717,6 +1735,16 @@ function buildFieldParameters(name, fieldProperties, required = [], config = {},
       logic
     );
   }
+  if (inputType === supportedTypes.GROUP_ARRAY) {
+    fields = () => getFieldsFromJSONSchema(
+      fieldProperties.items,
+      {
+        customProperties: get3(config, `customProperties.${name}.customProperties`, {}),
+        parentID: name
+      },
+      logic
+    );
+  }
   const result = {
     name,
     inputType,
@@ -1810,12 +1838,10 @@ function getFieldsFromJSONSchema(scopedJsonSchema, config, logic) {
     if (fieldParams.inputType === "group-array") {
       const groupArrayItems = convertJSONSchemaPropertiesToFieldParameters(fieldParams.items);
       const groupArrayFields = groupArrayItems.map((groupArrayItem) => {
-        groupArrayItem.nameKey = groupArrayItem.name;
         const customProperties = null;
         const composeFn = getComposeFunctionForField(groupArrayItem, !!customProperties);
         return composeFn(groupArrayItem);
       });
-      fieldParams.nameKey = fieldParams.name;
       fieldParams.nthFieldGroup = {
         name: fieldParams.name,
         label: fieldParams.label,

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-beta.0
- Generated: Thu, 20 Feb 2025 18:25:18 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220174843
+ Generated: Thu, 20 Feb 2025 17:48:57 GMT
 
  MIT License
 
@@ -11581,11 +11581,6 @@ 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];
@@ -12648,7 +12643,11 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  return fields.find(({ name }) => name === fieldName);
+  if (Array.isArray(fields)) {
+    return fields.find(({ name }) => name === fieldName);
+  } else {
+    return fields[fieldName];
+  }
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -12862,6 +12861,25 @@ function processNode({
           logic
         });
       }
+      if (inputType === supportedTypes.GROUP_ARRAY) {
+        const values2 = formValues[name];
+        if (Array.isArray(values2)) {
+          const newFields = [];
+          const field = getField(name, formFields);
+          values2.forEach((value) => {
+            const fields = field.fields();
+            processNode({
+              node: nestedNode.items,
+              formValues: value,
+              formFields: fields,
+              parentID: name,
+              logic
+            });
+            newFields.push(fields);
+          });
+          field.dynamicFields = newFields;
+        }
+      }
     });
   }
   if (node["x-jsf-logic"]) {
@@ -13233,6 +13251,16 @@ function buildFieldParameters(name, fieldProperties, required2 = [], config = {}
       logic
     );
   }
+  if (inputType === supportedTypes.GROUP_ARRAY) {
+    fields = () => getFieldsFromJSONSchema(
+      fieldProperties.items,
+      {
+        customProperties: (0, import_get4.default)(config, `customProperties.${name}.customProperties`, {}),
+        parentID: name
+      },
+      logic
+    );
+  }
   const result = {
     name,
     inputType,
@@ -13326,12 +13354,10 @@ function getFieldsFromJSONSchema(scopedJsonSchema, config, logic) {
     if (fieldParams.inputType === "group-array") {
       const groupArrayItems = convertJSONSchemaPropertiesToFieldParameters(fieldParams.items);
       const groupArrayFields = groupArrayItems.map((groupArrayItem) => {
-        groupArrayItem.nameKey = groupArrayItem.name;
         const customProperties = null;
         const composeFn = getComposeFunctionForField(groupArrayItem, !!customProperties);
         return composeFn(groupArrayItem);
       });
-      fieldParams.nameKey = fieldParams.name;
       fieldParams.nthFieldGroup = {
         name: fieldParams.name,
         label: fieldParams.label,

package/package.json

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

@@ -422,6 +422,233 @@ describe('Conditional attributes updated', () => {
     handleValidation({ is_full_time: 'no' });
     expect(fields[1].visibilityCondition).toEqual(expect.any(Function));
   });
+
+  it('Group array nested condition', () => {
+    const { fields, handleValidation } = createHeadlessForm({
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        companies: {
+          type: 'array',
+          'x-jsf-presentation': {
+            inputType: 'group-array',
+          },
+          items: {
+            type: 'object',
+            properties: {
+              company: {
+                type: 'string',
+                oneOf: [
+                  {
+                    title: 'A',
+                    const: 'A',
+                  },
+                  {
+                    title: 'B',
+                    const: 'B',
+                  },
+                ],
+                'x-jsf-presentation': {
+                  inputType: 'select',
+                },
+              },
+              role: {
+                title: 'Role',
+                oneOf: [],
+                'x-jsf-presentation': {
+                  inputType: 'select',
+                },
+              },
+            },
+            allOf: [
+              {
+                if: {
+                  properties: {
+                    company: {
+                      const: 'A',
+                    },
+                  },
+                  required: ['company'],
+                },
+                then: {
+                  properties: {
+                    role: {
+                      oneOf: [
+                        {
+                          title: 'adminA',
+                          const: 'adminA',
+                        },
+                        {
+                          title: 'userA',
+                          const: 'userA',
+                        },
+                      ],
+                      'x-jsf-presentation': {
+                        inputType: 'select',
+                      },
+                    },
+                  },
+                  required: ['role'],
+                },
+              },
+              {
+                if: {
+                  properties: {
+                    company: {
+                      const: 'B',
+                    },
+                  },
+                  required: ['company'],
+                },
+                then: {
+                  properties: {
+                    role: {
+                      oneOf: [
+                        {
+                          title: 'adminB',
+                          const: 'adminB',
+                        },
+                        {
+                          title: 'userB',
+                          const: 'userB',
+                        },
+                      ],
+                      'x-jsf-presentation': {
+                        inputType: 'select',
+                      },
+                    },
+                  },
+                  required: ['role'],
+                },
+              },
+            ],
+            required: ['company', 'role'],
+          },
+        },
+      },
+      required: ['companies'],
+    });
+
+    handleValidation({ companies: [{ company: 'A' }, { company: 'B' }] });
+    expect(fields[0].dynamicFields[0][1].options).toEqual([
+      { label: 'adminA', value: 'adminA' },
+      { label: 'userA', value: 'userA' },
+    ]);
+    expect(fields[0].dynamicFields[1][1].options).toEqual([
+      { label: 'adminB', value: 'adminB' },
+      { label: 'userB', value: 'userB' },
+    ]);
+    handleValidation({ companies: [] });
+    expect(fields[0].dynamicFields).toEqual([]);
+  });
+
+  it('select multiple conditions', () => {
+    const { fields, handleValidation } = createHeadlessForm({
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        company: {
+          title: 'Select Company',
+          type: 'string',
+          description: 'Choose a company',
+          oneOf: [
+            {
+              title: 'A',
+              const: 'A',
+            },
+            {
+              title: 'B',
+              const: 'B',
+            },
+          ],
+          'x-jsf-presentation': {
+            inputType: 'select',
+          },
+        },
+        role: {
+          title: 'Role',
+          oneOf: [],
+          'x-jsf-presentation': {
+            inputType: 'select',
+          },
+        },
+      },
+      allOf: [
+        {
+          if: {
+            properties: {
+              company: {
+                const: 'A',
+              },
+            },
+            required: ['company'],
+          },
+          then: {
+            properties: {
+              role: {
+                oneOf: [
+                  {
+                    title: 'adminA',
+                    const: 'adminA',
+                  },
+                  {
+                    title: 'userA',
+                    const: 'userA',
+                  },
+                ],
+                'x-jsf-presentation': {
+                  inputType: 'select',
+                },
+              },
+            },
+            required: ['role'],
+          },
+        },
+        {
+          if: {
+            properties: {
+              company: {
+                const: 'B',
+              },
+            },
+            required: ['company'],
+          },
+          then: {
+            properties: {
+              role: {
+                oneOf: [
+                  {
+                    title: 'adminB',
+                    const: 'adminB',
+                  },
+                  {
+                    title: 'userB',
+                    const: 'userB',
+                  },
+                ],
+                'x-jsf-presentation': {
+                  inputType: 'select',
+                },
+              },
+            },
+            required: ['role'],
+          },
+        },
+      ],
+      required: ['company', 'role'],
+    });
+
+    handleValidation({ company: 'A' });
+    expect(fields[1].options).toEqual([
+      { label: 'adminA', value: 'adminA' },
+      { label: 'userA', value: 'userA' },
+    ]);
+    handleValidation({ company: 'B' });
+    expect(fields[1].options).toEqual([
+      { label: 'adminB', value: 'adminB' },
+      { label: 'userB', value: 'userB' },
+    ]);
+  });
 });
 
 describe('Conditional with a minimum value check', () => {
@@ -548,54 +775,6 @@ describe('Conditional with literal booleans', () => {
   });
 });
 
-describe('Conditional with anyOf', () => {
-  const schema = {
-    additionalProperties: false,
-    type: 'object',
-    properties: {
-      field_a: { type: 'string' },
-      field_b: { type: 'string' },
-      field_c: { type: 'string' },
-    },
-    allOf: [
-      {
-        if: {
-          anyOf: [
-            { properties: { field_a: { const: '1' } }, required: ['field_a'] },
-            { properties: { field_b: { const: '2' } }, required: ['field_b'] },
-          ],
-        },
-        then: {
-          required: ['field_c'],
-        },
-        else: {
-          properties: {
-            field_c: false,
-          },
-        },
-      },
-    ],
-  };
-
-  it('handles true case', () => {
-    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-
-    expect(fields[2].isVisible).toBe(false);
-    expect(handleValidation({ field_a: 'x', field_b: '2' }).formErrors).toEqual({
-      field_c: 'Required field',
-    });
-    expect(fields[2].isVisible).toBe(true);
-  });
-
-  it('handles false case', () => {
-    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-
-    expect(fields[2].isVisible).toBe(false);
-    expect(handleValidation({ field_a: 'x', field_b: 'x' }).formErrors).toBeUndefined();
-    expect(fields[2].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

@@ -63,6 +63,7 @@ import {
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
   schemaInputTypeFile,
+  nestedGroupArrayForm,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -1604,7 +1605,6 @@ describe('createHeadlessForm', () => {
             type: 'text',
             description: 'Enter your child’s full name',
             maxLength: 255,
-            nameKey: 'full_name',
             label: 'Child Full Name',
             name: 'full_name',
             required: true,
@@ -1616,7 +1616,6 @@ describe('createHeadlessForm', () => {
             required: true,
             description: 'Enter your child’s date of birth',
             maxLength: 255,
-            nameKey: 'birthdate',
           },
           {
             type: 'radio',
@@ -1635,7 +1634,6 @@ describe('createHeadlessForm', () => {
             required: true,
             description:
               'We know sex is non-binary but for insurance and payroll purposes, we need to collect this information.',
-            nameKey: 'sex',
           },
         ]);
       });
@@ -1737,6 +1735,63 @@ describe('createHeadlessForm', () => {
         });
       });
 
+      it('nested "group-array" fields', () => {
+        const result = createHeadlessForm({
+          properties: {
+            nestedGroupArray: nestedGroupArrayForm,
+          },
+        });
+
+        expect(result.fields[0]).toMatchObject({
+          label: 'Parent object',
+          name: 'nestedGroupArray',
+          required: false,
+          type: 'group-array',
+          inputType: 'group-array',
+          jsonType: 'array',
+          fields: expect.any(Function),
+        });
+
+        expect(result.fields[0].fields()).toMatchObject([
+          {
+            type: 'text',
+            description: 'Simple text field',
+            maxLength: 255,
+            label: 'Outer Field',
+            name: 'notNested',
+            required: true,
+          },
+          {
+            label: 'Nested group-array',
+            name: 'nested',
+            required: true,
+            type: 'group-array',
+            inputType: 'group-array',
+            jsonType: 'array',
+            fields: expect.any(Function),
+          },
+        ]);
+
+        expect(result.fields[0].fields()[1].fields()).toMatchObject([
+          {
+            type: 'text',
+            description: 'First nested text field',
+            maxLength: 255,
+            label: 'Inner Field 1',
+            name: 'nestedField1',
+            required: true,
+          },
+          {
+            type: 'text',
+            description: 'Second nested text field',
+            maxLength: 255,
+            label: 'Inner Field 2',
+            name: 'nestedField2',
+            required: true,
+          },
+        ]);
+      });
+
       it('can pass custom field attributes', () => {
         const result = createHeadlessForm(
           {

package/src/tests/helpers.js

@@ -2327,3 +2327,59 @@ export const schemaWithCustomValidationsAndConditionals = {
     },
   ],
 };
+
+export const nestedGroupArrayForm = {
+  items: {
+    properties: {
+      notNested: {
+        description: 'Simple text field',
+        'x-jsf-presentation': {
+          inputType: 'text',
+        },
+        title: 'Outer Field',
+        type: 'string',
+        maxLength: 255,
+      },
+      nested: {
+        items: {
+          properties: {
+            nestedField1: {
+              description: 'First nested text field',
+              'x-jsf-presentation': {
+                inputType: 'text',
+              },
+              title: 'Inner Field 1',
+              type: 'string',
+              maxLength: 255,
+            },
+            nestedField2: {
+              description: 'Second nested text field',
+              'x-jsf-presentation': {
+                inputType: 'text',
+              },
+              title: 'Inner Field 2',
+              type: 'string',
+              maxLength: 255,
+            },
+          },
+          'x-jsf-order': ['nestedField1', 'nestedField2'],
+          required: ['nestedField1', 'nestedField2'],
+          type: 'object',
+        },
+        'x-jsf-presentation': {
+          inputType: 'group-array',
+        },
+        title: 'Nested group-array',
+        type: 'array',
+      },
+    },
+    'x-jsf-order': ['notNested', 'nested'],
+    required: ['notNested', 'nested'],
+    type: 'object',
+  },
+  'x-jsf-presentation': {
+    inputType: 'group-array',
+  },
+  title: 'Parent object',
+  type: 'array',
+};