@nolwenture/formik-jsonschema-form 0.4.2 → 0.6.0

package/dist/FormEditor.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -18,57 +7,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 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) {
-    var _this = this;
-    var _a = useState({
+export const FormEditor = (props) => {
+    const [editorGeneratedSchemas, setEditorGeneratedSchemas] = useState({
         schema: {},
         uiSchema: {},
-    }), editorGeneratedSchemas = _a[0], setEditorGeneratedSchemas = _a[1];
-    useEffect(function () { return console.log(editorGeneratedSchemas); }, [editorGeneratedSchemas]);
-    return (_jsxs("div", __assign({ style: { display: "flex", justifyContent: "space-between" } }, { children: [_jsxs("div", { children: [_jsx("h1", { children: "Editor" }), _jsx(Formik, __assign({ initialValues: { schema: {}, uiSchema: {} }, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                setEditorGeneratedSchemas(values);
-                                formikHelpers.setSubmitting(false);
-                                return [2 /*return*/];
-                            });
-                        }); } }, { children: _jsx(Form, __assign({}, formEditorSchemas)) }))] }), _jsxs("div", { children: [_jsx("h1", { children: "Preview" }), _jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                // action("onSubmit(_, formHelper)")(formikHelpers);
-                                // action("onSubmit(values)")(values);
-                                formikHelpers.setSubmitting(false);
-                                return [2 /*return*/];
-                            });
-                        }); } }, { children: _jsx(Form, __assign({}, editorGeneratedSchemas)) }))] })] })));
-}
+    });
+    useEffect(() => console.log(editorGeneratedSchemas), [editorGeneratedSchemas]);
+    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, { 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)) })] })] }));
+};

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,22 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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: {},
 };
-var Template = function (args) { return (_jsx(FormEditor, __assign({}, args))); };
-export var 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,34 +1,22 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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) {
-    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
-    var value = useField(name)[0].value;
-    var _a = useState(value !== undefined ? guessType(value) : "string"), type = _a[0], setType = _a[1];
-    var enrichedSchema = useMemo(function () {
+export const AnyField = (props) => {
+    const { name, schema, uiSchema } = props;
+    const [{ value }] = useField(name);
+    const [type, setType] = useState(value !== undefined ? guessType(value) : "string");
+    const enrichedSchema = useMemo(() => {
         switch (type) {
             case "object":
-                return __assign(__assign({}, (schema || {})), { type: type, additionalProperties: {} });
+                return Object.assign(Object.assign({}, (schema || {})), { type, additionalProperties: {} });
             case "array":
-                return __assign(__assign({}, (schema || {})), { type: type, additionalItems: {} });
+                return Object.assign(Object.assign({}, (schema || {})), { type, additionalItems: {} });
             default:
-                return __assign(__assign({}, (schema || {})), { type: type });
+                return Object.assign(Object.assign({}, (schema || {})), { type });
         }
     }, [type, schema]);
-    return (_jsxs("div", { children: [_jsx("select", __assign({ value: type, onChange: function (event) { return setType(event.target.value); } }, { children: Object.keys(COMPONENT_TYPES).map(function (type) { return (_jsx("option", __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,72 +1,56 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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) {
-    return values ? __spreadArray(__spreadArray([], values, true), [""], false) : [""];
-}
-function removeFromArray(values, index) {
-    return __spreadArray(__spreadArray([], values.slice(0, index), true), values.slice(index + 1), true);
-}
-function moveInArray(values, index, direction) {
+const appendArray = (values) => {
+    return values ? [...values, ""] : [""];
+};
+const removeFromArray = (values, index) => {
+    return [...values.slice(0, index), ...values.slice(index + 1)];
+};
+const moveInArray = (values, index, direction) => {
     if (direction === -1) {
-        return __spreadArray(__spreadArray(__spreadArray([], values.slice(0, index - 1), true), [
+        return [
+            ...values.slice(0, index - 1),
             values[index],
-            values[index - 1]
-        ], false), values.slice(index + 1), true);
+            values[index - 1],
+            ...values.slice(index + 1),
+        ];
     }
     else {
-        return __spreadArray(__spreadArray(__spreadArray([], values.slice(0, index), true), [
+        return [
+            ...values.slice(0, index),
             values[index + 1],
-            values[index]
-        ], false), values.slice(index + 2), true);
+            values[index],
+            ...values.slice(index + 2),
+        ];
     }
-}
-export function ArrayField(props) {
-    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ArrayFieldTemplate = _a.templates.ArrayFieldTemplate, _b = _a.components, ArrayFieldItem = _b.ArrayFieldItem, ArrayFieldList = _b.ArrayFieldList, ArrayFieldItemButtons = _b.ArrayFieldItemButtons, useItemsAsAdditionalItems = _a.useItemsAsAdditionalItems;
+};
+export const ArrayField = (props) => {
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
-    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
-    var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
-    var _d = useMemo(function () {
-        var items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
+    const { name, schema, uiSchema } = props;
+    const [{ value }, _, { setValue }] = useField(name);
+    const { items, additionalItems, } = useMemo(() => {
+        let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
         if (!Array.isArray(items)) {
             items = [items];
         }
         return useItemsAsAdditionalItems && !schema.additionalItems
             ? {
                 items: [],
-                additionalItems: items.filter(function (item) { return typeof item !== "boolean"; })[0],
+                additionalItems: items.filter((item) => typeof item !== "boolean")[0],
             }
             : {
-                items: items.filter(function (item) { return typeof item !== "boolean"; }),
+                items: items.filter((item) => typeof item !== "boolean"),
                 additionalItems: typeof schema.additionalItems !== "boolean"
                     ? schema.additionalItems
                     : undefined,
             };
-    }, [schema]), items = _d.items, additionalItems = _d.additionalItems;
+    }, [schema]);
     //This whole mess would give backwards compatibility, but maybe we don't do it
     // const {
     //   items,
@@ -108,35 +92,29 @@ export function ArrayField(props) {
     //   [schema]
     // );
     // Bacwards compatibility ends
-    var disabled = useExtractUiSchema(uiSchema).disabled;
-    return (_jsxs(ArrayFieldTemplate, __assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map(function (itemSchema, index) { return (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: "".concat(name, "[").concat(index, "]"), schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index)); }), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map(function (_, index) { return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: "".concat(name, "[").concat(index + items.length, "]"), schema: additionalItems && typeof additionalItems !== "boolean"
+    const { disabled } = useExtractUiSchema(uiSchema);
+    return (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
                                     ? additionalItems
-                                    : {}, uiSchema: __assign({ disabled: disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
+                                    : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
                                         purpose: ArrayFieldButtonPurpose.REMOVE,
-                                        onClick: function () {
-                                            return setValue(removeFromArray(value, index + items.length));
-                                        },
-                                        uiSchema: uiSchema,
+                                        onClick: () => setValue(removeFromArray(value, index + items.length)),
+                                        uiSchema,
                                     }), value.length > 1 &&
                                         index > 0 &&
                                         GetArrayFieldButton({
                                             purpose: ArrayFieldButtonPurpose.MOVE_UP,
-                                            onClick: function () {
-                                                return setValue(moveInArray(value, index + items.length, -1));
-                                            },
-                                            uiSchema: uiSchema,
+                                            onClick: () => setValue(moveInArray(value, index + items.length, -1)),
+                                            uiSchema,
                                         }), value.length > 1 &&
                                         index < value.length - 1 &&
                                         GetArrayFieldButton({
                                             purpose: ArrayFieldButtonPurpose.MOVE_DOWN,
-                                            onClick: function () {
-                                                return setValue(moveInArray(value, index + items.length, 1));
-                                            },
-                                            uiSchema: uiSchema,
-                                        })] })] }, index)); })] }), additionalItems &&
+                                            onClick: () => setValue(moveInArray(value, index + items.length, 1)),
+                                            uiSchema,
+                                        })] })] }, index)))] }), additionalItems &&
                 GetArrayFieldButton({
                     purpose: ArrayFieldButtonPurpose.ADD,
-                    onClick: function () { return setValue(appendArray(value)); },
-                    uiSchema: uiSchema,
+                    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,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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) {
-    var _a = useContext(FormRegistry), FieldTemplate = _a.templates.FieldTemplate, FieldInput = _a.components.FieldInput;
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const BooleanField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
-    var name = props.name, uiSchema = props.uiSchema;
-    var _b = useExtractUiSchema(uiSchema), label = _b.label, inputProps = _b.props;
-    return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(_Fragment, { children: [_jsx(FieldInput, __assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
-}
+    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,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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) {
-    var _a = useContext(FormRegistry), FieldTemplate = _a.templates.FieldTemplate, FieldInput = _a.components.FieldInput;
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+export const DateField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
-    var name = props.name, uiSchema = props.uiSchema;
-    var inputProps = useExtractUiSchema(uiSchema).props;
-    return (_jsx(FieldTemplate, __assign({}, props, { children: _jsx(FieldInput, __assign({}, inputProps, { name: name, type: "date" })) })));
-}
+    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,19 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-export function NullField(props) {
-    var FieldTemplate = useContext(FormRegistry).templates.FieldTemplate;
-    var name = props.name;
-    return _jsx(FieldTemplate, __assign({}, 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,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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, __assign({}, props, { uiSchema: __assign(__assign({}, props.uiSchema), { "ui:props": __assign(__assign({}, (((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a["ui:props"]) || {})), { type: "number" }) }) })));
-}
+    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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -21,49 +10,57 @@ 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) {
-    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ObjectFieldTemplate = _a.templates.ObjectFieldTemplate, _b = _a.components, ObjectFieldItem = _b.ObjectFieldItem, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
+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);
-    var name = props.name, schema = props.schema, uiSchema = props.uiSchema;
-    var _c = useField(name), value = _c[0].value, _ = _c[1], setValue = _c[2].setValue;
-    var properties = schema.properties, additionalProperties = schema.additionalProperties, required = schema.required;
-    var propertyKeys = useMemo(function () { return Object.keys(properties || {}); }, [properties]);
-    var additionalValues = useMemo(function () {
-        return Object.fromEntries(Object.entries(value || {}).filter(function (_a) {
-            var key = _a[0], value = _a[1];
-            return !propertyKeys.includes(key);
-        }));
-    }, [value, propertyKeys]);
-    return (_jsxs(ObjectFieldTemplate, __assign({}, props, { children: [Object.entries(properties || {}).map(function (_a) {
-                var childName = _a[0], childSchema = _a[1];
-                return (_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) &&
-                Object.entries(additionalValues || {}).map(function (_a) {
-                    var childName = _a[0], childSchema = _a[1];
-                    return (_jsxs(ObjectFieldItem, { children: [_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), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
-                                    purpose: ObjectFieldButtonPurpose.REMOVE,
-                                    onClick: function () {
-                                        var _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-                                        setValue(newValue);
-                                    },
-                                    uiSchema: uiSchema,
-                                }) })] }, childName));
-                }), additionalProperties &&
+    const { name, schema, uiSchema } = props;
+    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) &&
+                Object.entries(additionalValues || {}).map(([childName, childSchema]) => (_jsxs(ObjectFieldItem, { children: [_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), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                                purpose: ObjectFieldButtonPurpose.REMOVE,
+                                onClick: () => {
+                                    const _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                                    setValue(newValue);
+                                },
+                                uiSchema: uiSchema,
+                            }) })] }, childName))), additionalProperties &&
                 getObjectFieldButton({
                     purpose: ObjectFieldButtonPurpose.ADD,
-                    onClick: function () {
-                        var _a;
-                        var key = prompt("Give key");
+                    onClick: () => {
+                        const key = prompt("Give key");
                         if (key) {
-                            setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
+                            setValue(Object.assign(Object.assign({}, value), { [key]: undefined }));
                         }
                     },
                     uiSchema: uiSchema,
                 })] })));
-}
+};

package/dist/fields/RadioField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from "../types";
+import React from "react";
+export declare const RadioField: React.FC<FieldProps>;