@nolwenture/formik-jsonschema-form 1.3.4 → 1.3.6

package/README.md

@@ -287,13 +287,13 @@ 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:
+The buttons that can be customized that way are by defining these under "ui:options":
 
-- "ui:addButtonOptions"
-- "ui:removeButtonOptions"
-- "ui:upButtonOptions"
-- "ui:downButtonOptions"
-- "ui:customButtonOptions"
+- "addButton"
+- "removeButton"
+- "upButton"
+- "downButton"
+- "customButton"
 
 `content` takes a ReactNode as input.
 
@@ -317,11 +317,14 @@ const schema = {
 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" } },
+  someArray: {
+    "ui:options": {
+      addButton: {
+        content: <b>Hello!</b>,
+        props: { style: { background: "green" } },
+      },
     },
+  }
 };
 
 ...

package/dist/cjs/Form/Form.js

@@ -9,7 +9,7 @@ const fields_1 = require("./fields");
 const templates_1 = require("./templates");
 const Form = (props) => {
     const { isSubmitting } = (0, formik_1.useFormikContext)();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, onAdditionalPropertyOrderChange, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -29,6 +29,7 @@ const Form = (props) => {
         formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
+        onAdditionalPropertyOrderChange,
     };
     const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
     const SchemaField = registry.fields.SchemaField;

package/dist/cjs/Form/fields/ArrayField/ArrayField.js

@@ -37,7 +37,7 @@ const ArrayField = (props) => {
     const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
-    const { type, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const { type, props: inputProps, disabled, removeButton, upButton, downButton, addButton, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const [{ value }, _, { setValue }] = (0, formik_1.useField)(name);
     const schemas = (0, react_1.useMemo)(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -98,7 +98,6 @@ const ArrayField = (props) => {
     //   [schema]
     // );
     // Backwards compatibility ends
-    const { disabled } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     const preventManipulation = disabled || schema.readOnly;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
@@ -116,8 +115,8 @@ const ArrayField = (props) => {
                             }, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
-                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && ((0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { id: value?.[index + schemas.items.length]?.name, ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                    index < value?.slice(schemas.items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && ((0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { id: value?.[index + schemas.items.length]?.name, ...(removeButton?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: removeButton?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(upButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: upButton?.content ?? "↑" })), value.length > 1 &&
+                                    index < value?.slice(schemas.items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(downButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: downButton?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(addButton?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: addButton?.content ?? "+" }))] }));
 };
 exports.ArrayField = ArrayField;
 function prepareChildSchema(childSchema, parentSchema) {

package/dist/cjs/Form/fields/MultipleChoiceField/MultipleChoiceFieldInput.js

@@ -8,7 +8,8 @@ const FormRegistry_1 = require("../../FormRegistry");
 const utils_1 = require("../../../utils");
 const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, value, form, }) => {
     const { components: { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldInputElement, MultipleChoiceFieldLabel, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const isMultiSelect = enums.type === utils_1.EnumsTypes.MULTI_SELECT;
+    const safeEnums = enums ?? { type: "", values: [] };
+    const isMultiSelect = safeEnums.type === utils_1.EnumsTypes.MULTI_SELECT;
     const currentValue = isMultiSelect
         ? Array.isArray(value)
             ? value
@@ -31,7 +32,7 @@ const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, v
             form?.setFieldValue(name, optionValue);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: enums.values.map((v) => {
+    return ((0, jsx_runtime_1.jsx)(MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: (safeEnums.values ?? []).map((v) => {
             const optionValue = v.const;
             return ((0, jsx_runtime_1.jsxs)(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [(0, jsx_runtime_1.jsx)(MultipleChoiceFieldInputElement, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), (0, jsx_runtime_1.jsx)(MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
         }) }));

package/dist/cjs/Form/fields/ObjectField/ObjectField.js

@@ -9,6 +9,11 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const types_1 = require("./types");
+const DEFAULT_FIELD = {
+    type: "string",
+    _fieldType: "string",
+    "ui:title": "New Field",
+};
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = (0, formik_1.useFormikContext)();
@@ -18,9 +23,10 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, onAdditionalPropertyOrderChange, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
+    const { type, props: inputProps, isCollapsible, order, disabled, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { value, setValue } = useObjectField(name);
     const [{ properties, additionalProperties, required }, valuesToRemove] = (0, react_1.useMemo)(() => {
         return (0, utils_1.resolveSchema)(schema, value);
@@ -36,27 +42,28 @@ const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
     const additionalPropertyKeys = (0, react_1.useMemo)(() => Object.keys(value || {}).filter((key) => !propertyKeys.includes(key)), [value, propertyKeys]);
-    const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], propertyKeys);
-    const hiddenProperties = (0, utils_1.getHiddenProperties)(uiSchema?.["ui:order"], propertyKeys);
-    const orderedAdditionalProperties = (0, utils_1.orderAdditionalProperties)(uiSchema?.["ui:order"], additionalPropertyKeys);
-    const hiddenAdditionalProperties = (0, utils_1.getHiddenProperties)(uiSchema?.["ui:order"], additionalPropertyKeys);
+    const orderedProperties = (0, utils_1.orderByUiSchema)(order, propertyKeys);
+    const hiddenProperties = (0, utils_1.getHiddenProperties)(order, propertyKeys);
+    const orderedAdditionalProperties = (0, utils_1.orderAdditionalProperties)(order, additionalPropertyKeys);
+    const hiddenAdditionalProperties = (0, utils_1.getHiddenProperties)(order, additionalPropertyKeys);
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
+        const { removeButton, upButton, downButton, addButton, customButton } = (0, utils_1.extractUiSchema)(uiSchema);
         switch (purpose) {
             case types_1.ObjectFieldButtonPurpose.ADD:
-                return ((0, jsx_runtime_1.jsx)(ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldAddButton, { ...(addButton?.props ?? {}), onClick: onClick, children: addButton?.content ?? "+" }));
             case types_1.ObjectFieldButtonPurpose.REMOVE:
-                return ((0, jsx_runtime_1.jsx)(ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldRemoveButton, { ...(removeButton?.props ?? {}), onClick: onClick, children: removeButton?.content ?? "-" }));
             case types_1.ObjectFieldButtonPurpose.MOVE_UP:
-                return ((0, jsx_runtime_1.jsx)(ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldUpButton, { ...(upButton?.props ?? {}), onClick: onClick, children: upButton?.content ?? "↑" }));
             case types_1.ObjectFieldButtonPurpose.MOVE_DOWN:
-                return ((0, jsx_runtime_1.jsx)(ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldDownButton, { ...(downButton?.props ?? {}), onClick: onClick, children: downButton?.content ?? "↓" }));
             default:
-                return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(customButton?.props ?? {}), onClick: onClick, children: customButton?.content ?? "" }));
         }
     };
-    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        (props.uiSchema?.["ui:options"]?.isCollapsible
+    const SelectedObjectFieldTemplate = (uiSchema?.["ui:template"] &&
+        templates[uiSchema?.["ui:template"]]) ??
+        (isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
     const showAdditionalProperties = !hideUnmarkedAdditionalProperties || !!additionalProperties;
@@ -97,7 +104,7 @@ const ObjectField = (props) => {
                             },
                         }, style: { display: "none" } }, child));
                 }), showAdditionalProperties &&
-                    orderedAdditionalProperties.map((childName) => {
+                    orderedAdditionalProperties.map((childName, index) => {
                         let correctUiSchema = uiSchema?.[childName];
                         if (uiSchema?.properties?.["ui:order"] !== undefined &&
                             uiSchema?.[childName]?.["ui:order"] === undefined) {
@@ -106,14 +113,34 @@ const ObjectField = (props) => {
                                 "ui:order": uiSchema.properties?.["ui:order"],
                             };
                         }
-                        return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
-                                        purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
-                                        onClick: () => {
-                                            const { [childName]: _removedProperty, ...newValue } = value;
-                                            setValue(newValue);
-                                        },
-                                        uiSchema: uiSchema,
-                                    }) })] }, childName));
+                        return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), (0, jsx_runtime_1.jsxs)(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
+                                            index > 0 &&
+                                            getObjectFieldButton({
+                                                purpose: types_1.ObjectFieldButtonPurpose.MOVE_UP,
+                                                onClick: () => {
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, (0, utils_1.immutablySwapItems)(orderedAdditionalProperties, index, index - 1));
+                                                },
+                                                uiSchema,
+                                            }), onAdditionalPropertyOrderChange &&
+                                            index < orderedAdditionalProperties.length - 1 &&
+                                            getObjectFieldButton({
+                                                purpose: types_1.ObjectFieldButtonPurpose.MOVE_DOWN,
+                                                onClick: () => {
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, (0, utils_1.immutablySwapItems)(orderedAdditionalProperties, index, index + 1));
+                                                },
+                                                uiSchema,
+                                            }), getObjectFieldButton({
+                                            purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
+                                            onClick: () => {
+                                                const { [childName]: _removedProperty, ...newValue } = value;
+                                                setValue(newValue);
+                                                if (onAdditionalPropertyOrderChange) {
+                                                    const nextOrder = orderedAdditionalProperties.filter((k) => k !== childName);
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
+                                                }
+                                            },
+                                            uiSchema,
+                                        })] })] }, childName));
                     }), showAdditionalProperties &&
                     hiddenAdditionalProperties.map((childName) => {
                         let correctUiSchema = uiSchema?.[childName];
@@ -130,11 +157,18 @@ const ObjectField = (props) => {
                         purpose: types_1.ObjectFieldButtonPurpose.ADD,
                         onClick: () => {
                             const key = prompt("Give key");
-                            if (key) {
-                                setValue({ ...value, [key]: undefined });
+                            if (!key)
+                                return;
+                            if (Object.prototype.hasOwnProperty.call(value, key))
+                                return;
+                            const newValue = { ...value, [key]: DEFAULT_FIELD };
+                            setValue(newValue);
+                            if (onAdditionalPropertyOrderChange) {
+                                const nextOrder = [...orderedAdditionalProperties, key];
+                                onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
                             }
                         },
-                        uiSchema: uiSchema,
+                        uiSchema,
                     })] }) }));
 };
 exports.ObjectField = ObjectField;

package/dist/cjs/FormView/fields/ArrayField.js

@@ -25,6 +25,8 @@ const ArrayField = (props) => {
         templates.ArrayFieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, items: value, renderItem: (item, index) => typeof item === "object" ? ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: typeof props.schema.additionalItems !== "boolean"
                     ? props.schema.additionalItems
-                    : {}, uiSchema: uiSchema }) }, index)) : ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)("div", { "data-keyword": item, children: getValue(item) }) }, item)) }));
+                    : {}, 
+                // TODO: check how form and form view array field handles items and additionalItems schema/uiSchema
+                uiSchema: uiSchema?.[index] || uiSchema?.items }) }, index)) : ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)("div", { "data-keyword": item, children: getValue(item) }) }, item)) }));
 };
 exports.ArrayField = ArrayField;

package/dist/cjs/FormView/fields/MultipleChoiceField.js

@@ -9,7 +9,7 @@ const FormViewRegistry_1 = require("../FormViewRegistry");
 const MultipleChoiceField = (props) => {
     const { templates, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
-    const { props: inputProps, style } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const { props: inputProps, style, onlyShowSelected, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
@@ -19,9 +19,12 @@ const MultipleChoiceField = (props) => {
             ? value.includes(v.const)
             : value === v.const,
     })) ?? [];
+    const displayedValues = onlyShowSelected
+        ? allValues.filter((v) => v.selected)
+        : allValues;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: allValues }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: displayedValues }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/utils/createValidationSchema.js

@@ -41,6 +41,9 @@ const solveReferences_1 = require("./solveReferences");
 // @ts-expect-error
 Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchema }) {
     return Yup.lazy((value) => {
+        if (value === undefined) {
+            return Yup.mixed().notRequired();
+        }
         const valueLength = value?.length ?? 0;
         const numOfAdditionalItems = itemSchemas.length > valueLength ? 0 : valueLength - itemSchemas.length;
         const additionalSchemas = additionalItemSchema
@@ -172,33 +175,43 @@ function createValidationSchema(schema, definitions = {}, conditionsContext = {}
             type = type ?? "object";
         }
         else if (type === "array" && schema.anyOf) {
-            const anyOf = schema.anyOf;
-            // anyOf is optional, therefore we cannot change it to array.mixedOf() aka tuple
-            const anyOfSchema = Yup.array().of(Yup.lazy(() => {
-                // value has to match with one of the anyOf values in the schema
-                return Yup.mixed().oneOf(anyOf.map((item) => item.const));
-            }));
-            // In case the property is required, there should be at least one item in the array
-            yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+            if (!schema.items && !schema.additionalItems) {
+                yupSchema = Yup.array();
+            }
+            else {
+                const anyOf = schema.anyOf;
+                // anyOf is optional, therefore we cannot change it to array.mixedOf() aka tuple
+                const anyOfSchema = Yup.array().of(Yup.lazy(() => {
+                    // value has to match with one of the anyOf values in the schema
+                    return Yup.mixed().oneOf(anyOf.map((item) => item.const));
+                }));
+                // In case the property is required, there should be at least one item in the array
+                yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+            }
         }
         else if (type === "array") {
-            const additionalItemSchema = (() => {
-                const additionalItems = schema.additionalItems;
-                if (!additionalItems) {
-                    return undefined;
-                }
-                // Yup.lazy() enables validation for infinitely nested schemas
-                // aka references that refer to themselves or in circular references
-                return Yup.lazy(() => {
-                    return getValue(schema?.additionalItems, "#ignore-this", true);
+            if (!schema.items && !schema.additionalItems) {
+                yupSchema = Yup.array();
+            }
+            else {
+                const additionalItemSchema = (() => {
+                    const additionalItems = schema.additionalItems;
+                    if (!additionalItems) {
+                        return undefined;
+                    }
+                    // Yup.lazy() enables validation for infinitely nested schemas
+                    // aka references that refer to themselves or in circular references
+                    return Yup.lazy(() => {
+                        return getValue(schema?.additionalItems, "#ignore-this", true);
+                    });
+                })();
+                const schemaItems = schema?.items ?? [];
+                const items = Array.isArray(schemaItems) ? schemaItems : [schemaItems];
+                yupSchema = Yup.array().mixedOf({
+                    itemSchemas: items.map((item) => getValue(item, "#ignore-this", true)),
+                    additionalItemSchema,
                 });
-            })();
-            const schemaItems = schema?.items ?? [];
-            const items = Array.isArray(schemaItems) ? schemaItems : [schemaItems];
-            yupSchema = Yup.array().mixedOf({
-                itemSchemas: items.map((item) => getValue(item, "#ignore-this", true)),
-                additionalItemSchema,
-            });
+            }
         }
         else {
             yupSchema = getYupType(schema);

package/dist/cjs/utils/immutablySwapItems.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.immutablySwapItems = immutablySwapItems;
+function immutablySwapItems(items, firstIndex, secondIndex) {
+    const results = items.slice();
+    const firstItem = items[firstIndex];
+    results[firstIndex] = items[secondIndex];
+    results[secondIndex] = firstItem;
+    return results;
+}

package/dist/cjs/utils/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./createValidationSchema"), exports);
 __exportStar(require("./orderByUiSchema"), exports);
 __exportStar(require("./orderAdditionalProperties"), exports);
 __exportStar(require("./setTitleValues"), exports);
+__exportStar(require("./immutablySwapItems"), exports);

package/dist/esm/Form/Form.js

@@ -6,7 +6,7 @@ import { fields as defaultFields } from "./fields";
 import { templates as defaultTemplates } from "./templates";
 export const Form = (props) => {
     const { isSubmitting } = useFormikContext();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, onAdditionalPropertyOrderChange, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -26,6 +26,7 @@ export const Form = (props) => {
         formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
+        onAdditionalPropertyOrderChange,
     };
     const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
     const SchemaField = registry.fields.SchemaField;

package/dist/esm/Form/fields/ArrayField/ArrayField.js

@@ -34,7 +34,7 @@ export const ArrayField = (props) => {
     const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
-    const { type, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const { type, props: inputProps, disabled, removeButton, upButton, downButton, addButton, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const [{ value }, _, { setValue }] = useField(name);
     const schemas = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -95,7 +95,6 @@ export const ArrayField = (props) => {
     //   [schema]
     // );
     // Backwards compatibility ends
-    const { disabled } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     const preventManipulation = disabled || schema.readOnly;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
@@ -113,8 +112,8 @@ export const ArrayField = (props) => {
                             }, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
-                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { id: value?.[index + schemas.items.length]?.name, ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                    index < value?.slice(schemas.items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && (_jsx(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { id: value?.[index + schemas.items.length]?.name, ...(removeButton?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: removeButton?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(upButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: upButton?.content ?? "↑" })), value.length > 1 &&
+                                    index < value?.slice(schemas.items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(downButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: downButton?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && (_jsx(ArrayFieldAddButton, { ...(addButton?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: addButton?.content ?? "+" }))] }));
 };
 function prepareChildSchema(childSchema, parentSchema) {
     if (!childSchema || typeof childSchema === "boolean") {

package/dist/esm/Form/fields/MultipleChoiceField/MultipleChoiceFieldInput.js

@@ -5,7 +5,8 @@ import { FormRegistry } from "../../FormRegistry";
 import { EnumsTypes } from "../../../utils";
 export const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, value, form, }) => {
     const { components: { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldInputElement, MultipleChoiceFieldLabel, }, } = useContext(FormRegistry);
-    const isMultiSelect = enums.type === EnumsTypes.MULTI_SELECT;
+    const safeEnums = enums ?? { type: "", values: [] };
+    const isMultiSelect = safeEnums.type === EnumsTypes.MULTI_SELECT;
     const currentValue = isMultiSelect
         ? Array.isArray(value)
             ? value
@@ -28,7 +29,7 @@ export const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, s
             form?.setFieldValue(name, optionValue);
         }
     };
-    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: enums.values.map((v) => {
+    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: (safeEnums.values ?? []).map((v) => {
             const optionValue = v.const;
             return (_jsxs(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [_jsx(MultipleChoiceFieldInputElement, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), _jsx(MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
         }) }));

package/dist/esm/Form/fields/ObjectField/ObjectField.js

@@ -2,10 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 import { useContext, useEffect, useMemo } from "react";
 import { ObjectFieldWrapper } from "./styledComponents";
-import { getHiddenProperties, orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
+import { extractUiSchema, getHiddenProperties, immutablySwapItems, orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 import { ObjectFieldButtonPurpose } from "./types";
+const DEFAULT_FIELD = {
+    type: "string",
+    _fieldType: "string",
+    "ui:title": "New Field",
+};
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = useFormikContext();
@@ -15,9 +20,10 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, onAdditionalPropertyOrderChange, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
+    const { type, props: inputProps, isCollapsible, order, disabled, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { value, setValue } = useObjectField(name);
     const [{ properties, additionalProperties, required }, valuesToRemove] = useMemo(() => {
         return resolveSchema(schema, value);
@@ -33,27 +39,28 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalPropertyKeys = useMemo(() => Object.keys(value || {}).filter((key) => !propertyKeys.includes(key)), [value, propertyKeys]);
-    const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], propertyKeys);
-    const hiddenProperties = getHiddenProperties(uiSchema?.["ui:order"], propertyKeys);
-    const orderedAdditionalProperties = orderAdditionalProperties(uiSchema?.["ui:order"], additionalPropertyKeys);
-    const hiddenAdditionalProperties = getHiddenProperties(uiSchema?.["ui:order"], additionalPropertyKeys);
+    const orderedProperties = orderByUiSchema(order, propertyKeys);
+    const hiddenProperties = getHiddenProperties(order, propertyKeys);
+    const orderedAdditionalProperties = orderAdditionalProperties(order, additionalPropertyKeys);
+    const hiddenAdditionalProperties = getHiddenProperties(order, additionalPropertyKeys);
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
+        const { removeButton, upButton, downButton, addButton, customButton } = extractUiSchema(uiSchema);
         switch (purpose) {
             case ObjectFieldButtonPurpose.ADD:
-                return (_jsx(ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
+                return (_jsx(ObjectFieldAddButton, { ...(addButton?.props ?? {}), onClick: onClick, children: addButton?.content ?? "+" }));
             case ObjectFieldButtonPurpose.REMOVE:
-                return (_jsx(ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
+                return (_jsx(ObjectFieldRemoveButton, { ...(removeButton?.props ?? {}), onClick: onClick, children: removeButton?.content ?? "-" }));
             case ObjectFieldButtonPurpose.MOVE_UP:
-                return (_jsx(ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
+                return (_jsx(ObjectFieldUpButton, { ...(upButton?.props ?? {}), onClick: onClick, children: upButton?.content ?? "↑" }));
             case ObjectFieldButtonPurpose.MOVE_DOWN:
-                return (_jsx(ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
+                return (_jsx(ObjectFieldDownButton, { ...(downButton?.props ?? {}), onClick: onClick, children: downButton?.content ?? "↓" }));
             default:
-                return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
+                return (_jsx(ObjectFieldButton, { ...(customButton?.props ?? {}), onClick: onClick, children: customButton?.content ?? "" }));
         }
     };
-    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        (props.uiSchema?.["ui:options"]?.isCollapsible
+    const SelectedObjectFieldTemplate = (uiSchema?.["ui:template"] &&
+        templates[uiSchema?.["ui:template"]]) ??
+        (isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
     const showAdditionalProperties = !hideUnmarkedAdditionalProperties || !!additionalProperties;
@@ -94,7 +101,7 @@ export const ObjectField = (props) => {
                             },
                         }, style: { display: "none" } }, child));
                 }), showAdditionalProperties &&
-                    orderedAdditionalProperties.map((childName) => {
+                    orderedAdditionalProperties.map((childName, index) => {
                         let correctUiSchema = uiSchema?.[childName];
                         if (uiSchema?.properties?.["ui:order"] !== undefined &&
                             uiSchema?.[childName]?.["ui:order"] === undefined) {
@@ -103,14 +110,34 @@ export const ObjectField = (props) => {
                                 "ui:order": uiSchema.properties?.["ui:order"],
                             };
                         }
-                        return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
-                                        purpose: ObjectFieldButtonPurpose.REMOVE,
-                                        onClick: () => {
-                                            const { [childName]: _removedProperty, ...newValue } = value;
-                                            setValue(newValue);
-                                        },
-                                        uiSchema: uiSchema,
-                                    }) })] }, childName));
+                        return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), _jsxs(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
+                                            index > 0 &&
+                                            getObjectFieldButton({
+                                                purpose: ObjectFieldButtonPurpose.MOVE_UP,
+                                                onClick: () => {
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, immutablySwapItems(orderedAdditionalProperties, index, index - 1));
+                                                },
+                                                uiSchema,
+                                            }), onAdditionalPropertyOrderChange &&
+                                            index < orderedAdditionalProperties.length - 1 &&
+                                            getObjectFieldButton({
+                                                purpose: ObjectFieldButtonPurpose.MOVE_DOWN,
+                                                onClick: () => {
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, immutablySwapItems(orderedAdditionalProperties, index, index + 1));
+                                                },
+                                                uiSchema,
+                                            }), getObjectFieldButton({
+                                            purpose: ObjectFieldButtonPurpose.REMOVE,
+                                            onClick: () => {
+                                                const { [childName]: _removedProperty, ...newValue } = value;
+                                                setValue(newValue);
+                                                if (onAdditionalPropertyOrderChange) {
+                                                    const nextOrder = orderedAdditionalProperties.filter((k) => k !== childName);
+                                                    onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
+                                                }
+                                            },
+                                            uiSchema,
+                                        })] })] }, childName));
                     }), showAdditionalProperties &&
                     hiddenAdditionalProperties.map((childName) => {
                         let correctUiSchema = uiSchema?.[childName];
@@ -127,11 +154,18 @@ export const ObjectField = (props) => {
                         purpose: ObjectFieldButtonPurpose.ADD,
                         onClick: () => {
                             const key = prompt("Give key");
-                            if (key) {
-                                setValue({ ...value, [key]: undefined });
+                            if (!key)
+                                return;
+                            if (Object.prototype.hasOwnProperty.call(value, key))
+                                return;
+                            const newValue = { ...value, [key]: DEFAULT_FIELD };
+                            setValue(newValue);
+                            if (onAdditionalPropertyOrderChange) {
+                                const nextOrder = [...orderedAdditionalProperties, key];
+                                onAdditionalPropertyOrderChange(name, orderedAdditionalProperties, nextOrder);
                             }
                         },
-                        uiSchema: uiSchema,
+                        uiSchema,
                     })] }) }));
 };
 function prepareChildSchema(childSchema, parentSchema) {

package/dist/esm/FormView/fields/ArrayField.js

@@ -22,5 +22,7 @@ export const ArrayField = (props) => {
         templates.ArrayFieldTemplate;
     return (_jsx(SelectedArrayFieldTemplate, { ...props, items: value, renderItem: (item, index) => typeof item === "object" ? (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof props.schema.additionalItems !== "boolean"
                     ? props.schema.additionalItems
-                    : {}, uiSchema: uiSchema }) }, index)) : (_jsx(ArrayFieldItem, { children: _jsx("div", { "data-keyword": item, children: getValue(item) }) }, item)) }));
+                    : {}, 
+                // TODO: check how form and form view array field handles items and additionalItems schema/uiSchema
+                uiSchema: uiSchema?.[index] || uiSchema?.items }) }, index)) : (_jsx(ArrayFieldItem, { children: _jsx("div", { "data-keyword": item, children: getValue(item) }) }, item)) }));
 };

package/dist/esm/FormView/fields/MultipleChoiceField.js

@@ -6,7 +6,7 @@ import { FormViewRegistry } from "../FormViewRegistry";
 export const MultipleChoiceField = (props) => {
     const { templates, components: { MultipleChoiceFieldValue }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
-    const { props: inputProps, style } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const { props: inputProps, style, onlyShowSelected, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
     const { values } = useFormikContext();
     const value = getIn(values, name);
@@ -16,8 +16,11 @@ export const MultipleChoiceField = (props) => {
             ? value.includes(v.const)
             : value === v.const,
     })) ?? [];
+    const displayedValues = onlyShowSelected
+        ? allValues.filter((v) => v.selected)
+        : allValues;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: allValues }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: displayedValues }) }));
 };

package/dist/esm/utils/createValidationSchema.js

@@ -5,6 +5,9 @@ import { solveReferences } from "./solveReferences";
 // @ts-expect-error
 Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchema }) {
     return Yup.lazy((value) => {
+        if (value === undefined) {
+            return Yup.mixed().notRequired();
+        }
         const valueLength = value?.length ?? 0;
         const numOfAdditionalItems = itemSchemas.length > valueLength ? 0 : valueLength - itemSchemas.length;
         const additionalSchemas = additionalItemSchema
@@ -136,33 +139,43 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
             type = type ?? "object";
         }
         else if (type === "array" && schema.anyOf) {
-            const anyOf = schema.anyOf;
-            // anyOf is optional, therefore we cannot change it to array.mixedOf() aka tuple
-            const anyOfSchema = Yup.array().of(Yup.lazy(() => {
-                // value has to match with one of the anyOf values in the schema
-                return Yup.mixed().oneOf(anyOf.map((item) => item.const));
-            }));
-            // In case the property is required, there should be at least one item in the array
-            yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+            if (!schema.items && !schema.additionalItems) {
+                yupSchema = Yup.array();
+            }
+            else {
+                const anyOf = schema.anyOf;
+                // anyOf is optional, therefore we cannot change it to array.mixedOf() aka tuple
+                const anyOfSchema = Yup.array().of(Yup.lazy(() => {
+                    // value has to match with one of the anyOf values in the schema
+                    return Yup.mixed().oneOf(anyOf.map((item) => item.const));
+                }));
+                // In case the property is required, there should be at least one item in the array
+                yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+            }
         }
         else if (type === "array") {
-            const additionalItemSchema = (() => {
-                const additionalItems = schema.additionalItems;
-                if (!additionalItems) {
-                    return undefined;
-                }
-                // Yup.lazy() enables validation for infinitely nested schemas
-                // aka references that refer to themselves or in circular references
-                return Yup.lazy(() => {
-                    return getValue(schema?.additionalItems, "#ignore-this", true);
+            if (!schema.items && !schema.additionalItems) {
+                yupSchema = Yup.array();
+            }
+            else {
+                const additionalItemSchema = (() => {
+                    const additionalItems = schema.additionalItems;
+                    if (!additionalItems) {
+                        return undefined;
+                    }
+                    // Yup.lazy() enables validation for infinitely nested schemas
+                    // aka references that refer to themselves or in circular references
+                    return Yup.lazy(() => {
+                        return getValue(schema?.additionalItems, "#ignore-this", true);
+                    });
+                })();
+                const schemaItems = schema?.items ?? [];
+                const items = Array.isArray(schemaItems) ? schemaItems : [schemaItems];
+                yupSchema = Yup.array().mixedOf({
+                    itemSchemas: items.map((item) => getValue(item, "#ignore-this", true)),
+                    additionalItemSchema,
                 });
-            })();
-            const schemaItems = schema?.items ?? [];
-            const items = Array.isArray(schemaItems) ? schemaItems : [schemaItems];
-            yupSchema = Yup.array().mixedOf({
-                itemSchemas: items.map((item) => getValue(item, "#ignore-this", true)),
-                additionalItemSchema,
-            });
+            }
         }
         else {
             yupSchema = getYupType(schema);

package/dist/esm/utils/immutablySwapItems.js

@@ -0,0 +1,7 @@
+export function immutablySwapItems(items, firstIndex, secondIndex) {
+    const results = items.slice();
+    const firstItem = items[firstIndex];
+    results[firstIndex] = items[secondIndex];
+    results[secondIndex] = firstItem;
+    return results;
+}

package/dist/esm/utils/index.js

@@ -12,3 +12,4 @@ export * from "./createValidationSchema";
 export * from "./orderByUiSchema";
 export * from "./orderAdditionalProperties";
 export * from "./setTitleValues";
+export * from "./immutablySwapItems";

package/dist/types/Form/types/FormRegistryContext.d.ts

@@ -19,4 +19,5 @@ export type FormRegistryContext = {
     formOptions?: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
+    onAdditionalPropertyOrderChange?: (fieldName: string, oldOrder: string[], newOrder: string[]) => void;
 };

package/dist/types/common/types/Form.d.ts

@@ -8,6 +8,8 @@ export type FormProps<T> = React.PropsWithChildren<{
     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;
+    /** If passed, enables the ordering of the additional properties in ObjectField. Actual ordering logic needs to be handled by this function as it involvces manipulating uiSchema, which is out side of the ObjectFields control*/
+    onAdditionalPropertyOrderChange?: (fieldName: string, oldOrder: string[], newOrder: string[]) => void;
     className?: string | undefined;
     /** Form schema */
     schema: Schema;

package/dist/types/common/types/Schemas.d.ts

@@ -43,51 +43,6 @@ export type UiSchema = {
             [key: string]: any;
         };
     };
-    /**
-     * @deprecated Will be moved to "ui:options"
-     */
-    "ui:addButtonOptions"?: {
-        props?: {
-            [key: string]: any;
-        };
-        content?: React.ReactNode | string;
-    };
-    /**
-     * @deprecated Will be moved to "ui:options"
-     */
-    "ui:removeButtonOptions"?: {
-        props?: {
-            [key: string]: any;
-        };
-        content?: React.ReactNode | string;
-    };
-    /**
-     * @deprecated Will be moved to "ui:options"
-     */
-    "ui:upButtonOptions"?: {
-        props?: {
-            [key: string]: any;
-        };
-        content?: React.ReactNode | string;
-    };
-    /**
-     * @deprecated Will be moved to "ui:options"
-     */
-    "ui:downButtonOptions"?: {
-        props?: {
-            [key: string]: any;
-        };
-        content?: React.ReactNode | string;
-    };
-    /**
-     * @deprecated Will be moved to "ui:options"
-     */
-    "ui:customButtonOptions"?: {
-        props?: {
-            [key: string]: any;
-        };
-        content?: React.ReactNode | string;
-    };
 } & {
     [key: string]: UiSchema | any;
 };

package/dist/types/utils/immutablySwapItems.d.ts

@@ -0,0 +1 @@
+export declare function immutablySwapItems<T>(items: T[], firstIndex: number, secondIndex: number): T[];

package/dist/types/utils/index.d.ts

@@ -12,3 +12,4 @@ export * from "./createValidationSchema";
 export * from "./orderByUiSchema";
 export * from "./orderAdditionalProperties";
 export * from "./setTitleValues";
+export * from "./immutablySwapItems";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -125,4 +125,4 @@
       "last 1 safari version"
     ]
   }
-}
+}