@nolwenture/formik-jsonschema-form 0.22.5 → 0.23.1

package/dist/fields/ArrayField.js

@@ -98,7 +98,7 @@ export const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), 
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
                             forceDefaultValue: false }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => {

package/dist/fields/BooleanField.js

@@ -7,5 +7,5 @@ export const BooleanField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), label] }) })));
 };

package/dist/fields/DateField.js

@@ -7,5 +7,5 @@ export const DateField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "date" })) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-string": name, children: _jsx(FieldInput, Object.assign({}, inputProps, { name: name, type: "date" })) })));
 };

package/dist/fields/FileUploadField.js

@@ -66,5 +66,5 @@ export const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     });
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FileUploadField, Object.assign({}, inputProps, { name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"] })) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-object": name, children: _jsx(FileUploadField, Object.assign({}, inputProps, { name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps === null || inputProps === void 0 ? void 0 : inputProps.removeButton.hidden })) })));
 };

package/dist/fields/MultipleChoiceField.js

@@ -3,11 +3,26 @@ import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
 import { getEnums } from "../utils/getEnums";
+import { getIn, useFormikContext } from "formik";
 export const MultipleChoiceField = (props) => {
     const { templates: { FieldTemplate }, components: { MultipleChoiceField }, } = useContext(FormRegistry);
     useSetDefault(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
     const { props: inputProps, style } = useExtractUiSchema(uiSchema);
     const enums = useMemo(() => getEnums(props), [props]);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style }) })));
+    const { values } = useFormikContext();
+    const value = getIn(values, name);
+    const form = useFormikContext();
+    const fieldDataAttribute = (() => {
+        switch (schema === null || schema === void 0 ? void 0 : schema.type) {
+            case "array":
+                return { "data-fjsf-array": name };
+            case "number":
+                return { "data-fjsf-number": name };
+            case "string":
+            default:
+                return { "data-fjsf-string": name };
+        }
+    })();
+    return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsx(MultipleChoiceField, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) })));
 };

package/dist/fields/NullField.js

@@ -3,6 +3,6 @@ import { useContext } from "react";
 import { FormRegistry } from "../Form";
 export const NullField = (props) => {
     const { templates: { FieldTemplate }, } = useContext(FormRegistry);
-    const { name } = props;
-    return _jsx(FieldTemplate, Object.assign({}, props));
+    const { name, uiSchema } = props;
+    return _jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-null": name }));
 };

package/dist/fields/ObjectField.js

@@ -50,15 +50,15 @@ export const ObjectField = (props) => {
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"], Object.keys(properties || {}));
-    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
+    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { "data-fjsf-object": name, children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
                 .map((childName) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)
                     return undefined;
-                return (_jsx(SchemaField, { "data-fjsf-field": childName, required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+                return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { "data-fjsf-field": childName, required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
+                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
                                 ? schema.additionalProperties
                                 : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: ObjectFieldButtonPurpose.REMOVE,

package/dist/fields/RadioField.js

@@ -7,5 +7,5 @@ export const RadioField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsx(RadioButtonField, { inputProps: inputProps, label: label, name: name }) })));
 };

package/dist/fields/SearchMultiTagSelectField.js

@@ -10,5 +10,5 @@ export const SearchMultiTagSelectField = (props) => {
     const { name, uiSchema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = useExtractUiSchema(uiSchema);
     const enums = useMemo(() => getEnums(props), [props]);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(SearchableMultiTagSelectField, Object.assign({}, inputProps, { name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums })) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectField, Object.assign({}, inputProps, { name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums })) })));
 };

package/dist/fields/SearchableSelectField.js

@@ -32,7 +32,7 @@ export const SearchableSelectField = (props) => {
         }, [isActive]);
         return (_jsx(SearchListOption, Object.assign({ ref: ref }, rest, { children: children })));
     };
-    const { name, uiSchema, onChange, onSelect } = props;
+    const { name, uiSchema, schema, onChange, onSelect } = props;
     const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = useExtractUiSchema(uiSchema);
     const dropdownOptions = Object.assign({ show: false, height: "", width: "", perPage: 20 }, dropdown);
     const [{ value }, __, { setValue }] = useField(name);
@@ -119,7 +119,10 @@ export const SearchableSelectField = (props) => {
     const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
     const showMoreOption = displayedItems.length < filteredOptions.length &&
         displayedItems.length >= dropdownOptions.perPage;
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
+    const fieldDataAttribute = schema.type === "string"
+        ? { "data-fjsf-string": name }
+        : { "data-fjsf-number": name };
+    return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
                         maxHeight: dropdownOptions.height,
                         width: dropdownOptions.width,
                     }, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(ListOption, { isActive: index === selectedItemIndex, className: index === selectedItemIndex ? "selected-item-active" : "", style: index === selectedItemIndex

package/dist/fields/StringField.js

@@ -3,6 +3,7 @@ import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { getEnums } from "../utils/getEnums";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { useFormikContext } from "formik";
 export const StringField = (props) => {
     var _a;
     const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
@@ -10,16 +11,22 @@ export const StringField = (props) => {
     const { name, uiSchema = {}, schema } = props;
     const { type, placeholder, props: inputProps } = useExtractUiSchema(uiSchema);
     const enums = useMemo(() => getEnums(props), [props]);
+    const form = useFormikContext();
+    const fieldDataAttribute = schema.type === "string"
+        ? { "data-fjsf-string": name }
+        : { "data-fjsf-number": name };
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", 
-                            // If both are true, the first enum will be "selected"
-                            // and leads to annoying and misleading UX.
-                            // These defaults will lead to an empty, "nothing selected" component.
-                            disabled: false,
-                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
+            return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", onChange: (e) => {
+                        const selectedOption = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const.toString() === e.target.value);
+                        const selectedValue = selectedOption
+                            ? selectedOption.const
+                            : e.target.value;
+                        form === null || form === void 0 ? void 0 : form.setFieldValue(name, selectedValue);
+                    }, children: [_jsx("option", Object.assign({ value: "", disabled: false,
+                            hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] })) })));
         default:
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,
+            return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsx(FieldInput, Object.assign({ type,
                     placeholder }, inputProps, { name: name })) })));
     }
 };

package/dist/fields/TextAreaField.js

@@ -7,5 +7,5 @@ export const TextAreaField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(TextAreaInputField, { inputProps: inputProps, name: name }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-string": name, children: _jsx(TextAreaInputField, { inputProps: inputProps, name: name }) })));
 };

package/dist/fields/ToggleField.js

@@ -7,5 +7,5 @@ export const ToggleField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(ToggleSwitchField, Object.assign({}, inputProps, { name: name })) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsx(ToggleSwitchField, Object.assign({}, inputProps, { name: name })) })));
 };

package/dist/sampleData/fileUpload.js

@@ -34,6 +34,7 @@ export const fileUploadUiSchema = {
             "ui:field": "FileUploadField",
             "ui:uploadButtonText": "Add?",
             "ui:infoText": "There's nothing here",
+            props: { removeButton: { hidden: true } },
         },
     },
 };

package/dist/sampleData/multipleChoiceSchema.js

@@ -12,6 +12,17 @@ export const multipleChoiceSchema = {
                 { const: "windy", title: "Windy" },
             ],
         },
