@nolwenture/formik-jsonschema-form 0.5.0 → 0.6.0

package/README.md

@@ -453,6 +453,80 @@ RadioButtonField.styles = {
 };
 ```
 
+### Conditional fields
+
+Conditional fields depending on a parent field input can be given with an `if-then-else` logic inside the schema making use of `allOf`. While `if`and `then` are required to make the condition work, `else` is optional.
+
+```tsx
+export const conditionsSchema = {
+  type: "object",
+  properties: {
+    animal: {
+      type: "string",
+      oneOf: [
+        { const: "cat", title: "Cat" },
+        { const: "fish", title: "Fish" },
+        { const: "dog", title: "Dog" },
+      ],
+    },
+  },
+  allOf: [
+    {
+      if: {
+        properties: {
+          animal: {
+            const: "cat",
+          },
+        },
+      },
+      then: {
+        properties: {
+          food: {
+            type: "string",
+            enum: ["meat", "grass", "fish"],
+          },
+        },
+        required: ["food"],
+      },
+    },
+    {
+      if: {
+        properties: {
+          animal: {
+            const: "fish",
+          },
+        },
+      },
+      then: {
+        properties: {
+          food: {
+            type: "string",
+            enum: ["insect", "worms"],
+          },
+          water: {
+            type: "string",
+            enum: ["lake", "sea"],
+          },
+        },
+        required: ["food", "water"],
+      },
+      else: {
+        properties: {
+          likesWalkiesWhere: {
+            type: "string",
+            enum: ["park", "forest", "garden"],
+          },
+        },
+      },
+    },
+
+    {
+      required: ["animal"],
+    },
+  ],
+};
+```
+
 ## Props
 
 `Form` component props:

package/dist/Form.d.ts

@@ -1,4 +1,4 @@
+import type { FormProps, FormRegistryContextValue } from "./types";
 import React from "react";
-import { FormProps, FormRegistryContextValue } from "./types";
 export declare const FormRegistry: React.Context<FormRegistryContextValue>;
-export declare function Form<T>(props: FormProps<T>): JSX.Element;
+export declare const Form: <T>(props: FormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Form.js

@@ -14,7 +14,7 @@ export const FormRegistry = React.createContext({
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });
-export function Form(props) {
+export const Form = (props) => {
     warnFromUnsupportedKeys("Form", props, [
         "schema",
         "onSubmit",
@@ -40,6 +40,6 @@ export function Form(props) {
         hideUnmarkedAdditionalProperties,
     };
     const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
-    const _SchemaField = registry.fields.SchemaField;
-    return (_jsx(FormRegistry.Provider, Object.assign({ value: registry }, { children: _jsxs(FormEl, Object.assign({ className: className }, { children: [_jsx(_SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, Object.assign({ type: "submit", disabled: isSubmitting }, { children: "Send" })) }))] })) })));
-}
+    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" }) }))] }) }));
+};

package/dist/Form.stories.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react";
 import { Form } from "./";
-declare const _default: ComponentMeta<typeof Form>;
-export default _default;
-export declare const Simple: ComponentStory<typeof Form>;
-export declare const WithUiSchema: ComponentStory<typeof Form>;
-export declare const CompleteSchema: ComponentStory<typeof Form>;
-export declare const StrictlyTyped: () => JSX.Element;
-export declare const StylesCustomized: () => JSX.Element;
-export declare const WithGeneratedSchema: ComponentStory<typeof Form>;
-export declare const WithRequiredInput: ComponentStory<typeof Form>;
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Simple: Story;
+export declare const WithUiSchema: Story;
+export declare const CompleteSchema: Story;
+export declare const StrictlyTyped: () => import("react/jsx-runtime").JSX.Element;
+export declare const StylesCustomized: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithGeneratedSchema: Story;
+export declare const WithRequiredInput: Story;
+export declare const WithConditions: Story;

package/dist/Form.stories.js

@@ -7,14 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
 import { Formik, useFormikContext } from "formik";
 import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
-import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, } from "./_sampleData";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
-export default {
+const meta = {
     title: "Form",
     component: Form,
     // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
@@ -22,15 +33,20 @@ export default {
         schema: { control: { type: "object" } },
         uiSchema: { control: { type: "object" } },
     },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return (_jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+                action("onSubmit(_, formHelper)")(formikHelpers);
+                action("onSubmit(values)")(values);
+                formikHelpers.setSubmitting(false);
+            }), children: _jsx(Form, Object.assign({}, args)) }));
+    },
 };
-const Template = (args) => (_jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
-        action("onSubmit(_, formHelper)")(formikHelpers);
-        action("onSubmit(values)")(values);
-        formikHelpers.setSubmitting(false);
-    }) }, { children: _jsx(Form, Object.assign({}, args)) })));
-export const Simple = Template.bind({});
-Simple.args = {
-    schema: simpleSchema,
+export default meta;
+export const Simple = {
+    args: {
+        schema: simpleSchema,
+    },
 };
 const InfoFieldButtonNew = styled(InfoFieldButton) `
   outline: 2px red solid;
@@ -44,11 +60,12 @@ const InfoFieldButtonNew = styled(InfoFieldButton) `
     color: green;
   }
 `;
-export const WithUiSchema = Template.bind({});
-WithUiSchema.args = {
-    schema: simpleSchema,
-    uiSchema: simpleUiSchema,
-    components: { InfoFieldButton: InfoFieldButtonNew },
+export const WithUiSchema = {
+    args: {
+        schema: simpleSchema,
+        uiSchema: simpleUiSchema,
+        components: { InfoFieldButton: InfoFieldButtonNew },
+    },
 };
 // TODO: get customisable styling to work
 const MyStyledSearchField = styled(SearchableMultiTagSelectField) `
@@ -59,18 +76,19 @@ const MyStyledSearchField = styled(SearchableMultiTagSelectField) `
     background: blue;
   }
 `;
-export const CompleteSchema = Template.bind({});
-CompleteSchema.args = {
-    schema: completeSchema,
-    uiSchema: completeUiSchema,
-    components: { SearchableMultiTagSelectField: MyStyledSearchField },
+export const CompleteSchema = {
+    args: {
+        schema: completeSchema,
+        uiSchema: completeUiSchema,
+        components: { SearchableMultiTagSelectField: MyStyledSearchField },
+    },
 };
 export const StrictlyTyped = () => {
-    return (_jsx(Formik, Object.assign({ initialValues: { firstName: "", lastName: "" }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+    return (_jsx(Formik, { initialValues: { firstName: "", lastName: "" }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
             action("onSubmit(_, formHelper)")(formikHelpers);
             action("onSubmit(values)")(values);
             formikHelpers.setSubmitting(false);
-        }) }, { children: _jsx(Form, { schema: simpleSchema }) })));
+        }), children: _jsx(Form, { schema: simpleSchema }) }));
 };
 /*** CUSTOMIZATION  ***/
 const CustomizedForm = styled(Form) `
@@ -92,11 +110,11 @@ const CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator) `
   color: aqua;
 `;
 export const StylesCustomized = () => {
-    return (_jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+    return (_jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
             action("onSubmit(_, formHelper)")(formikHelpers);
             action("onSubmit(values)")(values);
             formikHelpers.setSubmitting(false);
-        }) }, { children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
+        }), children: _jsx(CustomizedForm, { schema: simpleSchema, uiSchema: {
                 age: {
                     props: {
                         wrapper: {
@@ -115,13 +133,14 @@ export const StylesCustomized = () => {
                 FieldWrapper: CustomizedFieldWrapper,
                 ErrorMessage: CustomizedErrorMessage,
                 RequiredIndicator: CustomizedRequiredIndicator,
-            } }) })));
+            } }) }));
 };
-export const WithGeneratedSchema = Template.bind({});
-WithGeneratedSchema.args = {
-    schema: generatedSchema,
-    uiSchema: {},
-    useItemsAsAdditionalItems: true,
+export const WithGeneratedSchema = {
+    args: {
+        schema: generatedSchema,
+        uiSchema: {},
+        useItemsAsAdditionalItems: true,
+    },
 };
 // Test to add style to RadioButtonField and ToggleSwitchField
 // const MyRadioButtonField = styled(RadioButtonField)`
@@ -147,12 +166,20 @@ WithGeneratedSchema.args = {
 //     background: pink;
 //   }
 // `;
-export const WithRequiredInput = Template.bind({});
-WithRequiredInput.args = {
-    schema: requiredInputSchema,
-    uiSchema: requiredInputUiSchema,
-    // components: {
-    //   RadioButtonField: MyRadioButtonField,
-    //   ToggleSwitchField: MyToggleSwitchField,
-    // },
+export const WithRequiredInput = {
+    args: {
+        schema: requiredInputSchema,
+        uiSchema: requiredInputUiSchema,
+        // components: {
+        //   RadioButtonField: MyRadioButtonField,
+        //   ToggleSwitchField: MyToggleSwitchField,
+        // },
+    },
+};
+export const WithConditions = {
+    args: {
+        schema: conditionsSchema,
+        uiSchema: conditionsUiSchema,
+        hideUnmarkedAdditionalProperties: true,
+    },
 };

package/dist/Form.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { Form } from "./Form";
-import { simpleSchema } from "./_sampleData";
+import { simpleSchema } from "./sampleData";
 test("renders title", () => {
     render(_jsx(Form, { schema: simpleSchema }));
     const titleElement = screen.getByText(/TITLE/i);

package/dist/FormEditor.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { Schema, UiSchema } from "./types";
+import type { Schema, UiSchema } from "./types";
+import React from "react";
 export type FormEditorProps = {};
 export type FormEditorValues = {
     schema: Schema;
     uiSchema: UiSchema;
 };
-export declare function FormEditor(props: FormEditorProps): JSX.Element;
+export declare const FormEditor: React.FC<FormEditorProps>;

package/dist/FormEditor.js

@@ -8,22 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Formik } from "formik";
 import { useEffect, useState } from "react";
+import { Formik } from "formik";
 import { Form } from "./Form";
 import * as formEditorSchemas from "./formEditorSchemas";
-export function FormEditor(props) {
+export const FormEditor = (props) => {
     const [editorGeneratedSchemas, setEditorGeneratedSchemas] = useState({
         schema: {},
         uiSchema: {},
     });
     useEffect(() => console.log(editorGeneratedSchemas), [editorGeneratedSchemas]);
-    return (_jsxs("div", Object.assign({ style: { display: "flex", justifyContent: "space-between" } }, { children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, Object.assign({ initialValues: { schema: {}, uiSchema: {} }, onSubmit: (values, formikHelpers) => __awaiter(this, void 0, void 0, function* () {
+    return (_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, { initialValues: { schema: {}, uiSchema: {} }, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
                             setEditorGeneratedSchemas(values);
                             formikHelpers.setSubmitting(false);
-                        }) }, { children: _jsx(Form, Object.assign({}, formEditorSchemas)) }))] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, Object.assign({ initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(this, void 0, void 0, function* () {
+                        }), children: _jsx(Form, Object.assign({}, formEditorSchemas)) })] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
                             // action("onSubmit(_, formHelper)")(formikHelpers);
                             // action("onSubmit(values)")(values);
                             formikHelpers.setSubmitting(false);
-                        }) }, { children: _jsx(Form, Object.assign({}, editorGeneratedSchemas)) }))] })] })));
-}
+                        }), children: _jsx(Form, Object.assign({}, editorGeneratedSchemas)) })] })] }));
+};

package/dist/FormEditor.stories.d.ts

@@ -1,5 +1,6 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { FormEditor } from "./FormEditor";
-declare const _default: ComponentMeta<typeof FormEditor>;
-export default _default;
-export declare const Default: ComponentStory<typeof FormEditor>;
+declare const meta: Meta<typeof FormEditor>;
+export default meta;
+type Story = StoryObj<typeof FormEditor>;
+export declare const Default: Story;

package/dist/FormEditor.stories.js

@@ -1,11 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { FormEditor } from "./FormEditor";
-export default {
+const meta = {
     title: "FormEditor",
     component: FormEditor,
     // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
     argTypes: {},
 };
-const Template = (args) => (_jsx(FormEditor, Object.assign({}, args)));
-export const Default = Template.bind({});
-Default.args = {};
+export default meta;
+export const Default = {};

package/dist/fields/AnyField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function AnyField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const AnyField: React.FC<FieldProps>;

package/dist/fields/AnyField.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useField } from "formik";
-import { SchemaField } from "./SchemaField";
 import { guessType } from "../utils";
+import { SchemaField } from "./SchemaField";
 import { COMPONENT_TYPES } from "./types";
-export function AnyField(props) {
+export const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = useField(name);
     const [type, setType] = useState(value !== undefined ? guessType(value) : "string");
@@ -19,5 +18,5 @@ export function AnyField(props) {
                 return Object.assign(Object.assign({}, (schema || {})), { type });
         }
     }, [type, schema]);
-    return (_jsxs("div", { children: [_jsx("select", Object.assign({ value: type, onChange: (event) => setType(event.target.value) }, { children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", Object.assign({ value: type }, { children: type }), type))) })), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
-}
+    return (_jsxs("div", { children: [_jsx("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+};

package/dist/fields/ArrayField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function ArrayField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const ArrayField: React.FC<FieldProps>;

package/dist/fields/ArrayField.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { FormRegistry } from "../Form";
 import { useField } from "formik";
+import { FormRegistry } from "../Form";
 import { ArrayFieldButtonPurpose } from "../types";
-import { useExtractUiSchema, useSetDefault } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
 import { GetArrayFieldButton } from "../styledComponents";
-function appendArray(values) {
+const appendArray = (values) => {
     return values ? [...values, ""] : [""];
-}
-function removeFromArray(values, index) {
+};
+const removeFromArray = (values, index) => {
     return [...values.slice(0, index), ...values.slice(index + 1)];
-}
-function moveInArray(values, index, direction) {
+};
+const moveInArray = (values, index, direction) => {
     if (direction === -1) {
         return [
             ...values.slice(0, index - 1),
@@ -28,8 +28,8 @@ function moveInArray(values, index, direction) {
             ...values.slice(index + 2),
         ];
     }
-}
-export function ArrayField(props) {
+};
+export const ArrayField = (props) => {
     const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
@@ -117,4 +117,4 @@ export function ArrayField(props) {
                     onClick: () => setValue(appendArray(value)),
                     uiSchema,
                 })] })));
-}
+};

package/dist/fields/BooleanField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function BooleanField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const BooleanField: React.FC<FieldProps>;

package/dist/fields/BooleanField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-export function BooleanField(props) {
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const BooleanField = (props) => {
     const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
     return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(_Fragment, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
-}
+};

package/dist/fields/DateField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function DateField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const DateField: React.FC<FieldProps>;

package/dist/fields/DateField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-export function DateField(props) {
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const DateField = (props) => {
     const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);
     return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "date" })) })));
-}
+};

package/dist/fields/NullField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function NullField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const NullField: React.FC<FieldProps>;

package/dist/fields/NullField.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-export function NullField(props) {
+export const NullField = (props) => {
     const { templates: { FieldTemplate }, } = useContext(FormRegistry);
     const { name } = props;
     return _jsx(FieldTemplate, Object.assign({}, props));
-}
+};

package/dist/fields/NumberField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function NumberField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const NumberField: React.FC<FieldProps>;

package/dist/fields/NumberField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StringField } from "./StringField";
-export function NumberField(props) {
+export const NumberField = (props) => {
     var _a;
     return (_jsx(StringField, Object.assign({}, props, { uiSchema: Object.assign(Object.assign({}, props.uiSchema), { "ui:props": Object.assign(Object.assign({}, (((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a["ui:props"]) || {})), { type: "number" }) }) })));
-}
+};

package/dist/fields/ObjectField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function ObjectField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const ObjectField: React.FC<FieldProps>;

package/dist/fields/ObjectField.js

@@ -10,18 +10,38 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField } from "formik";
-import { useContext, useMemo } from "react";
+import { useField, useFormikContext } from "formik";
+import { useContext, useEffect, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { ObjectFieldButtonPurpose } from "../types";
-import { useSetDefault } from "../utils";
+import { resolveSchema } from "../utils";
+import { useSetDefault } from "../hooks";
 import { getObjectFieldButton } from "../styledComponents";
-export function ObjectField(props) {
+const useObjectField = (name) => {
+    if (!name) {
+        const { values = {}, setValues } = useFormikContext();
+        return { value: values, setValue: setValues };
+    }
+    const [{ value = {} }, _, { setValue }] = useField(name);
+    return { value, setValue };
+};
+export const ObjectField = (props) => {
     const { fields: { SchemaField }, templates: { ObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
-    const [{ value }, _, { setValue }] = useField(name);
-    const { properties, additionalProperties, required } = schema;
+    const { value, setValue } = useObjectField(name);
+    const [{ properties, additionalProperties, required }, valuesToRemove] = useMemo(() => {
+        return resolveSchema(schema, value);
+    }, [schema, value]);
+    useEffect(() => {
+        if (valuesToRemove.length > 0) {
+            const newValue = valuesToRemove.reduce((prevValue, key) => {
+                const _a = prevValue, _b = key, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                return newValue;
+            }, value);
+            setValue(newValue);
+        }
+    }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
     return (_jsxs(ObjectFieldTemplate, Object.assign({}, props, { children: [Object.entries(properties || {}).map(([childName, childSchema]) => (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName))), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
@@ -43,4 +63,4 @@ export function ObjectField(props) {
                     },
                     uiSchema: uiSchema,
                 })] })));
-}
+};

package/dist/fields/RadioField.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldProps } from "../types";
-export declare function RadioField(props: FieldProps): JSX.Element;
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const RadioField: React.FC<FieldProps>;

package/dist/fields/RadioField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../utils";
-export function RadioField(props) {
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const RadioField = (props) => {
     const { templates: { FieldTemplate }, components: { RadioButtonField }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
     return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) })));
-}
+};