@nolwenture/formik-jsonschema-form 1.0.0-beta.21 → 1.0.0-beta.25

package/dist/cjs/common/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./FileUploadContext"), exports);

package/dist/cjs/common/types/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./Schemas"), exports);
+__exportStar(require("./Templates"), exports);

package/dist/cjs/index.js

@@ -15,5 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 //This file exists for purpose releasing "moduleResolution": "node" compatible version (until we split this to multiple packages)
+__exportStar(require("./common"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./FormView"), exports);
+__exportStar(require("./utils"), exports);

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

@@ -29,7 +29,7 @@ const moveInArray = (values, index, direction) => {
     }
 };
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { type, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -96,9 +96,11 @@ export const ArrayField = (props) => {
     const { disabled } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     const preventManipulation = disabled || schema.readOnly;
-    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SelectFieldInput, { type,
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedArrayFieldTemplate = 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(ArrayFieldTemplate, { ...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(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: {
                                 disabled,
                                 ...(uiSchema?.[index] || uiSchema?.items),
                             }, 

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

@@ -5,12 +5,13 @@ import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 import { extractUiSchema } from "../../../utils";
 export const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
+    const { templates, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { values, setValues } = useFormikContext();
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
+    const SelectedFieldTemplate = 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,
                             [name]: !values?.[name],

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

@@ -5,9 +5,10 @@ import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 import { DateFieldWrapper } from "./styledComponents";
 export const DateField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { FieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
+    const SelectedFieldTemplate = 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

@@ -6,7 +6,7 @@ import { FileUploadContext } from "../../../common/FileUploadContext";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const FileUploadField = (props) => {
-    const { templates: { FieldTemplate }, components: { FileUploadFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { FileUploadFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -58,5 +58,6 @@ export const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     };
-    return (_jsx(FieldTemplate, { ...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 }) }));
+    const SelectedFieldTemplate = 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

@@ -5,7 +5,7 @@ import { extractUiSchema, getEnums } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { MultipleChoiceFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema, schema } = props;
     const { props: inputProps, style } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -24,5 +24,6 @@ export const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
+    const SelectedFieldTemplate = 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

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

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

@@ -14,7 +14,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -32,9 +32,6 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
-        ? CollapsibleObjectFieldTemplate
-        : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
     const orderedAddProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
     const additionalPropertiesInOrder = orderAdditionalProperties(orderedAddProperties, Object.keys(additionalValues || {}));
@@ -52,7 +49,11 @@ export const ObjectField = (props) => {
                 return (_jsx(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
         }
     };
-    return (_jsxs(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ??
+        (props.uiSchema?.["ui:options"]?.isCollapsible
+            ? templates.CollapsibleObjectFieldTemplate
+            : templates.ObjectFieldTemplate);
+    return (_jsxs(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
                 .map((child) => {
                 if (typeof child === "string") {
                     const childSchema = properties?.[child];

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

@@ -4,9 +4,10 @@ import { extractUiSchema } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const RadioField = (props) => {
-    const { templates: { FieldTemplate }, components: { RadioFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { RadioFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
+    const SelectedFieldTemplate = 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

@@ -4,10 +4,11 @@ import { extractUiSchema, getEnums } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const SearchableMultiTagSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableMultiTagSelectFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { SearchableMultiTagSelectFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+    const SelectedFieldTemplate = 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/SearchableMultiTagSelectField/styledComponents.js

@@ -41,7 +41,7 @@ export const SearchableMultiTagSelectFieldOptionList = styled.ul `
   padding: unset;
   margin: unset;
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  border-radius: ${(props) => props.theme.borderRadius.s};
+  border-radius: ${(props) => props.theme.borderRadius.none};
   position: absolute;
   background: ${(props) => props.theme.color.background.default};
   top: 100%;

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

@@ -5,7 +5,7 @@ import { extractUiSchema, getEnums } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const SearchableSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = useContext(FormRegistry);
+    const { templates, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = useContext(FormRegistry);
     useSetDefault(props);
     const ListOption = (props) => {
         const { isActive, children, ...rest } = props;
@@ -116,7 +116,8 @@ export const SearchableSelectField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    return (_jsx(FieldTemplate, { ...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", 
+    const SelectedFieldTemplate = 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: {
                         maxHeight: dropdownOptions.height,

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

@@ -6,7 +6,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { useSetDefault } from "../../hooks";
 import { StringFieldWrapper } from "./styledComponents";
 export const StringField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, SelectFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { FieldInput, SelectFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema = {}, schema } = props;
     const { type, placeholder, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -15,9 +15,10 @@ 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;
     switch (enums?.type) {
         case "select":
-            return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(SelectFieldInput, { type,
+            return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(SelectFieldInput, { type,
                         readOnly: props.schema.readOnly,
                         ...inputProps, name: name, formikAs: "select", onChange: (e) => {
                             const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
@@ -29,7 +30,7 @@ export const StringField = (props) => {
                                 hidden: true,
                                 ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
         default:
-            return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsx(FieldInput, { type,
+            return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsx(FieldInput, { type,
                         placeholder,
                         readOnly: props.schema.readOnly,
                         ...inputProps, name: name }) }) }));

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

@@ -4,9 +4,10 @@ import { extractUiSchema } from "../../../utils";
 import { FormRegistry } from "../../FormRegistry";
 import { useSetDefault } from "../../hooks";
 export const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, components: { TextAreaFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { TextAreaFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
+    const SelectedFieldTemplate = 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

@@ -4,9 +4,10 @@ import { extractUiSchema } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 export const ToggleField = (props) => {
-    const { templates: { FieldTemplate }, components: { ToggleFieldInput }, } = useContext(FormRegistry);
+    const { templates, components: { ToggleFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
+    const SelectedFieldTemplate = 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/fields/index.js

@@ -1,4 +1,3 @@
-//Please keep this in alphabetical order
 import * as AnyField from "./AnyField";
 import * as ArrayField from "./ArrayField";
 import * as BooleanField from "./BooleanField";

package/dist/esm/Form/index.js

@@ -1,7 +1,3 @@
-export * from "../utils";
-export * from "../common/types";
-export * from "../common/constants";
-export * from "../common/FileUploadContext";
 export * from "./hooks";
 import { fields as FormFields } from "./fields";
 import { components as FormComponents } from "./components";

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

@@ -5,7 +5,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Toggle, ChildWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -26,5 +26,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
     const hide = collapsed;
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(Wrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
 };

package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.js

@@ -37,6 +37,7 @@ export function getComponents(components) {
             components.ObjectFieldTemplateErrorMessage ??
             components.ErrorMessage,
         Toggle: components.CollapsibleObjectFieldTemplateToggle,
-        ChildWrapper: components.CollapsibleObjectFieldTemplateToggle,
+        ChildrenWrapper: components.CollapsibleObjectFieldTemplateWrapper ??
+            components.ObjectFieldTemplateWrapper,
     };
 }

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

@@ -1,4 +1,3 @@
-//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/components/Field.js

@@ -5,8 +5,8 @@ import { getStyle } from "../../utils/getStyle";
 export const FieldWrapper = styled.div `
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin: ${(props) => `${props.theme.spacing.l} 0`};
-    width: clamp(20rem, 100%, 70rem);
+    margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+    width: min(100%, 70rem);
 `;
 export const FieldTitle = styled.label `
     break-before: avoid;
@@ -16,7 +16,6 @@ export const FieldTitle = styled.label `
     font-size: ${(props) => props.theme.typography.size.base};
     font-weight: ${(props) => props.theme.typography.weight.bold};
     margin: ${(props) => `${props.theme.spacing.xs} 0`};
-    padding-top: ${(props) => props.theme.spacing.s};
     width: 100%;
 `;
 export const FieldDescription = styled.div `
@@ -26,34 +25,38 @@ export const FieldDescription = styled.div `
     font-weight: ${(props) => props.theme.typography.weight.normal};
     font-style: italic;
     font-size: ${(props) => props.theme.typography.size.base};
-    margin-bottom: ${(props) => props.theme.spacing.xs};
+    margin-bottom: ${(props) => props.theme.spacing.s};
     max-width: 66ch;
 `;
 export const StringFieldValue = styled.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin-bottom: ${(props) => props.theme.spacing.m};
+    margin-bottom: ${(props) => props.theme.spacing.l};
     max-width: 66ch;
+    padding-left: ${(props) => props.theme.spacing.l};
     white-space: pre-line;
 `;
 export const TextAreaValue = styled.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin-bottom: ${(props) => props.theme.spacing.m};
+    margin-bottom: ${(props) => props.theme.spacing.l};
     max-width: 66ch;
+    padding-left: ${(props) => props.theme.spacing.l};
     white-space: pre-line;
 `;
 export const ArrayFieldItem = styled.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding-left: ${(props) => props.theme.spacing.l};
 `;
 export const EJSFieldValue = styled.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding-left: ${(props) => props.theme.spacing.l};
     width: 100%;
 `;
 const NotSelected = styled.div `
@@ -91,6 +94,7 @@ const NotSelectedCircle = styled.span `
 export const BooleanFieldWrapper = styled.div `
     break-before: avoid;
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding-left: ${(props) => props.theme.spacing.l};
   
 `;
 export const MultipleChoiceFieldWrapper = styled.div `
@@ -98,6 +102,7 @@ export const MultipleChoiceFieldWrapper = styled.div `
     label {
         align-items: start;
     }
+    padding-left: ${(props) => props.theme.spacing.l};
 `;
 export const BooleanFieldValue = ({ name, className, value, label, }) => {
     return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));

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

@@ -4,7 +4,7 @@ import { useContext, useMemo } from "react";
 import { getEnums } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem }, } = useContext(FormViewRegistry);
+    const { fields: { SchemaField }, templates, components: { ArrayFieldItem }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
     const [{ value }, _] = useField(name);
     const findEnumInProps = props.schema.additionalItems
@@ -17,7 +17,8 @@ export const ArrayField = (props) => {
         }
         return item;
     }
-    return (_jsx(ArrayFieldTemplate, { ...props, children: value &&
+    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))) }));

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

@@ -4,7 +4,7 @@ import { getIn, useFormikContext } from "formik";
 import { extractUiSchema } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { BooleanFieldValue, BooleanFieldWrapper }, } = useContext(FormViewRegistry);
+    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
     const { label } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { values } = useFormikContext();
@@ -22,5 +22,6 @@ export const BooleanField = (props) => {
         }
         return typeof label === "string" ? label : undefined;
     }
-    return (_jsx(FieldTemplate, { ...props, children: _jsx(BooleanFieldWrapper, { children: _jsx(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
+    const SelectedFieldTemplate = 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

@@ -4,7 +4,7 @@ import { getIn, useFormikContext } from "formik";
 import { extractUiSchema, getEnums, getSelectedEnum } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldValue }, } = useContext(FormViewRegistry);
+    const { templates, components: { MultipleChoiceFieldValue }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
     const { props: inputProps, style, onlyShowSelected, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
@@ -13,5 +13,6 @@ 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;
-    return (_jsx(FieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
+    const SelectedFieldTemplate = 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

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

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

@@ -12,7 +12,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    const { fields: { SchemaField }, components: { ObjectFieldSection }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = useContext(FormViewRegistry);
+    const { fields: { SchemaField }, components: { ObjectFieldSection }, templates, } = useContext(FormViewRegistry);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
     const [{ properties }, valuesToRemove] = useMemo(() => {
@@ -27,11 +27,9 @@ export const ObjectField = (props) => {
             setValue(newValue);
         }
     }, [valuesToRemove]);
-    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
-        ? CollapsibleObjectFieldTemplate
-        : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return (_jsx(FieldTemplateComponent, { ...props, children: orderedProperties
+    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ObjectFieldTemplate;
+    return (_jsx(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {
                 const childSchema = properties?.[child];

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

@@ -4,7 +4,7 @@ import { getIn, useFormikContext } from "formik";
 import { getEnums } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const StringField = (props) => {
-    const { templates: { FieldTemplate }, components: { StringFieldValue }, } = useContext(FormViewRegistry);
+    const { templates, components: { StringFieldValue }, } = useContext(FormViewRegistry);
     const { name } = props;
     const { values } = useFormikContext();
     const enums = useMemo(() => getEnums(props), [props]);
@@ -13,5 +13,6 @@ export const StringField = (props) => {
         value =
             enums.values.find((element) => element.const === value)?.title ?? value;
     }
-    return (_jsx(FieldTemplate, { ...props, children: _jsx(StringFieldValue, { "data-keyword": value, children: value }) }));
+    const SelectedFieldTemplate = 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

@@ -3,9 +3,10 @@ import { useContext } from "react";
 import { getIn, useFormikContext } from "formik";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, components: { TextAreaValue }, } = useContext(FormViewRegistry);
+    const { templates, components: { TextAreaValue }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
     const { values } = useFormikContext();
     const value = getIn(values, name);
-    return (_jsx(FieldTemplate, { ...props, children: _jsx(TextAreaValue, { children: value }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(TextAreaValue, { children: value }) }));
 };

package/dist/esm/FormView/index.js

@@ -1,7 +1,3 @@
-export * from "../utils";
-export * from "../common/types";
-export * from "../common/constants";
-export * from "../common/FileUploadContext";
 import { fields as FormViewFields } from "./fields";
 import { components as FormViewComponents } from "./components";
 import { templates as FormViewTemplates } from "./templates";

package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js

@@ -6,7 +6,7 @@ export const ObjectFieldTemplateTitle = styled.div `
     font-family: ${(props) => props.theme.typography.fontFamily.heading};
     font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.bold};
-    margin: ${(props) => `${props.theme.spacing.l} 0`};
+    margin: ${(props) => `${props.theme.spacing.s} 0`};
 `;
 export const ObjectFieldTemplateDescription = undefined;
 export function getComponents(components) {

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

@@ -1,12 +1,9 @@
-//Please keep this in alphabetical order
 import * as ArrayFieldTemplate from "./ArrayFieldTemplate";
 import * as FieldTemplate from "./FieldTemplate";
 import * as ObjectFieldTemplate from "./ObjectFieldTemplate";
-import * as CollapsibleObjectFieldTemplate from "./CollapsibleObjectFieldTemplate";
 //Please keep this in alphabetical order
 export const templateComponents = {
     ...ArrayFieldTemplate.components,
-    //...CollapsibleObjectFieldTemplate.components, // In print version this should look same as the ObjectFieldTemplate
     //...FieldTemplate.components, // Field template uses generic components (should it own those?)
     ...ObjectFieldTemplate.components,
 };
@@ -15,5 +12,4 @@ export const templates = {
     ...ArrayFieldTemplate.templates,
     ...FieldTemplate.templates,
     ...ObjectFieldTemplate.templates,
-    ...CollapsibleObjectFieldTemplate.templates,
 };

package/dist/esm/common/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./constants";
+export * from "./FileUploadContext";

package/dist/esm/common/types/index.js

@@ -1,3 +1,4 @@
 export * from "./Field";
 export * from "./Form";
 export * from "./Schemas";
+export * from "./Templates";