@nolwenture/formik-jsonschema-form 0.4.1 → 0.5.0

package/dist/_sampleData.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var simpleSchema = {
+export const simpleSchema = {
     title: "TITLE",
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
+        age: { type: "number", title: "Age" },
     },
 };
-export var simpleUiSchema = {
+export const simpleUiSchema = {
     "ui:description": "Description text",
     firstName: {
         "ui:info": {
@@ -14,7 +15,7 @@ export var simpleUiSchema = {
         },
     },
 };
-export var completeSchema = {
+export const completeSchema = {
     title: "Inventory",
     type: "object",
     required: ["string", "number", "boolean", "enum"],
@@ -45,6 +46,7 @@ export var completeSchema = {
             title: "Enum",
             description: "Enum description",
             enum: [1, 2, 3, 4],
+            default: 1,
         },
         enumOneOf: {
             type: "number",
@@ -68,6 +70,20 @@ export var completeSchema = {
                 { const: 4, title: "four" },
             ],
         },
+        enumTagSelectAnyOf: {
+            type: "string",
+            title: "Enum searchable tag select anyOf",
+            description: "Enum searchable tag select anyOf description",
+            anyOf: [
+                { const: "cat", title: "cat" },
+                { const: "dog", title: "dog" },
+                { const: "bunny", title: "bunny" },
+                { const: "canary", title: "canary" },
+                { const: "hamster", title: "hamster" },
+                { const: "goldfish", title: "goldfish" },
+                { const: "dragon", title: "dragon" },
+            ],
+        },
         null: { type: "null", title: "Null", description: "Null description" },
         nested: {
             type: "object",
@@ -188,7 +204,7 @@ export var completeSchema = {
         },
     },
 };
-export var completeUiSchema = {
+export const completeUiSchema = {
     string: {
         "ui:help": "String help",
         "ui:options": {
@@ -213,8 +229,13 @@ export var completeUiSchema = {
     },
     enum: {
         "ui:help": "Enum help",
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+    enumOneOf: {
+        placeholder: "Select one",
     },
-    enumOneOf: { placeholder: "Select one" },
     null: {
         "ui:help": "Null help",
     },
@@ -276,8 +297,15 @@ export var completeUiSchema = {
             },
         },
     },
+    enumTagSelectAnyOf: {
+        "ui:field": "SearchMultiTagSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
 };
-export var generatedSchema = {
+export const generatedSchema = {
     type: "object",
     properties: {
         object: {
@@ -296,12 +324,14 @@ export var generatedSchema = {
     required: ["object", "value", "property"],
     additionalProperties: false,
 };
-export var requiredInputSchema = {
+export const requiredInputSchema = {
     title: "TITLE",
-    required: ["lastName"],
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
+        feeling: { type: "boolean", title: "Feeling happy today?" },
+        vibes: { type: "boolean", title: "Turn on the good vibes" },
         arrayOfObject: {
             type: "array",
             title: "Array of objects",
@@ -319,13 +349,13 @@ export var requiredInputSchema = {
                 title: "Second favourites",
                 required: ["secondFavouriteSong"],
                 properties: {
-                    secondFavouriteFood: {
+                    anotherFavouriteFood: {
                         type: "string",
-                        title: "Second favourite food",
+                        title: "Another favourite food",
                     },
-                    secondFavouriteSong: {
+                    anotherFavouriteSong: {
                         type: "string",
-                        title: "Second favourite song",
+                        title: "Another favourite song",
                     },
                 },
             },
@@ -339,5 +369,30 @@ export var requiredInputSchema = {
                 tasks: { type: "string", title: "Tasks" },
             },
         },
+        requiredNestedObject: {
+            type: "object",
+            title: "Required Nested Object",
+            properties: {
+                plans: { type: "string", title: "Future plans" },
+                past: { type: "string", title: "Past achievements" },
+            },
+        },
+        requiredArray: {
+            type: "array",
+            title: "Required Array",
+            description: "Array description for required array",
+            additionalItems: {
+                type: "string",
+            },
+        },
+    },
+};
+export const requiredInputUiSchema = {
+    feeling: {
+        "ui:field": "RadioField",
+        "ui:label": { true: "yes", false: "no" },
+    },
+    vibes: {
+        "ui:field": "ToggleField",
     },
 };

package/dist/fields/AnyField.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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useState } from "react";
@@ -17,18 +6,18 @@ import { SchemaField } from "./SchemaField";
 import { guessType } from "../utils";
 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 () {
+    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", 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 })] }));
 }

package/dist/fields/ArrayField.js

@@ -1,23 +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 __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";
@@ -26,47 +6,51 @@ import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../utils";
 import { GetArrayFieldButton } from "../styledComponents";
 function appendArray(values) {
-    return values ? __spreadArray(__spreadArray([], values, true), [""], false) : [""];
+    return values ? [...values, ""] : [""];
 }
 function removeFromArray(values, index) {
-    return __spreadArray(__spreadArray([], values.slice(0, index), true), values.slice(index + 1), true);
+    return [...values.slice(0, index), ...values.slice(index + 1)];
 }
 function 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;
+    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.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;
+    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.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;
+    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.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));
+    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    const { name } = props;
+    return _jsx(FieldTemplate, Object.assign({}, props));
 }

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) {
     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.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)
@@ -28,40 +17,28 @@ import { ObjectFieldButtonPurpose } from "../types";
 import { useSetDefault } from "../utils";
 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 { 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 }] = useField(name);
+    const { properties, additionalProperties, required } = schema;
+    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 @@
+/// <reference types="react" />
+import { FieldProps } from "../types";
+export declare function RadioField(props: FieldProps): JSX.Element;

package/dist/fields/RadioField.js

@@ -0,0 +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) {
+    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 }) })));
+}

package/dist/fields/SchemaField.js

@@ -1,39 +1,28 @@
-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 { useExtractUiSchema, getSchemaType } from "../utils";
 import { FormRegistry } from "../Form";
 import { COMPONENT_TYPES } from "./types";
 function useFieldComponent(schema, uiSchema, fields) {
-    var field = useExtractUiSchema(uiSchema).field;
+    const { field } = useExtractUiSchema(uiSchema);
     if (typeof field === "function") {
         return field;
     }
     if (typeof field === "string" && field in fields) {
         return fields[field];
     }
-    var schemaType = getSchemaType(schema);
+    let schemaType = getSchemaType(schema);
     if (Array.isArray(schemaType)) {
         schemaType = schemaType[0];
     }
-    var componentName = COMPONENT_TYPES[schemaType || "any"];
+    const componentName = COMPONENT_TYPES[schemaType || "any"];
     return componentName in fields
         ? fields[componentName]
         : fields.UnsupportedField;
 }
 export function SchemaField(props) {
-    var schema = props.schema, uiSchema = props.uiSchema;
-    var fields = useContext(FormRegistry).fields;
-    var FieldComponent = useFieldComponent(schema, uiSchema, fields);
-    return _jsx(FieldComponent, __assign({}, props));
+    const { schema, uiSchema } = props;
+    const { fields } = useContext(FormRegistry);
+    const FieldComponent = useFieldComponent(schema, uiSchema, fields);
+    return _jsx(FieldComponent, Object.assign({}, props));
 }

package/dist/fields/SearchMultiTagSelectField.d.ts

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

package/dist/fields/SearchMultiTagSelectField.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { FormRegistry } from "../Form";
+import { getEnums, useExtractUiSchema, useSetDefault } from "../utils";
+import { SearchableMultiTagSelectField } from "../styledComponents";
+export function SearchMultiTagSelectField(props) {
+    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { placeholder, emptySearchMessage, props: inputProps, } = useExtractUiSchema(uiSchema);
+    const enums = useMemo(() => getEnums(props), [props]);
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(SearchableMultiTagSelectField, Object.assign({}, inputProps, { name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums })) })));
+}