+        schoolAge: {
+            type: "number",
+            title: "At what age do you start school in your country? (no style given)",
+            oneOf: [
+                { const: 1, title: "5" },
+                { const: 2, title: "6" },
+                { const: 3, title: "7" },
+                { const: 4, title: "some other age" },
+            ],
+            default: 2,
+        },
         feeling: {
             type: "string",
             title: "How are you feeling today? (style: inline)",
@@ -85,6 +96,7 @@ export const multipleChoiceUiSchema = {
     weather: {
         "ui:field": "MultipleChoiceField",
     },
+    schoolAge: { "ui:field": "MultipleChoiceField" },
     feeling: {
         "ui:field": "MultipleChoiceField",
         "ui:options": {

package/dist/styledComponents.d.ts

@@ -151,7 +151,7 @@ export declare const MultipleChoiceFieldLabel: import("styled-components/dist/ty
     ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
 }, never>> & string;
 export declare const MultipleChoiceField: {
-    ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ inputProps, name, className, enums, style, value, form, }: MultipleChoiceFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         MultipleChoiceFieldElementStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>, "ref"> & {
             ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
@@ -246,7 +246,7 @@ export declare const RemoveButton: import("styled-components/dist/types").IStyle
 export declare const FileInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FileUploadField: {
-    ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         FileUploadFieldFileUploadFieldContainerStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
         FileUploadFieldFileUploadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/styledComponents.js

@@ -285,8 +285,34 @@ export const MultipleChoiceFieldContainer = styled(RadioButtonFieldContainer) ``
 export const MultipleChoiceFieldElement = styled(RadioButtonFieldElement) ``;
 export const MultipleChoiceFieldInput = styled(RadioButtonFieldInput) ``;
 export const MultipleChoiceFieldLabel = styled(ButtonLabel) ``;
-export const MultipleChoiceField = ({ inputProps, name, className, enums, style, }) => {
-    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => (_jsxs(MultipleChoiceFieldElement, { children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, inputProps, { name: name, type: enums.type === "multiSelect" ? "checkbox" : "radio", value: typeof v === "string" || typeof v === "number" ? v : v.const })), _jsx(MultipleChoiceFieldLabel, { "data-fjsf-enum-value": typeof v === "string" || typeof v === "number" ? v : v.const, children: typeof v === "string" || typeof v === "number" ? v : v.title })] }, typeof v === "string" || typeof v === "number" ? v : v.const))) }));
+export const MultipleChoiceField = ({ inputProps, name, className, enums, style, value, form, }) => {
+    const isMultiSelect = enums.type === "multiSelect";
+    const currentValue = isMultiSelect
+        ? Array.isArray(value)
+            ? value
+            : []
+        : value;
+    const isChecked = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            return currentValue.includes(optionValue);
+        }
+        return currentValue === optionValue;
+    };
+    const handleChange = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            const newValue = isChecked(optionValue)
+                ? currentValue.filter((v) => v !== optionValue)
+                : [...currentValue, optionValue];
+            form === null || form === void 0 ? void 0 : form.setFieldValue(name, newValue);
+        }
+        else {
+            form === null || form === void 0 ? void 0 : form.setFieldValue(name, optionValue);
+        }
+    };
+    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => {
+            const optionValue = v.const;
+            return (_jsxs(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, 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"));
+        }) }));
 };
 MultipleChoiceField.styles = {
     MultipleChoiceFieldElementStyle: MultipleChoiceFieldElement,
@@ -514,16 +540,15 @@ export const FileInfoText = styled.span `
   color: #555;
 `;
 export const FileUploadFieldContainer = styled.div ``;
-export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }) => {
+export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
     var _a, _b, _c;
-    const uiSchema = {};
     return (_jsxs(FileUploadFieldContainer, { className: className, children: [_jsxs("div", { children: [_jsx(FileUploadButton, { type: "button", onClick: () => { var _a; return (_a = document.getElementById(name)) === null || _a === void 0 ? void 0 : _a.click(); }, children: uploadButtonText !== null && uploadButtonText !== void 0 ? uploadButtonText : "Choose File" }), _jsx(HiddenFileInput, { id: name, name: name, type: "file", onChange: (event) => {
                             const file = event.currentTarget.files[0];
                             if (file) {
                                 handleFileUpload(file, setFieldValue);
                                 event.target.value = null;
                             }
-                        } }), !value ? (_jsx(FileInfoText, { children: infoText !== null && infoText !== void 0 ? infoText : "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsx(RemoveButton, Object.assign({ type: "button", onClick: () => handleRemoveFile(setFieldValue) }, removeButton === null || removeButton === void 0 ? void 0 : removeButton.props, { style: Object.assign({ color: "red", fontWeight: "bold" }, ((_b = (_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.props) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {})), children: (_c = removeButton === null || removeButton === void 0 ? void 0 : removeButton.content) !== null && _c !== void 0 ? _c : "X" }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(ProgressBarContainer, { children: [_jsx(ProgressBar, { "$progress": uploadProgress }), _jsxs(ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
+                        } }), !value ? (_jsx(FileInfoText, { children: infoText !== null && infoText !== void 0 ? infoText : "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), !hideRemoveButton && (_jsx(RemoveButton, Object.assign({ type: "button", onClick: () => handleRemoveFile(setFieldValue) }, removeButton === null || removeButton === void 0 ? void 0 : removeButton.props, { style: Object.assign({ color: "red", fontWeight: "bold" }, ((_b = (_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.props) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {})), children: (_c = removeButton === null || removeButton === void 0 ? void 0 : removeButton.content) !== null && _c !== void 0 ? _c : "X" })))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(ProgressBarContainer, { children: [_jsx(ProgressBar, { "$progress": uploadProgress }), _jsxs(ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
 };
 FileUploadField.styles = {
     FileUploadFieldFileUploadFieldContainerStyle: FileUploadFieldContainer,

package/dist/templates/ArrayFieldTemplate.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
@@ -6,11 +17,18 @@ import { useExtractUiSchema } from "../hooks";
 import { RequiredIndicator } from "../styledComponents";
 export const ArrayFieldTemplate = (props) => {
     const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
-    const { name, uiSchema, children } = props;
+    const { name, uiSchema, children } = props, otherProps = __rest(props, ["name", "uiSchema", "children"]);
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
     //TODO: This is not right
-    props: { wrapper: wrappertProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
-    return (_jsxs(ArrayFieldWrapper, Object.assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
+    return (_jsxs(ArrayFieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
 };

package/dist/templates/CollapsibleObjectFieldTemplate.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { FormRegistry } from "../Form";
@@ -6,15 +17,22 @@ import { useExtractUiSchema } from "../hooks";
 import { CollapsibleChildWrapper, CollapsibleToggle, Icon, RequiredIndicator, } from "../styledComponents";
 export const CollapsibleObjectFieldTemplate = (props) => {
     const { components: { FieldDescription, CollapsibleObjectFieldTitle, CollapsibleObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
-    const { children, name, uiSchema } = props;
+    const { children, name, uiSchema } = props, otherProps = __rest(props, ["children", "name", "uiSchema"]);
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
     // error: errorProps,
      } = {}, } = useExtractUiSchema(uiSchema);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
     const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
     const hide = collapsed;
-    return (_jsxs(CollapsibleObjectFieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsx(CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, children: _jsxs(CollapsibleObjectFieldTitle, Object.assign({ style: { display: "flex", alignItems: "center" } }, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" }), _jsx(Icon, { children: hide ? collapsedIcon !== null && collapsedIcon !== void 0 ? collapsedIcon : "▸" : openIcon !== null && openIcon !== void 0 ? openIcon : "▾" })] })) })), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), !hide && _jsx(CollapsibleChildWrapper, { children: children }), help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
+    return (_jsxs(CollapsibleObjectFieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsx(CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, children: _jsxs(CollapsibleObjectFieldTitle, Object.assign({ style: { display: "flex", alignItems: "center" } }, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" }), _jsx(Icon, { children: hide ? collapsedIcon !== null && collapsedIcon !== void 0 ? collapsedIcon : "▸" : openIcon !== null && openIcon !== void 0 ? openIcon : "▾" })] })) })), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), !hide && _jsx(CollapsibleChildWrapper, { children: children }), help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
 };

package/dist/templates/FieldTemplate.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
@@ -5,11 +16,17 @@ import { getDescription, getTitle } from "../utils";
 import { useExtractUiSchema } from "../hooks";
 export const FieldTemplate = (props) => {
     const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, InfoFieldButton, }, } = useContext(FormRegistry);
-    const { name, uiSchema, children } = props;
+    const { name, uiSchema, children } = props, otherProps = __rest(props, ["name", "uiSchema", "children"]);
     const title = getTitle(props);
     const description = getDescription(props);
-    const { help, info, 
-    //TODO: This is not right
-    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
-    return (_jsxs(FieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(FieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
+    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    // Merge the wrapperProps with the filtered dataAttributes
+    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
+    return (_jsxs(FieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsxs(FieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
 };

package/dist/templates/ObjectFieldTemplate.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
@@ -6,13 +17,20 @@ import { useExtractUiSchema } from "../hooks";
 import { RequiredIndicator } from "../styledComponents";
 export const ObjectFieldTemplate = (props) => {
     const { components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
-    const { children, uiSchema } = props;
+    const { children, uiSchema } = props, otherProps = __rest(props, ["children", "uiSchema"]);
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps,
     // error: errorProps,
      } = {}, } = useExtractUiSchema(uiSchema);
-    return (_jsxs(ObjectFieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, Object.assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
+    return (_jsxs(ObjectFieldWrapper, Object.assign({}, mergedWrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, Object.assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
 };

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { FormikErrors } from "formik";
+import { FormikContextType, FormikErrors } from "formik";
 import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import React, { MouseEventHandler } from "react";
 export type FormProps<T> = React.PropsWithChildren<{
@@ -73,6 +73,7 @@ export type Field = React.FunctionComponent<FieldProps>;
 export type FieldTemplateProps = React.PropsWithChildren<{
     name: string;
     schema: Schema;
+    [key: string]: any;
     uiSchema?: UiSchema;
     hidden?: boolean;
     required?: boolean;
@@ -82,6 +83,7 @@ export type FieldTemplateProps = React.PropsWithChildren<{
 export type ArrayFieldTemplateProps = React.PropsWithChildren<{
     name: string;
     schema: Schema;
+    [key: string]: any;
     uiSchema?: UiSchema;
     hidden?: boolean;
     required?: boolean;
@@ -93,9 +95,11 @@ export type ObjectFieldTemplateProps = {
     uiSchema?: UiSchema;
     required?: boolean;
     children: React.ReactNode;
+    [key: string]: any;
 };
 export type CollapsibleObjectFieldTemplateProps = {
     schema: Schema;
+    [key: string]: any;
     uiSchema?: UiSchema;
     required?: boolean;
     children: React.ReactNode;
@@ -191,19 +195,20 @@ export type TextAreaInputFieldProps = {
     name: string;
     className?: string;
 };
-type Enum = {
-    type: string;
-    values: {
-        const: number | string;
-        title: string;
-    }[] | number[] | string[];
-};
 export type MultipleChoiceFieldProps = {
+    name: string;
     inputProps?: any;
-    name?: React.ReactNode;
     className?: string;
-    enums: Enum;
+    enums: {
+        type: string;
+        values: {
+            const: string | number;
+            title: string;
+        }[];
+    };
     style?: string;
+    value?: string | number;
+    form?: FormikContextType<unknown>;
 };
 export type ToggleSwitchFieldProps = {
     inputProps: any;
@@ -287,5 +292,9 @@ export type FileUploadFieldProps = {
     };
     uploadButtonText?: string;
     infoText?: string;
+    hideRemoveButton: boolean;
+};
+export type FormValues = {
+    [key: string]: string | number | boolean | number[] | string[] | FormValues | FormValues[];
 };
 export {};

package/dist/utils/getTypes.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from "../types";
 export declare const isObject: (object: any) => boolean;
 export declare const getDefaultValueForType: (type: Schema["type"]) => {} | null;
-export declare const guessType: (value: any) => "object" | "string" | "number" | "boolean" | "array" | "null";
+export declare const guessType: (value: any) => "object" | "number" | "string" | "boolean" | "array" | "null";
 export declare const getSchemaType: (schema: Schema) => import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;

package/package.json

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