@remoteoss/json-schema-form 0.7.1-dev.20231025070834 → 0.7.1-dev.20231031082524

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231025070834
- Generated: Wed, 25 Oct 2023 07:08:56 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -461,17 +461,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => (0, import_yup.string)().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString) => {
+    if (isString) {
+      return (0, import_yup.string)().nullable();
     }
-    if (options?.includes(null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).oneOf(options, ({ value }) => {
-    return `The option ${JSON.stringify(value)} is not valid.`;
-  }),
+    return (0, import_yup.string)().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      if (options?.includes(null)) {
+        return value;
+      }
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = (0, import_yup.string)().nullable().transform((value) => {
       if (value === "") {
@@ -539,8 +544,9 @@ var getOptions = (field) => {
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231025070834
- Generated: Wed, 25 Oct 2023 07:08:56 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -425,17 +425,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => string().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString) => {
+    if (isString) {
+      return string().nullable();
     }
-    if (options?.includes(null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).oneOf(options, ({ value }) => {
-    return `The option ${JSON.stringify(value)} is not valid.`;
-  }),
+    return string().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      if (options?.includes(null)) {
+        return value;
+      }
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = string().nullable().transform((value) => {
       if (value === "") {
@@ -503,8 +508,9 @@ var getOptions = (field) => {
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231025070834
- Generated: Wed, 25 Oct 2023 07:08:56 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -11779,17 +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?.includes(null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).oneOf(options, ({ value }) => {
-    return `The option ${JSON.stringify(value)} is not valid.`;
-  }),
+    return StringSchema().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      if (options?.includes(null)) {
+        return value;
+      }
+      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 === "") {
@@ -11857,8 +11862,9 @@ var getOptions = (field) => {
 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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.7.1-dev.20231025070834",
+  "version": "0.7.1-dev.20231031082524",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",

package/src/tests/createHeadlessForm.test.js

@@ -15,6 +15,7 @@ import {
   schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
+  schemaInputTypeSelectString,
   schemaInputTypeSelectMultipleDeprecated,
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
@@ -430,7 +431,7 @@ describe('createHeadlessForm', () => {
   });
 
   describe('field support', () => {
-    function assertOptionsAllowed({ handleValidation, fieldName, validOptions }) {
+    function assertOptionsAllowed({ handleValidation, fieldName, validOptions, isString = false }) {
       const validateForm = (vals) => friendlyError(handleValidation(vals));
 
       // All allowed options are valid
@@ -438,27 +439,34 @@ describe('createHeadlessForm', () => {
         expect(validateForm({ [fieldName]: value })).toBeUndefined();
       });
 
-      // Any other arbitrary value is not valid.
-      expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
-        [fieldName]: 'The option "blah-blah" is not valid.',
-      });
+      if (!isString) {
+        // Any other arbitrary value is not valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
+          [fieldName]: 'The option "blah-blah" is not valid.',
+        });
 
-      // Given undefined, it says it's a  required field.
-      expect(validateForm({})).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // Given undefined, it says it's a  required field.
+        expect(validateForm({})).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, empty string ("") is also considered empty. @BUG RMT-518
-      // Expectation: The error to be "The option '' is not valid."
-      expect(validateForm({ [fieldName]: '' })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, empty string ("") is also considered empty. @BUG RMT-518
+        // Expectation: The error to be "The option '' is not valid."
+        expect(validateForm({ [fieldName]: '' })).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, null is also considered empty @BUG RMT-518
-      // Expectation: The error to be "The option null is not valid."
-      expect(validateForm({ [fieldName]: null })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, null is also considered empty @BUG RMT-518
+        // Expectation: The error to be "The option null is not valid."
+        expect(validateForm({ [fieldName]: null })).toEqual({
+          [fieldName]: 'Required field',
+        });
+      }
+
+      if (isString) {
+        // Any other arbitrary value is valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toBeUndefined();
+      }
     }
 
     it('support "text" field type', () => {
@@ -630,6 +638,41 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('supports "select" field type with string option', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeSelectString);
+      const fieldSelect = fields[0];
+      expect(fieldSelect).toMatchObject({
+        name: 'browsers',
+        label: 'Browsers (solo)',
+        description: 'This solo select also includes a disabled option.',
+        options: [
+          {
+            value: 'chr',
+            label: 'Chrome',
+          },
+          {
+            value: 'ff',
+            label: 'Firefox',
+          },
+          {
+            value: 'ie',
+            label: 'Internet Explorer',
+            disabled: true,
+          },
+          { value: undefined, type: 'string', label: '{Create another}' },
+        ],
+      });
+
+      expect(fieldSelect).not.toHaveProperty('multiple');
+
+      assertOptionsAllowed({
+        handleValidation,
+        fieldName: 'browsers',
+        validOptions: ['chr', 'ff', 'ie'],
+        isString: true,
+      });
+    });
+
     it('supports "select" field type with multiple options @deprecated', () => {
       const result = createHeadlessForm(schemaInputTypeSelectMultipleDeprecated);
       expect(result).toMatchObject({
@@ -1947,9 +1990,9 @@ describe('createHeadlessForm', () => {
             },
           },
           {
-            name: 'a_or_b',
-            label: 'A dropdown',
-            type: 'select',
+            name: 'role',
+            label: 'Role',
+            type: 'text',
             statement: {
               description: 'This is another statement message, but more severe.',
               inputType: 'statement',

package/src/tests/helpers.js

@@ -238,6 +238,11 @@ export const mockSelectInputSolo = {
   },
 };
 
+export const mockSelectInputSoloCreatable = {
+  ...mockSelectInputSolo,
+  oneOf: [...mockSelectInputSolo.oneOf, { type: 'string', title: '{Create another}' }],
+};
+
 export const mockSelectInputMultiple = {
   title: 'Browsers (multiple)',
   description: 'This multi-select also includes a disabled option.',
@@ -897,6 +902,10 @@ export const schemaInputTypeSelectSolo = JSONSchemaBuilder()
   .setRequiredFields(['browsers'])
   .build();
 
+export const schemaInputTypeSelectString = JSONSchemaBuilder().addInput({
+  browsers: mockSelectInputSoloCreatable,
+});
+
 /** @deprecated */
 export const schemaInputTypeSelectMultipleDeprecated = JSONSchemaBuilder()
   .addInput({