@nolwenture/formik-jsonschema-form 0.23.0 → 0.23.2

package/dist/fields/BooleanField.js

@@ -2,10 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { useFormikContext } from "formik";
 export const BooleanField = (props) => {
     const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
+    const { values, setValues } = useFormikContext();
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), _jsx("span", { onClick: () => {
+                        setValues(Object.assign(Object.assign({}, values), { [name]: !(values === null || values === void 0 ? void 0 : values[name]) }));
+                    }, children: label })] }) })));
 };

package/dist/fields/FileUploadField.js

@@ -66,5 +66,5 @@ export const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     });
-    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-object": name, children: _jsx(FileUploadField, Object.assign({}, inputProps, { name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"] })) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-object": name, children: _jsx(FileUploadField, Object.assign({}, inputProps, { name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps === null || inputProps === void 0 ? void 0 : inputProps.removeButton.hidden })) })));
 };

package/dist/sampleData/fileUpload.js

@@ -34,6 +34,7 @@ export const fileUploadUiSchema = {
             "ui:field": "FileUploadField",
             "ui:uploadButtonText": "Add?",
             "ui:infoText": "There's nothing here",
+            props: { removeButton: { hidden: true } },
         },
     },
 };

package/dist/styledComponents.d.ts

@@ -246,7 +246,7 @@ export declare const RemoveButton: import("styled-components/dist/types").IStyle
 export declare const FileInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FileUploadField: {
-    ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         FileUploadFieldFileUploadFieldContainerStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
         FileUploadFieldFileUploadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/styledComponents.js

@@ -419,6 +419,7 @@ export const TextAreaInputField = ({ inputProps, name, className, }) => {
 };
 export const BooleanFieldWrapper = styled.div `
   display: flex;
+  cursor: pointer;
 `;
 const ClickableEl = styled.button `
   background: none;
@@ -540,16 +541,15 @@ export const FileInfoText = styled.span `
   color: #555;
 `;
 export const FileUploadFieldContainer = styled.div ``;
-export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }) => {
+export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
     var _a, _b, _c;
-    const uiSchema = {};
     return (_jsxs(FileUploadFieldContainer, { className: className, children: [_jsxs("div", { children: [_jsx(FileUploadButton, { type: "button", onClick: () => { var _a; return (_a = document.getElementById(name)) === null || _a === void 0 ? void 0 : _a.click(); }, children: uploadButtonText !== null && uploadButtonText !== void 0 ? uploadButtonText : "Choose File" }), _jsx(HiddenFileInput, { id: name, name: name, type: "file", onChange: (event) => {
                             const file = event.currentTarget.files[0];
                             if (file) {
                                 handleFileUpload(file, setFieldValue);
                                 event.target.value = null;
                             }
-                        } }), !value ? (_jsx(FileInfoText, { children: infoText !== null && infoText !== void 0 ? infoText : "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsx(RemoveButton, Object.assign({ type: "button", onClick: () => handleRemoveFile(setFieldValue) }, removeButton === null || removeButton === void 0 ? void 0 : removeButton.props, { style: Object.assign({ color: "red", fontWeight: "bold" }, ((_b = (_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.props) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {})), children: (_c = removeButton === null || removeButton === void 0 ? void 0 : removeButton.content) !== null && _c !== void 0 ? _c : "X" }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(ProgressBarContainer, { children: [_jsx(ProgressBar, { "$progress": uploadProgress }), _jsxs(ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
+                        } }), !value ? (_jsx(FileInfoText, { children: infoText !== null && infoText !== void 0 ? infoText : "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), !hideRemoveButton && (_jsx(RemoveButton, Object.assign({ type: "button", onClick: () => handleRemoveFile(setFieldValue) }, removeButton === null || removeButton === void 0 ? void 0 : removeButton.props, { style: Object.assign({ color: "red", fontWeight: "bold" }, ((_b = (_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.props) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {})), children: (_c = removeButton === null || removeButton === void 0 ? void 0 : removeButton.content) !== null && _c !== void 0 ? _c : "X" })))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(ProgressBarContainer, { children: [_jsx(ProgressBar, { "$progress": uploadProgress }), _jsxs(ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
 };
 FileUploadField.styles = {
     FileUploadFieldFileUploadFieldContainerStyle: FileUploadFieldContainer,

package/dist/templates/ArrayFieldTemplate.js

@@ -15,6 +15,7 @@ import { FormRegistry } from "../Form";
 import { getDescription, getTitle } from "../utils";
 import { useExtractUiSchema } from "../hooks";
 import { RequiredIndicator } from "../styledComponents";
+import { getIn, useFormikContext } from "formik";
 export const ArrayFieldTemplate = (props) => {
     const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
     const { name, uiSchema, children } = props, otherProps = __rest(props, ["name", "uiSchema", "children"]);
@@ -30,5 +31,12 @@ export const ArrayFieldTemplate = (props) => {
         return acc;
     }, {});
     const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
-    return (_jsxs(ArrayFieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
+    // These lines make sure the error message is a string, which means the error
+    // is actually for the whole Array component, not for one of the children.
+    const { errors } = useFormikContext();
+    const error = getIn(errors, name);
+    // In case of array of objects, it will give error message as an object value,
+    // which is incorrect value for React, causing UI to crash.
+    const errorIsString = typeof error === "string";
+    return (_jsxs(ArrayFieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), errorIsString && _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
 };

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import { FormikContextType, FormikErrors } from "formik";
 import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import React, { MouseEventHandler } from "react";
+import Yup from "yup";
 export type FormProps<T> = React.PropsWithChildren<{
     /** If true, disabled prop is passed down to each field on the form */
     disabled?: boolean | undefined;
@@ -292,8 +293,18 @@ export type FileUploadFieldProps = {
     };
     uploadButtonText?: string;
     infoText?: string;
+    hideRemoveButton: boolean;
 };
 export type FormValues = {
     [key: string]: string | number | boolean | number[] | string[] | FormValues | FormValues[];
 };
+export type MixedOfProps = {
+    itemSchemas: Yup.ISchema<unknown, any, any, any>[];
+    additionalItemSchema?: Yup.ISchema<unknown, any, any, any>;
+};
+declare module "yup" {
+    interface ArraySchema<TIn extends any[] | null | undefined, TContext, TDefault = undefined, TFlags extends Yup.Flags = ""> extends Yup.Schema<TIn, TContext, TDefault, TFlags> {
+        mixedOf(schemas: MixedOfProps): this;
+    }
+}
 export {};

package/dist/utils/__tests/createInitialValues.test.js

@@ -66,7 +66,7 @@ describe("Create Initial Values", () => {
             name: "",
             age: 0,
             number: 0,
-            feeling: false,
+            feeling: "",
             arrayOfObject: [],
             nestedObject: {
                 hobbies: "",
@@ -95,17 +95,17 @@ describe("Create Initial Values", () => {
             // @ts-expect-error
             // Should only accept boolean false
             booleanIncorrect: true,
-            booleanCorrect: false,
+            booleanCorrect: "",
             object: {
                 string: "",
                 number: 0,
                 array: [],
-                boolean: false,
+                boolean: "",
                 nested: {
                     string: "",
                     number: 0,
                     array: [],
-                    boolean: false,
+                    boolean: "",
                 },
             },
         };

package/dist/utils/__tests/createValidationSchema.test.js

@@ -66,7 +66,11 @@ const simpleExampleSchema = {
         lastName: { type: "string", title: "Last name" },
         age: { type: "number", title: "Age" },
         drinksCoffee: { type: "boolean", title: "Do you drink coffee?" },
-        simpleArray: { type: "array", title: "Simple array" },
+        simpleArray: {
+            type: "array",
+            title: "Simple array",
+            items: [{ type: "string" }],
+        },
     },
 };
 const dependenciesExampleSchema = {
@@ -260,15 +264,15 @@ const nestedRequiredConditionalExampleSchema = {
     ],
 };
 describe("Create Validation Schema", () => {
-    function listErrors(schema, data) {
+    function listErrors(schema, data, definitions) {
         var _a;
-        const yupSchema = createValidationSchema(schema);
+        const yupSchema = createValidationSchema(schema, definitions);
         try {
             yupSchema.validateSync(data, { abortEarly: false });
         }
         catch (err) {
             const error = err;
-            return (_a = error === null || error === void 0 ? void 0 : error.inner) === null || _a === void 0 ? void 0 : _a.map((aa) => aa.path);
+            return (_a = error === null || error === void 0 ? void 0 : error.inner) === null || _a === void 0 ? void 0 : _a.map((e, i) => { var _a; return `${e.path}: ${error.errors[i].replace((_a = e === null || e === void 0 ? void 0 : e.path) !== null && _a !== void 0 ? _a : "", "").trim()}`; });
         }
     }
     it("creates yup validationSchema based on given JSON schema", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -332,7 +336,7 @@ describe("Create Validation Schema", () => {
             age: 17,
             drinksCoffee: false,
             simpleArray: "Hello :)",
-        }, { strict: true })).rejects.toThrow('simpleArray must be a `array` type, but the final value was: `"Hello :)"`.');
+        }, { strict: true })).rejects.toThrow('simpleArray must be a `tuple` type, but the final value was: `"Hello :)"`.');
     }));
     describe("Conditionals", () => {
         it("generates validation for dependencies without oneOf", () => {
@@ -443,11 +447,11 @@ describe("Create Validation Schema", () => {
                 customerType: "BUSINESS",
             });
             expect(faultyBusiness).toEqual(expect.arrayContaining([
-                "address.country",
-                "address.city",
-                "address.streetName",
-                "businessName",
-                "code",
+                "address.country: Required",
+                "address.city: Required",
+                "address.streetName: Required",
+                "businessName: Required",
+                "code: Required",
             ]));
             const business = listErrors(allOfExample, {
                 customerType: "BUSINESS",
@@ -464,11 +468,11 @@ describe("Create Validation Schema", () => {
                 customerType: "INDIVIDUAL",
             });
             expect(faultyIndividual).toEqual(expect.arrayContaining([
-                "address.country",
-                "address.city",
-                "address.streetName",
-                "firstName",
-                "code",
+                "address.country: Required",
+                "address.city: Required",
+                "address.streetName: Required",
+                "firstName: Required",
+                "code: Required",
             ]));
             const individual = listErrors(allOfExample, {
                 customerType: "INDIVIDUAL",
@@ -485,11 +489,11 @@ describe("Create Validation Schema", () => {
                 customerType: "UNKNOWN",
             });
             expect(faultyUnknown).toEqual(expect.arrayContaining([
-                "address.country",
-                "address.city",
-                "address.streetName",
-                "newCustomer",
-                "code",
+                "address.country: Required",
+                "address.city: Required",
+                "address.streetName: Required",
+                "newCustomer: Required",
+                "code: Required",
             ]));
             const unknown = listErrors(allOfExample, {
                 customerType: "UNKNOWN",
@@ -530,4 +534,228 @@ describe("Create Validation Schema", () => {
             expect(isValidWhenConditionMetAndRequiredFieldsAreFilled).toEqual(true);
         });
     });
+    describe("Array", () => {
+        const createArraySchema = ({ items, additionalItems, }) => ({
+            title: "Array of objects Schema",
+            required: ["arrayOfObjects"],
+            properties: {
+                arrayOfObjects: Object.assign({ type: "array", title: "A list of fixed items", items }, (additionalItems ? { additionalItems } : {})),
+            },
+        });
+        it("requires fields with array items and additionalItems", () => __awaiter(void 0, void 0, void 0, function* () {
+            const arraySchema = createArraySchema({
+                items: [
+                    { title: "A string value", type: "string" },
+                    { title: "An integer value", type: "integer" },
+                    { title: "A number value", type: "number" },
+                    {
+                        title: "An arrayContaining value",
+                        type: "array",
+                        items: [{ title: "A string value", type: "string" }],
+                    },
+                    { title: "a boolean value", type: "boolean" },
+                    {
+                        type: "object",
+                        title: "User",
+                        required: ["name"],
+                        properties: {
+                            name: { type: "string", title: "Name" },
+                            age: { type: "number", title: "Age" },
+                        },
+                    },
+                ],
+                additionalItems: {
+                    title: "Additional item",
+                    type: "number",
+                },
+            });
+            const faultyItem1 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    true,
+                    123.123,
+                    456,
+                    ["array"],
+                    false,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(faultyItem1).toEqual([
+                "arrayOfObjects[0]: must be a `string` type, but the final value was: `true`.",
+            ]);
+            const faultyItem2 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    false,
+                    456,
+                    ["array"],
+                    false,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(faultyItem2).toEqual([
+                "arrayOfObjects[1]: must be a `number` type, but the final value was: `false`.",
+            ]);
+            const faultyItem3 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    123.123,
+                    "incorrect",
+                    ["array"],
+                    false,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(faultyItem3).toEqual([
+                'arrayOfObjects[2]: must be a `number` type, but the final value was: `"incorrect"`.',
+            ]);
+            const faultyItem4 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    123.123,
+                    456,
+                    { id: 123 },
+                    false,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(faultyItem4).toEqual([
+                'arrayOfObjects[3]: must be a `tuple` type, but the final value was: `{\n  "id": "123"\n}`.',
+            ]);
+            const faultyItem5 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    123.123,
+                    456,
+                    ["array"],
+                    3.154,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(faultyItem5).toEqual([
+                "arrayOfObjects[4]: must be a `boolean` type, but the final value was: `3.154`.",
+            ]);
+            const faultyItem6 = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    123.123,
+                    456,
+                    ["array"],
+                    false,
+                    "faulty value",
+                ],
+            });
+            expect(faultyItem6).toEqual([
+                'arrayOfObjects[5]: must be a `object` type, but the final value was: `"faulty value"`.',
+            ]);
+            const objectPropertyRequired = listErrors(arraySchema, {
+                arrayOfObjects: ["string", 123.123, 456, ["array"], false, { age: 27 }],
+            });
+            expect(objectPropertyRequired).toEqual([
+                "arrayOfObjects[5].name: Required",
+            ]);
+            const allRequired = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    undefined,
+                    undefined,
+                    undefined,
+                    [],
+                    undefined,
+                    undefined,
+                ],
+            });
+            expect(allRequired).toEqual([
+                "arrayOfObjects[0]: Required",
+                "arrayOfObjects[1]: Required",
+                "arrayOfObjects[2]: Required",
+                "arrayOfObjects[3]: tuple value has too few items, expected a length of 1 but got 0 for value: `[]`",
+                "arrayOfObjects[4]: Required",
+                "arrayOfObjects[5]: Required",
+            ]);
+            const correct = listErrors(arraySchema, {
+                arrayOfObjects: [
+                    "string",
+                    123.123,
+                    456,
+                    ["array"],
+                    false,
+                    { name: "John", age: 27 },
+                ],
+            });
+            expect(correct).toEqual(undefined);
+        }));
+        it("required fields with array items only", () => __awaiter(void 0, void 0, void 0, function* () {
+            const arraySchema = createArraySchema({
+                items: [
+                    { title: "A string value", type: "string" },
+                    { title: "An integer value", type: "integer" },
+                    { title: "A boolean value", type: "boolean" },
+                    { title: "A number value", type: "number" },
+                ],
+            });
+            const faulty = listErrors(arraySchema, {
+                arrayOfObjects: ["name", undefined, undefined, false],
+            });
+            expect(faulty).toEqual([
+                "arrayOfObjects[1]: Required",
+                "arrayOfObjects[2]: Required",
+                "arrayOfObjects[3]: must be a `number` type, but the final value was: `false`.",
+            ]);
+            const coprrecorrect = listErrors(arraySchema, {
+                arrayOfObjects: ["name", 123, true, 123.141241],
+            });
+            expect(coprrecorrect).toEqual(undefined);
+        }));
+        it.only("requires fields with array items and additionalItems with definitions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const arraySchema = {
+                title: "TITLE",
+                properties: {
+                    arrayOfDefinitions: {
+                        type: "array",
+                        title: "Array of objects",
+                        items: [{ $ref: "#/definitions/commodity" }],
+                        additionalItems: { $ref: "#/definitions/commodity" },
+                    },
+                },
+            };
+            const definitions = {
+                commodity: {
+                    type: "object",
+                    title: "Item",
+                    required: ["commodityId"],
+                    properties: {
+                        commodityId: {
+                            $ref: "#/definitions/selection",
+                        },
+                        insuredValue: {
+                            type: "number",
+                            title: "Insured value in USD",
+                        },
+                    },
+                },
+                selection: {
+                    type: "string",
+                    title: "HS Code",
+                    oneOf: [
+                        { const: "1", title: "One" },
+                        { const: "2", title: "Two" },
+                        { const: "3", title: "Three" },
+                    ],
+                },
+            };
+            const faulty = listErrors(arraySchema, { arrayOfDefinitions: [true, 123, []] }, definitions);
+            expect(faulty).toEqual([
+                "arrayOfDefinitions[0]: must be a `object` type, but the final value was: `true`.",
+                "arrayOfDefinitions[1]: must be a `object` type, but the final value was: `123`.",
+                "arrayOfDefinitions[2]: must be a `object` type, but the final value was: `[]`.",
+            ]);
+            const correct = listErrors(arraySchema, {
+                arrayOfDefinitions: [
+                    { commodityId: "1", insuredValue: "123" },
+                    { commodityId: "2", insuredValue: "456" },
+                    { commodityId: "3", insuredValue: "789" },
+                ],
+            }, definitions);
+            expect(correct).toEqual(undefined);
+        }));
+    });
 });

package/dist/utils/createInitialValues.d.ts

@@ -1,5 +1,5 @@
 import { JSONSchema7 } from "json-schema";
-type PropertyValue = 0 | "" | false | never[] | InitialValuesType;
+type PropertyValue = 0 | "" | never[] | InitialValuesType;
 export interface InitialValuesType {
     [key: string]: PropertyValue;
 }

package/dist/utils/createInitialValues.js

@@ -13,12 +13,11 @@ export function createInitialValues(schema, definitions = {}) {
         switch (type) {
             case "array":
                 return [];
-            case "boolean":
-                return false;
-            case "null":
-                return "";
             case "number":
                 return 0;
+            // Boolean cannot be true/false by default, since that is a valid value
+            case "boolean":
+            case "null":
             case "string":
                 return "";
             default:

package/dist/utils/createValidationSchema.js

@@ -12,6 +12,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as Yup from "yup";
 import { resolveOneOfValue } from "./resolveSchema";
 import { solveReferences } from "./solveReferences";
+// Difficult to solve
+// @ts-expect-error
+Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchema }) {
+    return Yup.lazy((value) => {
+        var _a;
+        const valueLength = (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0;
+        const numOfAdditionalItems = itemSchemas.length > valueLength ? 0 : valueLength - itemSchemas.length;
+        const additionalSchemas = additionalItemSchema
+            ? Array(numOfAdditionalItems).fill(additionalItemSchema)
+            : [];
+        return Yup.tuple([...itemSchemas, ...additionalSchemas]).typeError("Required");
+    });
+});
 function getConditionalValidations(schema) {
     const { dependencies, allOf } = schema;
     let conditionalValidations = [];
@@ -96,7 +109,8 @@ function getConditionalValidations(schema) {
     }
     return conditionalValidations;
 }
-function getYupType(type) {
+function getYupType(schema) {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
     switch (type) {
         case "object":
             return Yup.object();
@@ -112,7 +126,8 @@ function getYupType(type) {
         case "string":
             return Yup.string();
         default:
-            throw new Error("Unsupported schema type");
+            console.error({ schema });
+            throw new Error(`Unsupported schema type: ${type}`);
     }
 }
 export function createValidationSchema(schema, definitions = {}, conditionsContext = {}, condition) {
@@ -122,38 +137,43 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
     }
     const schemaDefinitions = Object.assign(Object.assign({}, definitions), ((_a = schema.definitions) !== null && _a !== void 0 ? _a : {}));
     const requiredFields = schema.required;
-    function getValue(schema, key) {
-        var _a;
+    function getValue(givenSchema, key, required) {
+        var _a, _b;
+        const { schema } = solveReferences(givenSchema, schemaDefinitions, {}, {});
         let type = schema.type;
         let yupSchema;
         if (schema.properties) {
             yupSchema = createValidationSchema(schema, schemaDefinitions, conditionsContext);
             type = type !== null && type !== void 0 ? type : "object";
         }
+        else if (type === "array") {
+            const schemaItems = (_a = schema === null || schema === void 0 ? void 0 : schema.items) !== null && _a !== void 0 ? _a : [];
+            const items = Array.isArray(schemaItems) ? schemaItems : [schemaItems];
+            yupSchema = Yup.array().mixedOf({
+                itemSchemas: items.map((item) => getValue(item, "#ignore-this", true)),
+                additionalItemSchema: (schema === null || schema === void 0 ? void 0 : schema.additionalItems)
+                    ? getValue(schema === null || schema === void 0 ? void 0 : schema.additionalItems, "#ignore-this", true)
+                    : undefined,
+            });
+        }
         else {
-            yupSchema = getYupType(type);
+            yupSchema = getYupType(schema);
         }
         if (type === "null")
             yupSchema.nullable();
-        if (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes(key)) {
-            if (type === "array") {
-                yupSchema = yupSchema
-                    .min(1, "Required")
-                    .required("Required");
-            }
-            else {
-                yupSchema = yupSchema["required"]("Required");
-            }
+        const isRequired = (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes(key)) || required === true;
+        if (isRequired && type !== "array") {
+            yupSchema = yupSchema.required("Required");
         }
         if (!condition) {
             return yupSchema;
         }
-        const existing = (_a = conditionsContext[key]) !== null && _a !== void 0 ? _a : [];
+        const existing = (_b = conditionsContext[key]) !== null && _b !== void 0 ? _b : [];
         conditionsContext[key] = [...existing, { yupSchema, condition }];
         // TODO: The latest given type for duplicate field is used.
         // This might become a problem at some point, but testing has not
         // shown any problems so far.
-        const yupType = getYupType(type).when(condition.dependentKeys, {
+        const yupType = getYupType(schema).when(condition.dependentKeys, {
             is: condition.conditionFn,
             then: () => yupSchema,
         });
@@ -172,8 +192,7 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
     const baseValidationSchema = Object.keys(schema.properties).reduce((validationSchema, key) => {
         var _a;
         const value = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[key];
-        const solvedValue = solveReferences(value, schemaDefinitions, {}, {});
-        return validationSchema.concat(Yup.object().shape({ [key]: getValue(solvedValue.schema, key) }));
+        return validationSchema.concat(Yup.object().shape({ [key]: getValue(value, key) }));
     }, Yup.object().shape({}));
     return getConditionalValidations(schema).reduce((validationSchema, conditionalValidation) => {
         const solvedSchemas = solveReferences(conditionalValidation.schema, schemaDefinitions, {}, {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [