@nolwenture/formik-jsonschema-form 0.23.1 → 0.23.3

package/README.md

@@ -1009,5 +1009,6 @@ Wildcard `"*"` and `hidden fields` cannot be combined.
   components={components} // Override form components (e.g. wrappers) with custom ones
   formContext={formContext} // Form context
   useItemsAsAdditionalItems={true} // Allow "items" to be used as "additionalItems" in array fields that are missing "additionalItems", false by default
+  hideSubmit={true} // hides submit-button of the form
 />
 ```

package/dist/Form.js

@@ -30,7 +30,7 @@ export const Form = (props) => {
         "hideUnmarkedAdditionalProperties",
     ]);
     const { isSubmitting } = useFormikContext();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -45,5 +45,5 @@ export const Form = (props) => {
     };
     const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return (_jsx(FormRegistry.Provider, { value: registry, children: _jsxs(FormEl, { className: className, children: [_jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, { type: "submit", disabled: isSubmitting, children: "Send" }) }))] }) }));
+    return (_jsx(FormRegistry.Provider, { value: registry, children: _jsxs(FormEl, { className: className, children: [_jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: !hideSubmit && (_jsx(FormButton, { type: "submit", disabled: isSubmitting, children: "Send" })) }))] }) }));
 };

package/dist/Form.stories.d.ts

@@ -15,3 +15,4 @@ export declare const WithRefAndDefinitions: Story;
 export declare const MultipleChoice: Story;
 export declare const Collapsible: Story;
 export declare const FileUploadForm: Story;
+export declare const HideSubmitButton: Story;

package/dist/Form.stories.js

@@ -232,3 +232,10 @@ export const FileUploadForm = {
         uiSchema: fileUploadUiSchema,
     },
 };
+export const HideSubmitButton = {
+    args: {
+        schema: simpleSchema,
+        uiSchema: simpleUiSchema,
+        hideSubmit: true,
+    },
+};

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/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;

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;
@@ -26,6 +27,7 @@ export type FormProps<T> = React.PropsWithChildren<{
      * @default false
      */
     noHtml5Validate?: boolean | undefined;
+    hideSubmit?: boolean | undefined;
 }>;
 export type Schema = JSONSchema7;
 export type UiSchema = {
@@ -297,4 +299,13 @@ export type FileUploadFieldProps = {
 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.1",
+  "version": "0.23.3",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [