@nolwenture/formik-jsonschema-form 0.26.1 → 0.26.3

package/dist/pdfFields/ToggleField.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BooleanField } from "./BooleanField";
 export const ToggleField = (props) => {
-    var _a;
-    return (_jsx(BooleanField, Object.assign({}, props, { uiSchema: Object.assign(Object.assign({}, props.uiSchema), { "ui:props": Object.assign(Object.assign({}, (((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a["ui:props"]) || {})), { type: "boolean" }) }) })));
+    return (_jsx(BooleanField, { ...props, uiSchema: {
+            ...props.uiSchema,
+            "ui:props": {
+                ...(props.uiSchema?.["ui:props"] || {}),
+                type: "boolean",
+            },
+        } }));
 };

package/dist/pdfTemplates/ArrayFieldTemplate.js

@@ -12,5 +12,5 @@ export const ArrayFieldTemplate = (props) => {
     const { help, info, 
     //TODO: This is not right
     props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
-    return (_jsxs(ArrayFieldWrapper, Object.assign({}, wrapperProps, { 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 }))] })));
+    return (_jsxs(ArrayFieldWrapper, { ...wrapperProps, children: [title && (_jsxs(ArrayFieldTitle, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/pdfTemplates/CollapsibleObjectFieldTemplate.js

@@ -16,5 +16,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
      } = {}, } = useExtractUiSchema(uiSchema);
     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, { ...wrapperProps, children: [title && (_jsx(CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: _jsxs(CollapsibleObjectFieldTitle, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" }), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), !hide && _jsx(CollapsibleChildWrapper, { children: children }), help && _jsx(FieldHelp, { ...helpProps, children: help })] }));
 };

package/dist/pdfTemplates/FieldTemplate.js

@@ -11,5 +11,5 @@ export const FieldTemplate = (props) => {
     const { help, 
     //TODO: This is not right
     props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, } = {}, } = useExtractUiSchema(uiSchema);
-    return (_jsxs(FieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(FieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
+    return (_jsxs(FieldWrapper, { ...wrapperProps, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] })), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help })] }));
 };

package/dist/pdfTemplates/ObjectFieldTemplate.js

@@ -14,5 +14,5 @@ export const ObjectFieldTemplate = (props) => {
     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 }))] })));
+    return (_jsxs(ObjectFieldWrapper, { ...wrapperProps, children: [title && (_jsxs(ObjectFieldTitle, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help })] }));
 };

package/dist/styledComponents.js

@@ -1,14 +1,3 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
 import * as formik from "formik";
 import { useState } from "react";
@@ -44,18 +33,17 @@ export const ObjectFieldDownButton = styled(ObjectFieldLineButton) ``;
 export const ObjectFieldRemoveButton = styled(ObjectFieldLineButton) ``;
 export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
 export const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     switch (purpose) {
         case ObjectFieldButtonPurpose.ADD:
-            return (_jsx(ObjectFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick, children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
+            return (_jsx(ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
         case ObjectFieldButtonPurpose.REMOVE:
-            return (_jsx(ObjectFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick, children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
+            return (_jsx(ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
         case ObjectFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ObjectFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick, children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
+            return (_jsx(ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
         case ObjectFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ObjectFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick, children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
+            return (_jsx(ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
         default:
-            return (_jsx(ObjectFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick, children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
+            return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
     }
 };
 export const ArrayFieldWrapper = ObjectFieldWrapper;
@@ -174,7 +162,7 @@ export const InfoFieldContainerElement = styled.a `
 `;
 export const InfoFieldLabel = styled.span ``;
 export const InfoFieldButton = ({ label, content, position, props, className, }) => {
-    return (_jsxs(InfoFieldContainerElement, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, { position: position !== null && position !== void 0 ? position : "top", role: "tooltip", children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] })] }));
+    return (_jsxs(InfoFieldContainerElement, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(InfoFieldLabel, { children: label ?? "i" }), _jsxs(InfoFieldBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(InfoFieldBoxArrowElement, { position: position ?? "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] })] }));
 };
 InfoFieldButton.styles = {
     InfoFieldContainerElementStyle: InfoFieldContainerElement,
@@ -189,9 +177,8 @@ export const ErrorMessage = styled(formik.ErrorMessage) ``;
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
  */
-export const FieldInput = styled((_a) => {
-    var { formikAs } = _a, props = __rest(_a, ["formikAs"]);
-    return _jsx(formik.Field, Object.assign({}, props, { as: formikAs }));
+export const FieldInput = styled(({ formikAs, ...props }) => {
+    return _jsx(formik.Field, { ...props, as: formikAs });
 }) ``;
 export const RequiredIndicator = styled.span ``;
 // ToggleSwitchField --->
@@ -243,7 +230,7 @@ export const ToggleFieldInput = styled(FieldInput) `
   }
 `;
 export const ToggleSwitchField = ({ inputProps, name, className, }) => {
-    return (_jsxs(ToggleLabel, { className: className, children: [_jsx(ToggleFieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), _jsx(Toggle, {})] }));
+    return (_jsxs(ToggleLabel, { className: className, children: [_jsx(ToggleFieldInput, { ...inputProps, name: name, type: "checkbox" }), _jsx(Toggle, {})] }));
 };
 ToggleSwitchField.styles = {
     ToggleLabelStyle: ToggleLabel,
@@ -270,8 +257,7 @@ export const ButtonLabel = styled.span `
 export const ButtonLabelTrue = styled(ButtonLabel) ``;
 export const ButtonLabelFalse = styled(ButtonLabel) ``;
 export const RadioButtonField = ({ label, inputProps, name, className, }) => {
-    var _a, _b;
-    return (_jsxs(RadioButtonFieldContainer, { className: className, children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "true" })), _jsx(ButtonLabelTrue, { children: (_a = label === null || label === void 0 ? void 0 : label.true) !== null && _a !== void 0 ? _a : "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "false" })), _jsx(ButtonLabelFalse, { children: (_b = label === null || label === void 0 ? void 0 : label.false) !== null && _b !== void 0 ? _b : "false" })] })] }));
+    return (_jsxs(RadioButtonFieldContainer, { className: className, children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, { ...inputProps, name: name, type: "radio", value: "true" }), _jsx(ButtonLabelTrue, { children: label?.true ?? "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, { ...inputProps, name: name, type: "radio", value: "false" }), _jsx(ButtonLabelFalse, { children: label?.false ?? "false" })] })] }));
 };
 RadioButtonField.styles = {
     RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
@@ -303,15 +289,15 @@ export const MultipleChoiceField = ({ inputProps, name, className, enums, style,
             const newValue = isChecked(optionValue)
                 ? currentValue.filter((v) => v !== optionValue)
                 : [...currentValue, optionValue];
-            form === null || form === void 0 ? void 0 : form.setFieldValue(name, newValue);
+            form?.setFieldValue(name, newValue);
         }
         else {
-            form === null || form === void 0 ? void 0 : form.setFieldValue(name, optionValue);
+            form?.setFieldValue(name, optionValue);
         }
     };
-    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => {
+    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(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"));
+            return (_jsxs(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [_jsx(MultipleChoiceFieldInput, { ...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 = {
@@ -380,24 +366,21 @@ export const MultiSelectOptionListWithoutItem = styled.li `
 export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
     const [search, setSearch] = useState("");
     const searchIncludedInEnum = () => {
-        const hasValue = enums === null || enums === void 0 ? void 0 : enums.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
-        return hasValue === null || hasValue === void 0 ? void 0 : hasValue.includes(true);
+        const hasValue = enums?.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
+        return hasValue?.includes(true);
     };
-    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
-            var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsxs(MultiSelectSearchContainer, { children: [_jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
-                                    setSearch(e.currentTarget.value);
-                                }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
-                                        var _a;
-                                        setFieldValue(name, [
-                                            ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                        ]);
-                                        setSearch("");
-                                    }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) }))] }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
-                            var _a;
-                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
-                        }) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
-        } }));
+    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, { id: className, type: "hidden", ...field }), _jsxs(MultiSelectSearchContainer, { children: [_jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                setSearch(e.currentTarget.value);
+                            }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums?.values
+                                .filter((item) => !(field.value ?? []).includes(item.const))
+                                .filter((value) => value.title.toLowerCase().includes(search.toLowerCase()))
+                                .map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                    setFieldValue(name, [
+                                        ...new Set([...(field.value ?? []), option.const]),
+                                    ]);
+                                    setSearch("");
+                                }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage ?? "No match found" })) }))] }), _jsx(MultiSelectBadgeContainer, { children: (field.value ?? []).map((value) => (_jsxs(MultiSelectBadge, { children: [enums?.values.find((option) => option.const === value)
+                                ?.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement ?? "x" })] }, value))) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] })) }));
 };
 SearchableMultiTagSelectField.styles = {
     MultiSelectContainerStyle: MultiSelectContainer,
@@ -415,7 +398,7 @@ export const TextAreaFieldInput = styled(FieldInput) `
   min-height: 5rem;
 `;
 export const TextAreaInputField = ({ inputProps, name, className, }) => {
-    return _jsx(TextAreaFieldInput, Object.assign({}, inputProps, { name: name, formikAs: "textarea" }));
+    return _jsx(TextAreaFieldInput, { ...inputProps, name: name, formikAs: "textarea" });
 };
 export const BooleanFieldWrapper = styled.div `
   display: flex;
@@ -531,17 +514,11 @@ const NotSelectedCircle = styled.span `
   width: 1rem;
 `;
 export const MultipleChoiceFieldPdf = ({ inputProps, name, className, style, selected, notSelected, }) => {
-    return (_jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
+    return (_jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
                 selected.length > 0 &&
-                selected.map((s) => {
-                    var _a, _b;
-                    return (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: (_a = s.title) !== null && _a !== void 0 ? _a : "Hello" })] }) }, (_b = s.title) !== null && _b !== void 0 ? _b : s));
-                }), notSelected &&
-                (notSelected === null || notSelected === void 0 ? void 0 : notSelected.length) > 0 &&
-                notSelected.map((n) => {
-                    var _a;
-                    return (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, (_a = n.title) !== null && _a !== void 0 ? _a : n));
-                })] }));
+                selected.map((s) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                notSelected?.length > 0 &&
+                notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }));
 };
 // --> FileUploadField
 export const FileUploadButton = styled.button `
@@ -597,14 +574,17 @@ export const FileInfoText = styled.span `
 `;
 export const FileUploadFieldContainer = styled.div ``;
 export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
-    var _a, _b, _c;
-    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) => {
+    return (_jsxs(FileUploadFieldContainer, { className: className, children: [_jsxs("div", { children: [_jsx(FileUploadButton, { type: "button", onClick: () => document.getElementById(name)?.click(), children: 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 }), !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, "%"] })] })] })) }))] }));
+                        } }), !value ? (_jsx(FileInfoText, { children: infoText ?? "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), !hideRemoveButton && (_jsx(RemoveButton, { type: "button", onClick: () => handleRemoveFile(setFieldValue), ...removeButton?.props, style: {
+                                color: "red",
+                                fontWeight: "bold",
+                                ...(removeButton?.props?.style ?? {}),
+                            }, children: removeButton?.content ?? "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,14 +1,3 @@
-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";
@@ -18,7 +7,7 @@ import { RequiredIndicator } from "../styledComponents";
 import { getIn, useFormikContext } from "formik";
 export const ArrayFieldTemplate = (props) => {
     const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
-    const { name, uiSchema, children } = props, otherProps = __rest(props, ["name", "uiSchema", "children"]);
+    const { name, uiSchema, children, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
@@ -30,7 +19,10 @@ export const ArrayFieldTemplate = (props) => {
         acc[key] = otherProps[key];
         return acc;
     }, {});
-    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
     // These lines make sure the error message is a string, which means the error
     // is actually for the whole Array component, not for one of the children.
     const { errors } = useFormikContext();
@@ -38,5 +30,5 @@ export const ArrayFieldTemplate = (props) => {
     // In case of array of objects, it will give error message as an object value,
     // which is incorrect value for React, causing UI to crash.
     const errorIsString = typeof error === "string";
-    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 })), errorIsString && _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
+    return (_jsxs(ArrayFieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(ArrayFieldTitle, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/templates/CollapsibleObjectFieldTemplate.js

@@ -1,14 +1,3 @@
-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";
@@ -17,7 +6,7 @@ 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, otherProps = __rest(props, ["children", "name", "uiSchema"]);
+    const { children, name, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
@@ -31,8 +20,11 @@ export const CollapsibleObjectFieldTemplate = (props) => {
         acc[key] = otherProps[key];
         return acc;
     }, {});
-    const mergedWrapperProps = Object.assign(Object.assign({}, wrapperProps), dataAttributes);
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
     const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
     const hide = collapsed;
-    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 }))] })));
+    return (_jsxs(CollapsibleObjectFieldWrapper, { ...mergedWrapperProps, children: [title && (_jsx(CollapsibleToggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: _jsxs(CollapsibleObjectFieldTitle, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" }), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), !hide && _jsx(CollapsibleChildWrapper, { children: children }), help && _jsx(FieldHelp, { ...helpProps, children: help })] }));
 };

package/dist/templates/FieldTemplate.js

@@ -1,14 +1,3 @@
-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";
@@ -16,7 +5,7 @@ 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, otherProps = __rest(props, ["name", "uiSchema", "children"]);
+    const { name, uiSchema, children, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
@@ -27,6 +16,9 @@ export const FieldTemplate = (props) => {
         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 }))] })));
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes, // This will only include data-* attributes
+    };
+    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/templates/ObjectFieldTemplate.js

@@ -1,14 +1,3 @@
-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";
@@ -17,7 +6,7 @@ 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, otherProps = __rest(props, ["children", "uiSchema"]);
+    const { children, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, 
@@ -31,6 +20,9 @@ export const ObjectFieldTemplate = (props) => {
         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 }))] })));
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    return (_jsxs(ObjectFieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(ObjectFieldTitle, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help })] }));
 };

package/dist/utils/__tests/createInitialValues.test.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { ageFieldDefinition } from "../../sampleData/ageFieldDefinition";
 import { createInitialValues } from "../createInitialValues";
 const exampleSchema = {
@@ -60,7 +51,7 @@ const exampleSchema = {
     },
 };
 describe("Create Initial Values", () => {
-    it("creates for an object type", () => __awaiter(void 0, void 0, void 0, function* () {
+    it("creates for an object type", async () => {
         const result = createInitialValues(exampleSchema);
         const expected = {
             name: "",
@@ -109,5 +100,5 @@ describe("Create Initial Values", () => {
                 },
             },
         };
-    }));
+    });
 });