@nolwenture/formik-jsonschema-form 1.0.0-beta.28 → 1.0.0-beta.29

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

@@ -32,12 +32,12 @@ const moveInArray = (values, index, direction) => {
     }
 };
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    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 [{ value }, _, { setValue }] = (0, formik_1.useField)(name);
-    const { items, additionalItems, } = (0, react_1.useMemo)(() => {
+    const schemas = (0, react_1.useMemo)(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
         if (!Array.isArray(items)) {
             items = [items];
@@ -99,21 +99,23 @@ const ArrayField = (props) => {
     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 = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
-    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
+    const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.ArrayFieldTemplate;
     return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
             readOnly: schema.readOnly,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
+            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, items: valueArray, renderItem: (item, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema((index < schemas.items.length && schemas.items[index]) ??
+                                schemas.additionalItems, schema), uiSchema: {
                                 disabled,
                                 ...(uiSchema?.[index] || uiSchema?.items),
                             }, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
-                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index + items.length}]`, schema: prepareChildSchema(additionalItems, schema), uiSchema: {
-                                    disabled,
-                                    ...(uiSchema?.[index + items.length] || uiSchema?.items),
-                                } }), !preventManipulation && ((0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + 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 + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                        index < value?.slice(items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)))] }), additionalItems && !preventManipulation && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), 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, { ...(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)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
 exports.ArrayField = ArrayField;
 function prepareChildSchema(childSchema, parentSchema) {

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

@@ -3,10 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.ArrayFieldList = void 0;
+exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../ObjectField/styledComponents");
-exports.ArrayFieldList = styledComponents_1.ObjectFieldList;
 exports.ArrayFieldItem = styledComponents_1.ObjectFieldItem;
 exports.ArrayFieldItemButtons = styledComponents_1.ObjectFieldItemButtons;
 exports.ArrayFieldButton = (0, styled_components_1.default)(styledComponents_1.ObjectFieldButton) ``;

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

@@ -13,7 +13,9 @@ const BooleanField = (props) => {
     const { name, uiSchema } = props;
     const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values, setValues } = (0, formik_1.useFormikContext)();
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsxs)(BooleanFieldWrapper, { children: [(0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
                         setValues({
                             ...values,

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

@@ -12,7 +12,9 @@ const DateField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
 };
 exports.DateField = DateField;

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

@@ -61,7 +61,9 @@ const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...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?.removeButton.hidden }) }));
 };
 exports.FileUploadField = FileUploadField;

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

@@ -27,7 +27,9 @@ const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

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

@@ -7,7 +7,9 @@ const FormRegistry_1 = require("../../FormRegistry");
 const NullField = (props) => {
     const { templates } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { name, uiSchema } = props;
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-null": name }));
 };
 exports.NullField = NullField;

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

@@ -52,7 +52,8 @@ const ObjectField = (props) => {
                 return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
         }
     };
-    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ??
+    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);

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

@@ -1,12 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = void 0;
+exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = void 0;
 const styled_components_1 = require("styled-components");
-exports.ObjectFieldList = styled_components_1.styled.ul `
-  color: ${(props) => props.theme.color.text.default};
-  list-style-type: none;
-  padding: 0;
-`;
 exports.ObjectFieldItem = styled_components_1.styled.li `
   color: ${(props) => props.theme.color.text.default};
   display: flex;

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

@@ -11,7 +11,9 @@ const RadioField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
 };
 exports.RadioField = RadioField;

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

@@ -12,7 +12,9 @@ const SearchableMultiTagSelectField = (props) => {
     const { name, uiSchema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
 };
 exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;

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

@@ -119,7 +119,9 @@ const SearchableSelectField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
                     //ref={moreRef} //TODO
                     style: {

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

@@ -18,7 +18,9 @@ const StringField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     switch (enums?.type) {
         case "select":
             return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectFieldInput, { type,

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

@@ -11,7 +11,9 @@ const TextAreaField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
 };
 exports.TextAreaField = TextAreaField;

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

@@ -11,7 +11,9 @@ const ToggleField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
 };
 exports.ToggleField = ToggleField;

package/dist/cjs/Form/templates/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -10,7 +10,7 @@ const styledComponents_1 = require("./styledComponents");
 const ArrayFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
-    const { name, uiSchema, children, ...otherProps } = props;
+    const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
     const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -31,6 +31,6 @@ 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 ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.ArrayFieldTemplate = ArrayFieldTemplate;

package/dist/cjs/Form/templates/index.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.templateComponents = void 0;
+//Please keep this in alphabetical order
 const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
 const CollapsibleObjectFieldTemplate = __importStar(require("./CollapsibleObjectFieldTemplate"));
 const FieldTemplate = __importStar(require("./FieldTemplate"));

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

@@ -20,10 +20,11 @@ const ArrayField = (props) => {
         }
         return item;
     }
-    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, children: value &&
-            value.map((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))) }));
+    const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        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)) }));
 };
 exports.ArrayField = ArrayField;

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

