@nolwenture/formik-jsonschema-form 0.18.0 → 0.20.0

package/dist/fields/SearchableSelectField.js

@@ -9,11 +9,11 @@ export const SearchableSelectField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, } = useExtractUiSchema(uiSchema);
-    const [_, __, { setValue }] = useField(name);
+    const [{ value }, __, { setValue }] = useField(name);
     const enums = useMemo(() => getEnums(props), [props]);
     const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
     const [showOptions, setShowOptions] = useState(false);
-    const [searchTerm, setSearchTerm] = useState("");
+    const [searchTerm, setSearchTerm] = useState(() => { var _a, _b; return (_b = (_a = options.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ""; });
     const [displayedItems, setDisplayedItems] = useState([]);
     const [itemsToShow, setItemsToShow] = useState(10);
     const moreRef = useRef(null);
@@ -53,5 +53,5 @@ export const SearchableSelectField = (props) => {
     const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
     const showMoreOption = displayedItems.length < filteredOptions.length &&
         displayedItems.length >= 10;
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "X" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
 };

package/dist/sampleData/completeSchema.js

@@ -318,7 +318,7 @@ export const completeUiSchema = {
         "ui:field": "SearchableSelectField",
         "ui:options": {
             placeholder: "Search...",
-            clearButtonText: "Clear",
+            clearButtonText: "X",
             expandText: "More results",
             emptySearchMessage: "...no matching results found",
         },

package/dist/styledComponents.d.ts

@@ -167,6 +167,7 @@ export declare const RadioButtonField: {
 };
 export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const MultiSelectSearchContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const MultiSelectInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>, "ref"> & {
@@ -184,6 +185,7 @@ export declare const SearchableMultiTagSelectField: {
     ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         MultiSelectContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        MultiSelectSearchContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
         MultiSelectInputStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
             ref?: unknown;
         }, never>, "ref"> & {
@@ -236,6 +238,6 @@ export declare const SearchInput: import("styled-components").IStyledComponent<"
 }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
-export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
 export declare const SearchInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

package/dist/styledComponents.js

@@ -293,7 +293,14 @@ export const MultiSelectContainer = styled.div `
   display: flex;
   flex-direction: column;
 `;
-export const MultiSelectInput = styled(FieldInput) ``;
+export const MultiSelectSearchContainer = styled.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+export const MultiSelectInput = styled(FieldInput) `
+  width: 100%;
+`;
 export const MultiSelectBadgeContainer = styled.div `
   margin: 0.3em 0;
   display: inline-flex;
@@ -313,13 +320,15 @@ export const MultiSelectBadgeCloseElement = styled.span `
   font-family: sans-serif;
 `;
 export const MultiSelectOptionList = styled.ul `
+  width: 100%;
   padding: unset;
   margin: unset;
   border: 1px solid gray;
   border-radius: 0.2em;
   position: absolute;
   background: white;
-  margin: 1.3em 0;
+  top: 100%;
+  z-index: 1000;
 `;
 export const MultiSelectOptionListItem = styled.li `
   cursor: pointer;
@@ -345,22 +354,23 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
-                            setSearch(e.currentTarget.value);
-                        }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsxs(MultiSelectSearchContainer, { children: [_jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                    setSearch(e.currentTarget.value);
+                                }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                        var _a;
+                                        setFieldValue(name, [
+                                            ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                        ]);
+                                        setSearch("");
+                                    }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) }))] }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
                             return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
-                        }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
-                                var _a;
-                                setFieldValue(name, [
-                                    ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                ]);
-                                setSearch("");
-                            }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
+                        }) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
         } }));
 };
 SearchableMultiTagSelectField.styles = {
     MultiSelectContainerStyle: MultiSelectContainer,
+    MultiSelectSearchContainerStyle: MultiSelectSearchContainer,
     MultiSelectInputStyle: MultiSelectInput,
     MultiSelectBadgeContainerStyle: MultiSelectBadgeContainer,
     MultiSelectBadgeStyle: MultiSelectBadge,
@@ -402,11 +412,10 @@ export const Icon = styled.div `
 export const CollapsibleChildWrapper = styled.div ``;
 export const CollapsibleObjectFieldWrapper = ObjectFieldWrapper;
 export const CollapsibleObjectFieldTitle = ObjectFieldTitle;
-export const SearchableSelectContainer = styled(MultiSelectContainer) ``;
+export const SearchableSelectContainer = styled(MultiSelectSearchContainer) ``;
 export const SearchDropdownContainer = styled(MultiSelectOptionList) `
   overflow-y: auto;
   overflow-x: auto;
-  max-width: 16rem;
   max-height: 6rem;
   white-space: nowrap;
 `;
@@ -426,7 +435,24 @@ export const SearchNotFound = styled(MultiSelectOptionListItem) `
   }
 `;
 export const SearchInput = styled(FieldInput) `
