feat(Radio/Select): Spread x-jsf-presentation value to option root

src/helpers.js

@@ -406,12 +406,27 @@ export function updateFieldsProperties(fields, formValues, jsonSchema) {
 
 const notNullOption = (opt) => opt.const !== null;
 
+function flatPresentation(item) {
+  return Object.entries(item).reduce((newItem, [key, value]) => {
+    if (key === 'x-jsf-presentation') {
+      return {
+        ...newItem,
+        ...value,
+      };
+    }
+    return {
+      ...newItem,
+      [key]: value,
+    };
+  }, {});
+}
+
 function getFieldOptions(node, presentation) {
   function convertToOptions(nodeOptions) {
     return nodeOptions.filter(notNullOption).map(({ title, const: cons, ...item }) => ({
       label: title,
       value: cons,
-      ...item,
+      ...flatPresentation(item),
     }));
   }
 

src/tests/createHeadlessForm.test.js

@@ -10,6 +10,7 @@ import {
   schemaInputTypeRadioDeprecated,
   schemaInputTypeRadio,
   schemaInputTypeRadioRequiredAndOptional,
+  schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
   schemaInputTypeSelectMultipleDeprecated,
@@ -753,6 +754,35 @@ describe('createHeadlessForm', () => {
       expect(() => fieldValidator.validateSync('')).toThrowError('Required field');
     });
 
+    it('support "radio" field type with extra info inside each option', () => {
+      const result = createHeadlessForm(schemaInputTypeRadioOptionsWithDetails);
+
+      expect(result.fields).toHaveLength(1);
+
+      const fieldOptions = result.fields[0].options;
+
+      // The x-jsf-presentation content was spread to the root:
+      expect(fieldOptions[0]).not.toHaveProperty('x-jsf-presentation');
+      expect(fieldOptions).toEqual([
+        {
+          label: 'Basic',
+          value: 'basic',
+          meta: {
+            displayCost: '$30.00/mo',
+          },
+          // Other x-* keywords are kept as it is.
+          'x-another': 'extra-thing',
+        },
+        {
+          label: 'Standard',
+          value: 'standard',
+          meta: {
+            displayCost: '$50.00/mo',
+          },
+        },
+      ]);
+    });
+
     it('support "number" field type', () => {
       const result = createHeadlessForm(schemaInputTypeNumber);
       expect(result).toMatchObject({

src/tests/helpers.js

@@ -871,34 +871,70 @@ export const schemaInputDeprecated = JSONSchemaBuilder()
   .build();
 
 /** @deprecated */
-export const schemaInputTypeRadioDeprecated = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioDeprecated = {
+  properties: {
     has_siblings: mockRadioInputDeprecated,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
-export const schemaInputTypeRadio = JSONSchemaBuilder()
-  .addInput({
+  },
+  required: ['has_siblings'],
+};
+
+export const schemaInputTypeRadio = {
+  properties: {
     has_siblings: mockRadioInput,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
+  },
+  required: ['has_siblings'],
+};
 
-export const schemaInputTypeRadioRequiredAndOptional = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioRequiredAndOptional = {
+  properties: {
     has_siblings: mockRadioInput,
     has_car: mockRadioInputOptional,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
+  },
+  required: ['has_siblings'],
+};
 
-export const schemaInputTypeRadioCard = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioCard = {
+  properties: {
     experience_level: mockRadioCardExpandableInput,
     payment_method: mockRadioCardInput,
-  })
-  .setRequiredFields(['experience_level'])
-  .build();
+  },
+  required: ['experience_level'],
+};
+
+export const schemaInputTypeRadioOptionsWithDetails = {
+  properties: {
+    health_perks: {
+      title: 'Health perks',
+      description:
+        'This example contains options with more custom details, under the x-jsf-presentation key',
+      oneOf: [
+        {
+          const: 'basic',
+          title: 'Basic',
+          'x-jsf-presentation': {
+            meta: {
+              displayCost: '$30.00/mo',
+            },
+          },
+          'x-another': 'extra-thing',
+        },
+        {
+          const: 'standard',
+          title: 'Standard',
+          'x-jsf-presentation': {
+            meta: {
+              displayCost: '$50.00/mo',
+            },
+          },
+        },
+      ],
+      'x-jsf-presentation': {
+        inputType: 'radio',
+      },
+      type: 'string',
+    },
+  },
+};
 
 /** @deprecated */
 export const schemaInputTypeSelectSoloDeprecated = JSONSchemaBuilder()