@@ -25,7 +25,9 @@ const BooleanField = (props) => {
         }
         return typeof label === "string" ? label : undefined;
     }
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    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)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
 };
 exports.BooleanField = BooleanField;

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

@@ -16,7 +16,9 @@ const MultipleChoiceField = (props) => {
     const selected = (0, utils_1.getSelectedEnum)(value, enums);
     const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
     const hideNotSelected = onlyShowSelected === true || selected === undefined;
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    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, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

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

@@ -6,7 +6,9 @@ const react_1 = require("react");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const NullField = (props) => {
     const { templates } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props });
 };
 exports.NullField = NullField;

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

@@ -31,7 +31,9 @@ const ObjectField = (props) => {
         }
     }, [valuesToRemove]);
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ObjectFieldTemplate;
+    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.ObjectFieldTemplate;
     return ((0, jsx_runtime_1.jsx)(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {

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

@@ -16,7 +16,9 @@ const StringField = (props) => {
         value =
             enums.values.find((element) => element.const === value)?.title ?? value;
     }
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    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)(StringFieldValue, { "data-keyword": value, children: value }) }));
 };
 exports.StringField = StringField;

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

@@ -10,7 +10,9 @@ const TextAreaField = (props) => {
     const { name, uiSchema } = props;
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    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)(TextAreaValue, { children: value }) }));
 };
 exports.TextAreaField = TextAreaField;

package/dist/cjs/FormView/templates/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -9,12 +9,12 @@ const styledComponents_1 = require("./styledComponents");
 const ArrayFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { Wrapper, Title, Description } = (0, styledComponents_1.getComponents)(components);
-    const { name, uiSchema, children } = props;
+    const { name, uiSchema, items, renderItem } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
     const { help, info, 
     //TODO: This is not right
     props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...wrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Title, { ...titleProps, htmlFor: name, children: title })), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...wrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Title, { ...titleProps, htmlFor: name, children: title })), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index))] }));
 };
 exports.ArrayFieldTemplate = ArrayFieldTemplate;

package/dist/cjs/FormView/templates/index.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.templateComponents = void 0;
+//Please keep this in alphabetical order
 const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
 const FieldTemplate = __importStar(require("./FieldTemplate"));
 const ObjectFieldTemplate = __importStar(require("./ObjectFieldTemplate"));

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { useField } from "formik";
 import { EnumsTypes, extractUiSchema, getEnums } from "../../../utils";
@@ -29,12 +29,12 @@ const moveInArray = (values, index, direction) => {
     }
 };
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    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 [{ value }, _, { setValue }] = useField(name);
-    const { items, additionalItems, } = useMemo(() => {
+    const schemas = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
         if (!Array.isArray(items)) {
             items = [items];
@@ -96,21 +96,23 @@ export const ArrayField = (props) => {
     const { disabled } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     const preventManipulation = disabled || schema.readOnly;
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
-    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
+    const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.ArrayFieldTemplate;
     return schema.anyOf !== undefined ? (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SelectFieldInput, { type,
             readOnly: schema.readOnly,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) }) })) : (_jsxs(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
+            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) }) })) : (_jsxs(_Fragment, { children: [_jsx(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, items: valueArray, renderItem: (item, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema((index < schemas.items.length && schemas.items[index]) ??
+                                schemas.additionalItems, schema), uiSchema: {
                                 disabled,
                                 ...(uiSchema?.[index] || uiSchema?.items),
                             }, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
-                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: prepareChildSchema(additionalItems, schema), uiSchema: {
-                                    disabled,
-                                    ...(uiSchema?.[index + items.length] || uiSchema?.items),
-                                } }), !preventManipulation && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                        index < value?.slice(items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)))] }), additionalItems && !preventManipulation && (_jsx(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { ...(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)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
 function prepareChildSchema(childSchema, parentSchema) {
     if (!childSchema || typeof childSchema === "boolean") {

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

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { ObjectFieldButton, ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldList, } from "../ObjectField/styledComponents";
-export const ArrayFieldList = ObjectFieldList;
+import { ObjectFieldButton, ObjectFieldItem, ObjectFieldItemButtons, } from "../ObjectField/styledComponents";
 export const ArrayFieldItem = ObjectFieldItem;
 export const ArrayFieldItemButtons = ObjectFieldItemButtons;
 export const ArrayFieldButton = styled(ObjectFieldButton) ``;

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

@@ -10,7 +10,9 @@ export const BooleanField = (props) => {
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { values, setValues } = useFormikContext();
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
                         setValues({
                             ...values,

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

@@ -9,6 +9,8 @@ export const DateField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
 };

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

@@ -58,6 +58,8 @@ export const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FileUploadFieldInput, { ...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?.removeButton.hidden }) }));
 };

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

@@ -24,6 +24,8 @@ export const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
 };

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

@@ -4,6 +4,8 @@ import { FormRegistry } from "../../FormRegistry";
 export const NullField = (props) => {
     const { templates } = useContext(FormRegistry);
     const { name, uiSchema } = props;
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-null": name }));
 };

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

@@ -49,7 +49,8 @@ export const ObjectField = (props) => {
                 return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
         }
     };
-    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ??
+    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);

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

@@ -1,9 +1,4 @@
 import { styled } from "styled-components";
-export const ObjectFieldList = styled.ul `
-  color: ${(props) => props.theme.color.text.default};
-  list-style-type: none;
-  padding: 0;
-`;
 export const ObjectFieldItem = styled.li `
   color: ${(props) => props.theme.color.text.default};
   display: flex;

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

@@ -8,6 +8,8 @@ export const RadioField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
 };

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

@@ -9,6 +9,8 @@ export const SearchableMultiTagSelectField = (props) => {
     const { name, uiSchema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
 };

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

@@ -116,7 +116,9 @@ export const SearchableSelectField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchableSelectFieldInputContainer, { children: [_jsx(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && (_jsx(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && (_jsxs(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
                     //ref={moreRef} //TODO
                     style: {

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

@@ -15,7 +15,9 @@ export const StringField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     switch (enums?.type) {
         case "select":
             return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(SelectFieldInput, { type,

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

@@ -8,6 +8,8 @@ export const TextAreaField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
 };

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

@@ -8,6 +8,8 @@ export const ToggleField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
 };

package/dist/esm/Form/templates/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -7,7 +7,7 @@ import { getComponents } from "./styledComponents";
 export const ArrayFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
     const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
-    const { name, uiSchema, children, ...otherProps } = props;
+    const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
     const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -28,5 +28,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(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/esm/Form/templates/index.js

@@ -1,3 +1,4 @@
+//Please keep this in alphabetical order
 import * as ArrayFieldTemplate from "./ArrayFieldTemplate";
 import * as CollapsibleObjectFieldTemplate from "./CollapsibleObjectFieldTemplate";
 import * as FieldTemplate from "./FieldTemplate";

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

@@ -17,9 +17,10 @@ export const ArrayField = (props) => {
         }
         return item;
     }
-    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
-    return (_jsx(SelectedArrayFieldTemplate, { ...props, children: value &&
-            value.map((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))) }));
+    const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        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)) }));
 };

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

@@ -22,6 +22,8 @@ export const BooleanField = (props) => {
         }
         return typeof label === "string" ? label : undefined;
     }
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(BooleanFieldWrapper, { children: _jsx(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
 };

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

@@ -13,6 +13,8 @@ export const MultipleChoiceField = (props) => {
     const selected = getSelectedEnum(value, enums);
     const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
     const hideNotSelected = onlyShowSelected === true || selected === undefined;
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    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, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
 };

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

@@ -3,6 +3,8 @@ import { useContext } from "react";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const NullField = (props) => {
     const { templates } = useContext(FormViewRegistry);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return _jsx(SelectedFieldTemplate, { ...props });
 };

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

@@ -28,7 +28,9 @@ export const ObjectField = (props) => {
         }
     }, [valuesToRemove]);
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ObjectFieldTemplate;
+    const SelectedObjectFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.ObjectFieldTemplate;
     return (_jsx(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {

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

@@ -13,6 +13,8 @@ export const StringField = (props) => {
         value =
             enums.values.find((element) => element.const === value)?.title ?? value;
     }
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(StringFieldValue, { "data-keyword": value, children: value }) }));
 };

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

@@ -7,6 +7,8 @@ export const TextAreaField = (props) => {
     const { name, uiSchema } = props;
     const { values } = useFormikContext();
     const value = getIn(values, name);
-    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
+        templates[props.uiSchema?.["ui:template"]]) ??
+        templates.FieldTemplate;
     return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(TextAreaValue, { children: value }) }));
 };

package/dist/esm/FormView/templates/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -6,11 +6,11 @@ import { getComponents } from "./styledComponents";
 export const ArrayFieldTemplate = (props) => {
     const { components } = useContext(FormViewRegistry);
     const { Wrapper, Title, Description } = getComponents(components);
-    const { name, uiSchema, children } = props;
+    const { name, uiSchema, items, renderItem } = props;
     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, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsxs(Wrapper, { ...wrapperProps, children: [title && (_jsx(Title, { ...titleProps, htmlFor: name, children: title })), description && (_jsx(Description, { ...descriptionProps, children: description })), children] }));
+    return (_jsxs(Wrapper, { ...wrapperProps, children: [title && (_jsx(Title, { ...titleProps, htmlFor: name, children: title })), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index))] }));
 };

package/dist/esm/FormView/templates/index.js

@@ -1,3 +1,4 @@
+//Please keep this in alphabetical order
 import * as ArrayFieldTemplate from "./ArrayFieldTemplate";
 import * as FieldTemplate from "./FieldTemplate";
 import * as ObjectFieldTemplate from "./ObjectFieldTemplate";

package/dist/types/Form/components/index.d.ts

@@ -139,7 +139,6 @@ export declare const components: {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
     ObjectFieldSection: import("react").FC<import("../fields/ObjectField").ObjectFieldSectionProps>;
-    ObjectFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     ObjectFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     ObjectFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
@@ -190,7 +189,6 @@ export declare const components: {
     FileUploadFieldFileInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
     FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    ArrayFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     ArrayFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ArrayFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>, "ref"> & {

package/dist/types/Form/fields/ArrayField/styledComponents.d.ts

@@ -1,4 +1,3 @@
-export declare const ArrayFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const ArrayFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ArrayFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>, "ref"> & {

package/dist/types/Form/fields/ObjectField/index.d.ts

@@ -1,7 +1,6 @@
 export * as fields from "./ObjectField";
 declare const components: {
     ObjectFieldSection: import("react").FC<import("./types").ObjectFieldSectionProps>;
-    ObjectFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     ObjectFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     ObjectFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;

package/dist/types/Form/fields/ObjectField/styledComponents.d.ts

@@ -1,4 +1,3 @@
-export declare const ObjectFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const ObjectFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const ObjectFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;

package/dist/types/Form/fields/index.d.ts

@@ -71,7 +71,6 @@ export declare const fieldComponents: {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
     ObjectFieldSection: import("react").FC<ObjectField.ObjectFieldSectionProps>;
-    ObjectFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     ObjectFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     ObjectFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
@@ -122,7 +121,6 @@ export declare const fieldComponents: {
     FileUploadFieldFileInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
     FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    ArrayFieldList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     ArrayFieldItemButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ArrayFieldButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>, "ref"> & {

package/dist/types/Form/templates/ArrayFieldTemplate/ArrayFieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { ArrayFieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps>;
+import type { ArrayFieldTemplateType } from "../../../common/types";
+export declare const ArrayFieldTemplate: ArrayFieldTemplateType;

package/dist/types/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { ObjectFieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const CollapsibleObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
+import type { ObjectFieldTemplateType } from "../../../common/types";
+export declare const CollapsibleObjectFieldTemplate: ObjectFieldTemplateType;

package/dist/types/Form/templates/FieldTemplate/FieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { FieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const FieldTemplate: React.FC<FieldTemplateProps>;
+import type { FieldTemplateType } from "../../../common/types";
+export declare const FieldTemplate: FieldTemplateType;

package/dist/types/Form/templates/ObjectFieldTemplate/ObjectFieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { ObjectFieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
+import type { ObjectFieldTemplateType } from "../../../common/types";
+export declare const ObjectFieldTemplate: ObjectFieldTemplateType;

package/dist/types/Form/templates/index.d.ts

@@ -1,4 +1,4 @@
-import { ArrayFieldTemplateProps, FieldTemplateProps, ObjectFieldTemplateProps } from "../../common/types";
+import type { TemplateType } from "../../common/types";
 import * as ObjectFieldTemplate from "./ObjectFieldTemplate";
 export declare const templateComponents: {
     getComponents(components: import("..").ComponentsType): {
@@ -41,11 +41,11 @@ export declare const templateComponents: {
     ArrayFieldTemplateErrorMessage: typeof import("../components/ErrorMessage").ErrorMessage | undefined;
 };
 export declare const templates: {
-    ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
-    FieldTemplate: React.FC<FieldTemplateProps>;
-    CollapsibleObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
-    ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps>;
+    ObjectFieldTemplate: import("../../common/types").ObjectFieldTemplateType;
+    FieldTemplate: import("../../common/types").FieldTemplateType;
+    CollapsibleObjectFieldTemplate: import("../../common/types").ObjectFieldTemplateType;
+    ArrayFieldTemplate: import("../../common/types").ArrayFieldTemplateType;
 };
 export type TemplatesType = typeof templates & {
-    [key: string]: React.FC<ArrayFieldTemplateProps> | React.FC<FieldTemplateProps> | React.FC<ObjectFieldTemplateProps>;
+    [key: string]: TemplateType;
 };

package/dist/types/FormView/templates/ArrayFieldTemplate/ArrayFieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { ArrayFieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps>;
+import type { ArrayFieldTemplateType } from "../../../common/types";
+export declare const ArrayFieldTemplate: ArrayFieldTemplateType;

package/dist/types/FormView/templates/FieldTemplate/FieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { FieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const FieldTemplate: React.FC<FieldTemplateProps>;
+import type { FieldTemplateType } from "../../../common/types";
+export declare const FieldTemplate: FieldTemplateType;

package/dist/types/FormView/templates/ObjectFieldTemplate/ObjectFieldTemplate.d.ts

@@ -1,3 +1,2 @@
-import type { ObjectFieldTemplateProps } from "../../../common/types";
-import React from "react";
-export declare const ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
+import type { ObjectFieldTemplateType } from "../../../common/types";
+export declare const ObjectFieldTemplate: ObjectFieldTemplateType;

package/dist/types/FormView/templates/index.d.ts

@@ -1,4 +1,4 @@
-import { ArrayFieldTemplateProps, FieldTemplateProps, ObjectFieldTemplateProps } from "../../common/types";
+import type { TemplateType } from "../../common/types";
 import * as ObjectFieldTemplate from "./ObjectFieldTemplate";
 export declare const templateComponents: {
     getComponents(components: import("../components").ComponentsType): {
@@ -14,10 +14,10 @@ export declare const templateComponents: {
     ArrayFieldTemplateDescription: typeof import("../components").FieldDescription | undefined;
 };
 export declare const templates: {
-    ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
-    FieldTemplate: React.FC<FieldTemplateProps>;
-    ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps>;
+    ObjectFieldTemplate: import("../../common/types").ObjectFieldTemplateType;
+    FieldTemplate: import("../../common/types").FieldTemplateType;
+    ArrayFieldTemplate: import("../../common/types").ArrayFieldTemplateType;
 };
 export type TemplatesType = typeof templates & {
-    [key: string]: React.FC<ArrayFieldTemplateProps> | React.FC<FieldTemplateProps> | React.FC<ObjectFieldTemplateProps>;
+    [key: string]: TemplateType;
 };

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

@@ -16,6 +16,7 @@ export type UiSchema = {
     "ui:help"?: React.ReactNode | string;
     "ui:info"?: FieldInfoProps;
     "ui:field"?: Field | string;
+    "ui:template"?: string;
     "ui:options"?: {
         [key: string]: boolean | number | string | object | any[] | null;
     };

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

@@ -1,10 +1,4 @@
 import type { Schema, UiSchema } from "./Schemas";
-export type ArrayFieldTemplateProps = React.PropsWithChildren<{
-    name: string;
-    schema: Schema;
-    [key: string]: any;
-    uiSchema?: UiSchema;
-}>;
 export type FieldTemplateProps = React.PropsWithChildren<{
     name: string;
     schema: Schema;
@@ -18,3 +12,15 @@ export type ObjectFieldTemplateProps = {
     children: React.ReactNode;
     [key: string]: any;
 };
+export type ArrayFieldTemplateProps = React.PropsWithChildren<{
+    name: string;
+    schema: Schema;
+    uiSchema?: UiSchema;
+    items?: any[];
+    renderItem: (item: any, index: number) => React.ReactNode;
+    [key: string]: any;
+}>;
+export type FieldTemplateType = React.FC<FieldTemplateProps>;
+export type ObjectFieldTemplateType = React.FC<ObjectFieldTemplateProps>;
+export type ArrayFieldTemplateType = React.FC<ArrayFieldTemplateProps>;
+export type TemplateType = FieldTemplateType | ObjectFieldTemplateType | ArrayFieldTemplateType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.29",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [