@nolwenture/formik-jsonschema-form 1.3.4 → 1.3.5

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/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/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.5",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -125,4 +125,4 @@
       "last 1 safari version"
     ]
   }
-}
+}