@nolwenture/formik-jsonschema-form 0.1.3 → 0.3.0

package/README.md

@@ -1,46 +1,268 @@
-# Getting Started with Create React App
+# formik-jsonschema-form
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Installation
 
-## Available Scripts
+With npm:
 
-In the project directory, you can run:
+```text
+npm install @nolwenture/formik-jsonschema-form
+```
 
-### `npm start`
+With yarn:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+```text
+yarn add @nolwenture/formik-jsonschema-form
+```
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Usage
 
-### `npm test`
+### Basic usage
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Pass your schema to the `Form` component, which should be passed as a child to the `Formik` component, for example:
 
-### `npm run build`
+```tsx
+import { Form } from "@nolwenture/formik-jsonschema-form";
+import { Formik } from "formik";
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstName: { type: "string", title: "First name" },
+    lastName: { type: "string", title: "Last name" },
+  },
+};
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+const uiSchema = {
+  "ui:description": "Form description",
+  firstName: { "ui:description": "Field description" },
+};
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+export function MyFormComponent() {
+  return (
+    <Formik
+      initialValues={{ firstName: "", lastName: "" }}
+      onSubmit={handleSubmit}
+    >
+      <Form schema={schema} uiSchema={uiSchema}></Form>
+    </Formik>
+  );
+}
+```
 
-### `npm run eject`
+### Using custom components
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Form components (such as wrappers) can be overriden with custom ones
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Here is an example of overriding `FieldWrapper` (wrapper used on all fields):
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+```tsx
+function CustomFieldWrapper({ children }) {
+  return (
+    <div
+      style={{
+        backgroundColor: "lightgrey",
+        boxShadow: "1px 1px 5px gray",
+        margin: "10px",
+        padding: "10px",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+...
 
-## Learn More
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+      components={{
+        FieldWrapper: CustomFieldWrapper,
+      }}
+    ></Form>
+  </Formik>
+);
+```
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Custom fields can be used in addition to all the default fields:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```tsx
+import { Form, FormRegistry } from "@nolwenture/formik-jsonschema-form";
+import { useContext } from "react";
+
+const schema = {
+  title: "My form",
+  type: "object",
+  properties: {
+    firstField: { title: "First field" },
+  },
+};
+
+function MyCustomFieldComponent(props) {
+  const {
+    templates: { FieldTemplate },
+  } = useContext(FormRegistry);
+
+  return (
+    <FieldTemplate {...props}>
+      <p>My awesome field!</p>
+    </FieldTemplate>
+  );
+}
+
+const fields = { myField: MyCustomFieldComponent };
+
+// Specify the fields that should use your custom field component in uiSchema
+const uiSchema = {
+  firstField = { "ui:field": "myField" },
+};
+
+...
+
+return (
+  <Formik initialValues={initialValues} onSubmit={handleOnSubmit}>
+    <Form schema={schema} uiSchema={uiSchema} fields={fields}></Form>
+  </Formik>
+);
+```
+
+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:
+
+```tsx
+<Form
+  // Required
+  schema={schema} // Form schema
+  // Optional
+  uiSchema={uiSchema} // Form UI schema
+  className={"className"} // Form class name
+  fields={fields} // Additional custom field components
+  templates={templates} // Additional custom field templates
+  components={components} // Override form components (e.g. wrappers) with custom ones
+  formContext={formContext} // Form context
+  useItemsAsAdditionalItems={true} // Allow "items" to be used as "additionalItems" in array fields that are missing "additionalItems", false by default
+/>
+```

package/dist/Form.js

@@ -23,6 +23,7 @@ export var FormRegistry = React.createContext({
     definitions: {},
     formContext: {},
     useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
 });
 export function Form(props) {
     warnFromUnsupportedKeys("Form", props, [
@@ -37,7 +38,7 @@ export function Form(props) {
         "formContext",
     ]);
     var isSubmitting = useFormikContext().isSubmitting;
-    var schema = props.schema, _a = props.uiSchema, uiSchema = _a === void 0 ? {} : _a, className = props.className, children = props.children, _b = props.fields, fields = _b === void 0 ? {} : _b, _c = props.templates, templates = _c === void 0 ? {} : _c, _d = props.components, components = _d === void 0 ? {} : _d, _e = props.formContext, formContext = _e === void 0 ? {} : _e, _f = props.useItemsAsAdditionalItems, useItemsAsAdditionalItems = _f === void 0 ? false : _f;
+    var schema = props.schema, _a = props.uiSchema, uiSchema = _a === void 0 ? {} : _a, className = props.className, children = props.children, _b = props.fields, fields = _b === void 0 ? {} : _b, _c = props.templates, templates = _c === void 0 ? {} : _c, _d = props.components, components = _d === void 0 ? {} : _d, _e = props.formContext, formContext = _e === void 0 ? {} : _e, _f = props.useItemsAsAdditionalItems, useItemsAsAdditionalItems = _f === void 0 ? false : _f, _g = props.hideUnmarkedAdditionalProperties, hideUnmarkedAdditionalProperties = _g === void 0 ? false : _g;
     var registry = {
         fields: __assign(__assign({}, defaultFields), fields),
         templates: __assign(__assign({}, defaultTemplates), templates),
@@ -45,8 +46,9 @@ export function Form(props) {
         definitions: {},
         formContext: formContext,
         useItemsAsAdditionalItems: useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties: hideUnmarkedAdditionalProperties,
     };
-    var _g = registry.components, FormEl = _g.Form, FormButton = _g.FormButton, FormButtonWrapper = _g.FormButtonWrapper;
+    var _h = registry.components, FormEl = _h.Form, FormButton = _h.FormButton, FormButtonWrapper = _h.FormButtonWrapper;
     var _SchemaField = registry.fields.SchemaField;
     return (_jsx(FormRegistry.Provider, __assign({ value: registry }, { children: _jsxs(FormEl, __assign({ className: className }, { children: [_jsx(_SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : (_jsx(FormButtonWrapper, { children: _jsx(FormButton, __assign({ type: "submit", disabled: isSubmitting }, { children: "Send" })) }))] })) })));
 }

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,7 @@ 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 { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, } from "./_sampleData";
 import { Form, styledComponents } from "./";
 export default {
     title: "Form",
@@ -105,6 +105,7 @@ var CustomizedErrorMessage = function (props) {
     var error = errors[name];
     return error ? _jsx("p", { children: error }) : _jsx("p", { children: "Hurray! No errors" });
 };
+var CustomizedRequiredIndicator = styled(styledComponents.RequiredIndicator)(templateObject_3 || (templateObject_3 = __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 +125,7 @@ export var StylesCustomized = function () {
             }, components: {
                 FieldWrapper: CustomizedFieldWrapper,
                 ErrorMessage: CustomizedErrorMessage,
+                RequiredIndicator: CustomizedRequiredIndicator,
             } }) })));
 };
 export var WithGeneratedSchema = Template.bind({});
@@ -132,4 +134,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;

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: {
@@ -178,6 +179,7 @@ export var completeSchema = {
                     },
                 },
             },
+            default: [{ string: "Hello" }],
         },
     },
 };
@@ -207,6 +209,7 @@ export var completeUiSchema = {
     enum: {
         "ui:help": "Enum help",
     },
+    enumOneOf: { placeholder: "Select one" },
     null: {
         "ui:help": "Null help",
     },
@@ -239,6 +242,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 +291,42 @@ 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;
+    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,18 +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));
-            }), 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] }, childName), _jsx(ObjectFieldItemButtons, { children: _jsx(ObjectFieldButton, { purpose: ObjectFieldButtonPurpose.REMOVE, onClick: function () {
-                                    var _a = value, _b = childName, _removedProperty = _a[_b], newValue = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-                                    setValue(newValue);
-                                } }) })] }));
-            }), 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)));
-                    }
-                } }))] })));
+                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 &&
+                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

@@ -9,18 +9,29 @@ 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>;
 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>;

package/dist/styledComponents.js

@@ -28,6 +28,8 @@ import { jsx as _jsx } 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,34 @@ 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 ErrorMessage = styled(formik.ErrorMessage)(templateObject_25 || (templateObject_25 = __makeTemplateObject([""], [""])));
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
@@ -85,5 +100,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_26 || (templateObject_26 = __makeTemplateObject([""], [""])));
+export var RequiredIndicator = styled.span(templateObject_27 || (templateObject_27 = __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;

package/dist/templates/FieldTemplate.js

@@ -14,7 +14,7 @@ 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;
     var name = props.name, uiSchema = props.uiSchema, children = props.children;
     var title = getTitle(props);
     var description = getDescription(props);
@@ -23,5 +23,5 @@ export function FieldTemplate(props) {
     _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: "*" })] }))), 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

@@ -1,11 +1,27 @@
+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 { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { getDescription, getTitle } from "../utils";
+import { getDescription, getTitle, useExtractUiSchema } from "../utils";
 export function ObjectFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper;
-    var children = props.children;
+    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp;
+    var children = props.children, uiSchema = props.uiSchema;
     var title = getTitle(props);
     var description = getDescription(props);
-    return (_jsxs(ObjectFieldWrapper, { children: [title && _jsx(ObjectFieldTitle, { children: title }), description && _jsx(FieldDescription, { children: description }), children] }));
+    var _b = useExtractUiSchema(uiSchema), help = _b.help, 
+    //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 }))] })));
 }

package/dist/types.d.ts

@@ -5,6 +5,8 @@ export type FormProps<T> = React.PropsWithChildren<{
     disabled?: boolean | undefined;
     /** If true, array field schemas missing 'additionalItems' will replace it with 'items'  */
     useItemsAsAdditionalItems?: boolean | undefined;
+    /** If true, properties in object fields' data that aren't in the schema will only be displayed if `additionalProperties` is enabled in the schema */
+    hideUnmarkedAdditionalProperties?: boolean;
     className?: string | undefined;
     /** Form schema */
     schema: Schema;
@@ -43,6 +45,7 @@ export type FormRegistryContextValue = {
     definitions: Record<string, any>;
     formContext: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
+    hideUnmarkedAdditionalProperties: boolean;
 };
 export interface FieldProps extends Pick<React.HTMLAttributes<HTMLElement>, Exclude<keyof React.HTMLAttributes<HTMLElement>, "onBlur">> {
     name: string;
@@ -94,19 +97,28 @@ 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>;
     ErrorMessage: React.FunctionComponent<any>;
     FieldInput: React.FunctionComponent<any>;
+    RequiredIndicator: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -117,6 +129,7 @@ export declare enum ObjectFieldButtonPurpose {
 export type ObjectFieldButtonProps = {
     purpose: ObjectFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
 };
 export declare enum ArrayFieldButtonPurpose {
     ADD = 0,
@@ -127,6 +140,7 @@ export declare enum ArrayFieldButtonPurpose {
 export type ArrayFieldButtonProps = {
     purpose: ArrayFieldButtonPurpose;
     onClick: () => void;
+    uiSchema: UiSchema;
 };
 /*** ***/
 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,6 +11,7 @@ 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;

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.1.3",
+  "version": "0.3.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [