@nolwenture/formik-jsonschema-form 0.2.0 → 0.4.0

package/README.md

@@ -50,9 +50,70 @@ export function MyFormComponent() {
 }
 ```
 
+Pass your uiSchema to the `Form`component. which should be passed as a child to the `Formik`component,
+just like schema. uiSchema will tell the form more about its own layout and styles.
+
+Basic available elements to add to the form or a field of the form via uiSchema are:
+
+- "ui:title"
+- "ui:description"
+- "ui:help"
+- "ui:options"
+- "ui:info"
+
+Most of those elements take a string for value, but `ui:info` takes an object with the possible keys of
+
+- `label` for the clickable anchor (if not provided, default value is "i")
+- `content` for the content of the popup container, and
+- `position` taking a string of either "top", "bottom", "left" or "right" (if not provided, default value is "top")
+
+All elements of `ui:info` are customisable. The styledComponent is called `InfoFieldButton` and it consists of the following elements:
+
+- InfoFieldContainerElement
+- InfoFieldBoxElement
+- InfoFieldBoxInnerElement
+- InfoFieldBoxArrowElement
+- InfoFieldLabel
+
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import { Formik } from "formik";
+
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+  },
+};
+
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+  lastName: {
+    "ui:info": {
+      label: "?",
+      content: "Add your family name",
+    },
+  },
+};
+
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={{ firstName: "", lastName: "" }}
+      onSubmit={handleSubmit}
+    >
+      <Form schema={schema} uiSchema={uiSchema}></Form>
+    </Formik>
+  );
+}
+```
+
 ### Using custom components
 
-Form components (such as wrappers) can be overriden with custom ones
+Form components (such as wrappers) can be overridden with custom ones
 
 Here is an example of overriding `FieldWrapper` (wrapper used on all fields):
 
@@ -87,6 +148,37 @@ return (
 );
 ```
 
+And another example how to override `InfoFieldButton`:
+
+```tsx
+const CustomInfoFieldButton = styled(InfoFieldButton)`
+  outline: 2px red solid;
+  margin: 0.5em;
+  ${InfoFieldButton.styles.InfoFieldBoxInnerElementStyle} {
+    min-width: 200px;
+    background: orange;
+    color: blue;
+  }
+  ${InfoFieldButton.styles.InfoFieldLabelStyle} {
+    color: green;
+  }
+`;
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+      components={{
+        InfoFieldButton: CustomInfoFieldButton,
+      }}
+    ></Form>
+  </Formik>
+);
+```
+
 Custom fields can be used in addition to all the default fields:
 
 ```tsx
@@ -129,6 +221,125 @@ return (
 );
 ```
 
+The style for buttons to add and remove (and move) array or object items can be overridden within the uiSchema by giving inline style.
+
+The buttons that can be customized that way are:
+
+- "ui:addButtonOptions"
+- "ui:removeButtonOptions"
+- "ui:upButtonOptions"
+- "ui:downButtonOptions"
+- "ui:customButtonOptions"
+
+`content` takes a ReactNode as input.
+
+```tsx
+
+const schema = {
+  title: "Form with customized buttons",
+  type: "object",
+  properties: {
+    someArray: {
+      type: "array",
+      title: "Some array",
+      description: "Array with customized buttons",
+      additionalItems: {
+        type: "string",
+      },
+    },
+  }
+}
+
+const uiSchema = {
+  "ui:description": "Form description",
+  // make a green ADD button for someArray that reads "Hello!"
+    someArray: {
+    "ui:addButtonOptions": {
+      content: <b>Hello!</b>,
+      props: { style: { background: "green" } },
+    },
+};
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+    ></Form>
+  </Formik>
+);
+```
+
+### Required input
+
+Required input can be displayed with an asterisk next to the title.
+The respective fieldname needs to be given inside the required-array of the object holding the field in question in the schema.
+In the example, required fields are 'lastName', 'favouriteFood' inside the arrayOfObject, and 'tasks' in nestedObject.
+
+The styling of the asterisk can be customised by applying style to styledComponents.RequiredIndicator.
+
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import { Formik } from "formik";
+
+const CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)`
+  color: aqua;
+`;
+
+const schema = {
+  title: "My Form",
+  required: ["lastName"],
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+    arrayOfObject: {
+      type: "array",
+      title: "Array of objects",
+      items: {
+        type: "object",
+        title: "Favourites",
+        required: ["favouriteFood"],
+        properties: {
+          favouriteFood: { type: "string", title: "Favourite food" },
+          favouriteSong: { type: "string", title: "Favourite song" },
+        },
+      },
+    },
+    nestedObject: {
+      type: "object",
+      title: "Nested Object",
+      required: ["tasks"],
+      properties: {
+        hobbies: { type: "string", title: "Hobbies" },
+        tasks: { type: "string", title: "Tasks" },
+      },
+    },
+  },
+};
+
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+};
+
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={{ firstName: "", lastName: "" }}
+      onSubmit={handleSubmit}
+    >
+      <Form
+        schema={schema}
+        uiSchema={uiSchema}
+        components={{ RequiredIndicator: CustomizedRequiredIndicator }}
+      ></Form>
+    </Formik>
+  );
+}
+```
+
 ## Props
 
 `Form` component props:

package/dist/Form.stories.d.ts

@@ -9,3 +9,4 @@ 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>;

package/dist/Form.stories.js

@@ -53,7 +53,8 @@ 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 { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, } from "./_sampleData";
+import { InfoFieldButton } from "./styledComponents";
+import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, } from "./_sampleData";
 import { Form, styledComponents } from "./";
 export default {
     title: "Form",
@@ -76,10 +77,12 @@ export var Simple = Template.bind({});
 Simple.args = {
     schema: simpleSchema,
 };
+var InfoFieldButtonNew = styled(InfoFieldButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: 2px red solid;\n  margin: 0.5em;\n  ", " {\n    min-width: 200px;\n    background: orange;\n    color: blue;\n  }\n  ", " {\n    color: green;\n  }\n"], ["\n  outline: 2px red solid;\n  margin: 0.5em;\n  ", " {\n    min-width: 200px;\n    background: orange;\n    color: blue;\n  }\n  ", " {\n    color: green;\n  }\n"])), InfoFieldButton.styles.InfoFieldBoxInnerElementStyle, InfoFieldButton.styles.InfoFieldLabelStyle);
 export var WithUiSchema = Template.bind({});
 WithUiSchema.args = {
     schema: simpleSchema,
     uiSchema: simpleUiSchema,
+    components: { InfoFieldButton: InfoFieldButtonNew },
 };
 export var CompleteSchema = Template.bind({});
 CompleteSchema.args = {
@@ -97,14 +100,15 @@ export var StrictlyTyped = function () {
         }); } }, { children: _jsx(Form, { schema: simpleSchema }) })));
 };
 /*** CUSTOMIZATION  ***/
-var CustomizedForm = styled(Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    color: red;\n  }\n"], ["\n  ", " {\n    color: red;\n  }\n"])), styledComponents.FieldTitle);
-var CustomizedFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: 2px solid\n    ", ";\n"], ["\n  outline: 2px solid\n    ", ";\n"])), function (props) { return (props.title === "ABC" ? "blue" : "transparent"); });
+var CustomizedForm = styled(Form)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    color: red;\n  }\n"], ["\n  ", " {\n    color: red;\n  }\n"])), styledComponents.FieldTitle);
+var CustomizedFieldWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: 2px solid\n    ", ";\n"], ["\n  outline: 2px solid\n    ", ";\n"])), function (props) { return (props.title === "ABC" ? "blue" : "transparent"); });
 var CustomizedErrorMessage = function (props) {
     var name = props.name;
     var errors = useFormikContext().errors;
     var error = errors[name];
     return error ? _jsx("p", { children: error }) : _jsx("p", { children: "Hurray! No errors" });
 };
+var CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: aqua;\n"], ["\n  color: aqua;\n"])));
 export var StylesCustomized = function () {
     return (_jsx(Formik, __assign({ initialValues: {}, onSubmit: function (values, formikHelpers) { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -124,6 +128,7 @@ export var StylesCustomized = function () {
             }, components: {
                 FieldWrapper: CustomizedFieldWrapper,
                 ErrorMessage: CustomizedErrorMessage,
+                RequiredIndicator: CustomizedRequiredIndicator,
             } }) })));
 };
 export var WithGeneratedSchema = Template.bind({});
@@ -132,4 +137,9 @@ WithGeneratedSchema.args = {
     uiSchema: {},
     useItemsAsAdditionalItems: true,
 };
-var templateObject_1, templateObject_2;
+export var WithRequiredInput = Template.bind({});
+WithRequiredInput.args = {
+    schema: requiredInputSchema,
+    uiSchema: {},
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/_sampleData.d.ts

@@ -8,3 +8,4 @@ export declare const simpleUiSchema: UiSchema;
 export declare const completeSchema: Schema;
 export declare const completeUiSchema: UiSchema;
 export declare const generatedSchema: Schema;
+export declare const requiredInputSchema: Schema;

package/dist/_sampleData.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 export var simpleSchema = {
     title: "TITLE",
     properties: {
@@ -7,6 +8,11 @@ export var simpleSchema = {
 };
 export var simpleUiSchema = {
     "ui:description": "Description text",
+    firstName: {
+        "ui:info": {
+            content: "A small info",
+        },
+    },
 };
 export var completeSchema = {
     title: "Inventory",
@@ -178,6 +184,7 @@ export var completeSchema = {
                     },
                 },
             },
+            default: [{ string: "Hello" }],
         },
     },
 };
@@ -207,6 +214,7 @@ export var completeUiSchema = {
     enum: {
         "ui:help": "Enum help",
     },
+    enumOneOf: { placeholder: "Select one" },
     null: {
         "ui:help": "Null help",
     },
@@ -239,6 +247,34 @@ export var completeUiSchema = {
         null: {
             "ui:help": "Null help",
         },
+        "ui:addButtonOptions": {
+            content: _jsx("b", { children: "Hello in an Object!" }),
+            props: { style: { background: "pink" } },
+        },
+    },
+    partiallyFixedArray: {
+        "ui:addButtonOptions": {
+            content: _jsx("b", { children: "Hello!" }),
+            props: { style: { background: "green" } },
+        },
+        "ui:removeButtonOptions": {
+            content: _jsx("span", { children: "-" }),
+            props: {
+                style: {
+                    height: "25px",
+                    width: "25px",
+                    background: "red",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    border: "unset",
+                    padding: "unset",
+                    color: "white",
+                    fontWeight: "bolder",
+                    textAlign: "center",
+                    lineHeight: "1.4em",
+                },
+            },
+        },
     },
 };
 export var generatedSchema = {
@@ -260,3 +296,48 @@ export var generatedSchema = {
     required: ["object", "value", "property"],
     additionalProperties: false,
 };
+export var requiredInputSchema = {
+    title: "TITLE",
+    required: ["lastName"],
+    properties: {
+        firstName: { type: "string", title: "First name" },
+        lastName: { type: "string", title: "Last name" },
+        arrayOfObject: {
+            type: "array",
+            title: "Array of objects",
+            items: {
+                type: "object",
+                title: "Favourites",
+                required: ["favouriteFood"],
+                properties: {
+                    favouriteFood: { type: "string", title: "Favourite food" },
+                    favouriteSong: { type: "string", title: "Favourite song" },
+                },
+            },
+            additionalItems: {
+                type: "object",
+                title: "Second favourites",
+                required: ["secondFavouriteSong"],
+                properties: {
+                    secondFavouriteFood: {
+                        type: "string",
+                        title: "Second favourite food",
+                    },
+                    secondFavouriteSong: {
+                        type: "string",
+                        title: "Second favourite song",
+                    },
+                },
+            },
+        },
+        nestedObject: {
+            type: "object",
+            title: "Nested Object",
+            required: ["tasks"],
+            properties: {
+                hobbies: { type: "string", title: "Hobbies" },
+                tasks: { type: "string", title: "Tasks" },
+            },
+        },
+    },
+};

package/dist/fields/ArrayField.js

@@ -23,7 +23,8 @@ import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { useField } from "formik";
 import { ArrayFieldButtonPurpose } from "../types";
-import { useExtractUiSchema } from "../utils";
+import { useExtractUiSchema, useSetDefault } from "../utils";
+import { GetArrayFieldButton } from "../styledComponents";
 function appendArray(values) {
     return values ? __spreadArray(__spreadArray([], values, true), [""], false) : [""];
 }
@@ -45,7 +46,8 @@ function moveInArray(values, index, direction) {
     }
 }
 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, ArrayFieldButton = _b.ArrayFieldButton, useItemsAsAdditionalItems = _a.useItemsAsAdditionalItems;
+    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;
+    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 () {
@@ -106,14 +108,35 @@ export function ArrayField(props) {
     //   [schema]
     // );
     // Bacwards compatibility ends
-    var _e = useExtractUiSchema(uiSchema), inputProps = _e.props, disabled = _e.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) }, index) })); }), ((value === null || value === void 0 ? void 0 : value.slice(items.length)) || []).map(function (_, index) { return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, __assign({}, __assign({ disabled: disabled }, inputProps), { name: "".concat(name, "[").concat(index + items.length, "]"), schema: additionalItems && typeof additionalItems !== "boolean"
+    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"
                                     ? 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))) }), index), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.REMOVE, onClick: function () {
+                                    : {}, 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({
+                                        purpose: ArrayFieldButtonPurpose.REMOVE,
+                                        onClick: function () {
                                             return setValue(removeFromArray(value, index + items.length));
-                                        } }), value.length > 1 && index > 0 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_UP, onClick: function () {
-                                            return setValue(moveInArray(value, index + items.length, -1));
-                                        } })), value.length > 1 && index < value.length - 1 && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.MOVE_DOWN, onClick: function () {
-                                            return setValue(moveInArray(value, index + items.length, 1));
-                                        } }))] })] })); })] }), additionalItems && (_jsx(ArrayFieldButton, { purpose: ArrayFieldButtonPurpose.ADD, onClick: function () { return setValue(appendArray(value)); } }))] })));
+                                        },
+                                        uiSchema: uiSchema,
+                                    }), value.length > 1 &&
+                                        index > 0 &&
+                                        GetArrayFieldButton({
+                                            purpose: ArrayFieldButtonPurpose.MOVE_UP,
+                                            onClick: function () {
+                                                return setValue(moveInArray(value, index + items.length, -1));
+                                            },
+                                            uiSchema: 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 &&
+                GetArrayFieldButton({
+                    purpose: ArrayFieldButtonPurpose.ADD,
+                    onClick: function () { return setValue(appendArray(value)); },
+                    uiSchema: uiSchema,
+                })] })));
 }

package/dist/fields/ObjectField.js

@@ -25,11 +25,14 @@ import { useField } from "formik";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 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, ObjectFieldList = _b.ObjectFieldList, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, ObjectFieldButton = _b.ObjectFieldButton, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
+    var _a = useContext(FormRegistry), SchemaField = _a.fields.SchemaField, ObjectFieldTemplate = _a.templates.ObjectFieldTemplate, _b = _a.components, ObjectFieldItem = _b.ObjectFieldItem, ObjectFieldItemButtons = _b.ObjectFieldItemButtons, hideUnmarkedAdditionalProperties = _a.hideUnmarkedAdditionalProperties;
+    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;
+    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) {
@@ -39,19 +42,28 @@ export function ObjectField(props) {
     }, [value, propertyKeys]);
     return (_jsxs(ObjectFieldTemplate, __assign({}, props, { children: [Object.entries(properties || {}).map(function (_a) {
                 var childName = _a[0], childSchema = _a[1];
-                return (_jsx(SchemaField, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+                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, { name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }), _jsx(ObjectFieldItemButtons, { children: _jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.REMOVE, onClick: function () {
+                    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);
-                                    } }) })] }, childName));
-                }), additionalProperties && (_jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.ADD, onClick: function () {
-                    var _a;
-                    var key = prompt("Give key");
-                    if (key) {
-                        setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
-                    }
-                } }))] })));
+                                    },
+                                    uiSchema: uiSchema,
+                                }) })] }, childName));
+                }), additionalProperties &&
+                getObjectFieldButton({
+                    purpose: ObjectFieldButtonPurpose.ADD,
+                    onClick: function () {
+                        var _a;
+                        var key = prompt("Give key");
+                        if (key) {
+                            setValue(__assign(__assign({}, value), (_a = {}, _a[key] = undefined, _a)));
+                        }
+                    },
+                    uiSchema: uiSchema,
+                })] })));
 }

package/dist/fields/SchemaField.js

@@ -14,7 +14,7 @@ import { useContext } from "react";
 import { useExtractUiSchema, getSchemaType } from "../utils";
 import { FormRegistry } from "../Form";
 import { COMPONENT_TYPES } from "./types";
-function getFieldComponent(schema, uiSchema, fields) {
+function useFieldComponent(schema, uiSchema, fields) {
     var field = useExtractUiSchema(uiSchema).field;
     if (typeof field === "function") {
         return field;
@@ -34,6 +34,6 @@ function getFieldComponent(schema, uiSchema, fields) {
 export function SchemaField(props) {
     var schema = props.schema, uiSchema = props.uiSchema;
     var fields = useContext(FormRegistry).fields;
-    var FieldComponent = getFieldComponent(schema, uiSchema, fields);
+    var FieldComponent = useFieldComponent(schema, uiSchema, fields);
     return _jsx(FieldComponent, __assign({}, props));
 }

package/dist/fields/StringField.js

@@ -53,7 +53,7 @@ export function StringField(props) {
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
         case "multiSelect":
-            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, { children: [enums.type !== "multiSelect" && _jsx("option", { value: "" }), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ value: option.const }, { children: option.title }), index)); })] })) })));
+            return (_jsx(FieldTemplate, __assign({}, props, { children: _jsxs(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name, formikAs: "select", multiple: enums.type === "multiSelect" }, { children: [enums.type !== "multiSelect" && (_jsx("option", __assign({ value: "", disabled: true, selected: true, hidden: true }, { children: placeholder }))), enums === null || enums === void 0 ? void 0 : enums.values.map(function (option, index) { return (_jsx("option", __assign({ value: option.const }, { children: option.title }), index)); })] })) })));
         default:
             return (_jsx(FieldTemplate, __assign({}, props, { children: _jsx(FieldInput, __assign({}, __assign({ type: type, placeholder: placeholder }, inputProps), { name: name })) })));
     }

package/dist/styledComponents.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as formik from "formik";
-import { ArrayFieldButtonProps, ObjectFieldButtonProps } from "./types";
+import { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps } from "./types";
 export declare const Form: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "noValidate" | "target" | "key"> & import("react").RefAttributes<HTMLFormElement>>, any, {}, never>;
 export declare const FormButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FormButton: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -9,18 +9,48 @@ export declare const ObjectFieldTitle: import("styled-components").StyledCompone
 export declare const ObjectFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ObjectFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const ObjectFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ObjectFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare function ObjectFieldButton({ purpose, onClick, }: ObjectFieldButtonProps): JSX.Element;
+export declare const ObjectFieldButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldLineButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldUpButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldDownButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldRemoveButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ObjectFieldAddButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function getObjectFieldButton({ purpose, onClick, uiSchema, }: ObjectFieldButtonProps): JSX.Element;
 export declare const ArrayFieldWrapper: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 export declare const ArrayFieldTitle: import("styled-components").StyledComponent<"legend", any, {}, never>;
 export declare const ArrayFieldList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const ArrayFieldItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const ArrayFieldItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrayFieldButtonEl: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare function ArrayFieldButton({ purpose, onClick }: ArrayFieldButtonProps): JSX.Element;
+export declare const ArrayFieldButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldLineButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldUpButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldDownButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldRemoveButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ArrayFieldAddButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function GetArrayFieldButton({ purpose, onClick, uiSchema, }: ArrayFieldButtonProps): JSX.Element;
 export declare const FieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FieldTitle: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const FieldDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const FieldHelp: import("styled-components").StyledComponent<"p", any, {}, never>;
+interface InfoFieldBoxElementProps {
+    position: "top" | "right" | "bottom" | "left";
+}
+export declare const InfoFieldBoxElement: import("styled-components").StyledComponent<"div", any, InfoFieldBoxElementProps, never>;
+export declare const InfoFieldBoxArrowElement: import("styled-components").StyledComponent<"div", any, InfoFieldBoxElementProps, never>;
+export declare const InfoFieldBoxInnerElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoFieldContainerElement: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const InfoFieldLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InfoFieldButton: {
+    ({ label, content, position, props, className, }: InfoFieldButtonProps): JSX.Element;
+    styles: {
+        InfoFieldContainerElementStyle: import("styled-components").StyledComponent<"a", any, {}, never>;
+        InfoFieldBoxElementStyle: import("styled-components").StyledComponent<"div", any, InfoFieldBoxElementProps, never>;
+        InfoFieldBoxInnerElementStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+        InfoFieldBoxArrowElementStyle: import("styled-components").StyledComponent<"div", any, InfoFieldBoxElementProps, never>;
+        InfoFieldLabelStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+    };
+};
 export declare const ErrorMessage: import("styled-components").StyledComponent<import("react").ComponentType<formik.ErrorMessageProps>, any, {}, never>;
 export declare const FieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+export declare const RequiredIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/styledComponents.js

@@ -24,10 +24,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as formik from "formik";
 import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose, } from "./types";
+import { useContext } from "react";
+import { FormRegistry } from "./Form";
 export var Form = styled(formik.Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 export var FormButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 export var FormButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
@@ -36,20 +38,26 @@ export var ObjectFieldTitle = styled.legend(templateObject_5 || (templateObject_
 export var ObjectFieldList = styled.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style-type: none;\n  padding: 0;\n"], ["\n  list-style-type: none;\n  padding: 0;\n"])));
 export var ObjectFieldItem = styled.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var ObjectFieldItemButtons = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: 0.5rem;\n"], ["\n  display: flex;\n  margin: 0.5rem;\n"])));
-export var ObjectFieldButtonEl = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  display: block;\n  line-height: 1em;\n  height: 1em;\n  width: 1em;\n  text-align: center;\n"])));
-export function ObjectFieldButton(_a) {
-    var purpose = _a.purpose, onClick = _a.onClick;
+export var ObjectFieldButton = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"])));
+export var ObjectFieldLineButton = styled(ObjectFieldButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
+export var ObjectFieldUpButton = styled(ObjectFieldLineButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
+export var ObjectFieldDownButton = styled(ObjectFieldLineButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
+export var ObjectFieldRemoveButton = styled(ObjectFieldLineButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+export var ObjectFieldAddButton = styled(ObjectFieldButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
+export function getObjectFieldButton(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
     switch (purpose) {
         case ObjectFieldButtonPurpose.ADD:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+            return (_jsx(ObjectFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
         case ObjectFieldButtonPurpose.REMOVE:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+            return (_jsx(ObjectFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
         case ObjectFieldButtonPurpose.MOVE_UP:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+            return (_jsx(ObjectFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
         case ObjectFieldButtonPurpose.MOVE_DOWN:
-            return _jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+            return (_jsx(ObjectFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
         default:
-            return (_jsx(ObjectFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+            return (_jsx(ObjectFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
     }
 }
 export var ArrayFieldWrapper = ObjectFieldWrapper;
@@ -57,27 +65,109 @@ export var ArrayFieldTitle = ObjectFieldTitle;
 export var ArrayFieldList = ObjectFieldList;
 export var ArrayFieldItem = ObjectFieldItem;
 export var ArrayFieldItemButtons = ObjectFieldItemButtons;
-export var ArrayFieldButtonEl = ObjectFieldButtonEl;
-export function ArrayFieldButton(_a) {
-    var purpose = _a.purpose, onClick = _a.onClick;
+export var ArrayFieldButton = styled(ObjectFieldButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+export var ArrayFieldLineButton = styled(ArrayFieldButton)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
+export var ArrayFieldUpButton = styled(ArrayFieldLineButton)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
+export var ArrayFieldDownButton = styled(ArrayFieldLineButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""])));
+export var ArrayFieldRemoveButton = styled(ArrayFieldLineButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
+export var ArrayFieldAddButton = styled(ArrayFieldButton)(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
+export function GetArrayFieldButton(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
+    var _x = useContext(FormRegistry).components, ArrayFieldAddButton = _x.ArrayFieldAddButton, ArrayFieldRemoveButton = _x.ArrayFieldRemoveButton, ArrayFieldUpButton = _x.ArrayFieldUpButton, ArrayFieldDownButton = _x.ArrayFieldDownButton;
     switch (purpose) {
         case ArrayFieldButtonPurpose.ADD:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "+" }));
+            return (_jsx(ArrayFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
         case ArrayFieldButtonPurpose.REMOVE:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "-" }));
+            return (_jsx(ArrayFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
         case ArrayFieldButtonPurpose.MOVE_UP:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2191" }));
+            return (_jsx(ArrayFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
         case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return _jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "\u2193" }));
+            return (_jsx(ArrayFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
         default:
-            return (_jsx(ArrayFieldButtonEl, __assign({ onClick: onClick }, { children: "UNKNOWN PURPOSE" })));
+            return (_jsx(ArrayFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
     }
 }
-export var FieldWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
-export var FieldTitle = styled.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
-export var FieldDescription = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var FieldHelp = styled.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
+export var FieldWrapper = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
+export var FieldTitle = styled.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
+export var FieldDescription = styled.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var FieldHelp = styled.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
+export var InfoFieldBoxElement = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"], ["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"])), function (_a) {
+    var position = _a.position;
+    return position === "bottom" ? "140%" : position === "top" ? "auto" : "50%";
+}, function (_a) {
+    var position = _a.position;
+    return position === "top"
+        ? "140%"
+        : position === "right" || position === "left"
+            ? "50%"
+            : "auto";
+}, function (_a) {
+    var position = _a.position;
+    return position === "right"
+        ? "100%"
+        : position === "bottom" || position === "top"
+            ? "50%"
+            : "auto";
+}, function (_a) {
+    var position = _a.position;
+    return position === "left"
+        ? "100%"
+        : position === "bottom" || position === "top"
+            ? "50%"
+            : "auto";
+}, function (_a) {
+    var position = _a.position;
+    return position === "bottom" || position === "top" ? "-50%" : "0";
+}, function (_a) {
+    var position = _a.position;
+    return position === "right" || position === "left" ? "-50%" : "0";
+});
+export var InfoFieldBoxArrowElement = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"], ["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"])), function (_a) {
+    var position = _a.position;
+    return position === "top"
+        ? "100%"
+        : position === "right" || position === "left"
+            ? "40%"
+            : "unset";
+}, function (_a) {
+    var position = _a.position;
+    return position === "top" || position === "bottom"
+        ? "50%"
+        : position === "right"
+            ? "-2%"
+            : "102.5%";
+}, function (_a) {
+    var position = _a.position;
+    return (position === "bottom" ? "100%" : "unset");
+}, function (_a) {
+    var position = _a.position;
+    return position === "top" ? "grey" : "transparent";
+}, function (_a) {
+    var position = _a.position;
+    return position === "bottom" ? "grey" : "transparent";
+}, function (_a) {
+    var position = _a.position;
+    return position === "right" ? "grey" : "transparent";
+}, function (_a) {
+    var position = _a.position;
+    return position === "left" ? "grey" : "transparent";
+});
+export var InfoFieldBoxInnerElement = styled.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"], ["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"])));
+export var InfoFieldContainerElement = styled.a(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"], ["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"])), InfoFieldBoxElement);
+export var InfoFieldLabel = styled.span(templateObject_29 || (templateObject_29 = __makeTemplateObject([""], [""])));
+export var InfoFieldButton = function (_a) {
+    var label = _a.label, content = _a.content, position = _a.position, props = _a.props, className = _a.className;
+    return (_jsxs(InfoFieldContainerElement, __assign({ href: "#", onClick: function (e) { return e.preventDefault(); }, className: className }, { children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, __assign({ position: position !== null && position !== void 0 ? position : "top", role: "tooltip" }, { children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] }))] })));
+};
+InfoFieldButton.styles = {
+    InfoFieldContainerElementStyle: InfoFieldContainerElement,
+    InfoFieldBoxElementStyle: InfoFieldBoxElement,
+    InfoFieldBoxInnerElementStyle: InfoFieldBoxInnerElement,
+    InfoFieldBoxArrowElementStyle: InfoFieldBoxArrowElement,
+    InfoFieldLabelStyle: InfoFieldLabel,
+};
+export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_30 || (templateObject_30 = __makeTemplateObject([""], [""])));
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
@@ -85,5 +175,6 @@ export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_14 || (temp
 export var FieldInput = styled(function (_a) {
     var formikAs = _a.formikAs, props = __rest(_a, ["formikAs"]);
     return _jsx(formik.Field, __assign({}, props, { as: formikAs }));
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+})(templateObject_31 || (templateObject_31 = __makeTemplateObject([""], [""])));
+export var RequiredIndicator = styled.span(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;

package/dist/templates/ArrayFieldTemplate.js

@@ -14,14 +14,14 @@ import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
 export function ArrayFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp;
+    var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
     var name = props.name, uiSchema = props.uiSchema, children = props.children;
     var title = getTitle(props);
     var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
     //TODO: This is not right
     _c = _b.props, 
     //TODO: This is not right
     _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
 }

package/dist/templates/FieldTemplate.js

@@ -14,14 +14,14 @@ import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
 export function FieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp;
+    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, RequiredIndicator = _a.RequiredIndicator, InfoFieldButton = _a.InfoFieldButton;
     var name = props.name, uiSchema = props.uiSchema, children = props.children;
     var title = getTitle(props);
     var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
     //TODO: This is not right
     _c = _b.props, 
     //TODO: This is not right
     _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsx(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: title }))), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
 }

package/dist/templates/ObjectFieldTemplate.js

@@ -14,14 +14,14 @@ import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { getDescription, getTitle, useExtractUiSchema } from "../utils";
 export function ObjectFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp;
+    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
     var children = props.children, uiSchema = props.uiSchema;
     var title = getTitle(props);
     var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
     //TODO: This is not right
     _c = _b.props, 
     //TODO: This is not right
     _d = _c === void 0 ? {} : _c, wrapperProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help;
-    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && _jsx(ObjectFieldTitle, __assign({}, titleProps, { children: title })), description && _jsx(FieldDescription, __assign({}, descriptionProps, { children: description })), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
+    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && _jsx(ObjectFieldTitle, __assign({}, titleProps, { children: title })), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
 }

package/dist/types.d.ts

@@ -36,6 +36,7 @@ export type UiSchema = {
         [key: string]: any;
     };
     "ui:help"?: React.ReactNode | React.ReactNode[];
+    "ui:info"?: InfoFieldButtonProps;
     [name: string]: any;
 };
 export type FormRegistryContextValue = {
@@ -97,19 +98,29 @@ export type ComponentsType = {
     ObjectFieldItem: React.FunctionComponent<any>;
     ObjectFieldItemButtons: React.FunctionComponent<any>;
     ObjectFieldList: React.FunctionComponent<any>;
-    ObjectFieldButton: React.FunctionComponent<ObjectFieldButtonProps>;
+    ObjectFieldButton: React.FunctionComponent<any>;
+    ObjectFieldAddButton: React.FunctionComponent<any>;
+    ObjectFieldRemoveButton: React.FunctionComponent<any>;
+    ObjectFieldUpButton: React.FunctionComponent<any>;
+    ObjectFieldDownButton: React.FunctionComponent<any>;
     ArrayFieldWrapper: React.FunctionComponent<any>;
     ArrayFieldTitle: React.FunctionComponent<any>;
     ArrayFieldItem: React.FunctionComponent<any>;
     ArrayFieldItemButtons: React.FunctionComponent<any>;
     ArrayFieldList: React.FunctionComponent<any>;
-    ArrayFieldButton: React.FunctionComponent<ArrayFieldButtonProps>;
+    ArrayFieldButton: React.FunctionComponent<any>;
+    ArrayFieldAddButton: React.FunctionComponent<any>;
+    ArrayFieldRemoveButton: React.FunctionComponent<any>;
+    ArrayFieldUpButton: React.FunctionComponent<any>;
+    ArrayFieldDownButton: React.FunctionComponent<any>;
     FieldWrapper: React.FunctionComponent<any>;
     FieldTitle: React.FunctionComponent<any>;
     FieldDescription: React.FunctionComponent<any>;
     FieldHelp: React.FunctionComponent<any>;
+    InfoFieldButton: React.FunctionComponent<any>;
     ErrorMessage: React.FunctionComponent<any>;
     FieldInput: React.FunctionComponent<any>;
+    RequiredIndicator: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -120,6 +131,7 @@ export declare enum ObjectFieldButtonPurpose {
 export type ObjectFieldButtonProps = {
     purpose: ObjectFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
 };
 export declare enum ArrayFieldButtonPurpose {
     ADD = 0,
@@ -130,6 +142,14 @@ export declare enum ArrayFieldButtonPurpose {
 export type ArrayFieldButtonProps = {
     purpose: ArrayFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
+};
+export type InfoFieldButtonProps = {
+    label?: React.ReactNode;
+    content: React.ReactNode;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+    props: any;
 };
 /*** ***/
 export type AjvError = {

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { FieldProps, Schema, UiSchema } from "./types";
+import { JSONSchema7 } from "json-schema";
 export declare function getTitle({ title, uiSchema, schema, name, }: {
     title?: string;
     uiSchema?: UiSchema;
@@ -10,12 +11,14 @@ export declare function getDescription({ description, uiSchema, schema, }: {
     uiSchema?: UiSchema;
     schema?: Schema;
 }): any;
+export declare function getDefaultValueForType(type: JSONSchema7["type"]): {} | null;
 export declare function useSetDefault(props: FieldProps): void;
 export declare function useExtractUiSchema(props?: UiSchema | undefined): {
     [name: string]: any;
     field?: UiSchema["ui:field"];
     props?: UiSchema["ui:props"];
     help?: UiSchema["ui:help"];
+    info?: UiSchema["ui:info"];
 };
 export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
 export declare function getSchemaType(schema: Schema): import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;

package/dist/utils.js

@@ -39,11 +39,25 @@ export function getDescription(_a) {
         (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:description"]) ||
         (schema === null || schema === void 0 ? void 0 : schema.description));
 }
+export function getDefaultValueForType(type) {
+    if (type && !Array.isArray(type)) {
+        if (type === "array")
+            return [];
+        if (type === "object")
+            return {};
+    }
+    return null;
+}
 export function useSetDefault(props) {
     var _a = useField(props.name), value = _a[0].value, _ = _a[1], setValue = _a[2].setValue;
     useEffect(function () {
-        if (!value && props.schema.default) {
-            setValue(props.schema.default);
+        if (!value) {
+            if (props.schema.default) {
+                setValue(props.schema.default);
+            }
+            else if (props.forceDefaultValue) {
+                setValue(getDefaultValueForType(props.schema.type));
+            }
         }
     }, []);
 }

package/package.json

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