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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### 0.11.12-beta.0 (2025-04-15)
+
+##### Chores
+
+*  change deprecated 'presentation' to 'x-jsf-presentation' in test helpers ([#159](https://github.com/remoteoss/json-schema-form/pull/159)) ([3f03b16d](https://github.com/remoteoss/json-schema-form/commit/3f03b16dce6acd801ff497a9c547cceb1b6347c5))
+
+#### 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-dev.20250220174843
- Generated: Thu, 20 Feb 2025 17:48:57 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 
@@ -101,6 +101,11 @@ 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];
@@ -1164,11 +1169,7 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  if (Array.isArray(fields)) {
-    return fields.find(({ name }) => name === fieldName);
-  } else {
-    return fields[fieldName];
-  }
+  return fields.find(({ name }) => name === fieldName);
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -1382,25 +1383,6 @@ 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"]) {
@@ -1772,16 +1754,6 @@ 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,
@@ -1875,10 +1847,12 @@ 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-dev.20250220174843
- Generated: Thu, 20 Feb 2025 17:48:57 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 
@@ -64,6 +64,11 @@ 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];
@@ -1127,11 +1132,7 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  if (Array.isArray(fields)) {
-    return fields.find(({ name }) => name === fieldName);
-  } else {
-    return fields[fieldName];
-  }
+  return fields.find(({ name }) => name === fieldName);
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -1345,25 +1346,6 @@ 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"]) {
@@ -1735,16 +1717,6 @@ 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,
@@ -1838,10 +1810,12 @@ 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-dev.20250220174843
- Generated: Thu, 20 Feb 2025 17:48:57 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 
@@ -11581,6 +11581,11 @@ 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];
@@ -12643,11 +12648,7 @@ function hasType(type, typeName) {
   return Array.isArray(type) ? type.includes(typeName) : type === typeName;
 }
 function getField(fieldName, fields) {
-  if (Array.isArray(fields)) {
-    return fields.find(({ name }) => name === fieldName);
-  } else {
-    return fields[fieldName];
-  }
+  return fields.find(({ name }) => name === fieldName);
 }
 function validateFieldSchema(field, value, logic) {
   const validator = buildYupSchema(field, {}, logic);
@@ -12861,25 +12862,6 @@ 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"]) {
@@ -13251,16 +13233,6 @@ 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,
@@ -13354,10 +13326,12 @@ 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-dev.20250220174843",
+  "version": "0.11.12-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

@@ -422,233 +422,6 @@ 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', () => {
@@ -775,6 +548,54 @@ 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,7 +63,6 @@ import {
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
   schemaInputTypeFile,
-  nestedGroupArrayForm,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -1605,6 +1604,7 @@ 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,6 +1616,7 @@ describe('createHeadlessForm', () => {
             required: true,
             description: 'Enter your child’s date of birth',
             maxLength: 255,
+            nameKey: 'birthdate',
           },
           {
             type: 'radio',
@@ -1634,6 +1635,7 @@ 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',
           },
         ]);
       });
@@ -1735,63 +1737,6 @@ 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(
           {
@@ -2576,7 +2521,7 @@ describe('createHeadlessForm', () => {
           .addInput({
             username: {
               ...mockTextInputDeprecated,
-              presentation: {
+              'x-jsf-presentation': {
                 inputType: 'text',
                 maskSecret: 2,
                 // should override the root level description

package/src/tests/helpers.custom.js

@@ -11,7 +11,7 @@ export const schemaInputTypeTextarea = {
   properties: {
     comment: {
       title: 'Your comment',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'textarea',
       },
       maxLength: 250,
@@ -29,7 +29,7 @@ export const inputTypeCountriesSolo = {
     { title: 'Algeria', const: 'Algeria' },
   ],
   type: 'string',
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'countries',
   },
 };
@@ -58,7 +58,7 @@ export const schemaInputTypeCountriesMultiple = {
         ],
       },
       type: 'array',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'countries',
       },
     },
@@ -90,7 +90,7 @@ export const schemaInputTypeTel = {
       type: 'string',
       pattern: '^(\\+|00)[0-9]{6,}$',
       maxLength: 30,
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'tel',
       },
       errorMessage: {
@@ -106,7 +106,7 @@ const mockTelInput = {
   title: 'Phone number',
   description: 'Enter your telephone number',
   maxLength: 30,
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'tel',
   },
   pattern: '^(\\+|00)\\d*$',
@@ -116,7 +116,7 @@ const mockTelInput = {
 export const mockMoneyInput = {
   title: 'Weekly salary',
   description: 'This field has a min and max values. Max has a custom error message.',
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'money',
     currency: 'EUR',
   },
@@ -150,7 +150,7 @@ export const schemaCustomComponent = {
     salary: {
       title: 'Monthly gross salary',
       description: 'This field gets represented by a custom UI Component.',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'money',
         currency: 'EUR',
       },

package/src/tests/helpers.js

@@ -17,7 +17,7 @@ export const mockTextInputDeprecated = {
   title: 'Username',
   description: 'Your username (max 10 characters)',
   maxLength: 10,
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'text',
     maskSecret: 2,
   },
@@ -1284,7 +1284,7 @@ export const schemaForErrorMessageSpecificity = {
       title: 'Weekday',
       description: "This text field has the traditional error message. 'Required field'",
       type: 'string',
-      presentation: { inputType: 'text' },
+      'x-jsf-presentation': { inputType: 'text' },
     },
     day: {
       title: 'Day',
@@ -1293,21 +1293,21 @@ export const schemaForErrorMessageSpecificity = {
         'The remaining fields are numbers and were customized to say "This cannot be empty." instead of "Required field".',
 
       maximum: 31,
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
     },
     month: {
       title: 'Month',
       type: 'number',
       minimum: 1,
       maximum: 12,
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
     },
     year: {
       title: 'Year',
       description:
         "This number field has a custom error message declared in the json schema, which has a higher specificity than the one declared in createHeadlessForm's configuration.",
       type: 'number',
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
       'x-jsf-errorMessage': {
         required: 'The year is mandatory.',
       },
@@ -2327,59 +2327,3 @@ 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',
-};

package/src/tests/jsonLogic.fixtures.js

@@ -984,3 +984,51 @@ export const schemaWithTwoValidationsWhereOneOfThemIsAppliedConditionally = {
     },
   ],
 };
+
+export const schemaWithReduceAccumulator = {
+  properties: {
+    work_days: {
+      items: {
+        anyOf: [
+          { const: 'monday', title: 'Monday' },
+          { const: 'tuesday', title: 'Tuesday' },
+          { const: 'wednesday', title: 'Wednesday' },
+          { const: 'thursday', title: 'Thursday' },
+          { const: 'friday', title: 'Friday' },
+          { const: 'saturday', title: 'Saturday' },
+          { const: 'sunday', title: 'Sunday' },
+        ],
+      },
+      type: 'array',
+      uniqueItems: true,
+      'x-jsf-presentation': {
+        inputType: 'select',
+      },
+    },
+    working_hours_per_day: {
+      type: 'number',
+    },
+    working_hours_per_week: {
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        const: 'computed_work_hours_per_week',
+        defaultValue: 'computed_work_hours_per_week',
+        title: '{{computed_work_hours_per_week}} hours per week',
+      },
+    },
+  },
+  'x-jsf-logic': {
+    computedValues: {
+      computed_work_hours_per_week: {
+        rule: {
+          '*': [
+            { var: 'working_hours_per_day' },
+            {
+              reduce: [{ var: 'work_days' }, { '+': [{ var: ['accumulator', 0] }, 1] }, 0],
+            },
+          ],
+        },
+      },
+    },
+  },
+};

package/src/tests/jsonLogic.test.js

@@ -34,6 +34,7 @@ import {
   schemaWithUnknownVariableInValidations,
   schemaWithValidationThatDoesNotExistOnProperty,
   badSchemaThatWillNotSetAForcedValue,
+  schemaWithReduceAccumulator,
 } from './jsonLogic.fixtures';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -243,6 +244,23 @@ describe('jsonLogic: cross-values validations', () => {
     });
   });
 
+  // TODO: Implement this test.
+  describe.skip('Reduce', () => {
+    it('reduce: working_hours_per_day * work_days', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaWithReduceAccumulator, {
+        strictInputType: false,
+      });
+      handleValidation({
+        work_days: ['monday', 'tuesday'],
+        working_hours_per_day: 8,
+      });
+      const field = fields.find((i) => i.name === 'working_hours_per_week');
+      expect(field.const).toEqual(16);
+      expect(field.default).toEqual(16);
+      expect(field.label).toEqual('16 hours per week');
+    });
+  });
+
   describe('Logical: ||, &&', () => {
     it('AND: field_a > field_b && field_a > field_c (implicit with multiple rules in a single field)', () => {
       const schema = createSchemaWithThreePropertiesWithRuleOnFieldA({