+  width: 100%;
+  padding-right: 1.5em;
   text-overflow: ellipsis;
 `;
-export const SearchClearButton = styled.button ``;
-export const SearchInputContainer = styled.div ``;
+export const SearchClearButton = styled.span `
+  cursor: pointer;
+  position: absolute;
+  right: 0.3em;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-color: #ccc;
+  border-radius: 50%;
+  line-height: 1em;
+  min-width: 1em;
+  height: 1em;
+  text-align: center;
+`;
+export const SearchInputContainer = styled.div `
+  display: flex;
+`;

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

@@ -69,6 +69,125 @@ const simpleExampleSchema = {
         simpleArray: { type: "array", title: "Simple array" },
     },
 };
+const dependenciesExampleSchema = {
+    properties: {
+        dependencyField: { type: "string" },
+        dependencySelect: {
+            type: "string",
+            oneOf: [
+                { const: "one", title: "One" },
+                { const: "two", title: "Two" },
+            ],
+        },
+    },
+    dependencies: {
+        dependencyField: {
+            properties: {
+                dependantField: { type: "string" },
+            },
+            required: ["dependantField"],
+        },
+        dependencySelect: {
+            oneOf: [
+                {
+                    properties: {
+                        dependencySelect: {
+                            enum: ["one"],
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        dependencySelect: {
+                            enum: ["two"],
+                        },
+                        dependantOnTwo: {
+                            type: "string",
+                        },
+                    },
+                    required: ["dependantOnTwo"],
+                },
+            ],
+        },
+    },
+};
+const ifThenElseExampleSchema = {
+    type: "object",
+    properties: {
+        allOfBool1: { type: "boolean" },
+        allOfBool2: { type: "boolean" },
+    },
+    allOf: [
+        {
+            if: {
+                properties: {
+                    allOfBool1: { const: true },
+                },
+            },
+            then: {
+                properties: {
+                    firstTrueRequiredField: { type: "string" },
+                },
+                required: ["firstTrueRequiredField"],
+            },
+            else: {
+                properties: {
+                    firstFalseRequiredField: { type: "string" },
+                },
+                required: ["firstFalseRequiredField"],
+            },
+        },
+        {
+            if: {
+                properties: {
+                    allOfBool1: { const: false },
+                    allOfBool2: { const: false },
+                },
+            },
+            then: {
+                properties: {
+                    bothFalseRequiredField: { type: "string" },
+                },
+                required: ["bothFalseRequiredField"],
+            },
+            else: {
+                properties: {
+                    oneOrMoreTrueRequiredField: { type: "string" },
+                },
+                required: ["oneOrMoreTrueRequiredField"],
+            },
+        },
+    ],
+};
+const nestedRequiredConditionalExampleSchema = {
+    type: "object",
+    properties: {
+        textField: { type: "string" },
+        checkbox: { type: "boolean" },
+    },
+    allOf: [
+        {
+            if: { properties: { checkbox: { const: true } } },
+            then: {
+                properties: {
+                    myObject: {
+                        type: "object",
+                        properties: {
+                            foo: { type: "string" },
+                            nestedObject: {
+                                type: "object",
+                                properties: { nestedFoo: { type: "string" } },
+                                required: ["nestedFoo"],
+                            },
+                        },
+                        required: ["foo"],
+                    },
+                },
+                required: ["myObject"],
+            },
+        },
+    ],
+};
 describe("Create Validation Schema", () => {
     it("creates yup validationSchema based on given JSON schema", () => __awaiter(void 0, void 0, void 0, function* () {
         const result = createValidationSchema(exampleSchema);
@@ -133,4 +252,130 @@ describe("Create Validation Schema", () => {
             simpleArray: "Hello :)",
         }, { strict: true })).rejects.toThrow('simpleArray must be a `array` type, but the final value was: `"Hello :)"`.');
     }));
+    describe("Conditionals", () => {
+        it("generates validation for dependencies without oneOf", () => {
+            const result = createValidationSchema(dependenciesExampleSchema);
+            const invalid = result.isValidSync({
+                dependencyField: "Hello",
+            });
+            const valid = result.isValidSync({
+                dependencyField: "Hello",
+                dependantField: "Hi",
+            });
+            expect(invalid).toEqual(false);
+            expect(valid).toEqual(true);
+        });
+        it("generates validation for dependencies with oneOf", () => {
+            const result = createValidationSchema(dependenciesExampleSchema);
+            const noDependantFields = result.isValidSync({
+                dependencySelect: "one",
+            });
+            const invalidWithDependantFields = result.isValidSync({
+                dependencySelect: "two",
+            });
+            const validWithDependantFields = result.isValidSync({
+                dependencySelect: "two",
+                dependantOnTwo: "value",
+            });
+            expect(noDependantFields).toEqual(true);
+            expect(invalidWithDependantFields).toEqual(false);
+            expect(validWithDependantFields).toEqual(true);
+        });
+        it("generates validation for if-then-else", () => {
+            const result = createValidationSchema(ifThenElseExampleSchema);
+            const bothFalseInvalid1 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: false,
+            });
+            const bothFalseInvalid2 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: false,
+                firstFalseRequiredField: ".",
+            });
+            const bothFalseInvalid3 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: false,
+                bothFalseRequiredField: ".",
+            });
+            const bothFalseValid = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: false,
+                firstFalseRequiredField: ".",
+                bothFalseRequiredField: ".",
+            });
+            const firstFalseInvalid1 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: true,
+            });
+            const firstFalseInvalid2 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: true,
+                firstFalseRequiredField: ".",
+            });
+            const firstFalseInvalid3 = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: true,
+                oneOrMoreTrueRequiredField: ".",
+            });
+            const firstFalseValid = result.isValidSync({
+                allOfBool1: false,
+                allOfBool2: true,
+                firstFalseRequiredField: ".",
+                oneOrMoreTrueRequiredField: ".",
+            });
+            const firstTrueInvalid1 = result.isValidSync({
+                allOfBool1: true,
+                allOfBool2: false,
+            });
+            const firstTrueInvalid2 = result.isValidSync({
+                allOfBool1: true,
+                allOfBool2: false,
+                firstTrueRequiredField: ".",
+            });
+            const firstTrueInvalid3 = result.isValidSync({
+                allOfBool1: true,
+                allOfBool2: false,
+                oneOrMoreTrueRequiredField: ".",
+            });
+            const firstTrueValid = result.isValidSync({
+                allOfBool1: true,
+                allOfBool2: false,
+                firstTrueRequiredField: ".",
+                oneOrMoreTrueRequiredField: ".",
+            });
+            expect(bothFalseInvalid1).toEqual(false);
+            expect(bothFalseInvalid2).toEqual(false);
+            expect(bothFalseInvalid3).toEqual(false);
+            expect(bothFalseValid).toEqual(true);
+            expect(firstFalseInvalid1).toEqual(false);
+            expect(firstFalseInvalid2).toEqual(false);
+            expect(firstFalseInvalid3).toEqual(false);
+            expect(firstFalseValid).toEqual(true);
+            expect(firstTrueInvalid1).toEqual(false);
+            expect(firstTrueInvalid2).toEqual(false);
+            expect(firstTrueInvalid3).toEqual(false);
+            expect(firstTrueValid).toEqual(true);
+        });
+        it("generates validation for conditional objects with nested validations", () => {
+            const result = createValidationSchema(nestedRequiredConditionalExampleSchema);
+            const isValidWhenConditionNotNet = result.isValidSync({
+                checkbox: false,
+            });
+            const isNotValidWhenConditionMetAndMissingRequiredFields = result.isValidSync({
+                checkbox: true,
+            });
+            const isValidWhenConditionMetAndRequiredFieldsAreFilled = result.isValidSync({
+                checkbox: true,
+                myObject: {
+                    foo: ".",
+                    nestedObject: {
+                        nestedFoo: ".",
+                    },
+                },
+            });
+            expect(isValidWhenConditionNotNet).toEqual(true);
+            expect(isNotValidWhenConditionMetAndMissingRequiredFields).toEqual(false);
+            expect(isValidWhenConditionMetAndRequiredFieldsAreFilled).toEqual(true);
+        });
+    });
 });

package/dist/utils/createValidationSchema.d.ts

@@ -1,3 +1,8 @@
-import { JSONSchema7 } from "json-schema";
 import * as Yup from "yup";
-export declare function createValidationSchema(schema: JSONSchema7, definitions?: JSONSchema7): Yup.ObjectSchema<{}, Yup.AnyObject, {}, "">;
+import { Schema } from "../types";
+type Condition = {
+    dependentKeys: string[];
+    conditionFn: (...value: any[]) => boolean;
+};
+export declare function createValidationSchema(schema: Schema, definitions?: Schema, condition?: Condition): Yup.ObjectSchema<{}, Yup.AnyObject, {}, "">;
+export {};

package/dist/utils/createValidationSchema.js

@@ -1,54 +1,163 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { solveReferences } from "./solveReferences";
 import * as Yup from "yup";
-export function createValidationSchema(schema, definitions = {}) {
+import { resolveOneOfValue } from "./resolveSchema";
+function getConditionalValidations(schema) {
+    const { dependencies, allOf } = schema;
+    let conditionalValidations = [];
+    if (dependencies) {
+        conditionalValidations = Object.entries(dependencies).reduce((validations, [key, dependency]) => {
+            if (typeof dependency === "boolean" || Array.isArray(dependency)) {
+                return validations;
+            }
+            const oneOf = dependency.oneOf;
+            if (Array.isArray(oneOf)) {
+                oneOf.forEach((oneOfSchema) => {
+                    var _a, _b;
+                    if (typeof oneOfSchema === "boolean") {
+                        return;
+                    }
+                    const _c = (_a = oneOfSchema.properties) !== null && _a !== void 0 ? _a : {}, _d = key, propertyToCheck = _c[_d], propertiesSansKey = __rest(_c, [typeof _d === "symbol" ? _d : _d + ""]);
+                    // Push validation only if there are additions in schema
+                    if (((_b = Object.keys(propertiesSansKey)) === null || _b === void 0 ? void 0 : _b.length) ||
+                        Object.keys(oneOfSchema).length > 1) {
+                        validations.push({
+                            schema: Object.assign(Object.assign({}, oneOfSchema), { properties: propertiesSansKey }),
+                            condition: {
+                                dependentKeys: [key],
+                                conditionFn: (value) => value === resolveOneOfValue(propertyToCheck),
+                            },
+                        });
+                    }
+                });
+                return validations;
+            }
+            // Depends on presence of `key` property value
+            validations.push({
+                schema: dependency,
+                condition: {
+                    dependentKeys: [key],
+                    conditionFn: (value) => value !== undefined && value !== "",
+                },
+            });
+            return validations;
+        }, conditionalValidations);
+    }
+    if (allOf) {
+        conditionalValidations = allOf.reduce((validations, condition) => {
+            if (typeof condition === "boolean") {
+                return validations;
+            }
+            const { if: expression, then, else: otherwise } = condition, schemaWithoutCondition = __rest(condition, ["if", "then", "else"]);
+            if (expression &&
+                typeof expression !== "boolean" &&
+                expression.properties) {
+                const keyValueMap = Object.entries(expression.properties).reduce((result, [key, value]) => {
+                    if (typeof value !== "boolean") {
+                        return Object.assign(Object.assign({}, result), { [key]: value.const });
+                    }
+                    return result;
+                }, {});
+                const dependentKeys = Object.keys(keyValueMap);
+                if (then && typeof then !== "boolean") {
+                    validations.push({
+                        schema: then,
+                        condition: {
+                            dependentKeys,
+                            conditionFn: (...args) => args.every((value, index) => keyValueMap[dependentKeys[index]] === value),
+                        },
+                    });
+                }
+                if (otherwise && typeof otherwise !== "boolean") {
+                    validations.push({
+                        schema: otherwise,
+                        condition: {
+                            dependentKeys,
+                            conditionFn: (...args) => args.some((value, index) => keyValueMap[dependentKeys[index]] !== value),
+                        },
+                    });
+                }
+            }
+            else {
+                validations.push({ schema: schemaWithoutCondition });
+            }
+            return validations;
+        }, conditionalValidations);
+    }
+    return conditionalValidations;
+}
+function getYupType(type) {
+    switch (type) {
+        case "object":
+            return Yup.object();
+        case "array":
+            return Yup.array();
+        case "boolean":
+            return Yup.boolean();
+        case "integer":
+        case "number":
+            return Yup.number();
+        case "null":
+            return Yup.string();
+        case "string":
+            return Yup.string();
+        default:
+            throw new Error("Unsupported schema type");
+    }
+}
+export function createValidationSchema(schema, definitions = {}, condition) {
     var _a;
-    if (!schema || !schema.properties) {
+    if (!(schema === null || schema === void 0 ? void 0 : schema.properties)) {
         return Yup.object().shape({});
     }
     const schemaDefinitions = Object.assign(Object.assign({}, definitions), ((_a = schema.definitions) !== null && _a !== void 0 ? _a : {}));
     const requiredFields = schema.required;
     function getValue(schema, key) {
+        const type = schema.type;
+        let yupSchema;
         if (schema.properties) {
-            return createValidationSchema(schema, schemaDefinitions);
+            yupSchema = createValidationSchema(schema, schemaDefinitions);
         }
-        const type = schema.type;
-        let yupType;
-        switch (type) {
-            case "array":
-                yupType = Yup.array();
-                break;
-            case "boolean":
-                yupType = Yup.boolean();
-                break;
-            case "integer":
-            case "number":
-                yupType = Yup.number();
-                break;
-            case "null":
-                yupType = Yup.string().nullable();
-                break;
-            case "string":
-                yupType = Yup.string();
-                break;
-            default:
-                throw new Error("Unsupported schema type");
+        else {
+            yupSchema = getYupType(type);
         }
-        if (requiredFields !== undefined && requiredFields.includes(key)) {
+        if (type === "null")
+            yupSchema.nullable();
+        if (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes(key)) {
             if (type === "array") {
-                yupType = yupType
+                yupSchema = yupSchema
                     .min(1, "Required")
                     .required("Required");
             }
             else {
-                yupType = yupType["required"]("Required");
+                yupSchema = yupSchema["required"]("Required");
             }
         }
-        return yupType;
+        return condition
+            ? getYupType(type).when(condition.dependentKeys, {
+                is: condition.conditionFn,
+                then: () => yupSchema,
+            })
+            : yupSchema;
     }
-    return Object.keys(schema.properties).reduce((validationSchema, key) => {
+    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) }));
     }, Yup.object().shape({}));
+    return getConditionalValidations(schema).reduce((validationSchema, conditionalValidation) => {
+        const solvedSchemas = solveReferences(conditionalValidation.schema, schemaDefinitions, {}, {});
+        return validationSchema.concat(createValidationSchema(solvedSchemas.schema, schemaDefinitions, conditionalValidation.condition));
+    }, baseValidationSchema);
 }

package/dist/utils/resolveSchema.d.ts

@@ -1,2 +1,4 @@
+import { JSONSchema7Definition } from "json-schema";
 import type { Schema } from "../types";
+export declare function resolveOneOfValue(value: JSONSchema7Definition): import("json-schema").JSONSchema7Type | undefined;
 export declare const resolveSchema: ({ allOf, dependencies, ...schema }: Schema, value: Record<string, any>) => [Schema, string[]];

package/dist/utils/resolveSchema.js

@@ -19,7 +19,7 @@ const resolveEquality = (value, expression) => {
     };
     return deepOverlap(expression, newObject);
 };
-function resolveOneOfValue(value) {
+export function resolveOneOfValue(value) {
     var _a;
     if (typeof value !== "boolean" && ((_a = value.enum) === null || _a === void 0 ? void 0 : _a[0]) !== undefined) {
         return value.enum[0];
@@ -31,14 +31,18 @@ function resolveOneOfValue(value) {
         return undefined;
 }
 const resolveSelectedOneOfValue = (key, value, oneOf) => {
-    const update = oneOf.findIndex((one) => resolveOneOfValue(one.properties[key]) === value[key]);
-    const manipulatedUpdateValue = Object.keys(oneOf[update].properties)
+    var _a, _b;
+    const update = ((_a = oneOf.find((one) => typeof one !== "boolean" && (one === null || one === void 0 ? void 0 : one.properties)
+        ? resolveOneOfValue(one.properties[key]) === value[key]
+        : false)) !== null && _a !== void 0 ? _a : {});
+    const manipulatedUpdateValue = Object.keys((_b = update.properties) !== null && _b !== void 0 ? _b : {})
         .filter((objKey) => objKey !== key)
         .reduce((newObj, innerKey) => {
-        newObj[innerKey] = oneOf[update].properties[innerKey];
+        var _a;
+        newObj[innerKey] = (_a = update.properties) === null || _a === void 0 ? void 0 : _a[innerKey];
         return newObj;
     }, {});
-    return { properties: manipulatedUpdateValue };
+    return Object.assign(Object.assign({}, update), { properties: manipulatedUpdateValue });
 };
 export const resolveSchema = (_a, value) => {
     var _b, _c;
@@ -48,7 +52,10 @@ export const resolveSchema = (_a, value) => {
     let valuesToRemoveAllOf = [];
     if (dependencies) {
         schemaCopy = Object.entries(dependencies).reduce((schema, [key, dependency]) => {
-            if (value[key] !== undefined && value[key] !== "") {
+            if (value[key] !== undefined &&
+                value[key] !== "" &&
+                typeof dependency !== "boolean" &&
+                !Array.isArray(dependency)) {
                 const oneOf = dependency.oneOf;
                 if (Array.isArray(oneOf) && oneOf !== undefined) {
                     const selectedOneOf = resolveSelectedOneOfValue(key, value, oneOf);

package/package.json

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